https://blog.wayne-project.com/tags/javascript/Recent content in Javascript on Wayne's blog | 偉恩的部落格 | 技術博客Hugo -- gohugo.iozh-twThu, 16 Oct 2025 00:00:00 +0000https://blog.wayne-project.com/2025-10-16/console-importer-chrome-extension/Thu, 16 Oct 2025 00:00:00 +0000https://blog.wayne-project.com/2025-10-16/console-importer-chrome-extension/<img src="https://live.staticflickr.com/65535/54858288256_40cf65e375_b.jpg" alt="Featured image of post 分享一個實用的 Chrome 擴充功能 - Console Importer" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } .warning { background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 15px; border-radius: 5px; margin: 20px 0; } .info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 15px; border-radius: 5px; margin: 20px 0; } </style> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店 - Console Importer</a><br> <a class="link" href="https://github.com/pd4d10/console-importer" target="_blank" rel="noopener" >Github - Console Importer</a></p> <p>作為前端開發者，我們經常需要在瀏覽器 Console 中測試一些 JavaScript 函數庫或是 CSS 樣式。但要在 Console 中載入外部資源通常需要手動建立 <code>&lt;script&gt;</code> 或 <code>&lt;link&gt;</code> 標籤，過程相當繁瑣。</p> <p>今天要分享的 <a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" ><strong>Console Importer</strong></a> 這個 Chrome 擴充功能，能夠讓我們在 Console 中輕鬆匯入各種 JavaScript 和 CSS 資源，大幅提升開發效率。</p> <hr> <p><img src="https://github.com/pd4d10/console-importer/raw/main/assets/js.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h2 id="什麼是-console-importer">什麼是 Console Importer？</h2> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Console Importer</a> 是一個輕量級的 Chrome 擴充功能，它在瀏覽器的開發者工具 Console 中提供了一個全域函數 <code>$i</code>，讓開發者能夠快速匯入 JavaScript 函數庫和 CSS 樣式表。</p> <p>這個工具特別適合用於：</p> <ul> <li>🔍 <strong>快速測試</strong>：在任何網站上測試新的 JavaScript 函數庫</li> <li>🎨 <strong>樣式調試</strong>：載入 CSS 框架來測試網頁外觀</li> <li>📚 <strong>學習探索</strong>：快速載入不同版本的函數庫進行比較</li> <li>🛠️ <strong>除錯協助</strong>：在生產環境中臨時載入除錯工具</li> </ul> <h3 id="主要特色">主要特色</h3> <ul> <li>⚡ <strong>簡單易用</strong>：只需一行指令即可載入資源</li> <li>🌐 <strong>多種來源</strong>：支援 CDN、NPM 套件、直接 URL</li> <li>📦 <strong>版本控制</strong>：可指定特定版本的函數庫</li> <li>🎯 <strong>ES Module 支援</strong>：現代化的模組載入方式</li> <li>🔒 <strong>安全性</strong>：不會覆蓋現有的全域變數</li> <li>🔄 <strong>重整即重置</strong>：頁面重新整理後可輕鬆清除測試環境</li> </ul> <hr> <h2 id="console-importer-的運作原理">Console Importer 的運作原理</h2> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Console Importer</a> 的運作邏輯相當聰明，讓我們深入了解它是如何工作的：</p> <h3 id="1-函數庫名稱識別與解析">1. 函數庫名稱識別與解析</h3> <p>Console Importer 會根據輸入的參數來決定從哪裡載入資源：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 純函數庫名稱 → cdnjs </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// → https://cdnjs.cloudflare.com/ajax/libs/jquery/latest/jquery.min.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 含版本號 → unpkg </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@3.7.1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// → https://unpkg.com/jquery@3.7.1/dist/jquery.min.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 完整 URL → 直接載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>解析流程</strong>：</p> <ol> <li>檢查輸入是否為完整 URL（含 <code>http://</code> 或 <code>https://</code>）</li> <li>如果不是 URL，檢查是否包含版本號（<code>@</code> 符號）</li> <li>根據結果選擇對應的 CDN 服務</li> </ol> <h3 id="2-資源類型自動判斷">2. 資源類型自動判斷</h3> <p>擴充功能會透過以下方式判斷資源類型：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// JavaScript 檔案判斷邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">isJavaScript</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">url</span><span class="p">.</span><span class="nx">endsWith</span><span class="p">(</span><span class="s1">&#39;.js&#39;</span><span class="p">)</span> <span class="o">||</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="s1">&#39;javascript&#39;</span><span class="p">)</span> <span class="o">||</span> </span></span><span class="line"><span class="cl"> <span class="o">!</span><span class="nx">url</span><span class="p">.</span><span class="nx">endsWith</span><span class="p">(</span><span class="s1">&#39;.css&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// CSS 檔案判斷邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">isCSS</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">url</span><span class="p">.</span><span class="nx">endsWith</span><span class="p">(</span><span class="s1">&#39;.css&#39;</span><span class="p">)</span> <span class="o">||</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="3-動態-dom-元素建立">3. 動態 DOM 元素建立</h3> <p>Console Importer 會在頁面中動態建立對應的 HTML 元素：</p> <h4 id="javascript-載入機制">JavaScript 載入機制：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立 &lt;script&gt; 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">resolvedUrl</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="kr">async</span> <span class="o">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">crossOrigin</span> <span class="o">=</span> <span class="s1">&#39;anonymous&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入完成的 Promise 處理 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">script</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">reject</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 插入到 &lt;head&gt; 中 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="css-載入機制">CSS 載入機制：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立 &lt;link&gt; 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;link&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">rel</span> <span class="o">=</span> <span class="s1">&#39;stylesheet&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">resolvedUrl</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">crossOrigin</span> <span class="o">=</span> <span class="s1">&#39;anonymous&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入狀態監聽 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">link</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">link</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">reject</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 插入到 &lt;head&gt; 中 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="4-重複載入防護機制">4. 重複載入防護機制</h3> <p>Console Importer 具有智能的重複載入檢查：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 內部維護的載入記錄 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">loadedResources</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Set</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">$i</span><span class="p">(</span><span class="nx">resource</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">resolvedUrl</span> <span class="o">=</span> <span class="nx">resolveUrl</span><span class="p">(</span><span class="nx">resource</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 檢查是否已經載入過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">loadedResources</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">resolvedUrl</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">resource</span><span class="si">}</span><span class="sb"> 已經載入過，跳過重複載入`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 標記為已載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">loadedResources</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">resolvedUrl</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 執行載入邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">loadResource</span><span class="p">(</span><span class="nx">resolvedUrl</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="5-es-module-載入機制">5. ES Module 載入機制</h3> <p>對於 ES Module，Console Importer 使用現代的 <code>import()</code> 語法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">loadESModule</span><span class="p">(</span><span class="nx">packageName</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 esm.run 作為 ES Module CDN </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">moduleUrl</span> <span class="o">=</span> <span class="sb">`https://esm.run/</span><span class="si">${</span><span class="nx">packageName</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 動態 import </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">module</span> <span class="o">=</span> <span class="kr">await</span> <span class="kr">import</span><span class="p">(</span><span class="nx">moduleUrl</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">module</span><span class="p">.</span><span class="k">default</span> <span class="o">||</span> <span class="nx">module</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="sb">`Failed to load ES module: </span><span class="si">${</span><span class="nx">packageName</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="頁面重整與資源重置機制">頁面重整與資源重置機制</h2> <p>這是很多開發者關心的重要問題：當頁面重新整理後會發生什麼？</p> <h3 id="-頁面重整後的行為">🔄 頁面重整後的行為</h3> <h4 id="已載入的資源狀態"><strong>已載入的資源狀態</strong>：</h4> <ul> <li>❌ <strong>DOM 中的元素會被清除</strong>：透過 Console Importer 動態載入的 <code>&lt;script&gt;</code> 和 <code>&lt;link&gt;</code> 標籤會被移除</li> <li>❌ <strong>CSS 樣式會消失</strong>：由於 <code>&lt;link&gt;</code> 標籤被清除，所有載入的 CSS 樣式都會失效</li> <li>❌ <strong>JavaScript 變數會重置</strong>：所有透過 JavaScript 載入的全域變數都會被清除</li> <li>❌ <strong>Console Importer 記錄重置</strong>：內部的載入記錄會被清空</li> <li>🔄 <strong>完全重置環境</strong>：頁面會回到載入前的原始狀態</li> </ul> <h4 id="實際測試範例"><strong>實際測試範例</strong>：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 第一次載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span><span class="p">)</span> <span class="c1">// &#34;function&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;script[src*=&#34;jquery&#34;]&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="c1">// &lt;script src=&#34;https://cdnjs.cloudflare.com/.../jquery.min.js&#34;&gt;&lt;/script&gt; </span></span></span><span class="line"><span class="cl"><span class="c1">// → script 標籤存在 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 頁面重整後... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span><span class="p">)</span> <span class="c1">// &#34;undefined&#34; (變數被清除) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;script[src*=&#34;jquery&#34;]&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1">// → script 標籤也被清除了！需要重新載入 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="-重整後的最佳實踐">🚀 重整後的最佳實踐</h3> <h4 id="方法-1重新載入所需資源"><strong>方法 1：重新載入所需資源</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重整後需要重新載入所有資源 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> <span class="c1">// 重新載入 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span><span class="p">)</span> <span class="c1">// &#34;function&#34; - 重新載入成功 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;script[src*=&#34;jquery&#34;]&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="c1">// &lt;script src=&#34;...&#34;&gt; - DOM 元素重新創建 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="方法-2檢查載入狀態"><strong>方法 2：檢查載入狀態</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立一個檢查函數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">ensureLibraryLoaded</span><span class="p">(</span><span class="nx">libName</span><span class="p">,</span> <span class="nx">globalVar</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">[</span><span class="nx">globalVar</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 已經載入完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">callback</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 需要重新載入或等待 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">$i</span><span class="p">(</span><span class="nx">libName</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">checkInterval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">[</span><span class="nx">globalVar</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">checkInterval</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">callback</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">100</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用範例 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">ensureLibraryLoaded</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">,</span> <span class="s1">&#39;$&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;jQuery 已準備就緒！&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myElement&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="方法-3自動重載腳本"><strong>方法 3：自動重載腳本</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 建立一個自動重載的工具函數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">autoReload</span><span class="p">(</span><span class="nx">libraries</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">reloadPromises</span> <span class="o">=</span> <span class="nx">libraries</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">lib</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">lib</span><span class="p">.</span><span class="nx">check</span> <span class="o">===</span> <span class="s1">&#39;function&#39;</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">lib</span><span class="p">.</span><span class="nx">check</span><span class="p">())</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`重新載入 </span><span class="si">${</span><span class="nx">lib</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">...`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">$i</span><span class="p">(</span><span class="nx">lib</span><span class="p">.</span><span class="kr">package</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="nx">reloadPromises</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用範例 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">myLibraries</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> <span class="kr">package</span><span class="o">:</span> <span class="s1">&#39;jquery&#39;</span><span class="p">,</span> <span class="nx">check</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">$</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Lodash&#39;</span><span class="p">,</span> <span class="kr">package</span><span class="o">:</span> <span class="s1">&#39;lodash&#39;</span><span class="p">,</span> <span class="nx">check</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">_</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Moment&#39;</span><span class="p">,</span> <span class="kr">package</span><span class="o">:</span> <span class="s1">&#39;moment&#39;</span><span class="p">,</span> <span class="nx">check</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">moment</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 頁面載入後自動檢查並重載 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">autoReload</span><span class="p">(</span><span class="nx">myLibraries</span><span class="p">).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;所有函數庫都已準備就緒！&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="-需要注意的陷阱">⚠️ 需要注意的陷阱</h3> <h4 id="1-css-樣式累積問題"><strong>1. CSS 樣式累積問題</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重複載入 CSS 可能導致樣式重複 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> <span class="c1">// 首次載入 </span></span></span><span class="line"><span class="cl"><span class="c1">// 頁面重整後... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> <span class="c1">// 可能會再次載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 解決方案：檢查是否已存在 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;link[href*=&#34;tailwindcss&#34;]&#39;</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-版本衝突問題"><strong>2. 版本衝突問題</strong></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重整前載入了舊版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@2.2.4&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 重整後想載入新版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@3.7.1&#39;</span><span class="p">)</span> <span class="c1">// 可能會有兩個版本同時存在 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 解決方案：清理舊版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">cleanOldScripts</span><span class="p">(</span><span class="nx">pattern</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="sb">`script[src*=&#34;</span><span class="si">${</span><span class="nx">pattern</span><span class="si">}</span><span class="sb">&#34;]`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">script</span> <span class="p">=&gt;</span> <span class="nx">script</span><span class="p">.</span><span class="nx">remove</span><span class="p">())</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">cleanOldScripts</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@3.7.1&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="-重整檢查清單">📋 重整檢查清單</h3> <p>開發時建議建立這樣的檢查流程：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 重整後的環境檢查 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">checkEnvironment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">checks</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;jQuery&#39;</span><span class="p">,</span> <span class="nx">test</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">$</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Lodash&#39;</span><span class="p">,</span> <span class="nx">test</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">_</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Chart.js&#39;</span><span class="p">,</span> <span class="nx">test</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="k">typeof</span> <span class="nx">Chart</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="s1">&#39;🔍 環境檢查&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">checks</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">check</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">status</span> <span class="o">=</span> <span class="nx">check</span><span class="p">.</span><span class="nx">test</span><span class="p">()</span> <span class="o">?</span> <span class="s1">&#39;✅&#39;</span> <span class="o">:</span> <span class="s1">&#39;❌&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">status</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">check</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">checkEnvironment</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣可以讓你快速了解重整後哪些函數庫需要重新載入！</p> <hr> <h2 id="安裝方式">安裝方式</h2> <h3 id="方法一chrome-線上應用程式商店安裝">方法一：Chrome 線上應用程式商店安裝</h3> <ol> <li>前往 <a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店</a></li> <li>點擊「加到 Chrome」按鈕</li> <li>確認安裝權限</li> <li>安裝完成後，打開任何網頁的開發者工具即可使用</li> </ol> <div class="info"> <strong>🌐 新分頁使用注意：</strong><br> <strong>重要：</strong>在完全新的空白分頁（如 <code>chrome://newtab/</code> 或 <code>about:blank</code>）中，<code>$i</code> 函數無法正常掛載，這是因為 Chrome 擴充功能需要在實際的網頁環境中才能注入腳本。<br><br> <strong>解決方案：</strong>請先導航到任何一個實際的網站（如 <code>https://www.google.com</code>、<code>https://github.com</code> 等），然後打開 Console，此時 <code>$i</code> 函數就會正常可用了。 </div> <h3 id="方法二手動安裝開發者模式">方法二：手動安裝（開發者模式）</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># clone 專案</span> </span></span><span class="line"><span class="cl">git clone https://github.com/pd4d10/console-importer.git </span></span><span class="line"><span class="cl"><span class="nb">cd</span> console-importer </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 安裝依賴</span> </span></span><span class="line"><span class="cl">pnpm install </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 打包擴充功能</span> </span></span><span class="line"><span class="cl">pnpm build </span></span></code></pre></td></tr></table> </div> </div><p>然後在 Chrome 的擴充功能管理頁面啟用「開發者模式」，載入 <code>build</code> 資料夾即可。</p> <hr> <h2 id="基本使用方法">基本使用方法</h2> <p>安裝完成後，在任何網頁上打開開發者工具（F12），切換到 Console 標籤，就可以開始使用 <code>$i</code> 函數了。</p> <div class="warning"> <strong>📋 使用前檢查：</strong><br> 在新分頁中，請先確認 Console Importer 擴充功能是否正常運作。可以在 Console 輸入 <code>typeof $i</code>，如果回傳 <code>"function"</code> 表示擴充功能已正常載入；如果回傳 <code>"undefined"</code> 則需要先安裝或啟用擴充功能。 </div> <div class="info"> <strong>🌐 新分頁使用注意：</strong><br> <strong>重要：</strong>在完全新的空白分頁（如 <code>chrome://newtab/</code> 或 <code>about:blank</code>）中，<code>$i</code> 函數通常無法正常掛載。這是因為 Chrome 擴充功能需要在實際的網頁環境中才能注入腳本。<br><br> <strong>解決方案：</strong>請先導航到任何一個實際的網站（如 <code>https://www.google.com</code>、<code>https://github.com</code> 等），然後打開 Console，此時 <code>$i</code> 函數就會正常可用了。 </div> <h3 id="載入-javascript-函數庫">載入 JavaScript 函數庫</h3> <h4 id="1-載入熱門函數庫">1. 載入熱門函數庫</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入最新版本的 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入最新版本的 Lodash </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;lodash&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入 Bootstrap JavaScript </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;bootstrap&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-指定版本載入">2. 指定版本載入</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 jQuery 2.x 版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery@2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入指定版本的 Vue.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;vue@3.3.4&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入特定版本的 React </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;react@18.2.0&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="3-直接載入-url">3. 直接載入 URL</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 從 CDN 載入 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入自定義的 JavaScript 檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://example.com/custom-script.js&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="載入-css-樣式表">載入 CSS 樣式表</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Bootstrap CSS </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入 Font Awesome </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入自定義樣式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://example.com/custom-styles.css&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="進階功能">進階功能</h2> <h3 id="es-module-載入">ES Module 載入</h3> <p>現代 JavaScript 開發大量使用 ES Module，Console Importer 提供了 <code>$i.esm</code> 方法來載入 ES Module：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 D3.js ES Module </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">d3</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;d3&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入指定版本的 ES Module </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">d3v7</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;d3@7&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用載入的模組 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;Hello D3!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><div class="info"> <strong>💡 ES Module 的優勢：</strong><br> ES Module 載入方式不會將變數加入到全域作用域中，能夠更好地控制副作用的範圍。 </div> <h3 id="指定-cdn-來源">指定 CDN 來源</h3> <p>如果需要從特定的 CDN 載入資源，可以使用以下專用方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 從 unpkg 載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">.</span><span class="nx">unpkg</span><span class="p">(</span><span class="s1">&#39;react@18.2.0&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 從 cdnjs 載入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">.</span><span class="nx">cdnjs</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="實際應用範例">實際應用範例</h2> <h3 id="範例快速測試-chartjs">範例：快速測試 Chart.js</h3> <p>假設我們想在某個網站上測試圖表功能：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Chart.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;chart.js&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成後，建立一個簡單的圖表 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在頁面中建立 canvas 元素 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">canvas</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="s1">&#39;myChart&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="mi">400</span> </span></span><span class="line"><span class="cl"> <span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="mi">200</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">canvas</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立圖表 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;myChart&#39;</span><span class="p">).</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">new</span> <span class="nx">Chart</span><span class="p">(</span><span class="nx">ctx</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">labels</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;一月&#39;</span><span class="p">,</span> <span class="s1">&#39;二月&#39;</span><span class="p">,</span> <span class="s1">&#39;三月&#39;</span><span class="p">,</span> <span class="s1">&#39;四月&#39;</span><span class="p">,</span> <span class="s1">&#39;五月&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">datasets</span><span class="o">:</span> <span class="p">[{</span> </span></span><span class="line"><span class="cl"> <span class="nx">label</span><span class="o">:</span> <span class="s1">&#39;銷售額&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">&#39;rgba(54, 162, 235, 0.2)&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">borderColor</span><span class="o">:</span> <span class="s1">&#39;rgba(54, 162, 235, 1)&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">borderWidth</span><span class="o">:</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">scales</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beginAtZero</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="範例載入-tailwind-css-進行樣式測試">範例：載入 Tailwind CSS 進行樣式測試</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Tailwind CSS </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdn.tailwindcss.com&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成後，為頁面元素加上 Tailwind 樣式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 選取頁面中的標題元素 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">headings</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;h1, h2, h3&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">headings</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">heading</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">heading</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;text-3xl font-bold text-blue-600 mb-4&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 為按鈕加上樣式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">buttons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;button, .btn&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">buttons</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">button</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">button</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="範例使用-lodash-進行數據處理">範例：使用 Lodash 進行數據處理</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 載入 Lodash </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;lodash&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 等待載入完成後使用 Lodash 功能 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 模擬一些數據 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Alice&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">25</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taipei&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Bob&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">30</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Kaohsiung&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Charlie&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">35</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taipei&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Diana&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">28</span><span class="p">,</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taichung&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 Lodash 進行數據操作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;按年齡分組：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">groupBy</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;平均年齡：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">meanBy</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;台北的使用者：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="p">{</span> <span class="nx">city</span><span class="o">:</span> <span class="s1">&#39;Taipei&#39;</span> <span class="p">}))</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;排序後的使用者：&#39;</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">users</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="範例es-module-載入-dayjs-進行日期處理">範例：ES Module 載入 Day.js 進行日期處理</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 使用 ES Module 方式載入 Day.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">dayjs</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;dayjs&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 直接使用，不會污染全域變數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;現在時間：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">format</span><span class="p">(</span><span class="s1">&#39;YYYY-MM-DD HH:mm:ss&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;一週後：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">add</span><span class="p">(</span><span class="mi">7</span><span class="p">,</span> <span class="s1">&#39;day&#39;</span><span class="p">).</span><span class="nx">format</span><span class="p">(</span><span class="s1">&#39;YYYY-MM-DD&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;相對時間：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">fromNow</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 載入 Day.js 插件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">relativeTime</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">$i</span><span class="p">.</span><span class="nx">esm</span><span class="p">(</span><span class="s1">&#39;dayjs/plugin/relativeTime&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">dayjs</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">relativeTime</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;三天前：&#39;</span><span class="p">,</span> <span class="nx">dayjs</span><span class="p">().</span><span class="nx">subtract</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="s1">&#39;day&#39;</span><span class="p">).</span><span class="nx">fromNow</span><span class="p">())</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="常見問題與解決方案">常見問題與解決方案</h2> <h3 id="問題i-is-not-defined-錯誤">問題：<code>$i is not defined</code> 錯誤</h3> <p><strong>現象</strong>：在 Console 輸入 <code>$i(&quot;jquery&quot;)</code> 時出現 <code>Uncaught ReferenceError: $i is not defined</code></p> <p><strong>可能原因與解決方案</strong>：</p> <h4 id="原因擴充功能未安裝或啟用"><strong>原因：擴充功能未安裝或啟用</strong></h4> <ol> <li>確認已從 <a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店</a> 安裝擴充功能</li> <li>檢查擴充功能是否已啟用：進入 <code>chrome://extensions/</code> 確認 Console Importer 狀態為「已啟用」</li> <li>重新載入頁面後再次嘗試</li> <li>如果仍有問題，嘗試重新安裝擴充功能</li> </ol> <h4 id="原因在不支援的頁面中使用"><strong>原因：在不支援的頁面中使用</strong></h4> <p><strong>最常見情況</strong>：在新分頁或特殊頁面中無法使用 <code>$i</code></p> <p><strong>不支援的頁面類型</strong>：</p> <ul> <li><code>chrome://newtab/</code>（Chrome 新分頁）</li> <li><code>about:blank</code>（空白頁面）</li> <li><code>chrome://extensions/</code>（擴充功能頁面）</li> <li><code>chrome://settings/</code>（設定頁面）</li> <li>某些內部頁面或受限頁面</li> </ul> <p><strong>解決方案</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 在新分頁中嘗試使用（會失敗） </span></span></span><span class="line"><span class="cl"><span class="c1">// 打開 chrome://newtab/ 然後嘗試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">typeof</span> <span class="nx">$i</span> <span class="c1">// &#34;undefined&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 導航到實際網站後使用 </span></span></span><span class="line"><span class="cl"><span class="c1">// 前往 https://www.google.com 或任何網站 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">typeof</span> <span class="nx">$i</span> <span class="c1">// &#34;function&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> <span class="c1">// 正常運作 </span></span></span></code></pre></td></tr></table> </div> </div><p><strong>快速測試步驟</strong>：</p> <ol> <li>打開新分頁</li> <li>前往任何網站（推薦：<code>https://httpbin.org</code>、<code>https://example.com</code>）</li> <li>開啟開發者工具 (F12)</li> <li>在 Console 輸入 <code>typeof $i</code> 檢查是否為 <code>&quot;function&quot;</code></li> </ol> <h3 id="問題i-函數不起作用">問題：<code>$i</code> 函數不起作用</h3> <p><strong>原因</strong>：某些網站（如 Google Inbox）已經使用了 <code>$i</code> 作為全域變數，Console Importer 不會覆蓋現有變數。</p> <p><strong>解決方案</strong>：使用 <code>console.$i</code> 替代：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 在有衝突的網站上使用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="問題資源載入失敗">問題：資源載入失敗</h3> <p><strong>原因</strong>：某些網站（如 GitHub）有嚴格的內容安全政策（CSP），會阻止載入外部資源。</p> <p><strong>錯誤訊息範例</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">Refused to connect to &#39;https://api.cdnjs.com/libraries?search=jquery&#39; </span></span><span class="line"><span class="cl">because it violates the following Content Security Policy directive </span></span></code></pre></td></tr></table> </div> </div><p><strong>解決方案</strong>：</p> <ol> <li>嘗試在其他沒有嚴格 CSP 的網站上使用</li> <li>使用本地檔案或內網資源</li> <li>臨時停用 CSP（僅適用於開發環境）</li> </ol> <h3 id="問題載入後無法立即使用">問題：載入後無法立即使用</h3> <p><strong>原因</strong>：網路載入需要時間，特別是大型函數庫。</p> <p><strong>解決方案</strong>：使用 <code>setTimeout</code> 或監聽載入事件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 方法 1：使用 setTimeout </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myElement&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 方法 2：輪詢檢查 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">checkLoaded</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">$</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">checkLoaded</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myElement&#39;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">100</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="與其他工具的比較">與其他工具的比較</h2> <h3 id="console-importer-vs-手動建立檔案與內容">Console Importer vs 手動建立檔案與內容</h3> <p><strong>傳統方式</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 手動建立 script 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s1">&#39;https://code.jquery.com/jquery-3.7.1.min.js&#39;</span> </span></span><span class="line"><span class="cl"><span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">script</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用 jQuery </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;loaded&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>Console Importer</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 一行搞定 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;jquery&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="console-importer-vs-其他瀏覽器擴充功能">Console Importer vs 其他瀏覽器擴充功能</h3> <table> <thead> <tr> <th>功能</th> <th>Console Importer</th> <th>其他擴充功能</th> </tr> </thead> <tbody> <tr> <td>簡潔性</td> <td>⭐⭐⭐⭐⭐</td> <td>⭐⭐⭐</td> </tr> <tr> <td>版本控制</td> <td>⭐⭐⭐⭐⭐</td> <td>⭐⭐</td> </tr> <tr> <td>ES Module</td> <td>⭐⭐⭐⭐⭐</td> <td>⭐</td> </tr> <tr> <td>檔案大小</td> <td>小</td> <td>中等</td> </tr> <tr> <td>學習成本</td> <td>極低</td> <td>中等</td> </tr> </tbody> </table> <hr> <h2 id="最佳實踐建議">最佳實踐建議</h2> <h3 id="效能考量">效能考量</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 避免載入過大的函數庫影響頁面效能 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;entire-ui-framework@latest&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 只載入需要的部分 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;lodash/debounce&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="版本管理">版本管理</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 不指定版本可能導致不一致 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 指定明確版本確保穩定性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;react@18.2.0&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="安全性">安全性</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ❌ 不要載入不信任的來源 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://suspicious-site.com/malicious.js&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 使用知名 CDN </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$i</span><span class="p">(</span><span class="s1">&#39;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="結語">結語</h2> <p><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Console Importer</a> 是一個簡單卻非常實用的開發工具，它讓我們能夠在瀏覽器 Console 中快速測試各種 JavaScript 函數庫和 CSS 樣式。無論是快速原型設計、除錯、或是學習新技術，這個工具都能大幅提升我們的開發效率。</p> <p><strong>適合使用的場景</strong>：</p> <ul> <li>🔍 快速測試新的 JavaScript 函數庫</li> <li>🎨 在現有網站上測試不同的 CSS 框架</li> <li>📚 學習和比較不同版本的函數庫</li> <li>🛠️ 在生產環境中進行臨時除錯</li> <li>🚀 快速建立概念驗證（PoC）</li> </ul> <p>如果你是前端開發者，我強烈推薦安裝這個擴充功能到你的 Chrome 瀏覽器中。它會成為你開發工具箱中不可或缺的一部分。</p> <p>立即安裝：<a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店 - Console Importer</a></p> <div class="warning"> <strong>⚠️ 注意事項：</strong><br> 雖然 Console Importer 非常方便，但請記住只在開發和測試環境中使用。在生產環境中隨意載入外部資源可能會帶來安全風險和效能問題。 </div> <hr> <p><strong>相關資源</strong>：</p> <ul> <li><a class="link" href="https://github.com/pd4d10/console-importer" target="_blank" rel="noopener" >GitHub</a></li> <li><a class="link" href="https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie" target="_blank" rel="noopener" >Chrome 線上應用程式商店</a></li> <li><a class="link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" target="_blank" rel="noopener" >MDN - Content Security Policy</a></li> <li><a class="link" href="https://cdnjs.com/" target="_blank" rel="noopener" >cdnjs - 開源 CDN</a></li> <li><a class="link" href="https://unpkg.com/" target="_blank" rel="noopener" >unpkg - npm CDN</a></li> </ul> <p>希望這篇文章對您有幫助！如果您有任何問題或建議，歡迎在下方留言討論。🚀</p> <hr>https://blog.wayne-project.com/2023-11-22/vite-v5-announcing/Wed, 22 Nov 2023 00:00:00 +0000https://blog.wayne-project.com/2023-11-22/vite-v5-announcing/<img src="https://live.staticflickr.com/65535/53347857961_a81658c179_o.png" alt="Featured image of post Vite 5 正式發布" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://vitejs.dev/blog/announcing-vite5" target="_blank" rel="noopener" >原文</a></p> <p><a class="link" href="https://cn.vitejs.dev/blog/announcing-vite5" target="_blank" rel="noopener" >Vite 5</a> 已經發布，這是 Vite 發展道路上又一個重要的里程碑，新版本採用 Rollup 4，大大的提升了構建性能；還帶來了一些新的選項，可用於提高開發服務器的性能。官方指出：Vite 5 的重點是清理已棄用的API，並精簡了幾個功能以解決長期存在的問題。例如將 define 轉換為使用正確的 AST 替換，而不是使用 regexes。團隊表示，他們將繼續推進實現面相未來的 Vite。</p> <hr> <h2 id="nodejs-支持">Node.js 支持</h2> <p>Vite 不再支持已經 EOL 的 Node.js 14、16、17、19。現在需要 <code>Node.js 18、20+</code>。</p> <hr> <h2 id="性能">性能</h2> <p>除了 Rollup 4 的構建性能改進之外，<a class="link" href="https://cn.vitejs.dev/guide/performance" target="_blank" rel="noopener" >這個新指南</a>可以幫助用戶識別與修復常見性能問題。</p> <p>Vite 5 還引入了 <a class="link" href="https://cn.vitejs.dev/guide/performance#warm-up-frequently-used-files" target="_blank" rel="noopener" >server.warmup</a>，這是一個改善啟動時間的新功能。他允許妳定義應該在服務器啟動後立即進行預轉換的模塊列表。當使用 <code>--open</code> 或 <code>server.open</code> 時，Vite 還會自動預熱應用程序的 entry point 或所提供的 URL，以便打開。</p> <hr> <h2 id="主要變化">主要變化</h2> <ul> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#rollup-4" target="_blank" rel="noopener" >Vite 現已由 Rollup 4 提供支持</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#deprecate-cjs-node-api" target="_blank" rel="noopener" >棄用 CJS Node API</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#rework-define-and-import-meta-env-replacement-strategy" target="_blank" rel="noopener" >重新設計 <code>define</code> 和 <code>import.meta.env.*</code> 的替換策略</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#ssr-externalized-modules-value-now-matches-production" target="_blank" rel="noopener" >SSR 外部模組值現在符合 production 環境行為</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#worker-plugins-is-now-a-function" target="_blank" rel="noopener" ><code>worker.plugins</code> 現在是一個函數</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#allow-path-containing-to-fallback-to-index-html" target="_blank" rel="noopener" >允許包含 <code>.</code> 的路徑回退到 index.html</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#align-dev-and-preview-html-serving-behaviour" target="_blank" rel="noopener" >協調開發和預覽 HTML serving 行為</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#manifest-files-are-now-generated-in-vite-directory-by-default" target="_blank" rel="noopener" >現在預設在 <code>.vite</code> 目錄中產生 Manifest 文件</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#cli-shortcuts-require-an-additional-enter-press" target="_blank" rel="noopener" >CLI 快捷鍵需要額外按下 <code>Enter</code> 鍵</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#update-experimentaldecorators-and-usedefineforclassfields-typescript-behaviour" target="_blank" rel="noopener" >更新 <code>experimentalDecorators</code> 和 <code>useDefineForClassFields</code> TypeScript 行為</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#remove-https-flag-and-https-true" target="_blank" rel="noopener" >移除 <code>--https</code> flag 和 <code>https: true</code></a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#remove-resolvepackageentry-and-resolvepackagedata-apis" target="_blank" rel="noopener" >移除 <code>resolvePackageEntry</code> 和 <code>resolvePackageData</code> API</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#removed-deprecated-apis" target="_blank" rel="noopener" >移除之前已棄用的 API</a></li> <li><a class="link" href="https://cn.vitejs.dev/guide/migration#advanced" target="_blank" rel="noopener" >了解更多有關影響插件和工具作者的高級更改信息</a></li> </ul> <p>更多詳情可查看 <a class="link" href="https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#500-2023-11-16" target="_blank" rel="noopener" >Vite 5 Changelog</a>。</p> <hr>https://blog.wayne-project.com/2023-04-11/k6-introduction/Tue, 11 Apr 2023 00:00:00 +0000https://blog.wayne-project.com/2023-04-11/k6-introduction/<img src="https://live.staticflickr.com/65535/52808880406_c06b18a888_o.png" alt="Featured image of post 【K6】壓力測試工具介紹" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://k6.io/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10305586" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.darkthread.net/blog/k6-load-testing/" target="_blank" rel="noopener" >參考網站</a></p> <p>與老牌工具 JMeter 相比，<a class="link" href="https://k6.io/" target="_blank" rel="noopener" >K6</a> 比較年輕(2017)，架構與設計現代化許多，採用 Go + JavaScript，聽起來就比 Java 年輕有活力。K6 沒有如 JMeter 的華麗友善 GUI，測試細節全靠指令參數與程式碼決定。</p> <p>K6 核心以 Go 開發，不用擔心程式效能(依<a class="link" href="https://k6.io/docs/testing-guides/running-large-tests/" target="_blank" rel="noopener" >文件說明</a>，K6 靠單一主機便可產生每秒 30 萬次請求)；測試程式則採用 ES6 / JavaScript 語言，讓前端/全端工程師備感親切，進階應用需要對 Module、webpack 有點概念，但單純測試一個 .js 就能搞定，不難上手。<a class="link" href="https://k6.io/docs/" target="_blank" rel="noopener" >官方文件</a>整理得頗詳細，建議花點時間約略讀過再上路，許多東西文件都有寫到，不要瞎查資料胡亂嘗試浪費時間。</p> <p>先釐清一點，雖然口語上我們很習慣說「壓力測試」或「壓測」，實際上這些相關測試可再細分成：煙霧測試、負載測試、壓力測試、尖峰測試、浸泡測試，下文會再詳細說明。</p> <p>不過，「<strong>壓力測試</strong>」是比較通俗常用的說法，所以我會繼續統稱壓力測試，有特定目標的測試再特別區分。</p> <hr> <h2 id="介紹">介紹</h2> <p><a class="link" href="https://k6.io/" target="_blank" rel="noopener" >K6</a> 是用 Go 語言編寫的一種高效能的負載測試工具。具有下面幾個特點：</p> <ul> <li><a class="link" href="https://k6.io/" target="_blank" rel="noopener" >K6</a> 嵌入了 JavaScript runtime，可以使用 JavaScript ES2015、ES6 來編寫指令碼。</li> <li>強大的 CLI 工具。</li> <li>使用 Checks 和 Thresholds 可以更加輕鬆的做面向目標的自動化的負載測試。</li> </ul> <blockquote> <p>Checks： 類似斷言功能，但不會真的中斷執行，只是會返回 check 的數據百分比。<br> Thresholds： 極限值、門檻、閾值，指測試系統性能所預期的通過 or 失敗的標準。</p></blockquote> <hr> <h2 id="為什麼要用-k6">為什麼要用 K6？</h2> <p>他是用 JavaScript 直接進行負載測試(JavaScript 腳本 ➡️ Go 底層運作)</p> <p>這對專注於寫 JavaScript 的人是一大福音！</p> <p>以自身公司而言，大多都是 JavaScript 為基底的測試，所以如果團隊中能夠統一一種語言，不管是在測試、開發上，能降地學習成本及提高協做效率。</p> <hr> <h2 id="如何安裝">如何安裝？</h2> <h3 id="macos">MacOS</h3> <p>記得先安裝 <a class="link" href="https://brew.sh/" target="_blank" rel="noopener" >Homebrew</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">brew install k6 </span></span></code></pre></td></tr></table> </div> </div><h3 id="windows">Windows</h3> <h4 id="方法一使用-chocolatey-安裝需先安裝-chocolatey-package-manager">方法一：使用 chocolatey 安裝(需先安裝 <a class="link" href="https://chocolatey.org/" target="_blank" rel="noopener" >Chocolatey package manager</a>)</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">choco install k6 </span></span></code></pre></td></tr></table> </div> </div><h4 id="方法二使用-winget-安裝">方法二：使用 winget 安裝</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">winget install k6 </span></span></code></pre></td></tr></table> </div> </div><h3 id="linux">Linux</h3> <h4 id="debianubuntu">Debian/Ubuntu</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">sudo gpg --no-default-keyring --keyring /usr/share/keyrings/k6-archive-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69 </span></span><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">&#34;deb [signed-by=/usr/share/keyrings/k6-archive-keyring.gpg] https://dl.k6.io/deb stable main&#34;</span> <span class="p">|</span> sudo tee /etc/apt/sources.list.d/k6.list </span></span><span class="line"><span class="cl">sudo apt-get update </span></span><span class="line"><span class="cl">sudo apt-get install k6 </span></span></code></pre></td></tr></table> </div> </div><h4 id="fedoracentos">Fedora/CentOS</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">sudo dnf install https://dl.k6.io/rpm/repo.rpm </span></span><span class="line"><span class="cl">sudo dnf install k6 </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="了解-k6-能做到哪些負載測試">了解 K6 能做到哪些負載測試</h2> <p><img src="https://live.staticflickr.com/65535/52809330238_ba376d628d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ol> <li>Smoke Testing 煙霧測試 - 驗證系統在最低硬體配備、正常負載下不會出錯</li> <li>Load Testing 負載測試(Performance Testing 效能測試) - 取得在一般及尖峰負載下的系統效能數字(用戶數、Throughput、吞吐量(RPS))</li> <li>Stress Testing 壓力測試 - 測試在高度負載或極端條件下系統的穩定性及可靠度，找出系統極限(請勿在 production 測試)</li> <li>Spike Testing 尖峰測試 - 故意製造瞬間流量驟升取得系統效能數字(請勿在 production 測試)</li> <li>Soak Testing 浸泡測試 - 測試系統在長期運作下的穩定性及可靠度</li> </ol> <p>大致上的分類為（低中高流量每間公司定義都不一樣）：</p> <table> <thead> <tr> <th>低流量</th> <th>中等流量</th> <th>高流量</th> </tr> </thead> <tbody> <tr> <td>Smoke Testing 煙霧測試</td> <td>Load Testing 負載測試(Performance Testing 效能測試)</td> <td>Stress Testing 壓力測試</td> </tr> <tr> <td>Soak Testing 浸泡測試</td> <td>Spike Testing 尖峰測試</td> <td></td> </tr> </tbody> </table> <hr> <h2 id="小試身手">小試身手</h2> <p>在 Windows 安裝很容易，我是用 <code>Chocolatey choco install -y k6</code> 兩分鐘搞定。寫幾行程式存成 <code>script.js</code>，再執行 <code>k6 run script.js</code> 便做能完簡單測試，得到<strong>平均回應時間(http_req_duration)</strong> 及 <strong>Throughput (http_reqs)</strong>：</p> <h5 id="scriptjs">script.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s2">&#34;k6/http&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;k6&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// user count </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;1s&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&#34;https://test.k6.io&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><p>執行指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">k6 run script.js </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52808321192_43e1a2c106_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="參數設定">參數設定</h2> <p>K6 提供的參數很多，以下主要介紹幾個較常用的為主：</p> <h3 id="vus">vus</h3> <p>虛擬用戶的數量，最少必須要 1 個，與 duration 搭配使用。</p> <h3 id="duration">duration</h3> <p>指定測試運行的總持續時間，與 <strong>vus</strong> 一起使用。</p> <h5 id="sample-code">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;1s&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="cli">CLI：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">k6 run --vus <span class="m">1</span> --duration 1s script.js </span></span></code></pre></td></tr></table> </div> </div><h3 id="iterations">iterations</h3> <p>腳本中的函數被執行的次數。</p> <h5 id="sample-code-1">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;5s&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">iterations</span><span class="o">:</span> <span class="mi">50</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="cli-1">CLI：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">k6 run --vus <span class="m">10</span> --duration 5s --iterations <span class="m">50</span> script.js </span></span></code></pre></td></tr></table> </div> </div><p>表示「模擬 10 個用戶，此次腳本最多就是執行 50 次，如果 50 次腳本沒執行完，時間卻到了，那此次測試會顯示 default ✗」。</p> <h3 id="stages">Stages</h3> <p>可以指定在特定時間內<strong>增加或減少用戶數量</strong>的執行方式，也就是說可以模仿更精準的測試情境。</p> <h5 id="sample-code-2">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">let</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">stages</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;30s&#39;</span><span class="p">,</span> <span class="nx">target</span><span class="o">:</span> <span class="mi">10</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;1m30s&#39;</span><span class="p">,</span> <span class="nx">target</span><span class="o">:</span> <span class="mi">30</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;20s&#39;</span><span class="p">,</span> <span class="nx">target</span><span class="o">:</span> <span class="mi">0</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="cli-2">CLI：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">k6 run --stage 30s:10, -s 1m30s:30, -s 20s:0 .<span class="se">\s</span>cript.js </span></span></code></pre></td></tr></table> </div> </div><ul> <li>第一階段就是在 30 秒間逐步把用戶加到 10 個</li> <li>第二階段就是在一分半內逐步從 10 個用戶追加到 30 個用戶</li> <li>第三階段是在 20 秒內逐步從 30 個用戶 降到 0 個用戶個用戶</li> </ul> <h3 id="rps">rps</h3> <p>用戶每秒可以發送最大的 request 數量。</p> <p>其實就是為了更好模擬用戶流量，再測試前須確認好測試範疇，多數平台應該都是在某些時間點流量會增大，但這個流量增大並非是無上限的增大，一定會落在某個數值，只要將數值取出來後並換算。</p> <blockquote> <p>e.g:<br> 查看數據後，發現這個時段會有 100000 個 request 數量<br> 那我們要測試的是 60 秒能要達到 100000<br> 那就是 100000/60 = 1666<br> 1666 出來後，我們都會多估 10~20% 以防萬一，所以總計大約 2000 即是 rps 的數量</p></blockquote> <p>若要更準確的符合真實數據，也可以以下這樣計算：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">用戶量 100 vus </span></span><span class="line"><span class="cl">執行時間 60s </span></span><span class="line"><span class="cl">request 條件是 100000 </span></span><span class="line"><span class="cl">那就是一位 user rps 就是 100000/100/60 = 16 </span></span><span class="line"><span class="cl">通常 rps 的範疇會多估 10-20% 以防萬一，所以湊個整數 20 就是較符合的數值 </span></span></code></pre></td></tr></table> </div> </div><h5 id="sample-code-3">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;60s&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">rps</span><span class="o">:</span> <span class="mi">20</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="group">group</h3> <p>主要就是將按照<strong>功能</strong>進行組裝在同一個測試腳本。</p> <p>可以針對測試方法做調整，通常在測試 API 時可能是一個行為，但是是會多個 API 連續調用的情況。</p> <p>這時候可以使用 group 方法來實現，以下是官網的例子。</p> <h5 id="sample-code-4">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">group</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">group</span><span class="p">(</span><span class="s1">&#39;user flow: returning user&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">group</span><span class="p">(</span><span class="s1">&#39;visit homepage&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// load homepage resources </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">group</span><span class="p">(</span><span class="s1">&#39;login&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// perform login </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>如上方例子，可以將整個登入流程加入一個群組，測試結果會多一個指標 <code>group_duration</code>，就可方便得知這一個 group 平均執行時間。</p> <blockquote> <p>另外，官方也寫到：<br> Discouraged: one group per request<br> Wrapping each request within a group might add unnecessary boilerplate.</p></blockquote> <p>意味著這個 group 功能<strong>不建議</strong>僅拿來組裝單一 API，它不是一個像單回傳 api module 般的使用。</p> <p>這樣就失去 group 功能真正的涵義了。</p> <h5 id="sample-code-5">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">group</span><span class="p">,</span> <span class="nx">check</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">id</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// reconsider this type of code </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">group</span><span class="p">(</span><span class="s1">&#39;get post&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sb">`http://example.com/posts/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">group</span><span class="p">(</span><span class="s1">&#39;list posts&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sb">`http://example.com/posts`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">check</span><span class="p">(</span><span class="nx">res</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;is status 200&#39;</span><span class="o">:</span> <span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">r</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="mi">200</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="scenarios">scenarios</h3> <p>顧名思義，就是測試的情境的參數。</p> <p>在做效能測試前，通常都會先擬定好要測試的情境，蒐集真實數據進行評估，再進一步評估預期達到的目標再哪。</p> <p>所以可以先將一些常用的測試寫好。只要引用一下，設定一下立刻可以達到我們想要測試的結果。</p> <p>只要針對每個情境實作好了一些 Executors，最後只要呼叫它即可。</p> <h5 id="sample-code-6">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">let</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">discardResponseBodies</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">scenarios</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">contacts</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">executor</span><span class="o">:</span> <span class="s1">&#39;constant-arrival-rate&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">rate</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span> <span class="c1">// 200 RPS, since timeUnit is the default 1s </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;1m&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">preAllocatedVUs</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxVUs</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io/contacts.php&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用這個範例，K6 會盡所能在 duration 內去達到 200 RPS。</p> <p>所以只要使用這個方法，可以很快找到你 API 的極限瓶頸在哪。</p> <h3 id="group-vs-scenarios">group vs scenarios</h3> <ul> <li>group： 通常一套<strong>業務邏輯</strong>且會被<strong>重複使用</strong>。</li> <li>scenarios： 純粹<strong>一個情境</strong>、<strong>一個故事</strong>，為了要讓單一邏輯或 group 能夠被相互組合應用，需要多種不同的參數，用戶數量(vus)、持續時間(duration)等等，以便達到該情境的預期結果。</li> </ul> <hr> <h2 id="常看的指標">常看的指標</h2> <h3 id="http-系列">Http 系列</h3> <ul> <li>http_req_receiving： API 從 server 回應 所花費的時間</li> <li>http_req_sending： API 發送 到 server 所花費的時間</li> <li>http_req_waiting： API 從 server 等待回應 所花費的時間</li> <li>http_req_duration： API 請求的總時間(http_req_sending + http_req_waiting + http_req_receiving)</li> <li>http_req_failed： API 失敗的機率(預設 status code 是 200，若有特別判斷可使用 <a class="link" href="https://k6.io/docs/javascript-api/k6-http/expectedstatuses-statuses" target="_blank" rel="noopener" >expectedStatuses</a>)</li> <li>iteration_duration： 該腳本執行一次所花費的時間</li> <li>http_reqs： 會計算測試總共發了多少 request</li> </ul> <p>上述的參數，主要可以分析整個測試的過程，同時也可以了解該 API 的詳細資料針對響應速度、等待回應時間等等，好讓相關團隊可以進行優化分析。</p> <p><strong>http_req_receiving、http_req_sending、http_req_waiting 三者關係圖</strong></p> <p><img src="https://live.staticflickr.com/65535/52808321217_c8c076ef63_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="checks">Checks</h3> <p>其實就是類似斷言。僅會返回<strong>通過(pass)<strong>或</strong>失敗(fail)</strong></p> <p>但這邊的斷言是，不論成功或失敗，腳本皆仍會繼續執行。</p> <h5 id="sample-code-7">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;http://test.k6.io/&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">check</span><span class="p">(</span><span class="nx">res</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;is status 200&#39;</span><span class="o">:</span> <span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">r</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="mi">200</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// or </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;http://test.k6.io/&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">check</span><span class="p">(</span><span class="nx">res</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;is status 200&#39;</span><span class="o">:</span> <span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">r</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="mi">200</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;body size is 11,105 bytes&#39;</span><span class="o">:</span> <span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">r</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">11105</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>但如果要需要特別處理錯誤情境時，可以使用 <strong>Thresholds</strong>。</p> <h3 id="thresholds">Thresholds</h3> <p>強烈建議多參考<a class="link" href="https://k6.io/docs/using-k6/thresholds/" target="_blank" rel="noopener" >官方文檔</a>，寫得非常清楚。</p> <p>主要是可以為測試的結果自訂一個標準限制，中文稱為<strong>門檻值</strong>。</p> <p>可以針對各個指標限制於某個條件，相對來說會更彈性，測試會更為準確。</p> <h5 id="sample-code-8">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">thresholds</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http_req_failed</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;rate&lt;0.01&#39;</span><span class="p">],</span> <span class="c1">// http request 失敗的總比例要低於 1% 才能算通過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">http_req_duration</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;p(95)&lt;200&#39;</span><span class="p">],</span> <span class="c1">// 95% 的 requests 數回傳時間都要低於 200ms 以內才算通過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test-api.k6.io/public/crocodiles/1/&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52808321192_43e1a2c106_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其中 <code>http_req_duration</code> 的 <code>p(95)</code> 高於 200ms 了，所以它就會顯示 <code>some thresholds have failed</code></p> <p>Threshold 其實與 Check 有點類似，但差別在於：</p> <ul> <li>Check 設定比較單一 且 執行失敗的話，腳本仍會繼續執行，直到腳本結束，才會返回 Check 的數據值。</li> <li>Threshold 可以彈性設定條件 且 執行失敗的話，它還可以自行設置中斷點，讓執行中腳本達到某條件的話，就直接中斷並且返回錯誤資訊。</li> </ul> <h5 id="aborting-sample-code可自行設定中斷點-sample-code">aborting sample code(可自行設定中斷點 sample code)：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">30</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;2m&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">thresholds</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http_req_duration</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">threshold</span><span class="o">:</span> <span class="s1">&#39;p(90) &lt; 400&#39;</span><span class="p">,</span> <span class="nx">abortOnFail</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}]</span> <span class="c1">//90% 的 requests 數回傳時間都要低於 400ms 以內才算通過，只要一旦高於 400ms 就會直接中斷測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test-api.k6.io/public/crocodiles/1/&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52808321192_43e1a2c106_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其中 <code>http_req_duration</code> 的 <code>p(95)</code> 高於 200ms 了，所以它就會顯示 <code>some thresholds have failed</code></p> <hr> <h2 id="常見的套件module">常見的套件(module)</h2> <p>K6 套件(module) 基本上我覺得很萬用，是足夠支撐所有測試情境的，也主要介紹幾個較常用的 K6 本身支援的 module (<a class="link" href="https://k6.io/docs/javascript-api/" target="_blank" rel="noopener" >JavaScript API</a>)</p> <h3 id="http">http</h3> <p>主要是能發送 API，常使用為 get、post、put、delete&hellip;等。</p> <h5 id="get-sample-code">GET sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;1s&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="post-sample-code">POST sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">url</span> <span class="o">=</span> <span class="s1">&#39;https://httpbin.test.k6.io/post&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">logoBin</span> <span class="o">=</span> <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;./logo.png&#39;</span><span class="p">,</span> <span class="s1">&#39;b&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Bert&#39;</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Using a JSON string as body </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">data</span><span class="p">),</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">().</span><span class="nx">json</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// Bert </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// Using an object as body, the headers will automatically include </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// &#39;Content-Type: application/x-www-form-urlencoded&#39;. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">().</span><span class="nx">form</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// Bert </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// Using a binary array as body. Make sure to open() the file as binary </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// (with the &#39;b&#39; argument). </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">logoBin</span><span class="p">,</span> <span class="p">{</span> <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;image/png&#39;</span> <span class="p">}</span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Using an ArrayBuffer as body. Make sure to pass the underlying ArrayBuffer </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// instance to http.post(), and not the TypedArray view. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">data</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">([</span><span class="mi">104</span><span class="p">,</span> <span class="mi">101</span><span class="p">,</span> <span class="mi">108</span><span class="p">,</span> <span class="mi">108</span><span class="p">,</span> <span class="mi">111</span><span class="p">]);</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">data</span><span class="p">.</span><span class="nx">buffer</span><span class="p">,</span> <span class="p">{</span> <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;image/png&#39;</span> <span class="p">}</span> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="html">html</h3> <p>解析 HTML 各元素，可能會需要取得 HTML 上的一些元素值做一些處理或換算。</p> <h5 id="sample-code-9">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">parseHTML</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span> <span class="c1">// equivalent to res.html() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">pageTitle</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;head title&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">langAttr</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;html&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;lang&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="sleep">sleep</h3> <p>主要就是等待時間，有些時候使用 sleep 是為了更好模擬使用者情境。</p> <p>因為使用者真實操作 web 可能都會遇到有 loading 渲染的時間，所以我們將 sleep 算進來的話就當作是再重現這部分。</p> <h5 id="sample-code-10">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vus</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">duration</span><span class="o">:</span> <span class="s1">&#39;1s&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test.k6.io&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="crypto">crypto</h3> <p>這一定也不陌生，非常強大的加密 module ，支援多種不同的加密方式如下：</p> <ul> <li>hmac</li> <li>md4</li> <li>md5</li> <li>sha256</li> <li>sha384</li> <li>sha512</li> </ul> <p>通常是為了確保用戶資料安全而特別處理的。e.g. 密碼、API header 等。</p> <h5 id="sample-code-11">sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">crypto</span> <span class="nx">from</span> <span class="s1">&#39;k6/crypto&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">crypto</span><span class="p">.</span><span class="nx">sha256</span><span class="p">(</span><span class="s1">&#39;hello world!&#39;</span><span class="p">,</span> <span class="s1">&#39;hex&#39;</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">hasher</span> <span class="o">=</span> <span class="nx">crypto</span><span class="p">.</span><span class="nx">createHash</span><span class="p">(</span><span class="s1">&#39;sha256&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">hasher</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="s1">&#39;hello &#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">hasher</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="s1">&#39;world!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">hasher</span><span class="p">.</span><span class="nx">digest</span><span class="p">(</span><span class="s1">&#39;hex&#39;</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="respone">respone：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">INFO<span class="o">[</span>0000<span class="o">]</span> 7509e5bda0c762d2bac7f90d758b5b2263fa01ccbc542ab5e3df163be08e6ca9 </span></span></code></pre></td></tr></table> </div> </div><h3 id="encoding">encoding</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">check</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">encoding</span> <span class="nx">from</span> <span class="s1">&#39;k6/encoding&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">str</span> <span class="o">=</span> <span class="s1">&#39;hello world&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">enc</span> <span class="o">=</span> <span class="s1">&#39;aGVsbG8gd29ybGQ=&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">buf</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">([</span><span class="mi">104</span><span class="p">,</span> <span class="mi">101</span><span class="p">,</span> <span class="mi">108</span><span class="p">,</span> <span class="mi">108</span><span class="p">,</span> <span class="mi">111</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">119</span><span class="p">,</span> <span class="mi">111</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">108</span><span class="p">,</span> <span class="mi">100</span><span class="p">]).</span><span class="nx">buffer</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">check</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;is encoding string correct&#39;</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">encoding</span><span class="p">.</span><span class="nx">b64encode</span><span class="p">(</span><span class="nx">str</span><span class="p">)</span> <span class="o">===</span> <span class="nx">enc</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;is encoding ArrayBuffer correct&#39;</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">encoding</span><span class="p">.</span><span class="nx">b64encode</span><span class="p">(</span><span class="nx">buf</span><span class="p">)</span> <span class="o">===</span> <span class="nx">enc</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="jslib">JSlib</h3> <p>K6 本身支援蠻多受用的套件，但除此之外，他們還有支援一個是 JSlib 顧名思義就是 JS 庫。</p> <p>我覺得可以把它當作是外掛包因為其中還支援的很多額外的 module 可用。</p> <ul> <li>httpx： 是將 k6/http 原本套件加以簡化處理，可以當成是優化版的 http</li> <li>k6chaijs： 適用於 BDD 和 TDD 斷言風格</li> </ul> <h5 id="k6chaijs-sample-code">k6chaijs sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">describe</span><span class="p">,</span> <span class="nx">expect</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://jslib.k6.io/k6chaijs/4.3.4.1/index.js&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">thresholds</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">checks</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">threshold</span><span class="o">:</span> <span class="s1">&#39;rate == 1.00&#39;</span> <span class="p">}],</span> <span class="c1">// fail test on any expect() failure </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">testSuite</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;Basic API test&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://test-api.k6.io/public/crocodiles&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">,</span> <span class="s1">&#39;API status code&#39;</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">equal</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>utils： K6 的小工具包</li> </ul> <h5 id="utils-sample-code">utils sample code：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">sleep</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;k6&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">http</span> <span class="nx">from</span> <span class="s1">&#39;k6/http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">randomIntBetween</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">randomString</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">randomItem</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">uuidv4</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">findBetween</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://jslib.k6.io/k6-utils/1.2.0/index.js&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="sb">`https://test-api.k6.io/user/register/`</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">first_name</span><span class="o">:</span> <span class="nx">randomItem</span><span class="p">([</span><span class="s1">&#39;Joe&#39;</span><span class="p">,</span> <span class="s1">&#39;Jane&#39;</span><span class="p">]),</span> <span class="c1">// random name </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">last_name</span><span class="o">:</span> <span class="sb">`Jon</span><span class="si">${</span><span class="nx">randomString</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;aeiou&#39;</span><span class="p">)</span><span class="si">}</span><span class="sb">s`</span><span class="p">,</span> <span class="c1">//random character from given list </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">username</span><span class="o">:</span> <span class="sb">`user_</span><span class="si">${</span><span class="nx">randomString</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span><span class="si">}</span><span class="sb">@example.com`</span><span class="p">,</span> <span class="c1">// random email address, </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">password</span><span class="o">:</span> <span class="nx">uuidv4</span><span class="p">(),</span> <span class="c1">// random password in form of uuid </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// find a string between two strings to grab the username: </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">findBetween</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span> <span class="s1">&#39;&#34;username&#34;:&#34;&#39;</span><span class="p">,</span> <span class="s1">&#39;&#34;&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;username from response: &#39;</span> <span class="o">+</span> <span class="nx">username</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">sleep</span><span class="p">(</span><span class="nx">randomIntBetween</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">));</span> <span class="c1">// sleep between 1 and 5 seconds. </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>aws： 主要是可以直接串接 AWS 上的 API 服務。</li> </ul> <hr> <h2 id="總結">總結</h2> <p>k6 官方提供的<a class="link" href="https://k6.io/docs/" target="_blank" rel="noopener" >文檔</a>其實都非常好懂，甚至都會附上很多程式碼範本讓你直接使用。</p> <p>基本上只要會 javascript，你就可能無痛起手了。</p> <p>另外 k6 這框架大多使用的情境是以下：</p> <table> <thead> <tr> <th>適用人員</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>開發人員、SDET</td> <td>方便我們透過 K6 提供的 api 以及 CLI 工具來使用開發且開發人員同常對 javascript 也不太陌生，他們也能快速使用 javascript 來開發模擬真實場景的負載測試</td> </tr> <tr> <td>DevOps、SRE</td> <td>這兩個職位都是偏運維方面的，我們能把上面 SDET 開發的 script 拿來進行自動化的壓力測試，確保我們的基礎建設與應用服務都還是保持著高性能的表現。在 K6 開發的 script 內，設定 SLO 來測試服務的運行狀況是否達標</td> </tr> <tr> <td>QA</td> <td>更方便的寫測試案例與腳本，跑起來也很快，還能跟 Postman、Swagger 等整合，對 QA 來說是很方便的</td> </tr> </tbody> </table> <hr>https://blog.wayne-project.com/2023-03-27/js-functional-programming/Mon, 27 Mar 2023 00:00:00 +0000https://blog.wayne-project.com/2023-03-27/js-functional-programming/<img src="https://live.staticflickr.com/65535/52774306416_350deb7178_o.png" alt="Featured image of post 【Javascript】關於 Functional Programming 函數式編程" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://ithelp.ithome.com.tw/articles/10233399" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://totoroliu.medium.com/javascript-functional-programming-%E5%87%BD%E5%BC%8F%E7%B7%A8%E7%A8%8B%E6%A6%82%E5%BF%B5-e8f4e778fc08" target="_blank" rel="noopener" >參考網站</a></p> <p>在軟體工程開發的領域中，我們為了解決不同的問題，因此衍生出許多不同的程式設計(Programming paradigm)方式，這些設計方法彼此之間並沒有所謂的好壞、優劣，只有解決問題適合度高低的差異。</p> <p><code>函數式編程</code>(<code>Functional Programming</code>，以下簡稱 FP)是眾多程式設計(Programming Paradigm) 方式的其中一種，有別於老早就大紅大紫的物件導向編成(object-oriented Programming，OOP) 方式(OO還衍伸出許多設計模式)，FP 則是近年來較為熱門的程式設計方式。像是 React 這套 JavaScript 框架就是使用 FP 來開發程式，因此若想學習 React.js 勢必也要熟悉 FP 的基本概念，而 JavaScript 程式語言也需要符合 FP 的編程理念。本篇將以 JavaScript 作為出發，解釋 JavaScript 函數式編程的重要概念。</p> <p>本篇皆以 JavaScript 為範例。</p> <hr> <h2 id="first-class--higher-order-functions">First-class &amp; higher-order functions</h2> <h3 id="first-class一等公民">First-class(一等公民)</h3> <p>我們可以想像成對待函式(Functions) 如同<strong>對待其他資料型別一樣</strong>。</p> <p>例如：<strong>可以直接賦予值</strong>或者<strong>存至陣列中當作參數傳遞</strong>。</p> <p>例如，我們可以宣告：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>1</strong> 的值也就指定給 <strong>a</strong>。</p> <p>因此我們也可以直接將函式(Functions) 指定給任一變數：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>a 也就變成 <strong>(x * y) Function</strong> 的變數，呼叫 <strong>a(2, 4)</strong> 則會返回值 <strong>8</strong>。</p> <h3 id="higher-order-functions高階函式">higher-order functions(高階函式)</h3> <p>在維基百科中高階函式至少會滿足下列其中一項條件：</p> <ol> <li>可以將函式(至少一個)<strong>當成參數</strong>傳入<strong>另一個函式</strong>。</li> <li>可以將函式當成<strong>另一個函式的回傳值</strong>。</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">add</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">addFive</span> <span class="o">=</span> <span class="nx">add</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">addTen</span> <span class="o">=</span> <span class="nx">add</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">addFive</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// 7 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">addTen</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// 12 </span></span></span></code></pre></td></tr></table> </div> </div><p>由上述範例我們可以得知，<strong>add</strong> 函式接收參數 <strong>(x)</strong>，並且回傳一個函式 <strong>( x + y )</strong> 作為回傳值。</p> <p>因此在宣告 <strong>addFive</strong> 變數時，同時給定 <strong>x = 5</strong> 至 <strong>add</strong> 函式，往後使用 <strong>addFive</strong> 變數(函式變數)皆會從 <strong>5</strong> 開始加減。</p> <p>上述則是符合 <strong>higher-order functions</strong> 的例子，<strong>add</strong> 函式(Functions) 接收參數並且回傳一個函式(Functions) 作為回傳值。</p> <blockquote> <p>函數柯里化文章可參考之前撰寫的(【Function Currying】Javascript 函數柯里化)[/2023-03-16/js-function-currying/]</p></blockquote> <hr> <h2 id="pure-functions">Pure Functions</h2> <p><strong>Pure Functions</strong>(純函式)，意指將相同的 input 丟入函式，永遠會回傳相同的 output 結果，而且在過程中完全沒有任何的<strong>副作用</strong>。此處的<strong>副作用</strong>通常意味著「<strong>避免狀態改變</strong>」、「<strong>避免資料改變</strong>」，我們可以想成<strong>不與函式區塊域(block) 以外的變數做互動(最典型的例子，修改全域變數的值)</strong>，或者<strong>不論函式以外做了什麼，函式(Functions) 內的運算依舊不受改變</strong>。換句話說，<strong>Pure Functions</strong> 擅於純運算，而不做其他事情(ex. 讀取外部資料)。</p> <p>範例如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// slice: Pure Function </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="nx">arr</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// output = [1, 2, 3], arr = [1, 2, 3, 4, 5, 6] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">arr</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// output = [1, 2, 3], arr = [1, 2, 3, 4, 5, 6] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// splice: not Pure Function </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="nx">arr</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// output = [1, 2, 3], arr = [4, 5, 6] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">arr</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// output = [4, 5, 6], arr = [] </span></span></span></code></pre></td></tr></table> </div> </div><p>在 Functional Programming 中，<strong>slice</strong> 函式(Functions) 就符合我們 Pure Functions 的規範，相同 input，永遠回傳相同 output 且無副作用。而 <strong>splice</strong> 函式(Functions) 則是每次呼叫，output 以及原始資料皆會不相同，因此不算是 Pure Functions。</p> <h3 id="副作用">副作用</h3> <p>以 JavaScript 為例， 副作用還包括：</p> <ul> <li>更改外部變數或者物件屬性(例如：全域變數、父類別範圍內的變數等)</li> <li>寫入 console.log、檔案</li> <li>觸發外部流程</li> <li>呼叫任何有副作用的函式(Functions)</li> </ul> <hr> <h2 id="declarative-vs-imperative">Declarative vs Imperative</h2> <p>函數式編程(Functional Programming) 屬於<strong>宣告式編程(Declarative Paradigm)</strong> 的一種。</p> <ul> <li> <p><strong>宣告式編程(Declarative Paradigm)</strong>： 較為抽象的程式碼，可以藉由自然語言直觀的理解該行程式碼想要達到什麼樣的結果。描述<strong>該在哪做什麼</strong>(what to do)以及<strong>資料流程</strong>(data flow)。</p> </li> <li> <p><strong>指令式編程(Imperative Paradigm)</strong>： 程式碼具體表達需要做什麼來達到目標。描述<strong>該做什麼</strong>(how to do)以及<strong>流程控制</strong>(flow control)。</p> </li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Declarative Programming </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">declarativeSquare</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">val</span><span class="o">*</span><span class="nx">val</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">declarativeSquare</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// [1, 4, 9, 16, 25] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// Imperative Programming </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">imperativeSquare</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">*=</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">arr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">imperativeSquare</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// [1, 4, 9, 16, 25] </span></span></span></code></pre></td></tr></table> </div> </div><p><strong>宣告式編程(Declarative Paradigm)</strong> 較依賴表達式(expression)，表達式是一個單純的運算過程，並且總是會返回值。屬於宣告式編程的程式語言有：HTML、SQL、LINQ。</p> <p><strong>指令式編程(Imperative Paradigm)</strong> 的程式碼經常使用程式語言基本的語句(statement)，例如：for、while、if、switch&hellip;等等。屬於指令式編程的程式語言有：C、JAVA。</p> <hr> <h2 id="總結">總結</h2> <p><strong>函數式編程(Functional Programming)</strong> 誕生了五十多年後，終於獲得程式開發者大量的關注，目前 ML 非常紅的 <strong>Python</strong> 以及前後端 <strong>JavaScript</strong> 等語言，對於<strong>函數式編程(Functional Programming)</strong> 的支持都很強。本篇文章整理 JavaScript 符合<strong>函數式編程(Functional Programming)</strong> 概念的幾個元素(First-class、higher-order functions、Pure Functions)，希望透過 JavaScript 的實例理解函數式編程所講述的核心理念為何。最後比較<strong>宣告式編程(Declarative Paradigm)<strong>以及</strong>指令式編程(Imperative Paradigm)</strong>，對自己過去在軟體開發這塊領域所學的做個整理，理清並梳理已有的知識。</p> <hr>https://blog.wayne-project.com/2023-03-16/js-function-currying/Thu, 16 Mar 2023 00:00:00 +0000https://blog.wayne-project.com/2023-03-16/js-function-currying/<img src="https://live.staticflickr.com/65535/52750230342_4ddafe10aa_o.jpg" alt="Featured image of post 【Function Currying】Javascript 函數柯里化" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://javascript.info/currying-partials" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://pjchender.dev/javascript/js-functional-programming-currying/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.sitepoint.com/currying-in-functional-javascript" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://bjouhier.wordpress.com/2011/04/04/currying-the-callback-or-the-essence-of-futures" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.cythilya.tw/2017/02/27/currying-in-javascript/" target="_blank" rel="noopener" >參考網站</a></p> <p>Currying（柯里化），又稱為 parital application 或 partial evaluation，functional programming 中的一種過程，是個「<strong>將一個接受 n 個參數的 function，轉變成 n 個只接受一個參數的 function</strong>」的過程。</p> <p>原理是將傳入 function 的參數，利用 closure（閉包）特性，將它們存放在另一個 function 中並當做回傳值，而這些 function 會形成一個鏈（chain），待最後參數傳入，完成運算。</p> <p>這樣做的好處是：</p> <ul> <li>簡化參數的處理，基本上是一次處理一個參數，藉以提高程式的彈性和可讀性</li> <li>將程式碼依功能拆解成更細的片段，有助於重複利用</li> <li>這對於整理冗長程式碼、需要詳客製化的 function 和非同步呼叫的處理等有很大的幫助。</li> </ul> <hr> <h2 id="說明">說明</h2> <p>假設有個 function，傳入被乘數和乘數之後可得到兩數相乘的結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">multiply</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span> <span class="c1">// 15 </span></span></span></code></pre></td></tr></table> </div> </div><p>柯里化後就是這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">curriedMultiply</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>假設固定被乘數為 3，接著會分別帶入乘數為 5 和 10 來取得運算結果。意即，<code>3 * 5 = 15</code>、<code>3 * 10 = 10</code></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">multipleOfThreeAndNumberY</span> <span class="o">=</span> <span class="nx">curriedMultiply</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">multipleOfThreeAndNumberY</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span> <span class="c1">// 15 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">multipleOfThreeAndNumberY</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span> <span class="c1">// 30 </span></span></span></code></pre></td></tr></table> </div> </div><p>當然，我們也可以改固定被乘數為 5，分別帶入乘數為 5 和 10 來算結果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">multipleOfFiveAndNumberY</span> <span class="o">=</span> <span class="nx">curriedMultiply</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">multipleOfFiveAndNumberY</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span> <span class="c1">// 25 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">multipleOfFiveAndNumberY</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span> <span class="c1">// 50 </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="備註">備註</h2> <ul> <li>curriedMultiply 並沒有計算結果，而是回傳一個 function 作為未來計算結果之用。 也就是說，待之後呼叫 multipleOfThreeAndNumberY 和 multipleOfFiveAndNumberY 傳入參數後才回傳計算結果。</li> <li><code>multiply(x, y)</code> 等於 <code>curriedMultiply(x)(y)</code>。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 用法一 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">multiply</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span> <span class="c1">// 15 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 用法二 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">curriedMultiply</span><span class="p">(</span><span class="mi">3</span><span class="p">)(</span><span class="mi">5</span><span class="p">);</span> <span class="c1">// 15 </span></span></span></code></pre></td></tr></table> </div> </div><p>以上這個簡單範例就呼應一開始所提到的柯里化的優點 - 將程式碼拆解成更細的片段，有助於重複利用。</p> <p>再來看看另一個例子會覺得柯里化更好用 - 在非同步存取資料上的應用。</p> <hr> <h2 id="currying-the-callback">Currying the Callback</h2> <p>在非同步資料存取上，一般來說，我們常將「<strong>讀取資料</strong>」和「<strong>處理資料</strong>」兩件事寫在一起，導致程式碼的冗長與雜亂。例如像這個樣子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">fetchData</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">handler</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">xmlHttp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">xmlHttp</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span> <span class="s2">&#34;GET&#34;</span><span class="p">,</span> <span class="nx">path</span><span class="p">,</span> <span class="kc">false</span> <span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">xmlHttp</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span> <span class="kc">null</span> <span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">result</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">xmlHttp</span><span class="p">.</span><span class="nx">responseText</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">handler</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">showResult</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The result is: &#39;</span> <span class="o">+</span> <span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="s1">&#39;http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">fetchData</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">showResult</span><span class="p">);</span> <span class="c1">// The result is: Hello, World! </span></span></span></code></pre></td></tr></table> </div> </div><p>若將負責處理資料的 callback 這個參數提出來（在這裡是 <code>handler</code>），就可改善程式碼如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">curriedFetchData</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">xmlHttp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">xmlHttp</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span> <span class="s2">&#34;GET&#34;</span><span class="p">,</span> <span class="nx">path</span><span class="p">,</span> <span class="kc">false</span> <span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">xmlHttp</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span> <span class="kc">null</span> <span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">result</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">xmlHttp</span><span class="p">.</span><span class="nx">responseText</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_callback</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">_callback</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">showResult</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The result is: &#39;</span> <span class="o">+</span> <span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="s1">&#39;http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 用法一 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">getData</span> <span class="o">=</span> <span class="nx">curriedFetchData</span><span class="p">(</span><span class="nx">path</span><span class="p">)(</span><span class="nx">showResult</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">getData</span><span class="p">(</span><span class="nx">showResult</span><span class="p">);</span> <span class="c1">// The result is: Hello, World! </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 用法二 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">curriedFetchData</span><span class="p">(</span><span class="nx">path</span><span class="p">)(</span><span class="nx">showResult</span><span class="p">);</span> <span class="c1">// The result is: Hello, World! </span></span></span></code></pre></td></tr></table> </div> </div><p>這看起來好像沒什麼，那麼再看看如果是這樣的話&hellip;</p> <p>如果在循序讀取下，要取得兩筆資料 - 先取得第一筆，再取得第二筆，並一同做處理，剛剛尚未柯里化的的程式碼就會變得非常龐大複雜&hellip;</p> <p>但柯里化後的程式處理起來就相對容易多了&hellip;這因為我們將「<strong>讀取資料</strong>」和「<strong>處理資料</strong>」兩個動作拆開的緣故&hellip;就算是用 promise 而非 callback hell 也能更順手：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">path1</span> <span class="o">=</span> <span class="s1">&#39;http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2&amp;ver=1&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">path2</span> <span class="o">=</span> <span class="s1">&#39;http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2&amp;ver=2&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">getData1</span> <span class="o">=</span> <span class="nx">curriedFetchData</span><span class="p">(</span><span class="nx">path1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">getData2</span> <span class="o">=</span> <span class="nx">curriedFetchData</span><span class="p">(</span><span class="nx">path2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">getData1</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result1</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">getData2</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result2</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result1</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span><span class="nx">result2</span><span class="p">);</span> <span class="c1">// Hello, World! Hello, World! </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2023-03-10/petite-vue-introduction/Fri, 10 Mar 2023 00:00:00 +0000https://blog.wayne-project.com/2023-03-10/petite-vue-introduction/<img src="https://live.staticflickr.com/65535/52736941727_b3a1dcf3c3_o.jpg" alt="Featured image of post 【Petite-Vue】大小只有 ~6KB 的 mini Vue！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="http://fsjohnhuang.gitee.io/petite-vue-source-reading/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7168777403337015310" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7058539192304795661" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7093357600284082207" target="_blank" rel="noopener" >參考網站</a></p> <p>Vue 可以作為獨立的腳本文件使用，無需構建步驟！如果你有一個非前後端分離的歷史項目，並且它已經渲染了大部分的 HTML，或者你的前端邏輯並不復雜，不需要構建步驟，Vue 也提供了另一個適用於此類無構建步驟場景的替代版 <a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >Petite-Vue</a>，主要為漸進式增強已有的 HTML 作了特別的優化。功能更加精簡，十分輕量。</p> <ul> <li><a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >Petite-Vue (GitHub)</a></li> <li><a class="link" href="https://gitee.com/mirrors/petite-vue" target="_blank" rel="noopener" >Petite-Vue (Gitee)</a></li> </ul> <hr> <h2 id="petite-vue-的特點">Petite-Vue 的特點</h2> <p>相對 Vue3 而言，Petite-Vue 有如下特點：</p> <ol> <li>提供精簡版的與 Vue3 語法和表現一致的模板語言</li> <li>僅由渲染模塊和響應式系統模塊組成</li> <li>渲染模塊沒有採用虛擬 DOM，而是採用在線解析渲染的方式</li> <li>響應式系統模塊對外暴露 reactive 接口提供構建全局狀態管理器的能力</li> <li>代碼庫體積在 gzip 壓縮後 ~6KB，十分適合與項目已有的 LayUI、MiniUI 等 UI 庫搭配使用</li> </ol> <hr> <h2 id="什麼是-petite-vue">什麼是 Petite-Vue？</h2> <p>根據官方解釋，Petite-Vue 是專門為非前後端分離的歷史項目提供和 Vue 相近的響應式開發模式。與完整的 Vue 相比最大的特點是，面對數據的變化 Petite-Vue 採取直接操作 DOM 的方式重新渲染。</p> <p>具體的使用方式請參考 <a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >GitHub</a>，在這裡我想展示兩個示例：</p> <h3 id="代碼庫結構介紹">代碼庫結構介紹</h3> <ul> <li>examples 各種使用示例</li> <li>scripts 打包發布腳本</li> <li>tests 測試用例</li> <li>src <ul> <li>directives <code>v-if</code> 等內置指令的實現</li> <li>app.ts <code>createApp</code> 函數</li> <li>block.ts 塊對象</li> <li>context.ts 上下文對象</li> <li>eval.ts 提供 <code>v-if=&quot;count === 1&quot;</code> 等表達式運算功能</li> <li>scheduler.ts 調度器</li> <li>utils.ts 工具函數</li> <li>walk.ts 模板解析</li> </ul> </li> </ul> <p>若想構建自己的版本只需在控制台執行 <code>npm run build</code> 即可。</p> <h3 id="範例一---在線渲染">範例(一) - 在線渲染</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">[</span><span class="nt">v-cloak</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;App&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">App</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;span v-cloak v-if=&#34;status === &#39;offline&#39;&#34;&gt; OFFLINE &lt;/span&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;span v-else&gt; ONLINE &lt;/span&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">&#39;online&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;[v-scope]&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>上述代碼最終輸出結果為 <code>&lt;div&gt;&lt;span&gt; ONLINE &lt;/span&gt;&lt;/div&gt;</code>，但渲染過程是直接在 DOM Tree 上進行(分為如下4個步驟)，當瀏覽器資源緊張時整個渲染過程將會被用戶一覽無餘：</p> <ol> <li>生成模板</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-cloak</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;status === &#39;offline&#39;&#34;</span><span class="p">&gt;</span> OFFLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-else</span><span class="p">&gt;</span> ONLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>移除 v-cloak 屬性</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;status === &#39;offline&#39;&#34;</span><span class="p">&gt;</span> OFFLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-else</span><span class="p">&gt;</span> ONLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>解析 v-if 和 v-else 指令</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;status === &#39;offline&#39;&#34;</span><span class="p">&gt;</span> OFFLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="4"> <li>最終渲染</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span> ONLINE <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼用戶很有可能會看到閃屏現象：ONLINE ➡️ OFFLINE ONLINE ➡️ OFFLINE ➡️ EMPTY ➡️ ONLINE</p> <h3 id="範例二---組件化">範例(二) - 組件化</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;App&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;div v-scope=&#34;Counter(1)&#34;&gt;&lt;/div&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;div v-scope=&#34;Message()&#34;&gt;&lt;/div&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="nx">initialCount</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;span&gt;&lt;/span&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;button @click=&#34;handleAdd&#34;&gt;ADD&lt;/button&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="nx">initialCount</span> <span class="o">||</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="nx">handleAdd</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Message</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="sb">`&lt;div&gt;&lt;/div&gt;`</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">App</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">Message</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;[v-scope]&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>Petite-Vue 雖然沒有提供明確的組件構建方式，但通過 v-scope 屬性我們依然可以採取組件化構建我們的頁面。</p> <p>但上述例子有明顯的問題採取全局組件註冊機制，如例子中即使 Message 組件不需要還是能引用 Counter 組件，假如註冊的不是 Counter 組件的構造函數，那麼 Counter 的狀態將會被意外修改。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span><span class="o">:</span> <span class="nx">Counter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="快速上手">快速上手</h2> <h3 id="自動初始化">自動初始化</h3> <p>Petite-Vue 無需構建流程即可使用。只需從 <a class="link" href="https://unpkg.com/petite-vue" target="_blank" rel="noopener" >CDN</a> 加載它：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/petite-vue&#34;</span> <span class="na">defer</span> <span class="na">init</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- 頁面任意位置 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;{ count: 0 }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> {{ count }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;count++&#34;</span><span class="p">&gt;</span>inc<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol> <li>用 v-scope 標記頁面上應由 Petite-Vue 控制的區域，同時也是聲明 data 與 methods。</li> <li>該 defer 屬性使腳本在 HTML 內容被解析後執行。</li> <li>該 init 屬性告訴 Petite-Vue 自動查找和初始化頁面上的所有包含 v-scope 的元素。</li> </ol> <blockquote> <ul> <li>這裡的 init 其實也就是 <code>PetiteVue.createApp().mount()</code> 的簡潔寫法；</li> <li>閱讀源碼可知： <ul> <li>const s = document.currentScript;</li> <li>如果 ( s &amp;&amp; s . hasAttribute ( &lsquo;init &rsquo; )) {</li> <li>createApp().mount();</li> <li>}</li> </ul> </li> <li>如果不想自動初始化，那麼移除 init 屬性，且在 script 標籤中，增加 <code>PetiteVue.createApp().mount()</code>。</li> </ul></blockquote> <h3 id="手動初始化">手動初始化</h3> <p>如果您不想要自動初始化，請刪除該 init 屬性並將腳本移動到 <code>&lt;body&gt;</code> 末尾：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/petite-vue&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">PetiteVue</span><span class="p">.</span><span class="nx">createApp</span><span class="p">().</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者，使用 ES 模塊構建：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">().</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>重點：在開發時期，CDN 地址可以是 <code>https://unpkg.com/petite-vue</code> 這樣簡短的，但對於生產使用時，應該要使用完整解析的 CDN URL。<br> 如：<code>https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js</code> 或者 <code>https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js</code> (ES 模塊引用時)，避免解析和重定向文本之外，還有避免版本不同導致項目出現意外情況。</p></blockquote> <p>使用終端命令可以快速簡單下載代碼到本地：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">curl unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js --output petite-vue@0.4.1-iife.js </span></span></code></pre></td></tr></table> </div> </div><h3 id="根作用域-root-scope--作用域-scope">根作用域 (Root Scope) / 作用域 (Scope)</h3> <p>這裡的作用域和我們編寫 JavaScript 時說的作用域是一致的，作用是限定函數和變量的可用範圍，減少命名衝突。具有如下特點：</p> <ol> <li>作用域之間存在父子關係和兄弟關係，整體構成一顆作用域樹。</li> <li>子作用域的變量或屬性可覆蓋祖先作用域同名變量或屬性的訪問性。</li> <li>若對僅祖先作用域存在的變量或屬性賦值，將賦值給祖先作用域的變量或屬性。</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 全局作用域 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">globalVariable</span> <span class="o">=</span> <span class="s1">&#39;hello&#39;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">message1</span> <span class="o">=</span> <span class="s1">&#39;there&#39;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">message2</span> <span class="o">=</span> <span class="s1">&#39;bye&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 局部作用域 A </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">message1</span> <span class="o">=</span> <span class="s1">&#39;局部作用域A&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">message2</span> <span class="o">=</span> <span class="s1">&#39;see you&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVariable</span><span class="p">,</span> <span class="nx">message1</span><span class="p">,</span> <span class="nx">message2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 輸出：hello 局部作用域 A see you </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 局部作用域 B </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">globalVariable</span><span class="p">,</span> <span class="nx">message1</span><span class="p">,</span> <span class="nx">message2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 輸出：hello there see you </span></span></span></code></pre></td></tr></table> </div> </div><p><code>createApp()</code>，它接收一個數據對像作為根範圍中的變量，供模版中使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// getters </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">get</span> <span class="nx">plusOne</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- v-scope value can be omitted --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ plusOne }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;increment&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣在模版中就可以使用 <code>count</code> 變量、<code>increment</code> 方法了。</p> <h3 id="掛載元素-mount">掛載元素 (Mount)</h3> <p><code>mount()</code> 沒有傳入掛載元素時，Petite-Vue 作用於整個頁面，但當傳入掛載元素時，那麼僅作用於掛載元素及其內的元素。</p> <p>這也意味著，我們可以在同一頁面掛載多個 Petite-Vue 應用，每一個應用都有其獨立的根變量範圍。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// root scope for app one </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app1&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// root scope for app two </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app2&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="生命週期">生命週期</h3> <p>在 Petite-Vue 中，可以監聽每一個元素的掛載和卸載事件。</p> <p>在 v0.4.0 開始，綁定生命週期事件需要加上 <code>@vue:</code> 前綴。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- v0.4.0 以下 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;show&#34;</span> <span class="err">@</span><span class="na">mounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;mounted on: &#39;, $el)&#34;</span> <span class="err">@</span><span class="na">unmounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;unmounted: &#39;, $el)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> some node </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- v0.4.0 以上 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;show&#34;</span> <span class="err">@</span><span class="na">vue:mounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;mounted on: &#39;, $el)&#34;</span> <span class="err">@</span><span class="na">vue:unmounted</span><span class="o">=</span><span class="s">&#34;console.log(&#39;unmounted: &#39;, $el)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> some node </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="v-effect">v-effect</h3> <p>用 <code>v-effect</code> 執行響應式內聯語句：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;{ count: 0 }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-effect</span><span class="o">=</span><span class="s">&#34;$el.textContent = count&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;count++&#34;</span><span class="p">&gt;</span>++<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>effect 響應式的追蹤其依賴，並在依賴更改時重新執行，因此每當更改 count 時它都會重新運行。</p> <h3 id="組件-component">組件 (Component)</h3> <p><strong>組件</strong>的概念在 Petite-Vue 中有所不同，因為它更加簡單。</p> <p>組件有兩種方式來創建，分別是<code>純數據的函數組件</code>和<code>帶有模板的函數組件</code>。</p> <p>使用組件，是需要在元素中用 <code>v-scope</code> 來調用函數。</p> <h4 id="純數據的函數組件">純數據的函數組件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">Counter</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">inc</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`I&#39;m mounted!`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 1 })&#34;</span> <span class="err">@</span><span class="na">vue:mounted</span><span class="o">=</span><span class="s">&#34;mounted&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;inc&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 2 })&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{ count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;inc&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="帶有模板的函數組件">帶有模板的函數組件</h4> <p>如果還需要模板的話，相比函數組件是多了一個字段來聲明模板：<code>$template</code>，該字段的值可以是一個模板字符串，也可以是 <code>&lt;template&gt;</code> 元素的 ID 選擇器。(推薦用 <code>template</code> 元素)。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">Counter</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">$template</span><span class="o">:</span> <span class="s1">&#39;#counter-template&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// $template: ` </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// My count is {{count}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// &lt;button @click=&#34;inc&#34;&gt;+aaa+&lt;/button&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// `, </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">inc</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">Counter</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;counter-template&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> My count is {{ count }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;inc&#34;</span><span class="p">&gt;</span>++<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">&lt;!-- reuse it --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 1 })&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;Counter({ initialCount: 2 })&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="全局狀態管理">全局狀態管理</h3> <p>沒錯，即便是簡單的 mini Vue，也可以有全局狀態管理。這裡使用的是 vue3 的 <code>reactive</code> API，來實現全局狀態管理。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;module&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span><span class="p">,</span> <span class="nx">reactive</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;https://unpkg.com/petite-vue?module&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">inc</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// manipulate it here </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">store</span><span class="p">.</span><span class="nx">inc</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// share it with app scopes </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">store</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">mount</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-scope</span><span class="o">=</span><span class="s">&#34;{ localCount: 0 }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Global {{ store.count }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;store.inc&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Local {{ localCount }}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;localCount++&#34;</span><span class="p">&gt;</span>increment<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="指令-directive">指令 (Directive)</h3> <h4 id="內建指令">內建指令</h4> <ul> <li>v-model</li> <li>v-if / v-else / v-else-if</li> <li>v-for</li> <li>v-show</li> <li>v-on(别名：<code>@</code>)</li> <li>v-bind(别名：<code>:</code>)</li> <li>v-html / v-text / v-pre</li> <li>v-once</li> <li>v-cloak (可用來配合 CSS 做未渲染時隱藏)</li> </ul> <h4 id="自定義指令">自定義指令</h4> <p>Petite-Vue 的自定義指令與 vue 有些不同，那麼怎麼註冊一個指令？</p> <ul> <li>指令聲明：一個函數，<code>const myDirective = (ctx) =&gt; {};</code> <ul> <li>ctx 是一個對象，裡面有 <code>el</code>、<code>arg</code>、<code>get</code>、<code>effect</code> 等屬性，具體可以<a class="link" href="https://github.com/vuejs/petite-vue#custom-directives" target="_blank" rel="noopener" >參考文檔</a>或者<a class="link" href="https://github.com/vuejs/petite-vue/blob/main/src/directives/index.ts" target="_blank" rel="noopener" >閱讀源碼</a></li> <li>函數 return，是在指令卸載時候會觸發。</li> </ul> </li> <li>註冊指令：<code>createApp().directive('dir-name', dirFn).mount()</code></li> </ul> <p><code>v-html</code> 指令的實現：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">html</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">get</span><span class="p">,</span> <span class="nx">effect</span> <span class="p">})</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// effect 每次 get() 更改後就會執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">effect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">el</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">get</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><p>自定義指令範例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myDirective</span> <span class="o">=</span> <span class="p">(</span><span class="nx">ctx</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// the element the directive is on </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">el</span> </span></span><span class="line"><span class="cl"> <span class="c1">// the raw value expression </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// e.g. v-my-dir=&#34;x&#34; then this would be &#34;x&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">exp</span> </span></span><span class="line"><span class="cl"> <span class="c1">// v-my-dir:foo -&gt; &#34;foo&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">arg</span> </span></span><span class="line"><span class="cl"> <span class="c1">// v-my-dir.mod -&gt; { mod: true } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">modifiers</span> </span></span><span class="line"><span class="cl"> <span class="c1">// evaluate the expression and get its value </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">get</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="c1">// evaluate arbitrary expression in current scope </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">ctx</span><span class="p">.</span><span class="nx">exp</span><span class="si">}</span><span class="sb"> + 10`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// run reactive effect </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">ctx</span><span class="p">.</span><span class="nx">effect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// this will re-run every time the get() value changes </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ctx</span><span class="p">.</span><span class="nx">get</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// cleanup if the element is unmounted </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// register the directive </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">createApp</span><span class="p">().</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;my-dir&#39;</span><span class="p">,</span> <span class="nx">myDirective</span><span class="p">).</span><span class="nx">mount</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="自定義模板">自定義模板</h3> <p>這個可以通過給 <code>createApp</code> 的配置項增加屬性 <code>$delimiters: ['${', '}']</code> 來實現，通常在服務器端模板語言一起使用時比較有用。</p> <h3 id="petite-vue-vs-vue">Petite-Vue vs Vue</h3> <p>Petite-Vue 僅有的特性：</p> <ul> <li>v-scope</li> <li>v-effect</li> <li>@vue:mounted、@vue:unmounted 事件</li> </ul> <p>不同的功能：</p> <ol> <li>在表達式中，<code>$el</code> 指向指令綁定到的當前元素（而不是組件根元素）</li> <li><code>createApp()</code> 接受全局狀態而不是組件</li> <li>組件被簡化為函數返回對象</li> <li>自定義指令有不同的語法</li> </ol> <p>共用的特性：</p> <table> <thead> <tr> <th>共有的特性</th> </tr> </thead> <tbody> <tr> <td><code>{{ }}</code></td> </tr> <tr> <td>v-bind</td> </tr> <tr> <td>v-on</td> </tr> <tr> <td>v-model</td> </tr> <tr> <td>v-if / v-else / v-else-if</td> </tr> <tr> <td>v-for</td> </tr> <tr> <td>v-show</td> </tr> <tr> <td>v-html</td> </tr> <tr> <td>v-text</td> </tr> <tr> <td>v-pre</td> </tr> <tr> <td>v-once</td> </tr> <tr> <td>v-cloak</td> </tr> <tr> <td>reactive()</td> </tr> <tr> <td>nextTick()</td> </tr> <tr> <td>Template refs</td> </tr> </tbody> </table> <p>Petite-Vue 不支持的特性：</p> <p>一些特性因為它們在漸進增強的背景下具有相對較低的使用頻率而被丟棄。</p> <p>如果你需要這些特性，你可能應該只使用標準的 Vue：</p> <ol> <li><code>ref()</code>、<code>computed()</code> 等組合式API</li> <li><code>Render functions</code> ( Petite-Vue 沒有 Virtual DOM)</li> <li><code>Reactivity</code> 響應式數據類型(Map、Set、&hellip;等，為了體積更小而刪除)</li> <li><code>Transition</code>、<code>KeepAlive</code>、<code>Teleport</code>、<code>Suspense</code></li> <li><code>v-for</code> 的深解構</li> <li><code>v-on=&quot;object&quot;</code> 對象語法</li> <li><code>v-is</code> 動態組件</li> <li><code>v-bind:style</code> 自動前綴</li> </ol> <hr> <h2 id="總結">總結</h2> <p>總結來說，<a class="link" href="https://github.com/vuejs/petite-vue" target="_blank" rel="noopener" >Petite-Vue</a> 這個項目，挺適合「用不到 Vue、React 等這些偏大的前端框架的簡單頁面」，或是「既有的非前後端分離的歷史項目」來做使用的，有著 Vue 的開發體驗，也能不增加項目的複雜度，簡直是一個完美的體驗！</p> <hr>https://blog.wayne-project.com/2023-02-22/js-require-vs-import/Wed, 22 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-22/js-require-vs-import/<img src="https://live.staticflickr.com/65535/52703536702_73aed5647c_o.jpg" alt="Featured image of post 【Javascript】Require 與 Import 的區別" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://zhuanlan.zhihu.com/p/143412753" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://zhuanlan.zhihu.com/p/43249121" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10298939?sc=iThelpR" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.niclin.tw/2019/10/03/nodejs-require-vs-es6-import-export/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.zhihu.com/question/56820346" target="_blank" rel="noopener" >參考網站</a></p> <hr> <p>你有想過，我們在 JavaScript 要引入其他文件，有的時候使用 <code>require</code>，有的時候使用 <code>import</code>，這兩個方式有什麼差別？效能上又有什麼差別呢？本篇就來說明一下！</p> <hr> <h2 id="遵循的模塊化規範不同">遵循的模塊化規範不同</h2> <p><code>require/exports</code> 遵循 <strong>CommonJS 規範</strong>，主要用於 Node.js 伺服器端開發，以同步方式載入模組，也就是要載入完成後才能執行後面的程式碼。</p> <p>而 <code>import/export</code> 則是 <strong>ES6 模組（ESM）標準</strong>，由 TC39 制定，屬於靜態編譯，編譯期就能解析依賴，瀏覽器與 Node.js 都原生支持（Node.js 14+）。若舊環境不支援，則可以透過 Babel + Webpack 轉譯。</p> <hr> <h2 id="出現的時間不同">出現的時間不同</h2> <ul> <li><code>require/exports</code>：2010 年左右在 CommonJS 規範中出現，Node.js 廣泛採用。</li> <li><code>import/export</code>：ES6 (ES2015) 引入，2015 年之後才廣泛使用，Babel 是早期轉譯支援的重要工具。</li> </ul> <p>現在 Node.js 14+ / 16+ 已原生支援 ES Module，不需要 Babel 也能直接使用 <code>import/export</code>。</p> <hr> <h2 id="寫法與使用方式不同">寫法與使用方式不同</h2> <h3 id="commonjs-requireexports">CommonJS (<code>require/exports</code>)</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">component</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;component&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">exports</span><span class="p">.</span><span class="nx">component</span> <span class="o">=</span> <span class="nx">component</span> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">component</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="es6-module-importexport">ES6 Module (<code>import/export</code>)</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">fs</span> <span class="nx">from</span> <span class="s1">&#39;fs&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">readFile</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;fs&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">readFile</span> <span class="nx">as</span> <span class="nx">read</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;fs&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">fs</span><span class="p">,</span> <span class="p">{</span> <span class="nx">readFile</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;fs&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">fs</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">fs</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">readFile</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">readFile</span><span class="p">,</span> <span class="nx">read</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="o">*</span> <span class="nx">from</span> <span class="s1">&#39;fs&#39;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="動態載入dynamic-import">動態載入（Dynamic Import）</h2> <p>靜態 <code>import</code> 必須是字面量字串，編譯期就要能確定模組路徑：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// ❌ 靜態 import 不能使用變數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">url</span> <span class="o">=</span> <span class="s2">&#34;./utils.js&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">url</span><span class="p">;</span> <span class="c1">// SyntaxError </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// ✅ 靜態 import 正確用法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">myUtil</span> <span class="nx">from</span> <span class="s2">&#34;./utils.js&#34;</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若需要 <strong>動態載入</strong>，可以使用 CommonJS 的 <code>require()</code> 或 ESM 的動態 <code>import()</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// 使用 require()（CommonJS） </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">url2</span> <span class="o">=</span> <span class="s2">&#34;./utils.js&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myUtil2</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="nx">url2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用動態 import()（ESM） </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">url3</span> <span class="o">=</span> <span class="s2">&#34;./utils.js&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myUtil3</span> <span class="o">=</span> <span class="kr">await</span> <span class="kr">import</span><span class="p">(</span><span class="nx">url3</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="說明">說明</h3> <table> <thead> <tr> <th>方法</th> <th>同步/非同步</th> <th>支援變數</th> <th>適用環境</th> </tr> </thead> <tbody> <tr> <td><code>import</code> (靜態)</td> <td>靜態編譯</td> <td>❌</td> <td>ESM（編譯期）</td> </tr> <tr> <td><code>require()</code></td> <td>同步</td> <td>✅</td> <td>CommonJS (Node.js)</td> </tr> <tr> <td><code>await import()</code></td> <td>非同步</td> <td>✅</td> <td>ESM (Node.js / 瀏覽器)</td> </tr> </tbody> </table> <hr> <h2 id="nodejs-支援情況">Node.js 支援情況</h2> <ul> <li><strong>Node.js 14.8+</strong>：動態 <code>import()</code> 正式可用（無需 flag）。</li> <li><strong>Node.js 16+ LTS</strong>：動態 <code>import()</code> 穩定，CommonJS 與 ESM 都可使用。</li> <li>靜態 <code>import</code> 與動態 <code>import()</code> 都可以取代 Babel 轉譯的需求，但 Babel/Webpack 仍用於瀏覽器或舊版兼容。</li> </ul> <hr> <h2 id="本質上的不同">本質上的不同</h2> <ol> <li>CommonJS 與 ES Module 輸出都是物件，但 <strong>ESM 支援 <code>export default</code> 與強綁定屬性</strong>。</li> <li><code>require()</code> 載入的是值或引用，靜態與動態都可以。</li> <li>動態 <code>import()</code> 與 <code>require()</code> 的動態行為對等，但非同步，不阻塞事件循環。</li> </ol> <hr> <h2 id="範例比較">範例比較</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// counter.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">exports</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;increase count to&#39;</span><span class="p">,</span> <span class="o">++</span><span class="nx">exports</span><span class="p">.</span><span class="nx">count</span><span class="p">,</span> <span class="s1">&#39;in counter.js after 500ms&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">500</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// commonjs.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="p">{</span> <span class="nx">count</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./counter&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;read count after 1000ms in commonjs is&#39;</span><span class="p">,</span> <span class="nx">count</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// es6.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">count</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;read count after 1000ms in es6 is&#39;</span><span class="p">,</span> <span class="nx">count</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">1000</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>執行結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">node commonjs.js </span></span><span class="line"><span class="cl">&gt; increase count to <span class="m">1</span> in counter.js after 500ms </span></span><span class="line"><span class="cl">&gt; <span class="nb">read</span> count after 1000ms in commonjs is <span class="m">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">babel-node es6.js </span></span><span class="line"><span class="cl">&gt; increase count to <span class="m">1</span> in counter.js after 500ms </span></span><span class="line"><span class="cl">&gt; <span class="nb">read</span> count after 1000ms in es6 is <span class="m">1</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="效能差異">效能差異</h2> <ul> <li>靜態 <code>import</code>：編譯期執行。</li> <li><code>require()</code>：同步載入，阻塞事件循環。</li> <li>動態 <code>import()</code>：非同步載入，不阻塞事件循環。</li> </ul> <blockquote> <p>在現代 Node.js 專案，如果能用靜態 import 就用，需動態載入才使用 <code>require()</code> 或 <code>await import()</code>。效能差異微乎其微，但動態載入的同步/非同步行為會影響事件循環。</p></blockquote> <hr> <p><img src="https://live.staticflickr.com/65535/52704479080_48c6747d87_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p>https://blog.wayne-project.com/2023-02-21/ts-express-server/Tue, 21 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-21/ts-express-server/<img src="https://live.staticflickr.com/65535/52702210344_fe78a142e7_o.png" alt="Featured image of post 【Node.js】用 Typescript 與 Express 建立一個 server" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://wanago.io/2018/12/03/typescript-express-tutorial-routing-controllers-middleware/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://wanago.io/2019/03/25/node-js-typescript-7-creating-a-server-and-receiving-requests/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://auth0.com/blog/node-js-and-typescript-tutorial-build-a-crud-api/#Create-a-Node-js-Service-with-TypeScript" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://kusakawazeusu.medium.com/%E7%94%A8-typescript-%E5%AF%AB-express-route-%E8%88%87-controller-%E7%AF%87-40db4850a8f2" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://jimmyswebnote.com/node-js-typescript-express-create-http-server/#6_%E5%B0%87_routes_%E5%92%8C_controllers_%E7%8D%A8%E7%AB%8B%E5%87%BA%E4%BE%86" target="_blank" rel="noopener" >參考網站</a></p> <p>最近前端離不開 typescript 後，我將原本用 javascript 撰寫的 mock server 改用 typescript 來撰寫；本篇就來記錄一下該如何使用 typescript 建立 node.js 的 Express！</p> <hr> <h2 id="使用-typescript-的好處">使用 typescript 的好處</h2> <p>typescript 是為了彌補 javascript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 node.js 中使用 typescript 建立 Express，所以就不描述太多 typescript 的特性了。</p> <ol> <li>提供許多 OO pattern 的方法，如介面、繼承與抽象類別</li> <li>強型別，能夠在編譯過程中先行找到一些錯誤</li> <li>能夠編譯成不同版本的 JS</li> <li>有 Declaration files 能夠使用 JS Library，因此不太需要擔心套件相容問題，像是 express 有 @type/express</li> </ol> <hr> <h2 id="建立-typescript-環境">建立 typescript 環境</h2> <h3 id="進入初始化專案或現有專案的目錄">進入初始化專案或現有專案的目錄</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">cd</span> ~/project/node-express-project </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 初始化專案</span> </span></span><span class="line"><span class="cl"><span class="c1"># npm init</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="安裝-typescript-與-express">安裝 typescript 與 express</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install --save-dev typescript @types/express @types/node </span></span><span class="line"><span class="cl">npm install --save express </span></span></code></pre></td></tr></table> </div> </div><h3 id="設定-typescript">設定 typescript</h3> <p>安裝 typescript 時，也會同時安裝將 typescript 編譯成 javascript 的編譯器 - <code>tsc</code>。</p> <h3 id="初始化-tsc">初始化 tsc</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">tsc --init </span></span></code></pre></td></tr></table> </div> </div><p><code>tsc --init</code> 後會產生 <code>tsconfig.json</code>，當 typescript 透過 <code>tsc</code> 編譯成 javascript 時，就會遵循該檔案的設定進行編譯。</p> <h4 id="可能遇到的錯誤">可能遇到的錯誤</h4> <ul> <li>tsc command not found</li> </ul> <p>這個 error message ，請先在 global 安裝 typescript。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g typescript </span></span></code></pre></td></tr></table> </div> </div><p>若仍出現 &ldquo;tsc command not found&rdquo;，請在終端機輸入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">export</span> <span class="nv">PATH</span><span class="o">=</span>”<span class="nv">$PATH</span>:/Users/<span class="o">{</span>user name<span class="o">}</span>/.npm-global/lib/node_modules/typescript/bin/” </span></span></code></pre></td></tr></table> </div> </div><p>再輸入 <code>tsc -v</code> ，確認 tsc 的版本即可。</p> <h5 id="tsconfigjson">tsconfig.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;compilerOptions&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;target&#34;</span><span class="p">:</span> <span class="s2">&#34;es5&#34;</span><span class="p">,</span> <span class="c1">// 選擇要編譯成哪種版本的 javascript </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;module&#34;</span><span class="p">:</span> <span class="s2">&#34;commonjs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;strict&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 嚴格模式，啟用後需要指定函數參數的 type </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;esModuleInterop&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;skipLibCheck&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;forceConsistentCasingInFileNames&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;outDir&#34;</span><span class="p">:</span> <span class="s2">&#34;dist&#34;</span> <span class="c1">// 將編譯過後的 js 檔放到 dist 資料夾中 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>官網有 tsconfig.json 所有屬性的說明，請參考<a class="link" href="https://www.typescriptlang.org/tsconfig" target="_blank" rel="noopener" >官網</a>。</p> <hr> <h2 id="nodejs-的設定">node.js 的設定</h2> <p>安裝完 typescript 環境後，接著我們來設定 node.js 的部分。</p> <h3 id="1-新增入口檔案">1. 新增入口檔案</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">mkdir src </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">touch src/app.ts <span class="c1"># 入口檔案</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="srcappts">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="err">​</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">port</span> <span class="o">=</span> <span class="mi">3000</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;The server is working!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="nx">port</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">port</span> <span class="o">===</span> <span class="mi">3000</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;true&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`server is listening on </span><span class="si">${</span><span class="nx">port</span><span class="si">}</span><span class="sb"> !!!`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="2-安裝-nodemon-與-ts-node">2. 安裝 nodemon 與 ts-node</h3> <ul> <li>nodemon： 用於在每次儲存檔案後自動重啟 node，看到即時的修正。</li> <li>ts-node： 可以當作 node.js + typescript，用於直接在 node.js 執行 typescript 檔案。</li> </ul> <p>在專案資料夾內安裝：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install --save-dev nodemon ts-node </span></span></code></pre></td></tr></table> </div> </div><p>【推薦】也可以直接安裝於全域環境：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g nodemon ts-node </span></span></code></pre></td></tr></table> </div> </div><h3 id="3-調整-packagejson-的-scripts">3. 調整 package.json 的 scripts</h3> <h5 id="packagejson">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="s2">&#34;scripts&#34;</span>: <span class="o">{</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;start&#34;</span>: <span class="s2">&#34;nodemon src/app.ts&#34;</span>, </span></span><span class="line"><span class="cl"> <span class="s2">&#34;build&#34;</span>: <span class="s2">&#34;tsc --project ./&#34;</span>, </span></span><span class="line"><span class="cl"> <span class="s2">&#34;test&#34;</span>: <span class="s2">&#34;echo \&#34;Error: no test specified\&#34; &amp;&amp; exit 1&#34;</span> </span></span><span class="line"><span class="cl"><span class="o">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="4-執行-npm-start">4. 執行 npm start</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run start </span></span></code></pre></td></tr></table> </div> </div><p><code>start</code> 後，nodemon 會監聽檔案是否有儲存的動作，並用 ts-node 來重啟。</p> <p><img src="https://live.staticflickr.com/65535/52702371455_3548f977d4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><code>npm run build</code> 後則會出現一個 <strong>dist</strong> 資料夾來存放編譯過後的 js 檔。</p> <h3 id="bonus-使用自定義的-tsconfigjson">BONUS： 使用自定義的 tsconfig.json</h3> <p>補充一下，若當前專案包含前後端，而前端也使用 typescript 撰寫時，已經有一隻前端部分的 tsconfig.json，此時若需拆分 Express 的 tsconfig.json，可以透過 nodemon 的參數 <code>--config {express tsconfig.json 檔案位置}</code> 來調整。</p> <ol> <li>先複製一份 tsconfig.json 到 Express src 資料夾內</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># 先複製一份 tsconfig.json</span> </span></span><span class="line"><span class="cl">copy tsconfig.json src/tsconfig.json </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>調整 start 的 scripts</li> </ol> <h5 id="packagejson-1">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">&#34;scripts&#34;</span><span class="err">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;start&#34;</span><span class="p">:</span> <span class="s2">&#34;nodemon src/app.ts --config src/tsconfig.json&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;build&#34;</span><span class="p">:</span> <span class="s2">&#34;tsc --project ./ --config src/tsconfig.json&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test&#34;</span><span class="p">:</span> <span class="s2">&#34;echo \&#34;Error: no test specified\&#34; &amp;&amp; exit 1&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="使用-http">使用 http</h2> <blockquote> <p>這邊講解用 http module 寫 node.js，如需直接使用 express 可以直接跳到<a class="link" href="#%e4%bd%bf%e7%94%a8-express" >使用 Express</a>。</p></blockquote> <p>建立完 typescript 的環境後，引入 node.js 的核心套件之一：http module。 http module 能讓你建立一個 http server，當你的 code 在執行的時候，可以隨時監聽網路上發送到你 url 的所有 request，並將你寫的程式邏輯 response 回去。</p> <p>載入 http module 其實跟 javascript 的寫法差不多，只是在 request 和 response 加上對應的型別： IncomingMessage、ServerResponse。</p> <blockquote> <p>PS： 在 node 無法直接使用 <code>import</code>，得透過 Babel 轉譯，可以在 tsconfig.json 中設定 <code>module</code>。</p></blockquote> <h5 id="srctsconfigjson">src/tsconfig.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;compilerOptions&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;target&#34;</span><span class="p">:</span> <span class="s2">&#34;esnext&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;module&#34;</span><span class="p">:</span> <span class="s2">&#34;CommonJS&#34;</span><span class="p">,</span> <span class="c1">// 重點是這行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;useDefineForClassFields&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;strict&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;jsx&#34;</span><span class="p">:</span> <span class="s2">&#34;preserve&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;outDir&#34;</span><span class="p">:</span> <span class="s2">&#34;./dist&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;importHelpers&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;moduleResolution&#34;</span><span class="p">:</span> <span class="s2">&#34;node&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;experimentalDecorators&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;allowJs&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;skipLibCheck&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;esModuleInterop&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;allowSyntheticDefaultImports&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;sourceMap&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;isolatedModules&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;resolveJsonModule&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;baseUrl&#34;</span><span class="p">:</span> <span class="s2">&#34;.&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;types&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;node&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;paths&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@/*&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;src/*&#34;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;lib&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;esnext&#34;</span><span class="p">,</span> <span class="s2">&#34;dom&#34;</span><span class="p">,</span> <span class="s2">&#34;dom.iterable&#34;</span><span class="p">,</span> <span class="s2">&#34;scripthost&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;noFallthroughCasesInSwitch&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;forceConsistentCasingInFileNames&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;typeRoots&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;node_modules/@types&#34;</span><span class="p">,</span> <span class="s2">&#34;src/types&#34;</span><span class="p">,</span> <span class="s2">&#34;src&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;suppressImplicitAnyIndexErrors&#34;</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;include&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;**/*.ts&#34;</span><span class="p">,</span> <span class="s2">&#34;**/*.d.ts&#34;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="srcappts-1">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">createServer</span><span class="p">,</span> <span class="nx">IncomingMessage</span><span class="p">,</span> <span class="nx">ServerResponse</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">port</span> <span class="o">=</span> <span class="mi">5000</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">server</span> <span class="o">=</span> <span class="nx">createServer</span><span class="p">((</span><span class="nx">request</span>: <span class="kt">IncomingMessage</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">ServerResponse</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">writeHead</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="p">{</span><span class="s2">&#34;Content-Type&#34;</span><span class="o">:</span> <span class="s2">&#34;text/plain&#34;</span><span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">end</span><span class="p">(</span><span class="s1">&#39;Hello world!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">server</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="nx">port</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`server is running on http://localhost:</span><span class="si">${</span><span class="nx">port</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來每當有任何 client 對 <code>http://localhost:5000</code> 這個 url 發送 request 時，我們的 server 都會回應 &ldquo;Hello world!&rdquo; 給該 client。</p> <p><img src="https://live.staticflickr.com/65535/52701954621_cc839dd981_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="取得-request-中的資料">取得 request 中的資料</h3> <h4 id="取得-request-body">取得 request body</h4> <p>大部分的時候，如果我們需要傳資料到 server，會發送 POST request ，並且將資料存在 body 當中，要在 node.js 取得 request 中的 body data 方法如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">body</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"><span class="nx">request</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">chunk</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">chunk</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;end&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span> <span class="o">=</span> <span class="nx">Buffer</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">body</span><span class="p">).</span><span class="nx">toString</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果直接將 chunk <code>console.log</code> 出來會發現是一段看不懂的資料：<code>&lt;Buffer 7b 0d 0a 20 20 20 20 22 74 65 73 74 22 3a 20 22 35 22 0d 0a 7d&gt;</code>，這是因為 http request 在發送給 server 的時候是按照順序一個 byte、一個 byte 以資料流的方式發送的，因此需要用 <code>Buffer.toString()</code> 轉換回原本的資料。</p> <p>當我使用 POST method 發送 request 時，我的 server 端就會印出 request 中 body 的資料。</p> <p><img src="https://live.staticflickr.com/65535/52702210299_96771969bf_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52702210259_00acd47a32_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="取得-request-header">取得 request header</h4> <p>直接用 request.headers 取得 request 中的基本資料：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">request</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;end&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">request</span><span class="p">.</span><span class="nx">headers</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52702210239_d55d631bd1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52701954581_a2ca859d20_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="取得-request-authorization">取得 request authorization</h4> <p>authorization 是我們習慣放置 token 的欄位，雖然在 postman 中是獨立的一欄，但事實上是存在 request 的 headers 裡的。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">request</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;end&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">request</span><span class="p">.</span><span class="nx">headers</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">request</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">authorization</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52701954576_e27e5ab355_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52701433022_014dfa8a19_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="完整程式碼">完整程式碼</h4> <h5 id="srcappts-2">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">createServer</span><span class="p">,</span> <span class="nx">IncomingMessage</span><span class="p">,</span> <span class="nx">ServerResponse</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;http&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">port</span> <span class="o">=</span> <span class="mi">5000</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">server</span> <span class="o">=</span> <span class="nx">createServer</span><span class="p">((</span><span class="nx">request</span>: <span class="kt">IncomingMessage</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">ServerResponse</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">headers</span><span class="p">,</span> <span class="nx">method</span><span class="p">,</span> <span class="nx">url</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">request</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">body</span>:<span class="kt">any</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"> <span class="nx">request</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">chunk</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">chunk</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;end&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span> <span class="o">=</span> <span class="nx">Buffer</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">body</span><span class="p">).</span><span class="nx">toString</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">request</span><span class="p">.</span><span class="nx">headers</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">request</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">authorization</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">writeHead</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="p">{</span><span class="s2">&#34;Content-Type&#34;</span><span class="o">:</span> <span class="s2">&#34;text/plain&#34;</span><span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">end</span><span class="p">(</span><span class="s1">&#39;Hello world!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">server</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="nx">port</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`server is running on http://localhost:</span><span class="si">${</span><span class="nx">port</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="使用-express">使用 Express</h2> <p>接著使用 Express 來改寫一下。</p> <h5 id="srcappts-3">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Express</span><span class="p">,</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">port</span> <span class="o">=</span> <span class="mi">5000</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">app</span>: <span class="kt">Express</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;Homepage&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/articles&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;All articles are here!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/about-me&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;My name is Jimmy.&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">((</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">404</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;Page is not found.&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="nx">port</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`server is running on http://localhost:</span><span class="si">${</span><span class="nx">port</span><span class="si">}</span><span class="sb">`</span><span class="p">)}</span> </span></span><span class="line"><span class="cl"><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="加入-route-與-controller">加入 Route 與 Controller</h3> <p>當專案越長越大後，將所有 routes 和邏輯都寫在 app.ts 是個很難維護的做法，因此大多數的專案都會將 routes 和 controllers 獨立出來，把商業邏輯寫在 controllers 中。</p> <ul> <li>Controller： 請求經過 router 分配過後，會交由 controller 負責處理商業邏輯，並回傳對應的 response。</li> <li>Route： 我們要將使用者的請求，依照其進入的 Url 分配給不同的 Controller。</li> </ul> <h4 id="controller">Controller</h4> <p>建立 controllers。</p> <h5 id="srccontrollersapi-controllersts">src/controllers/api-controllers.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">ApiControllers</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">getHomePage</span><span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;Homepage&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">getAboutPage</span><span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;My name is Jimmy.&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="route">Route</h4> <p>建立 routes。</p> <h5 id="srcroutesapi-routests">src/routes/api-routes.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Router</span><span class="p">,</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ApiControllers</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;../controllers/api-controllers&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">apiControllers</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ApiControllers</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">ApiRouter</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">router</span>: <span class="kt">Router</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span> <span class="o">=</span> <span class="nx">express</span><span class="p">.</span><span class="nx">Router</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">initializeRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">initializeRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="nx">apiControllers</span><span class="p">.</span><span class="nx">getHomePage</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/articles&#39;</span><span class="p">,</span> <span class="nx">apiControllers</span><span class="p">.</span><span class="nx">getArticlesPage</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/about-me&#39;</span><span class="p">,</span> <span class="nx">apiControllers</span><span class="p">.</span><span class="nx">getAboutPage</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="調整-srcappts">調整 src/app.ts</h4> <h5 id="srcappts-4">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Express</span><span class="p">,</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ApiRouter</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;./routes/api-routes&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">port</span> <span class="o">=</span> <span class="mi">5000</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">app</span>: <span class="kt">Express</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">apiRouter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ApiRouter</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">((</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">setHeader</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Origin&#34;</span><span class="p">,</span> <span class="s2">&#34;*&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">setHeader</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;Access-Control-Allow-Headers&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;Origin, X-Requested-With, Content-Type, Accept, Authorization&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">setHeader</span><span class="p">(</span><span class="s2">&#34;Access-Control-Allow-Methods&#34;</span><span class="p">,</span> <span class="s2">&#34;GET, POST, PATCH, DELETE&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="nx">apiRouter</span><span class="p">.</span><span class="nx">router</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">((</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">404</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;Page is not found.&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="nx">port</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`server is running on http://localhost:</span><span class="si">${</span><span class="nx">port</span><span class="si">}</span><span class="sb">`</span><span class="p">)}</span> </span></span><span class="line"><span class="cl"><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>檔案結構：</p> <p><img src="https://live.staticflickr.com/65535/52702210209_5721809954_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="將-routes-拆分成多個檔案">將 routes 拆分成多個檔案</h2> <ol> <li>先建立一個 route 的 abstract class</li> </ol> <h5 id="srcroutesroutets">src/routes/route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Router</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">abstract</span> <span class="kr">class</span> <span class="nx">Route</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">router</span> <span class="o">=</span> <span class="nx">Router</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="kr">abstract</span> <span class="nx">setRoutes</span><span class="p">()</span><span class="o">:</span> <span class="k">void</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">public</span> <span class="nx">getRouter() {</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">Route</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>新增 AuthRoute 與 AuthController</li> </ol> <h5 id="srccontrollersauthcontrollerts">src/controllers/AuthController.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AuthController</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">echo</span><span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;echo&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">AuthController</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="srcroutesauthroutets">src/routes/auth.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/AuthController&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AuthRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">authController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AuthController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">authController</span><span class="p">.</span><span class="nx">echo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">AuthRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>新增 ArticleRoute 與 ArticleController</li> </ol> <h5 id="srccontrollersarticalcontrollerts">src/controllers/ArticalController.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">ArticleController</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">getArticlesPage</span><span class="p">(</span><span class="nx">request</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">response</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="kr">type</span><span class="p">(</span><span class="s1">&#39;text/plain&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">response</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;All articles are here!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">ArticleController</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="srcroutesarticleroutets">src/routes/article.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">ArticalController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/ArticalController&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">ArticleRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">articalController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ArticalController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/articles&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">articalController</span><span class="p">.</span><span class="nx">getArticlesPage</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">ArticleRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>建立 router 並加載各個檔案的 route</li> </ol> <p>移除原先的 <code>src/routes/api-routes.ts</code>，統一改成使用 <code>src/routes/router.ts</code>。</p> <h5 id="srcroutesrouterts">src/routes/router.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthRoute</span> <span class="kr">from</span> <span class="s2">&#34;./auth.route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">ArticleRoute</span> <span class="kr">from</span> <span class="s2">&#34;./article.route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">router</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Route</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="k">new</span> <span class="nx">AuthRoute</span><span class="p">(),</span> </span></span><span class="line"><span class="cl"> <span class="k">new</span> <span class="nx">ArticleRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">]</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="4"> <li>改寫 src/app.ts</li> </ol> <h5 id="srcappts-5">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">router</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;./routes/router&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">app</span>: <span class="kt">express.Application</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">json</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">urlencoded</span><span class="p">({</span> <span class="nx">extended</span>: <span class="kt">false</span> <span class="p">}));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// load router </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">route</span> <span class="k">of</span> <span class="nx">router</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">route</span><span class="p">.</span><span class="nx">getRouter</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">app</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="前綴-prefix">前綴 Prefix</h2> <p>同一個 route 檔案常常會有相同的 prefix url，例如說 auth route 可能會有：</p> <ul> <li>POST auth/login</li> <li>POST auth/logout</li> <li>POST auth/forgetPassword</li> <li>&hellip;</li> </ul> <ol> <li>我們在 Route class 中加入一個新的資料成員 <code>prefix</code>，用來設定每個 route 的前綴網址：</li> </ol> <h5 id="srcroutesroutets-1">src/routes/route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Router</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">abstract</span> <span class="kr">class</span> <span class="nx">Route</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">router</span> <span class="o">=</span> <span class="nx">Router</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="kr">abstract</span> <span class="nx">setRoutes</span><span class="p">()</span><span class="o">:</span> <span class="k">void</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">prefix</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">&#39;/&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">public</span> <span class="nx">getRouter() {</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">public</span> <span class="nx">getPrefix() {</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">prefix</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">Route</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>在各個 Route 的建構子中修改它：</li> </ol> <h5 id="srcroutesauthroutets-1">src/routes/auth.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/AuthController&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AuthRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">authController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AuthController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">=</span> <span class="s1">&#39;/auth&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">authController</span><span class="p">.</span><span class="nx">echo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">AuthRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="srcroutesarticleroutets-1">src/routes/article.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">ArticalController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/ArticalController&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">ArticleRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">articalController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ArticalController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">=</span> <span class="s1">&#39;/articles&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/articles&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">articalController</span><span class="p">.</span><span class="nx">getArticlesPage</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">ArticleRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>最後，在 app.ts 中，載入 router 時加入 prefix 的設定：</li> </ol> <h5 id="srcappts-6">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">router</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;./routes/router&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">app</span>: <span class="kt">express.Application</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">json</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">urlencoded</span><span class="p">({</span> <span class="nx">extended</span>: <span class="kt">false</span> <span class="p">}));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// load router </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">route</span> <span class="k">of</span> <span class="nx">router</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">route</span><span class="p">.</span><span class="nx">getPrefix</span><span class="p">(),</span> <span class="nx">route</span><span class="p">.</span><span class="nx">getRouter</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">app</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來，原本是 <code>/login</code> 的 url，在加上 prefix 之後，就會變成 <code>/auth/login</code>，而其他在 AuthRoute 定義的 url 也都會變成 <code>/auth/*</code>、在 ArticleRoute 定義的 url 也都會變成 <code>/articles/*</code>。</p> <hr> <h2 id="middleware">Middleware</h2> <p>在 Express 中，有三種可以嵌套 middleware 的方式：</p> <ul> <li>應用到單一 url</li> <li>應用到單一 route 檔案</li> <li>全域使用，每個請求都會經過這個 middleware</li> </ul> <p>我們先寫一個簡單的 middleware，他只看請求的 header 裡面有沒有 Authorization，若沒有的話會回傳 status code 401：</p> <h5 id="srcmiddlewareauthmiddlewarets">src/middleware/AuthMiddleware.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">AuthMiddleware</span><span class="p">(</span><span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">req</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s1">&#39;Authorization&#39;</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">401</span><span class="p">).</span><span class="nx">send</span><span class="p">(</span><span class="s1">&#39;unauthorized&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="套用在單一-url">套用在單一 url</h3> <p>若你想套用在單一 url，只需要放在 <code>router.METHOD</code> 的第二個參數即可：</p> <h5 id="srcroutesauthroutets-2">src/routes/auth.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/AuthController&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthMiddleware</span> <span class="kr">from</span> <span class="s2">&#34;../middleware/AuthMiddleware&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AuthRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">authController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AuthController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">=</span> <span class="s1">&#39;/auth&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="nx">AuthMiddleware</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">authController</span><span class="p">.</span><span class="nx">echo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">AuthRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="套用在單一-route-檔案">套用在單一 route 檔案</h3> <p>套用在單一 route 檔案，則在該 route class 的建構子加入 (<strong>必須在 setRoutes() 之前</strong>)：</p> <h5 id="srcroutesauthroutets-3">src/routes/auth.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/AuthController&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthMiddleware</span> <span class="kr">from</span> <span class="s2">&#34;../middleware/AuthMiddleware&#34;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AuthRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">authController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AuthController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">=</span> <span class="s1">&#39;/auth&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">AuthMiddleware</span><span class="p">);</span> <span class="c1">// 必須在 setRoutes() 之前 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">authController</span><span class="p">.</span><span class="nx">echo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">AuthRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="全域使用">全域使用</h3> <p>全域使用的話，就在 app.ts 裡面加上：</p> <h5 id="srcappts-7">src/app.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">express</span> <span class="kr">from</span> <span class="s1">&#39;express&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">router</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;./routes/router&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthMiddleware</span> <span class="kr">from</span> <span class="s2">&#34;../middleware/AuthMiddleware&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">app</span>: <span class="kt">express.Application</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">json</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">urlencoded</span><span class="p">({</span> <span class="nx">extended</span>: <span class="kt">false</span> <span class="p">}));</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">AuthMiddleware</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// load router </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">route</span> <span class="k">of</span> <span class="nx">router</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">route</span><span class="p">.</span><span class="nx">getPrefix</span><span class="p">(),</span> <span class="nx">route</span><span class="p">.</span><span class="nx">getRouter</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">app</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="validator">Validator</h2> <p>若要驗證 Request body 或 query string 的內容，建議可以使用 <a class="link" href="https://www.npmjs.com/package/express-validator" target="_blank" rel="noopener" >express-validator</a> 套件，裡面有各式各樣的驗證用 middleware 可供使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install express-validator @types/express-validator </span></span></code></pre></td></tr></table> </div> </div><p>假設我們的登入表單需要有 username 和 password 兩個欄位，且最少要有四個字。</p> <ol> <li>我們能夠將這個驗證寫成 request 檔案：</li> </ol> <h5 id="srcrequestsauthrequestts">src/requests/AuthRequest.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">check</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express-validator&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">showApiError</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;../middleware/AuthMiddleware&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">loginRequest</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="nx">check</span><span class="p">(</span><span class="s1">&#39;username&#39;</span><span class="p">).</span><span class="nx">exists</span><span class="p">().</span><span class="nx">isLength</span><span class="p">({</span><span class="nx">min</span>: <span class="kt">4</span><span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">check</span><span class="p">(</span><span class="s1">&#39;password&#39;</span><span class="p">).</span><span class="nx">exists</span><span class="p">().</span><span class="nx">isLength</span><span class="p">({</span><span class="nx">min</span>: <span class="kt">4</span><span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">showApiError</span> </span></span><span class="line"><span class="cl"><span class="p">];</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>改寫 AuthMiddleware ：</li> </ol> <h5 id="srcmiddlewareauthmiddlewarets-1">src/middleware/AuthMiddleware.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">validationResult</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;express-validator&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">showApiError</span><span class="p">(</span><span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">errors</span> <span class="o">=</span> <span class="nx">validationResult</span><span class="p">(</span><span class="nx">req</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">errors</span><span class="p">.</span><span class="nx">isEmpty</span><span class="p">())</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">400</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">errors</span>: <span class="kt">errors.array</span><span class="p">()</span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>showApiError</strong> 是為了在有 input 錯誤發生時，能夠回傳對應的錯誤訊息而使用的 middleware，如果沒有它的話，validator 不會回傳錯誤訊息。</p> <ol start="3"> <li>接著我們在 auth route class 裡面載入這個 request：</li> </ol> <h5 id="srcroutesauthroutets-4">src/routes/auth.route.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AuthController</span> <span class="kr">from</span> <span class="s2">&#34;../controllers/AuthController&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Route</span> <span class="kr">from</span> <span class="s2">&#34;./route&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">loginRequest</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">&#34;../requests/AuthRequest&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AuthRoute</span> <span class="kr">extends</span> <span class="nx">Route</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">private</span> <span class="nx">authController</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AuthController</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">=</span> <span class="s1">&#39;/auth&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setRoutes</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">protected</span> <span class="nx">setRoutes() {</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="nx">loginRequest</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">authController</span><span class="p">.</span><span class="nx">echo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">AuthRoute</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來 POST /login 的請求就會驗證 request body，當我的 username 輸入太短時，會得到以下錯誤：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;errors&#34;</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;value&#34;</span><span class="p">:</span> <span class="s2">&#34;123&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;msg&#34;</span><span class="p">:</span> <span class="s2">&#34;Invalid value&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;param&#34;</span><span class="p">:</span> <span class="s2">&#34;username&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;location&#34;</span><span class="p">:</span> <span class="s2">&#34;body&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>因為 request 其實就是 middleware 的陣列，因此若要嵌套其他 middleware 時，使用 Array merge 即可。</p> <hr>https://blog.wayne-project.com/2023-02-17/js-about-this/Fri, 17 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-17/js-about-this/<img src="https://live.staticflickr.com/65535/52694000500_81babf36e6_o.jpg" alt="Featured image of post 【Javascript】整理關於 this 的指向" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/this" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://kuro.tw/posts/2017/10/12/What-is-THIS-in-JavaScript-%E4%B8%8A/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://shubo.io/javascript-this/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.techbridge.cc/2019/02/23/javascript-this/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10311147" target="_blank" rel="noopener" >參考網站</a></p> <p>在 JavaScript 中，「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關，因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的，把握一個簡單原則就可以知道 this 到底是誰，最後統整各個 this 的指向 😁</p> <p>講解 this 的文章已經超級無敵多了，而且每一篇都寫得很不錯，之前看完 <a class="link" href="https://kuro.tw/posts/2017/10/12/What-is-THIS-in-JavaScript-%E4%B8%8A/" target="_blank" rel="noopener" >What&rsquo;s THIS in JavaScript?</a> 系列之後覺得講解的很完整，若是沒有把握自己能夠講得更清楚或是以不同的角度切入，似乎就沒必要再寫一篇文章；</p> <p>若是想要「完全」搞懂 this，要付出的成本可能比你想像中要大得多。</p> <p>這裡所說的「完全」指的是無論在任何情況下，你都有辦法講出為什麼 this 的值是這樣，直接給大家一個範例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//範例1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="c1">//範例2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">((</span><span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span><span class="p">)());</span> </span></span><span class="line"><span class="cl"><span class="c1">//範例3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">((</span><span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span><span class="p">)());</span> </span></span><span class="line"><span class="cl"><span class="c1">//範例4 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">((</span><span class="kc">false</span> <span class="o">||</span> <span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span><span class="p">)());</span> </span></span><span class="line"><span class="cl"><span class="c1">//範例5 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">((</span><span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span><span class="p">,</span> <span class="nx">foo</span><span class="p">.</span><span class="nx">bar</span><span class="p">)());</span> </span></span></code></pre></td></tr></table> </div> </div><p>你能答的出來嗎？如果不行的話，代表你沒有「完全」懂 this。要完全懂 this 之所以要付出的成本很大，就是因為「完全懂 this」指的就是「<strong>熟記 ECAMScript 規範</strong>」。this 的值是什麼不是我們憑空想像的，其實背後都有完整的定義，而那個定義就是所謂的 ECMAScript 規範，你必須先搞懂這個規範，才有可能完全理解 this 在每個情況下所指涉的對象。</p> <p>若是你真的很想完全搞懂，推薦你這一篇：<a class="link" href="https://github.com/mqyqingfeng/Blog/issues/7" target="_blank" rel="noopener" >JavaScript 深入之从 ECMAScript 规范解读 this</a>，我上面的範例就是從這一篇拿來的，想看解答、想理解為什麼的話可以去看這一篇。</p> <p>本篇教的方法，不會讓你把 this 完全搞懂，上面那五個範例你可能會答錯，但基本的題目你依舊可以解的出來，此文的目的是希望提供一個不同的角度來看 this，從為什麼會有 this 下手，再用一套規則來解釋 this 的值，至少讓你不再對 this 有誤解，也會知道一些常見的情境底下 this 到底是什麼。</p> <hr> <h2 id="從物件導向開始談-this">從物件導向開始談 this</h2> <blockquote> <p>若是你對 JavaScript 的物件導向完全沒概念，你可以先補完相關基礎，並且看完這篇：<a class="link" href="https://github.com/aszx87410/blog/issues/18" target="_blank" rel="noopener" >該來理解 JavaScript 的原型鍊了</a>）</p></blockquote> <p>如果你有寫過其他程式語言，你就知道 this 從來都不是一件什麼困難的事。它代表的就是在物件導向裡面，那個 instance 本身。</p> <p>舉個例子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">Car</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">getName</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myCar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Car</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">myCar</span><span class="p">.</span><span class="nx">setName</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">myCar</span><span class="p">.</span><span class="nx">getName</span><span class="p">())</span> <span class="c1">// hello </span></span></span></code></pre></td></tr></table> </div> </div><p>在上面我們宣告了一個 class <code>Car</code>，寫了 setName 跟 getName 兩個方法，在裡面用 <code>this.name</code> 來取放這個 instance 的屬性。</p> <p>為什麼要這樣寫？因為這是唯一的方法，不然你要把 name 這個屬性存在哪裡？沒有其他地方讓你存了。所以 this 的作用在這裡是顯而易見的，所指到的對象就是那個 <code>instance 本身</code>。</p> <p>以上面的範例來說，<code>myCar.setName('hello')</code>，所以 this 就會是 <code>myCar</code>。在物件導向的世界裡面，this 的作用就是這麼單純。</p> <p>或者換句話說：</p> <p><strong>一但脫離了物件導向，其實 this 就沒有什麼太大的意義</strong></p> <p>假設今天 this 只能在 class 裡面使用，那應該就不會有任何問題對吧？你有看過其他程式語言像是寫 Java 或是 C++ 的人在抱怨說 this 很難懂嗎？沒有，因為 this 的作用很單純。</p> <p>那問題是什麼？問題就是在 JavaScript 裡面，你在<strong>任何地方都可以存取到 this</strong>。所以在 JavaScript 裡的 this 跟其他程式語言慣用的那個 this 有了差異，這就是為什麼 this 難懂的原因。</p> <p>儘管 this 的定義不太一樣，但我認為本質上還是很類似的。要理解 this 的第一步就是告訴自己：「<strong>一但脫離了物件，就不太需要關注 this 的值，因為沒什麼意義</strong>」</p> <hr> <h2 id="沒什麼太大意義的-this">沒什麼太大意義的 this</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>this 的值會是什麼？</p> <p>延續我們前面所講的，在這種情況下我會跟你說 this 沒有任何意義，而且你千萬不要想成 this 會指到 hello 這個 function，沒有這種事。</p> <p>只要記得我前面跟你說的：「<strong>脫離了物件，this 的值就沒什麼意義</strong>」。</p> <p>在這種很沒意義的情況下，this 的值在瀏覽器底下就會是 <strong>window</strong>，在 node.js 底下會是 <strong>global</strong>，如果是在嚴格模式(strict)，this 的值就會是 <strong>undefined</strong>。</p> <p>這個規則應該滿好記的，幫大家重新整理一下：</p> <ol> <li>嚴格模式(strict)底下就都是 <strong>undefined</strong></li> <li>非嚴格模式，瀏覽器底下是 <strong>window</strong></li> <li>非嚴格模式，node.js 底下是 <strong>global</strong></li> </ol> <p>這個就是你在其他文章看到的「<strong>預設綁定</strong>」，但我在這篇不打算用任何專有名詞去談 this。我認為不用這些名詞也不會妨礙你的理解，甚至還有可能讓你更好理解。我也不是說專有名詞不重要，是說可以先把概念學起來，再回過頭來補專有名詞。</p> <p>一但脫離了物件，this 的值就沒什麼意義，在沒意義的情況底下就會有個預設值，而預設值也很好記，嚴格模式就是 <strong>undefined</strong>，非嚴格模式底下就是<strong>全域物件</strong>。</p> <hr> <h2 id="更改-this-的值">更改 this 的值</h2> <p>僅管 this 可能有預設的值，但我們可以透過一些方法來改它。這改的方法也很簡單，一共有三種。</p> <p>前兩種超級類似，叫做 <code>call</code> 跟 <code>apply</code>，這兩種都是能夠呼叫 fucntion 的函式，我舉一個例子給你看比較好懂：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="s1">&#39;use strict&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="c1">// undefined 1 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">hello</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="kc">undefined</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="c1">// undefined 1 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">hello</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">undefined</span><span class="p">,</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">])</span> <span class="c1">// undefined 1 2 </span></span></span></code></pre></td></tr></table> </div> </div><p>我們有一個叫做 hello 的函式，會 console.log 出 this 的值以及兩個參數。在我們呼叫 <code>hello(1, 2)</code> 的時候，因為是嚴格模式所以 this 是 <code>undefined</code>，而 a 跟 b 就是 1 跟 2。</p> <p>當我們呼叫 <code>hello.call(undefined, 1, 2)</code> 的時候，我們先忽略第一個參數不談，你可以發現他其實跟 <code>hello(1, 2)</code> 是一樣的。</p> <p>而 apply 的差別只在於他要傳進去的參數是一個 <strong>array</strong>，所以上面這三種呼叫 function 的方式是等價的，一模一樣。除了直接呼叫 function 以外，你也可以用 call 或是 apply 去呼叫，差別在於傳參數的方式不同。</p> <p>call 跟 apply 的差別就是這麼簡單，一個跟平常呼叫 function 一樣，一個用 array 包起來。</p> <p>那我們剛剛忽略的第一個參數到底是什麼呢？</p> <p>你可能已經猜到了，就是 this 的值！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="s1">&#39;use strict&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="s1">&#39;yo&#39;</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="c1">// yo 1 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">hello</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="s1">&#39;hihihi&#39;</span><span class="p">,</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">])</span> <span class="c1">// hihihi 1 2 </span></span></span></code></pre></td></tr></table> </div> </div><p>就是如此簡單，你第一個參數傳什麼，裡面 this 的值就會是什麼。儘管原本已經有 this，也依然會被這種方法給覆蓋掉：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">Car</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myCar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Car</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">myCar</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// myCar instance </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">myCar</span><span class="p">.</span><span class="nx">hello</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="s1">&#39;yaaaa&#39;</span><span class="p">)</span> <span class="c1">// yaaaa </span></span></span></code></pre></td></tr></table> </div> </div><p>原本 this 的值應該要是 myCar 這個 instance，可是卻被我們在使用 call 時傳進去的參數給覆蓋掉了。</p> <p>除了以上兩種以外，還有最後一種可以改變 this 的方法：<code>bind</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="s1">&#39;use strict&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myHello</span> <span class="o">=</span> <span class="nx">hello</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;my&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">myHello</span><span class="p">()</span> <span class="c1">// my </span></span></span></code></pre></td></tr></table> </div> </div><p>bind 會回傳一個新的 function，在這邊我們把 hello 這個 function 用 my 來綁定，所以最後呼叫 myHello() 時會輸出 <code>my</code>。</p> <p>以上就是三種可以改變 this 的值的方法。你可能會好奇如果我們把 call 跟 bind 同時用會怎樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="s1">&#39;use strict&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myHello</span> <span class="o">=</span> <span class="nx">hello</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;my&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">myHello</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="s1">&#39;call&#39;</span><span class="p">)</span> <span class="c1">// my </span></span></span></code></pre></td></tr></table> </div> </div><p>答案是<strong>不會改變</strong>，一但 bind 了以後值就<strong>不會改變了</strong>。</p> <p>這邊還要特別提醒的一點是在非嚴格模式底下，無論是用 call、apply 還是 bind，你傳進去的如果是 primitive 都會被轉成 object，舉例來說：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="mi">123</span><span class="p">)</span> <span class="c1">// [Number: 123] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">myHello</span> <span class="o">=</span> <span class="nx">hello</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;my&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">myHello</span><span class="p">()</span> <span class="c1">// [String: &#39;my&#39;] </span></span></span></code></pre></td></tr></table> </div> </div><p>詳細可以參考我另一篇文章 - 「<a class="link" href="https://blog.wayne-project.com/2022-11-09/js-call-apply-bind/" target="_blank" rel="noopener" >使用 bind、call、apply 改變 this 指向的對象</a>」，幫大家做個中場總結：</p> <ol> <li>在物件以外的 this 基本上沒有任何意義，硬要輸出的話會給個預設值</li> <li>可以用 call、apply 與 bind 改變 this 的值</li> </ol> <hr> <h2 id="物件中的-this">物件中的 this</h2> <p>最前面我們示範了在物件導向 class 裡面的 this，但在 JavaScript 裡面還有另外一種方式也是物件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// 1 </span></span></span></code></pre></td></tr></table> </div> </div><p>這種跟一開始的物件導向範例不太一樣，這個範例是<strong>直接創造了一個物件而沒有透過 class</strong>，所以你也不會看到 new 這個關鍵字的存在。</p> <p>再繼續往下講之前，要大家先記住一件事情：</p> <p><strong>this 的值跟作用域跟程式碼的位置在哪裡完全無關，只跟「你如何呼叫」有關</strong></p> <p>這個機制恰巧跟作用域相反，不確定我在說什麼的可以先看這篇：<a class="link" href="https://github.com/aszx87410/blog/issues/35" target="_blank" rel="noopener" >所有的函式都是閉包：談 JS 中的作用域與 Closure</a>。</p> <p>舉個簡單的例子來幫大家複習一下作用域：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">10</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="s1">&#39;ojb&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> <span class="c1">// 10 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello2</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">200</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> <span class="c1">// 10 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">()</span> <span class="c1">// 10 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// 10 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj</span><span class="p">.</span><span class="nx">hello2</span><span class="p">()</span> <span class="c1">// 10 </span></span></span></code></pre></td></tr></table> </div> </div><p>無論我在哪裡，無論我怎麼呼叫 test 這個 function，他印出來的 a 永遠都會是<strong>全域變數的那個 a</strong>，因為作用域就是這樣運作，test 在自己的作用域裡面找不到 a 於是往上一層找，而上一層就是 <code>global scope</code>，這跟你在哪裡呼叫 test 一點關係都沒有。test 這個 function 在「定義」的時候就把 scope 給決定好了。</p> <p>但 this 卻是完全相反，this 的值會根據你怎麼呼叫它而變得不一樣，還記得我們剛講過的 call、apply 跟 bind 嗎？這就是其中一個範例，你可以用不同的方式去呼叫 function，讓 this 的值變得不同。</p> <p>所以你要很清楚知道這是兩種完全不同的運行模式，一個是<strong>靜態（作用域）</strong>、一個是<strong>動態（this）</strong>。要看作用域，就看這個函式在程式碼的「<strong>哪裡</strong>」；要看 this，就看這個函式「<strong>怎麽</strong>」被呼叫。</p> <p>舉一個最常見的範例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">hey</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span> </span></span><span class="line"><span class="cl"><span class="nx">hey</span><span class="p">()</span> <span class="c1">// undefined </span></span></span></code></pre></td></tr></table> </div> </div><p>明明就是同一個函式，怎麼第一次呼叫時 this.value 是 1，第二次呼叫時就變成 undefined 了？</p> <p>記住我剛說的話：「<strong>要看 this，就看這個函式『怎麽』被呼叫</strong>」。</p> <p>再繼續往下講之前，先教大家一個最重要的小撇步，是我從 <a class="link" href="https://zhuanlan.zhihu.com/p/23804247" target="_blank" rel="noopener" >this 的值到底是什么？一次说清楚</a>學來的，是一個很方便的方法。</p> <p>其實我們可以把所有的 function call，都轉成利用 call 的形式來看，以上面那個例子來說，會是這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="c1">// 轉成 call -&gt; 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">hey</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span> </span></span><span class="line"><span class="cl"><span class="nx">hey</span><span class="p">()</span> <span class="c1">// undefined </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">hey</span><span class="p">.</span><span class="nx">call</span><span class="p">()</span> <span class="c1">// 轉成 call -&gt; undefined </span></span></span></code></pre></td></tr></table> </div> </div><p>而規則就是你在呼叫 function 以前是什麼東西，你就把它放到後面去。所以 <code>obj.hello()</code> 就變成了 <code>obj.hello.call(obj)</code>，<code>hey()</code> 前面沒有東西，所以就變成了<code>hey.call()</code>。</p> <p>轉成這樣子的形式之後，還記得 call 的第一個參數就是 this 嗎？所以你就能立刻知道 this 的值是什麼了！</p> <p>舉一個更複雜的例子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">inner</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">value</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj2</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">inner</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">hello</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">inner</span><span class="p">.</span><span class="nx">hello</span> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">inner</span><span class="p">.</span><span class="nx">hello</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">inner</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">obj2</span><span class="p">.</span><span class="nx">hello</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>你可以不要往下拉，先想一下那三個 function 會各自印出什麼值。</p> <p>接著我要公布解答了，只要轉成我們上面講的那種形式就好：</p> <p>. . . . . . . . . .</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">inner</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// obj.inner.hello.call(obj.inner) =&gt; 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj2</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// obj2.hello.call(obj2) =&gt; 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// hello.call() =&gt; undefined </span></span></span></code></pre></td></tr></table> </div> </div><p>特別講一下最後一個 hello 因為沒有傳東西進去，所以是預設綁定，在非嚴格模式底下是 window，所以會 log 出 <code>window.value</code> 也就是 undefined。</p> <p><strong>只要你把 function 的呼叫轉成用 call 的這種形式，就很容易看出來 this 的值是什麼。</strong></p> <p>這也是我前面一直在提的：「<strong>要看 this，就看這個函式『怎麽』被呼叫</strong>」，而你要看怎麼被呼叫的話，就轉成 call 的形式就行了。</p> <p>學到這邊，其實你看見九成與 this 相關的題目你都會解了，不信的話我們來試試看（為了可讀性沒有防雷空行，所以請自行拉到程式碼就好，再往下拉就會是解答了）：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">hello</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">hello</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">hello</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">a</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">hello</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>只要按照我們之前說的，用 call 來轉換一下形式就好：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">()</span> <span class="c1">// hello.call() =&gt; window（瀏覽器非嚴格模式） </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">a</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// a.hello.call(a) =&gt; a </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">b</span><span class="p">.</span><span class="nx">hello</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">直接用</span> <span class="nx">apply</span><span class="err">，</span><span class="nx">所以就是</span> <span class="nx">a</span> </span></span></code></pre></td></tr></table> </div> </div><p>再來一題比較不一樣的，要看仔細囉（假設在瀏覽器底下跑，非嚴格模式）：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">test</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">fn</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>這題的話如果你搞錯，一定是你忘記了我們最重要的一句話：</p> <p><strong>要看 this，就看這個函式「怎麽」被呼叫</strong></p> <p>我們怎麼呼叫 test 的？ <code>test()</code></p> <p>所以就是 <code>test.call()</code> 就是預設綁定，this 的值就會是 <code>window</code>，所以 <code>this.x</code> 會是 10，因為在第一行宣告了一個全域變數 x = 10。</p> <p>寫到這裡，再來幫大家做個回顧，避免大家忘記前面在講什麼：</p> <ol> <li>脫離物件的 this 基本上沒有任何意義</li> <li>沒有意義的 this 會根據嚴格模式以及環境給一個預設值</li> <li>嚴格模式底下預設就是 undefined，非嚴格模式在瀏覽器底下預設值是 window</li> <li>可以用 call、apply 與 bind 改變 this 的值</li> <li>要看 this，就看這個函式「怎麽」被呼叫</li> <li>可以把 a.b.c.hello() 看成 a.b.c.hello.call(a.b.c)，以此類推，就能輕鬆找出 this 的值</li> </ol> <hr> <h2 id="不合群的箭頭函式">不合群的箭頭函式</h2> <p>原本有關 this 的部分應該講到上面就要結束了，但 ES6 新增的箭頭函式卻有不太一樣的運作方式。它本身並沒有 this，所以「<strong>在宣告它的地方的 this 是什麼，它的 this 就是什麼</strong>」，好，我知道這聽起來超難懂，我們來看個範例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 這邊印出來的 this 是什麼，test 的 this 就是什麼 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 就是我說的： 在宣告它的地方的 this 是什麼，test 的 this 就是什麼 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">test</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span><span class="p">()</span> <span class="c1">// 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">hello</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">hello</span> </span></span><span class="line"><span class="cl"><span class="nx">hello</span><span class="p">()</span> <span class="c1">// undefined </span></span></span></code></pre></td></tr></table> </div> </div><p>我們在 hello 這個 function 裡面宣告了 test 這個箭頭函式，所以 <strong>hello 的 this 是什麼，test 的 this 就是什麼</strong>。</p> <p>所以當我們呼叫 <code>obj.hello()</code> 時，test 的 this 就會是 obj；<code>hello()</code> 的時候 test 的 this 就會是全域物件。這規則其實都跟之前一樣，差別只有在於說<strong>箭頭函式的 this 不是自己決定的，而是取決於在宣告時那個地方的 this</strong>。</p> <p>如果你想看更複雜的範例，可以參考這篇：<a class="link" href="https://www.casper.tw/javascript/2017/12/21/javascript-es6-arrow-function/" target="_blank" rel="noopener" >鐵人賽：箭頭函式 (Arrow functions)</a>。</p> <hr> <h2 id="實際應用react">實際應用：React</h2> <p>你有寫過 React 的話，就會知道裡面其實有些概念今天的教學可以派上用場，舉例來說，我們必須在 constructor 裡面先把一些 method 給 bind 好，你有想過是為什麼嗎？</p> <p>先來看看如果沒有 bind 的話會發生什麼事：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">App</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">onClick</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;click&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">click</span><span class="o">&lt;</span><span class="err">/button&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>最後 log 出來的值會是 undefined，為什麼？這細節就要看 React 的原始碼了，只有 React 知道實際上在 call 我們傳下去的 onClick 函式時是怎麼呼叫的。</p> <p>所以為什麼要 bind？為了確保我們在 <code>onClick</code> 裡面拿到的 this 永遠都是這個 instance 本身。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">App</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 所以當你把 this.onClick 傳下去時，就已經綁定好了 this </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 而這邊的 this 就是這個 component </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">onClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">onClick</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;click&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">click</span><span class="o">&lt;</span><span class="err">/button&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>還有另外一種方式是用箭頭函式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">App</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}}</span><span class="o">&gt;</span><span class="nx">click</span><span class="o">&lt;</span><span class="err">/button&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>為什麼箭頭函式也可以？因為我們前面提過，「<strong>在宣告它的地方的 this 是什麼，它的 this 就是什麼</strong>」，所以這邊 log 出來的 this 就會是 render 這個 function 的 this，而 render 的 this 就是這個 component。</p> <p>如果你有點忘記了，可以把文章拉到最上面去，因為最上面我們就已經提過這些了。</p> <hr> <h2 id="總結">總結</h2> <h3 id="默認綁定的規則">默認綁定的規則</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="c1">// window, strict 模式下返回 undefined </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> <span class="c1">// 純粹的調用 (Simple call) ==&gt; window.test() 指向 window </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="隱式綁定規則-誰呼叫就指向誰">隱式綁定規則 (誰呼叫就指向誰)</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// obj =&gt; obj 呼叫了 foo，因此 foo 裡的 this 指向為 obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// 返回 obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">test</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> <span class="c1">// obj 呼叫了 foo, 但 test 並不是由 obj呼叫的，而是純粹調用，因此 this 指向 window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="iife立即執行函式">IIFE(立即執行函式)</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})();</span> <span class="c1">// 立即執行函式(IIFE)都屬於純粹調用，所以 this 的指向都是 window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="閉包">閉包</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">test</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()()</span> <span class="c1">// obj.foo() 的返回值為 test，因此該表達式 == test() 屬於純粹調用，因此 this 指向 window </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="變數賦值的情況">變數賦值的情況</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> <span class="c1">// ES6簡寫 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">bar</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span> <span class="c1">// obj.foo == foo，該表達式的結果是把 foo 的引用地址賦值給了 bar </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">bar</span><span class="p">()</span> <span class="c1">// 因此 bar == foo ，屬於純粹調用，this 的指向為 window </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="參數賦值的情況">參數賦值的情況</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">bar</span><span class="p">(</span><span class="nx">fn</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 將傳進來的 obj.foo == foo 賦值給形參 fn </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">fn</span><span class="p">()</span> <span class="c1">// == foo() 屬於純粹調用，因此 this 的指向為 window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 因此 this 的指向只需要關注函式最終是如何執行的即可 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">bar</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">)</span> <span class="c1">// obj.foo == foo 作為實參 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="阿里巴巴面試題">阿里巴巴面試題</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="mi">222</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="mi">111</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">say</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fun</span> <span class="o">=</span> <span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">fun</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="mi">333</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">say</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fun</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fun</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">say</span><span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">);</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">b</span><span class="p">.</span><span class="nx">say</span> <span class="o">=</span> <span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">say</span><span class="p">();</span> <span class="c1">// ? </span></span></span></code></pre></td></tr></table> </div> </div><p>答案：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="mi">222</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="mi">111</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">say</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fun</span> <span class="o">=</span> <span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">fun</span><span class="p">();</span> <span class="c1">// 222 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">();</span> <span class="c1">// 111 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="mi">333</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">say</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fun</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fun</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">say</span><span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">);</span> <span class="c1">// 222 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">b</span><span class="p">.</span><span class="nx">say</span> <span class="o">=</span> <span class="nx">a</span><span class="p">.</span><span class="nx">say</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">say</span><span class="p">();</span> <span class="c1">// 333 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="foreach-內的-this-指向">forEach 內的 this 指向</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span> <span class="o">:</span> <span class="s2">&#34;obj&#34;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="c1">// 在對應的 api 接口文檔中指明 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">arr</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">arr</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// 每次都輸出 obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">},</span> <span class="nx">obj</span><span class="p">)</span> <span class="c1">// 這裡的 obj 就是 arr.forEach 遍歷時的 this 指向 </span></span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">arr</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">(</span><span class="nx">currentValue</span><span class="p">[,</span> <span class="nx">index</span><span class="p">[,</span> <span class="nx">array</span><span class="p">]])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// your iterator </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}[,</span> <span class="nx">thisArg</span><span class="p">]);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 參數: </span></span></span><span class="line"><span class="cl"><span class="c1">// callback </span></span></span><span class="line"><span class="cl"><span class="c1">// 這個 callback 函式將會把 Array 中的每一個元素作為參數，帶進本 callback 函式裡，每個元素各執行一次，接收三個參數： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// currentValue </span></span></span><span class="line"><span class="cl"><span class="c1">// 代表目前被處理中的 Array 之中的那個元素。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// index (選擇性) </span></span></span><span class="line"><span class="cl"><span class="c1">// 代表目前被處理中的 Array 之中的那個元素的 index。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// array (選擇性) </span></span></span><span class="line"><span class="cl"><span class="c1">// 呼叫 forEach() 方法的那個 Array 本身，也就是上面語法中的 arr。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// thisArg (選擇性) </span></span></span><span class="line"><span class="cl"><span class="c1">// 執行 callback 回呼函式的 this（即參考之 Object）值。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// source: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="顯式綁定-callapplybind">顯式綁定: call、apply、bind</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// 打印 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">bar</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 以下三種方式都能改變 this 的指向，將 bar 函式 的 this 指向改為 obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">bar</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">bar</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">bar</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">obj</span><span class="p">)()</span> <span class="c1">// obj </span></span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">foo</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// Number {1} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">foo</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> <span class="c1">// this 指向 window </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">foo</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">undefined</span><span class="p">)</span> <span class="c1">// this 指向 window </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="建構式的顯式綁定實例">建構式的顯式綁定實例</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Product</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">price</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">price</span> <span class="o">=</span> <span class="nx">price</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">price</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">RangeError</span><span class="p">(</span><span class="s1">&#39;Cannot create product &#34;&#39;</span> <span class="o">+</span> <span class="nx">name</span> <span class="o">+</span> <span class="s1">&#39;&#34; with a negative price&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Food</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">price</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// new 後 this 的指向就是這個實例物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">Product</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">price</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">category</span> <span class="o">=</span> <span class="s1">&#39;food&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">Food</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Product</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Toy</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">price</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Product</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">price</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">category</span> <span class="o">=</span> <span class="s1">&#39;toy&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">Toy</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Product</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">cheese</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Food</span><span class="p">(</span><span class="s1">&#39;feta&#39;</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">cheese</span><span class="p">);</span> <span class="c1">// Food {name: &#39;feta&#39;, price: 5, category: &#39;food&#39;} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">fun</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Toy</span><span class="p">(</span><span class="s1">&#39;robot&#39;</span><span class="p">,</span> <span class="mi">40</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fun</span><span class="p">);</span> <span class="c1">// Toy {name: &#39;robot&#39;, price: 40, category: &#39;toy&#39;} </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="new-綁定">new 綁定</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="o">=</span><span class="s1">&#39;haewon&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">=</span><span class="mi">6</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="c1">// 這裡會打印 this </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">me</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="s1">&#39;pupu&#39;</span><span class="p">,</span> <span class="mi">12</span><span class="p">)</span> <span class="c1">// 打印 Person {name: &#39;pupu&#39;, age: 12}，this 的指向為實例化的物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">Person</span><span class="p">()</span> <span class="c1">// 打印 window; 同時 window.name 的值為 &#39;haewon&#39;; window.age 的值為 6 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="優先級">優先級</h3> <h4 id="顯式綁定--隱式綁定">顯式綁定 &gt; 隱式綁定</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj1</span> <span class="o">=</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="s1">&#39;obj1&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj2</span> <span class="o">=</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span><span class="s1">&#39;obj2&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// obj1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj2</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// obj2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">foo</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)</span> <span class="c1">// obj2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj2</span><span class="p">.</span><span class="nx">foo</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj1</span><span class="p">)</span> <span class="c1">// obj1 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="new-綁定--顯式綁定">new 綁定 &gt; 顯式綁定</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(</span><span class="nx">b</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">a</span> <span class="o">=</span> <span class="nx">b</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">bar</span> <span class="o">=</span> <span class="nx">foo</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">obj1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">bar</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj1</span><span class="p">.</span><span class="nx">a</span><span class="p">)</span> <span class="c1">// 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">bar_child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bar</span><span class="p">(</span><span class="mi">99</span><span class="p">)</span> <span class="c1">// new 將 this 的指向更改為 bar_child </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj1</span><span class="p">.</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">bar_child</span><span class="p">.</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// {a:99} </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="arrow-function-的-this-指向">Arrow function 的 this 指向</h3> <h4 id="物件中的巢狀函式">物件中的巢狀函式</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span> <span class="o">:</span> <span class="s1">&#39;obj&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">that</span><span class="p">);</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 也可以通過這種方式使 this 指向 obj 👇🏻 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">test</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="箭頭函式中的-this">箭頭函式中的 this</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="s1">&#39;obj&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">test</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> <span class="c1">// obj </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// =&gt; 箭頭函式內部沒有 this 指向，箭頭函式的 this 指向是由外層函式的作用域決定的 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="更改箭頭函式的-this-指向">更改箭頭函式的 this 指向</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">test</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">test</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="s1">&#39;obj1&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj2</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="s1">&#39;obj2&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">foo</span><span class="p">()()</span> <span class="c1">// 打印obj1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj2</span><span class="p">.</span><span class="nx">foo</span><span class="p">()()</span> <span class="c1">// 打印obj2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// =&gt; 默認綁定規則(純粹調用) 對箭頭函式無效，因為箭頭函式里面沒有 this </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="嘗試隱式綁定-this-指向">嘗試隱式綁定 this 指向</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="s1">&#39;obj1&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="o">:</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// =&gt; 隱式綁定 對箭頭函式無效 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="嘗試顯式綁定-this-指向">嘗試顯式綁定 this 指向</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">test</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">test</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="s1">&#39;obj1&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">foo</span><span class="p">()()</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">bar</span> <span class="o">=</span> <span class="nx">foo</span><span class="p">().</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj1</span><span class="p">)</span> <span class="c1">// window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// =&gt; 顯式綁定 對箭頭函式無效 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="new-運算子能否改變箭頭函式的-this-指向">new 運算子能否改變箭頭函式的 this 指向？</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">foo</span> <span class="o">=</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">test</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">foo</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 報錯 Uncaught TypeError: foo is not a constructor </span></span></span><span class="line"><span class="cl"><span class="c1">// =&gt; 箭頭函式不能作為建構式 </span></span></span><span class="line"><span class="cl"><span class="c1">// =&gt; 所有綁定規則對箭頭函式都不適用; 箭頭函式的 this 取決於父環境中的 this 指向; =&gt; 箭頭函式不存在 this </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="案例一">案例一</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="s1">&#39;我是 window 裡的 name&#39;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;obj1 的 name&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn1</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn2</span><span class="o">:</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn3</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn4</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj2</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="o">:</span> <span class="s1">&#39;obj2 的 name&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn1</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn1</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn2</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn2</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn3</span><span class="p">()();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn3</span><span class="p">().</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn3</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn4</span><span class="p">()()</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn4</span><span class="p">().</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn4</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)();</span> <span class="c1">// ? </span></span></span></code></pre></td></tr></table> </div> </div><p>答案：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn1</span><span class="p">();</span> <span class="c1">// &#39;obj1 的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn1</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// &#39;obj2 的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn2</span><span class="p">();</span> <span class="c1">// &#39;我是 window 裡的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn2</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// &#39;我是 window 裡的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn3</span><span class="p">()();</span> <span class="c1">// &#39;我是 window 裡的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn3</span><span class="p">().</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// &#39;obj2 的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn3</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)();</span> <span class="c1">// &#39;我是 window 裡的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn4</span><span class="p">()()</span> <span class="c1">// &#39;obj1 的 name&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn4</span><span class="p">().</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> <span class="c1">// obj1 的 name </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj1</span><span class="p">.</span><span class="nx">fn4</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)();</span> <span class="c1">// obj2 的 name </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="案例二">案例二</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Foo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">getName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">Foo</span><span class="p">.</span><span class="nx">getName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">Foo</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">getName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">getName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">getName</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 請寫出輸出結果: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">Foo</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">Foo</span><span class="p">().</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="k">new</span> <span class="nx">Foo</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">new</span> <span class="nx">Foo</span><span class="p">().</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">new</span> <span class="k">new</span> <span class="nx">Foo</span><span class="p">().</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// ? </span></span></span></code></pre></td></tr></table> </div> </div><p>答案：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">Foo</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 4 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">Foo</span><span class="p">().</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="k">new</span> <span class="nx">Foo</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">new</span> <span class="nx">Foo</span><span class="p">().</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">new</span> <span class="k">new</span> <span class="nx">Foo</span><span class="p">().</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// 3 </span></span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2023-02-14/js-navigator-share-api/Tue, 14 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-14/js-navigator-share-api/<img src="https://live.staticflickr.com/65535/52688657055_cb1b8e38df_o.jpg" alt="Featured image of post 用 Navigator.share() API 實作分享功能" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p><a class="link" href="https://www.youtube.com/watch?v=zJQNQmE6_UI" target="_blank" rel="noopener" >參考網址</a><br> <a class="link" href="https://web.dev/web-share/" target="_blank" rel="noopener" >參考網址</a><br> <a class="link" href="https://pjchender.blogspot.com/2019/11/webapis-web-share-api-navigatorshare.html" target="_blank" rel="noopener" >參考網址</a><br> <a class="link" href="https://huanyichuang.com/blog/navigator-share-api/" target="_blank" rel="noopener" >參考網址</a><br> <a class="link" href="https://shubo.io/web-share-api/" target="_blank" rel="noopener" >參考網址</a></p> <p>Web Share API 是現代瀏覽器提供的最新功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 <code>navigator.share()</code> 的使用方法。</p> <hr> <h2 id="web-share-api-是什麼">Web Share API 是什麼？</h2> <p>原生的 Android 和 iOS app 如果要做分享，通常會使用原生的分享介面，類似的介面相信大家一定不陌生：</p> <p><img src="https://live.staticflickr.com/65535/52688234706_78f43d8cdb_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然而手機網頁要達到一樣的效果就沒有那麼容易了，網頁的分享通常體驗會比原生 app 差一點，且如果要讓使用者用得習慣，可能得必須針對不同的平台去盡量模仿原生的介面，這種做法的實作成本相對是高的。這時候 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/share" target="_blank" rel="noopener" >Web Share API</a> 就能派上用場了！</p> <p><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/share" target="_blank" rel="noopener" >Web Share API</a> 是比較新的瀏覽器 API，可以讓使用者輕鬆地用作業系統原生的介面分享至其他 app、分享給你的朋友等；就像是使用原生 app 一樣。網頁端實作這隻 API，就等於同時實作了 <strong>Share to Facebook</strong>、<strong>Share to Twitter</strong>、<strong>Share to XXX&hellip;</strong> 等各種分享至第三方平台的功能了！</p> <blockquote> <p>另外 Google Chrome Developers 的<a class="link" href="https://www.youtube.com/watch?v=zJQNQmE6_UI" target="_blank" rel="noopener" >影片</a>也有對 Web Share API 簡單的介紹 (0:18 ~ 1:00)</p></blockquote> <hr> <h2 id="web-share-api-的使用限制">Web Share API 的使用限制</h2> <p>要使用 Web Share API 有幾個限制：</p> <ul> <li>你的網站必須支援 <strong>https</strong>。</li> <li>只能經由使用者所產生的事件觸發，例如 <strong>click</strong> 事件。</li> <li>能夠分享的種類有：<strong>文字</strong>、<strong>URLs</strong>、<strong>檔案</strong>。</li> </ul> <hr> <h2 id="navigatorshare">Navigator.share()</h2> <p><code>navigator.share()</code> 使用方法如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">share</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">navigator</span><span class="p">.</span><span class="nx">share</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;標題&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;文字描述&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://blog.wayne-project.com/&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;成功！&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;發生錯誤&#39;</span><span class="p">,</span> <span class="nx">error</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>首先我們要判斷瀏覽器是否支援這個功能，所以需要加上 <code>if (navigator.share) { // ... }</code> 的判斷。</p> <p>接著我們呼叫 <code>navigator.share()</code> function，它的參數是一個物件，支援 title、text、url 及 files 四個 key。</p> <p>最後這個 function 回傳值是一個 promise，所以我們可以分別對成功或是失敗的情況做額外處理。</p> <hr> <h2 id="canonical-url">Canonical URL</h2> <p>有個小細節需要注意，如果你的網站有<strong>不同的網址指向同樣的內容</strong>（例如：電腦版網頁 <a class="link" href="www.example.com" >www.example.com</a> 用手機瀏覽時會跳轉到手機版網頁 <a class="link" href="m.example.com" >m.example.com</a>），那麼你可能應該分享 <strong>canonical URL</strong> (標準版的 URL)，而不是 <strong>document.location.href</strong>。</p> <p>為什麼呢？因為如果你在手機上瀏覽這個網站，分享出去的會是 <a class="link" href="m.example.com" >m.example.com</a>，而如果手機版沒有做跳轉的話，桌機的使用者就會看到手機版的排版 (感覺這狀況在 FB 挺常見的&hellip;)。</p> <p>如何解決呢？一般來說，這種情況為了 SEO 的緣故會在 HTML head 裡面標記 <code>&lt;link rel=&quot;canonical href=&quot;xxxxx&quot;&gt;</code>，讓搜尋引擎不要重複 index。因此我們可以用幾行簡單的程式碼抓出 <strong>canonical URL</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">canonicalElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;link[rel=canonical]&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">canonicalElement</span> <span class="o">&amp;&amp;</span> <span class="nx">canonicalElement</span><span class="p">.</span><span class="nx">href</span> <span class="o">||</span> <span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">navigator</span><span class="p">.</span><span class="nx">share</span><span class="p">({</span> <span class="nx">url</span><span class="o">:</span> <span class="nx">url</span> <span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="瀏覽器支援度-browser-support">瀏覽器支援度 Browser Support</h2> <p>這是一個相對較新的標準，截至寫這篇文章為止 (2023 年 2 月)，從 <a class="link" href="https://caniuse.com/?search=navigator.share" target="_blank" rel="noopener" >Navigator Share API - caniuse.com</a> 可以看到目前支援 Web Share API 的瀏覽器只有 Safari、Edge、iOS Safari、Chrome for Android 與 Firefox for Android，並沒有受到廣泛地支持。</p> <p>雖然目前瀏覽器支援度不佳，不過很明顯 Web Share API 的使用情境主要集中在手機上，所以我個人認為只要做好 feature detection，搭配原本習慣的分享方式使用應該不成問題。</p> <hr> <h2 id="寫個範例">寫個範例</h2> <p>來看一下範例程式碼吧，也可以直接看 CodePen。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// navigator.share 會回傳一個 Promise </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 下面的欄位可以不用全部填寫，可以只分享網址，也可以只分享文字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">sharePromise</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">share</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s2">&#34;https://blog.wayne-project.com/2023-02-14/js-navigator-share-api/&#34;</span><span class="p">,</span> <span class="c1">// 要分享的 URL </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">title</span><span class="o">:</span> <span class="s2">&#34;Wayne&#39; blog&#34;</span><span class="p">,</span> <span class="c1">// 要分享的標題 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">text</span><span class="o">:</span> <span class="s2">&#34;偉恩的部落格文章好豐富阿&#34;</span> <span class="c1">// 要分享的文字內容 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><iframe height="300" style="width: 100%;" scrolling="no" title="Web Share API example" src="https://codepen.io/WJDesign/embed/MWqWeYM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/WJDesign/pen/MWqWeYM"> Web Share API example</a> by wjdesign (<a href="https://codepen.io/WJDesign">@WJDesign</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> <hr>https://blog.wayne-project.com/2023-02-14/what-is-nodejs/Tue, 14 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-14/what-is-nodejs/<img src="https://live.staticflickr.com/65535/52688618360_3d146e4e7b_o.png" alt="Featured image of post 簡單扼要的介紹什麼是 Node.js？" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } .text-center { text-align: center !important; } </style> <p>本文整理自我初學 Node.js 時的筆記，用於對 Node.js 這門語言有興趣的讀者簡單扼要的介紹 Node.js 是什麼，以及該如何學習這門語言。</p> <hr> <h2 id="什麼是-nodejs">什麼是 Node.js？</h2> <p>Node.js 是 Ryan Dahl 在 2009 年為了解決 Web 服務器<strong>高併發問題</strong>而開發的基於 Chrome V8 引擎的 JavaScript 運行時環境。</p> <p>從這個定義中，可以看到 Node.js 的三個關鍵特徵：</p> <ol> <li>目的：為了解決Web 服務器高並發問題。</li> <li>底層：使用的是 Chrome V8 引擎。</li> <li>本質：一個 Javascript 運行時環境(runtime environment)。</li> </ol> <p>因此，要搞清楚什麼是 Node.js，首先就要搞清楚以上三個關鍵特徵。</p> <h3 id="nodejs-三個關鍵特徵">Node.js 三個關鍵特徵</h3> <h4 id="為了解決-web-服務器高並發問題">為了解決 Web 服務器高並發問題</h4> <p>Ryan Dahl 在設計 Node.js 之前，一直致力於解決 Web 服務器<strong>高併發</strong>引起的性能問題，根據工作經驗，他認為性能問題的瓶頸在於<strong>阻塞的 I/O 操作</strong>。恰逢 Chrome 推出了高性能的 V8 引擎，Ryan Dahl 認為 JavaScript 天然的異步、事件委託機制以及 JavaScript 語言在服務端無歷史包袱的特性，非常適合通過異步流程控制的方式提升大型分佈式系統性能。於是 Node.js 應運而生。</p> <p>儘管現在 Node.js 已經被應用於各種各樣的場景。但是我們始終應該認識到，理解 Node.js 的<strong>異步流程控制原理</strong>才算是掌握了 Node.js 的核心。</p> <h4 id="chrome-v8-引擎">Chrome V8 引擎</h4> <p>Chrome 內核基於 WebKit，分為以下兩個引擎：</p> <ul> <li>渲染引擎： Web Core</li> <li>JavaScript 解釋引擎： JavaScript Core</li> </ul> <p>而 Google 由於不滿意 JavaScript Core 的性能，於是自主研發了性能更好的 V8 引擎予以取代。</p> <p>作為 JavaScript 的解釋引擎，V8 引擎的主要作用在於：</p> <ol> <li>解釋與編譯JavaScript；</li> <li>堆管理；</li> <li>處理內存垃圾回收；</li> <li>處理內存分配；</li> <li>&hellip;</li> </ol> <p>可以說，V8 引擎提供了一個高性能的 JavaScript 執行環境，因而 JavaScript 能夠有充足的底氣在各平台（瀏覽器，服務端，桌面端）運行。</p> <h4 id="javascript-運行時環境">Javascript 運行時環境</h4> <p>Node.js 既不是一門語言（JavaScript），也不是一個框架（React、Vue、Koa），而是一個 JavaScript 運行時環境(runtime environment)。</p> <p>那，什麼是 JavaScript 運行時環境(runtime environment) 呢？</p> <p>顧名思義，是一個可以運行 JavaScript 的環境。</p> <p>那麼這裡的環境是指什麼呢？主要包含以下兩個方面：</p> <ol> <li>提供了解釋，編譯 JavaScript 的底層能力。</li> <li>提供了一系列接口，使開發者可以通過 JavaScirpt 調用系統底層能力（例如網絡，文件讀寫等）。</li> </ol> <p>前者是由 Chrome V8 引擎提供的，而後者則是由一個底層由 C、C++ 編寫的高性能的事件驅動的異步 I/O 庫 <code>libuv</code> 所提供。</p> <h3 id="libuv">libuv</h3> <p><code>libuv</code> 是一個跨平台的事件驅動的<strong>異步 I/O 庫</strong>，為 Node 提供了 CPU 和操作系統層面的功能。</p> <p>我們知道不同的操作系統調度硬件的方式不同，CPU 的指令集也各有差異。<code>libuv</code> 則抹平了這一差異，通過名為 <code>Node Bindings</code> 的模塊，向用戶暴露了統一的系統操作接口。</p> <p>因此現在我們可以說，Node 實際上由兩部分組成：<code>Chrome V8 引擎</code>以及 <code>libuv</code>。這兩層隱藏在 <code>Node Bindings</code> 之下，而用戶面向 <code>Node Bindings</code> 進行編程。</p> <p>至此你應該理解了什麼是 Node.js。</p> <p>它是一個跨平台的 JavaScript 可執行環境，在這個環境中你可以使用 JavaScript 充分調動操作系統的能力，做你想做的任何事！</p> <hr> <h2 id="nodejs-的哲學">Node.js 的哲學</h2> <p>要充分的理解 Node.js，除了前文提到的異步流程控制原理之外，我們還需要了解下 Node.js 從創始到發展所彰顯的設計哲學，這有利於我們更喜歡 Node.js 生態。</p> <p>我認為 Node.js 有以下三大特點：</p> <h3 id="開放">開放</h3> <p>Node.js 在設計之初，就堅持將核心庫做的足夠小，以便讓充分發揮社區的創造性，讓所有搭建大型系統的構建都盡可能來源於社區，因此每個構件都可以快速試錯和迭代。不得不說，這種做法雖然有顯得有些偷懶，但是事實證明這種對社區的信賴，和開放的態度收穫了巨大的回報：Node.js 擁有了全世界最活躍也是最大的社區和包管理平台 <code>npm</code>。</p> <h3 id="專注">專注</h3> <p>Node.js 社區的開發者始終保留著一個默契，將 package 的功能約束的足夠窄，最好一次只做好一件事(單一職責原則)，並對外暴露單一的接口。這樣 package 的開發，設計，測試就會變得更加簡單，package 也就更加可靠。這種專注，也同時表現了開發者們的謙遜以及效率至上。</p> <h3 id="簡約">簡約</h3> <p>Node.js package 通常只暴露單一模塊和接口，並繼承了 JavaScript 的簡約特點，使用簡單的數據結構。這使得 Node.js 包易於閱讀和理解。</p> <hr> <h2 id="前端開發者如何學習-nodejs">前端開發者如何學習 Node.js？</h2> <p>對於從未涉足過服務端開發的前端開發者而言，以下幾點是學習 Node.js 過程中必須補足的知識：</p> <ol> <li>對 JavaScript 語言特性（特別是 ESNext），語法的深入理解。</li> <li>數據庫知識與數據表設計能力。</li> <li>系統架構能力。</li> </ol> <p>而學習 Node.js 則可以分為兩個部分：</p> <ol> <li>學習 Node.js 的核心庫的使用。</li> <li>學習相關 Web 框架的使用。</li> </ol> <p>在整個學習過程中，建議採用以下四步學習：</p> <ol> <li>閱讀官方文檔。</li> <li>撰寫 Demo 熟悉語法驗證思路。</li> <li>在此過程中不斷地問自己問題，並深入調研得到答案。</li> <li>通過對外輸出，分享所得加深自己的印象。</li> </ol> <hr> <h2 id="小結">小結</h2> <p>Node.js 在如今已經是每一位前端開發者必須掌握的技術，它通過 <code>libuv</code> 向前端開發者開放了操作系統層面的底層能力，讓開發者能夠全面使用計算機的算力和功能。並用一種語言解決 Web 應用開發的所有問題的想法成為可能。希望通過本文的介紹，您能夠對 Node.js 產生好奇，祝您在未來的探索旅途中，過得愉快。</p> <hr>https://blog.wayne-project.com/2023-02-01/line-front-end-framework-v2/Wed, 01 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-01/line-front-end-framework-v2/<img src="https://live.staticflickr.com/65535/52662373535_00afc03eca_o.jpg" alt="Featured image of post 【LIFF】認識 LINE Front-end Framework (LIFF) 前端框架 (LIFF v2)" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://taichunmin.idv.tw/blog/2020-09-18-line-three-size-liff.html" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://oakmega.com/blog/basic-knowledge-in-line-business" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.ezpretty.com.tw/blog/inner?id=43" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://tw.linebiz.com/manual/line-official-account/line-porvider-and-channel-intro/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2" target="_blank" rel="noopener" >參考網站</a></p> <p>我最早接觸 <a class="link" href="https://developers.line.biz/en/docs/liff/" target="_blank" rel="noopener" >LIFF</a> 的時候已經是 2019 的時候了，當時的 LIFF v1 與現在的 LIFF v2 已經有了蠻大的差異，我想透過這篇文章梳理一下 LIFF v2 新版本的特性，好讓我們可以更方便的在網站上透過 LIFF 提供 LINE 用戶一些好用功能。</p> <hr> <h2 id="正確理解-liff-的用途">正確理解 LIFF 的用途</h2> <p>雖然說 <a class="link" href="https://developers.line.biz/en/docs/liff/" target="_blank" rel="noopener" >LINE Front-end Framework</a> (<code>LIFF</code>) 從名字上看起來是一套由 LINE 推出的前端框架，但事實上他的用途比較像是一個<strong>函式庫</strong>(Library)，讓你可以在 LINE 平台(LINE Platform) 順利的開發網頁應用程式(Web Application)，幫助開發人員可以輕鬆的透過 <code>LIFF</code> 提供的 API 跟 LINE 用戶進行互動。</p> <blockquote> <p>任何從 LINE 平台開啟的網頁，而網頁使用到 <strong>LIFF</strong> 提供的 JavaScript SDK，都可以稱為是一個 <strong>LIFF Apps</strong>！</p></blockquote> <p>所以在 LINE 平台上開發網頁，是一個什麼樣的情境與感受呢？什麼又是 LINE 平台呢？事實上，LINE 這家公司不但有龐大的用戶基礎，它們提供的各項服務也是琳瑯滿目，所有服務的加總，就是 LINE 平台，大家都可以在這個平台上開發 Web 應用程式。以下我用一個最淺顯易懂的使用情境來說明：</p> <blockquote> <p>假設某甲經營著一個團購生意，客戶都是透過 <strong>LINE 官方帳戶</strong>(Official Account) (簡稱 <strong>LINE OA</strong> 帳戶) 進行聯繫，當某甲想提供他的客戶一個團購的表單時，最簡單的方式就是直接傳送一個連結給他的客戶，而這個連結就是一個「<strong>網頁</strong>」並擁有一個「<strong>網址</strong>」對吧！如果你是 Web 開發人員，就可以在這份「<strong>網頁</strong>」中加入 <strong>LIFF SDK</strong>，並使用 <strong>LIFF SDK</strong> 提供的 API 來取得客戶基本資料，或是設計一些便利的 Web UI 介面幫助客戶在 LINE 聊天室中下單。這就是一個 <strong>LIFF App</strong> 的經典使用情境！👍</p></blockquote> <p>要認識 LIFF 最快的方式，就是直接開啟 <a class="link" href="https://liff-playground.netlify.app/" target="_blank" rel="noopener" >LIFF Playground</a> 網頁，快速預覽所有 LIFF SDK 提供的各項功能，讓你很清楚的知道 LIFF 可以做哪些事！以下我列出幾個 <a class="link" href="https://liff-playground.netlify.app/" target="_blank" rel="noopener" >LIFF Playground</a> 的亮點：</p> <ul> <li> <p>幫助 LINE 用戶登入/登出：<br> 事實上，這些使用到 LIFF SDK 的 LIFF Apps 並不一定要跑在 LINE App 之中，也就是說，他不一定要直接從 LINE App 開啟這份網頁。這個 LIFF Apps 其實也可以是一個獨立網頁，在任何一台電腦或手機開啟網頁也行。只是在 LINE App 之中開啟網頁可以省去「登入」的程序，使用者的操作門檻會更低一些！</p> </li> <li> <p>取得 LINE 用戶的裝置資訊：<br> 你可以透過 LIFF SDK 提供的 API 取得使用者的作業系統(OS)、使用的語言(Language)、目前 LIFF SDK 使用的版本、目前 LINE App 的版本、判斷網頁是否開在 <a class="link" href="https://developers.line.biz/en/docs/liff/overview/#liff-browser" target="_blank" rel="noopener" >LIFF Browser</a> 之中、判斷用戶目前是否是登入狀態、判斷用戶目前環境可以使用哪些 LIFF API。</p> </li> <li> <p>取得 LINE 用戶基本資料：<br> 取得用戶的 Access Token、取得用戶的 ID Token、取得 ID Token 解開後的內容、取得 Context 資訊、取得基本資料(只有使用者唯一值、顯示名稱與大頭照)、取得與 <code>LINE OA</code> 之間的好友狀態。</p> </li> <li> <p>強化 UI 互動的小功能：<br> 你可以在 LIFF 永久連結上加入額外參數、可以幫 LINE 用戶直接送出訊息到 OA 帳戶的聊天室中、從 LIFF Browser 開啟連結到新視窗、從 LIFF Browser 關閉視窗、分享資訊給好友、取得 QRCode 掃描結果。</p> </li> </ul> <p>當你已經瞭解 LIFF 用途之後，開發人員就可以直接看 <a class="link" href="https://developers.line.biz/en/reference/liff/" target="_blank" rel="noopener" >LIFF v2 API reference</a> 參考文件，這裡有更多 LIFF SDK 與 API 的技術細節。</p> <hr> <h2 id="正確理解-liff-browser-的用途">正確理解 LIFF Browser 的用途</h2> <p>在 LINE 平台中可以使用以下 4 種瀏覽器類型，很多人搞不清楚其中的差別，我特別重點說明一下：</p> <h3 id="line-in-app-browser">LINE In-App Browser</h3> <p><a class="link" href="https://developers.line.biz/en/glossary/#line-iab" target="_blank" rel="noopener" >LINE In-App Browser</a>：</p> <p>在 LINE App 任意位置開啟的連結，預設都會開啟一個<strong>內嵌</strong>在 LINE App 中的瀏覽器，這種瀏覽器幾乎與一般瀏覽器無異，但其實在使用上有諸多限制，建議開發人員<strong>不要</strong>把他當成「正常」的瀏覽器來使用，當成「<strong>閱讀網頁內容</strong>」的工具會比較好一些，不要做太多需要登入才能用的功能在上面。</p> <blockquote> <p>LINE In-App Browser 雖然支援 <strong>Cookies</strong> 與 <strong>localStorage</strong> 操作，但沒人保證可以儲存多久，可能 App 升級一下資料就清除了，對使用者來說其實很不好用。</p></blockquote> <h3 id="line-liff-browser">LINE LIFF Browser</h3> <p><a class="link" href="https://developers.line.biz/en/glossary/#liff-browser" target="_blank" rel="noopener" >LINE LIFF Browser</a>：</p> <p>這是一個相當特殊的瀏覽器類型，他只有透過 <code>LIFF App</code> 的<strong>專用網址</strong>才能開啟，網址結構如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">https://liff.line.me/<span class="o">{</span>LIFF_ID<span class="o">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個 <code>LIFF App</code> 專用網址必須跟 <a class="link" href="https://developers.line.biz/zh-hant/" target="_blank" rel="noopener" >LINE Developers</a> 之中的 <code>LINE Login</code> 或 <code>LINE MINI App</code> 頻道(Channel)綁定，事先在「<strong>頻道</strong>」中建立一組 <code>LIFF_ID</code> 才能使用。在 LIFF SDK 中，有部分 API 只有在 <strong>LINE LIFF Browser</strong> 之中才能使用！</p> <blockquote> <p>使用 <code>LIFF App</code> 專用網址開啟的網頁，不一定要使用 LIFF SDK 來實作，只是用了 LIFF SDK 就可以享受許多 LINE LIFF Browser 才有的功能，可以降低開發門檻。其他開啟 LIFF App 的說明文件可以參考 <a class="link" href="https://developers.line.biz/en/docs/liff/opening-liff-app/" target="_blank" rel="noopener" >Opening a LIFF app</a> 說明！</p></blockquote> <blockquote> <p>這個 LIFF Browser 也支援「<strong>最小化</strong>」功能，把剛開啟的 LIFF App 最小化成一個 Icon，隨時可以點擊 Icon 恢復瀏覽器顯示，還蠻方便的。詳情請見 <a class="link" href="https://developers.line.biz/en/docs/liff/minimizing-liff-browser/" target="_blank" rel="noopener" >Minimizing LIFF browser</a> 說明！👍</p></blockquote> <h3 id="line-mini-app">LINE MINI App</h3> <p><a class="link" href="https://developers.line.biz/en/services/line-mini-app/" target="_blank" rel="noopener" >LINE MINI App</a>：</p> <p>這也是一個相當特殊的瀏覽器類型，其用途跟 <code>LINE LIFF Browser</code> 相當類似，都需要<strong>專用網址</strong>才能打開，但是跟 <code>LINE LIFF Browser</code> 不同的地方在於，<code>LINE MINI App</code> 可以打包上架為一個 <strong>LINE 服務</strong>，可以讓使用者在 LINE App 的「<strong>主頁</strong>」搜尋到這個 <code>LINE MINI App</code>，使用上會方便許多，通常只有知名品牌才會選用這種方式上架。目前 <code>LINE MINI App</code> 只有指定的 <strong>LINE 技術合作夥伴</strong>或<strong>特定主題或品牌</strong>才能通過審核，在台灣尚未公開給大眾申請。</p> <h3 id="external-browser">External Browser</h3> <p><a class="link" href="https://developers.line.biz/en/glossary/#external-browser" target="_blank" rel="noopener" >External Browser</a>：</p> <p>你可以在 LINE App 之中已經開啟的瀏覽器，額外再開啟一個「<strong>外部瀏覽器</strong>」(External Browser)，使用手機的<strong>預設瀏覽器</strong>來開啟網頁，這種網頁在瀏覽的時候就可以用到完整的瀏覽器能力，雖然可以解決 LINE App 之中的其他瀏覽器類型所提到的一些限制，但卻會失去一些在 LINE 裡面開啟網頁的方便性，例如：<strong>自動登入</strong>。</p> <p>除此之外，你直接用桌機的任意瀏覽器開啟一個有使用 LIFF SDK 的網頁，對 LIFF SDK 來說，這個瀏覽器本身就是一個「<strong>外部瀏覽器</strong>」(External Browser)，你可以透過 LIFF SDK 非常輕鬆的實現 LINE Login 機制，只要呼叫 <code>liff.login()</code> 即可！👍</p> <hr> <h2 id="開始使用-liff-sdk-開發網頁">開始使用 LIFF SDK 開發網頁</h2> <p>在任何一個網頁上，只要加入 LIFF SDK 檔案，這是一個 JavaScript 檔，就可以立即開始使用，以下是在任意網頁加入 LIFF 的標準作業流程：</p> <ol> <li>設定網頁標題 (Page Title)<br> 請在 HTML 的 <code>&lt;head&gt;</code> 區段中加入 <code>&lt;title&gt;</code> 標籤，理論上每一份 HTML 應該都有這個標籤定義才對！</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>The Will Will Web<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>加入 LIFF SDK<br> 請將 LIFF SDK 加入到網頁 <code>&lt;body&gt;</code> 最開頭的地方：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://static.line-scdn.net/liff/edge/2/sdk.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果你的網站使用到任何其他前端框架，可能會想把 LIFF SDK 改用 <code>npm</code> 的方式安裝載入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install --save @line/liff </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add @line/liff</span> </span></span></code></pre></td></tr></table> </div> </div><p>匯入 <code>liff</code> 物件的方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">liff</span> <span class="nx">from</span> <span class="s1">&#39;@line/liff&#39;</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>初始化 LIFF SDK<br> 初始化 LIFF SDK 是一個<strong>非常必要</strong>的操作，因為當你的網頁開在 <strong>LINE In-App Browser</strong> 或 <strong>LINE LIFF Browser</strong> 瀏覽器時，在 LIFF SDK 初始化過後才能呼叫某些 API 取得當前的環境資訊。這裡最重要的參數就是 <code>liffId</code> 了，你要先到 <a class="link" href="https://developers.line.biz/console/" target="_blank" rel="noopener" >LINE Developers</a> 的 <strong>LINE Login</strong> 或 <strong>LINE MINI App</strong> 頻道的 LIFF 頁籤內先建立一組 <code>LIFF_ID</code>，並將這個 <code>LIFF_ID</code> 設定到 <code>liff.init()</code> 的 <code>liffId</code> 參數上。</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">liff</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">liffId</span><span class="o">:</span> <span class="s1">&#39;1566379427-xKvNdlJ9&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Start to use liff&#39;s api </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>以下是取得環境資訊的程式碼範例，記得一定要<strong>初始化之後</strong>才能執行這些 API 喔！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">liff</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">liffId</span><span class="o">:</span> <span class="s1">&#39;1566379427-xKvNdlJ9&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">liff</span><span class="p">.</span><span class="nx">getLanguage</span><span class="p">());</span> <span class="c1">// 取得用戶的主要語言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">liff</span><span class="p">.</span><span class="nx">getVersion</span><span class="p">());</span> <span class="c1">// 取得 LIFF SDK 的版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">liff</span><span class="p">.</span><span class="nx">isInClient</span><span class="p">());</span> <span class="c1">// 判斷目前網頁是否跑在 LIFF Browser 底下 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">liff</span><span class="p">.</span><span class="nx">isLoggedIn</span><span class="p">());</span> <span class="c1">// 判斷開啟此網頁的 LINE 使用者是否為登入狀態 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">liff</span><span class="p">.</span><span class="nx">getOS</span><span class="p">());</span> <span class="c1">// 取得使用者目前使用的作業系統為何 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">liff</span><span class="p">.</span><span class="nx">getLineVersion</span><span class="p">());</span> <span class="c1">// 取得使用者目前使用的 LINE App 版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注意: 你只要是用 <code>LINE LIFF Browser</code> 瀏覽器開啟 LIFF App 網頁，透過 <code>liff.init()</code> 初始化之後，預設就會自動登入！👍</p></blockquote> <p>如果你希望在初始化 LIFF SDK 的時候，即便在「外部瀏覽器」的環境下也要啟用「<strong>自動登入</strong>」功能，可以加入 <code>withLoginOnExternalBrowser: true</code> 參數，他會在頁面初始化的時候自動進行 LINE Login 的 OAuth 2.0 授權流程！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">liff</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">liffId</span><span class="o">:</span> <span class="s1">&#39;1566379427-xKvNdlJ9&#39;</span><span class="p">,</span> <span class="c1">// Use own liffId </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">withLoginOnExternalBrowser</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// Enable automatic login process </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Start to use liff&#39;s api </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>這個 <code>withLoginOnExternalBrowser: true</code> 選項建議只用在 LINE App 內才會開啟的網頁上使用。否則你能想像你開啟我的部落格後，第一時間轉向到 LINE Login 畫面是什麼感覺嗎？😅</p></blockquote> <ol start="4"> <li>有些取得環境資訊的 API 在透過 <code>liff.init()</code> 初始化之前也可以使用：</li> </ol> <p><strong>liff.ready</strong>： 會回傳一個 Promise 並會在 <code>liff.init()</code> 初始化完畢後執行，你可以在 <code>.then()</code> callback 撰寫一些程式碼。</p> <p><strong>liff.getOS()</strong>： 取得用戶端的作業系統，可能的值只有 <code>ios</code>、<code>android</code> 與 <code>web</code>。</p> <p><strong>liff.getLanguage()</strong>： 這等同於透過 <code>navigator.language</code> 取得目前瀏覽器使用的語言。</p> <p><strong>liff.getVersion()</strong>： 取得目前 LIFF SDK 使用的版本。</p> <p><strong>liff.getLineVersion()</strong>： 取得使用者目前 LINE App 的版本。</p> <p><strong>liff.isInClient()</strong>： 判斷目前網頁是否跑在 LIFF Browser 底下，你可以藉此判斷是否要初始化 LIFF SDK 或透過 <code>liff.closeWindow()</code> 關閉視窗！</p> <p><strong>liff.closeWindow()</strong>： 你可以任意時間透過這個 API 關閉視窗，甚至於在 <code>liff.init()</code> 初始化完成之前也可以關閉。</p> <p><strong>liff.use()</strong>： 啟用與初始化一個 <a class="link" href="https://developers.line.biz/en/docs/liff/liff-plugin/" target="_blank" rel="noopener" >LIFF Plugin</a>。</p> <p><strong>liff.i18n.setLang()</strong>： 設定 LIFF SDK 的顯示語言，任何 <a class="link" href="https://datatracker.ietf.org/doc/html/rfc5646" target="_blank" rel="noopener" >RFC 5646 (BCP 47)</a> 定義的語言都可以，<strong>繁體中文</strong>可以是 <code>zh-Hant</code> 或 <code>zh-Hant-TW</code> 都可以。</p> <p>以上就是使用 LIFF SDK 開發網頁的起手式，理解了觀念與啟動方法，其他都不複雜了，剩下的 API 就是有用到的時候才去看 <a class="link" href="https://developers.line.biz/en/reference/liff/" target="_blank" rel="noopener" >LIFF v2 API reference</a> 說明文件。當然，別忘記 <a class="link" href="https://liff-playground.netlify.app/" target="_blank" rel="noopener" >LIFF Playground</a> 的存在，他可以很快速的幫助你快速瀏覽所有的 LIFF APIs！👍</p> <hr> <h2 id="總結">總結</h2> <p>我覺得 LIFF 並不難，難的地方在於初學者很容易搞不清楚 <a class="link" href="https://developers.line.biz/en/docs/liff/overview/" target="_blank" rel="noopener" ><strong>LIFF 的用途</strong></a>、<a class="link" href="https://developers.line.biz/en/docs/liff/overview/#liff-browser" target="_blank" rel="noopener" ><strong>LIFF Browser 的存在</strong></a> 與 <a class="link" href="https://developers.line.biz/en/docs/liff/opening-liff-app/" target="_blank" rel="noopener" ><strong>LIFF App 的開啟方式</strong></a>，搞懂這些地方，後續在開發上就不會有甚麼困難與障礙了！🚀</p> <hr>https://blog.wayne-project.com/2023-01-30/npm-partytown-from-web-worker/Mon, 30 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-30/npm-partytown-from-web-worker/<img src="https://live.staticflickr.com/65535/52657535787_2ab04e0fac_o.jpg" alt="Featured image of post 前端效能調校：使用 Partytown 將笨重的 JavaScript 放到 Web Workers 執行" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.miniasp.com/post/2023/01/27/Partytown-Run-Third-Party-Scripts-From-Web-Worker" target="_blank" rel="noopener" >參考網站</a></p> <p>前端效能調校的技法多如牛毛，但最明顯的效能殺手不外乎是 JavaScript 佔用 Main Thread 而導致頁面無法回應的狀況了。最近研究 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 這個函式庫，他用了一個非常巧妙的技巧，把部分 JS 自動切換到 <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers" target="_blank" rel="noopener" >Web Workers</a> 背景執行。這篇文章我就來分享如何將 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 安裝到任意網站中。</p> <hr> <h2 id="如何安裝-partytown-到任意網站">如何安裝 Partytown 到任意網站</h2> <ol> <li>透過 Partytown CLI 下載 Partytown 函式庫</li> </ol> <p>以下命令會在當前目錄建立一個 <code>~partytown</code> 資料夾(建議統一用這個名稱)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx <span class="s2">&#34;@builder.io/partytown&#34;</span> copylib ~partytown </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>將 ~partytown 資料夾上傳到網站根目錄</li> </ol> <ul> <li>如果是 ASP.NET Core 的話，可以上傳到 <code>wwwroot</code> 目錄下，或是在 ASP.NET Core 專案根目錄輸入以下命令：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx <span class="s2">&#34;@builder.io/partytown&#34;</span> copylib <span class="s2">&#34;wwwroot\~partytown&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>如果是 Node.js 的話，可以上傳到 <code>public</code> 目錄下，或是在 ASP.NET Core 專案根目錄輸入以下命令：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx <span class="s2">&#34;@builder.io/partytown&#34;</span> copylib <span class="s2">&#34;public/~partytown&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><p>你也可以設定好 <code>package.json</code> 加入到建置流程中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install <span class="s2">&#34;@builder.io/partytown&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="packagejson">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;build&#34;</span><span class="p">:</span> <span class="s2">&#34;npm run partytown &amp;&amp; ng build&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;partytown&#34;</span><span class="p">:</span> <span class="s2">&#34;partytown copylib public/~partytown&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>總之，上傳到網站根目錄就對了！(詳見 <a class="link" href="https://partytown.builder.io/copy-library-files" target="_blank" rel="noopener" >Copy Library Files</a> 有更完整的說明)</p> <ol start="3"> <li>調整網頁中的 <code>&lt;script&gt;</code> 標籤語法</li> </ol> <p>請將以下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;...&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>全部修改為：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/partytown&#34;</span><span class="p">&gt;...&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>就大功告成！</p> <hr> <h2 id="使用的注意事項">使用的注意事項</h2> <p>雖然 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 函式庫的初衷非常理想，就是管理第三方 JS 函式庫(third-party scripts)，徹底降低 JS 佔用 Main Thread 的狀況。但實際上還是有不少 JS 檔案在透過 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 載入到 Web Workers 執行後就掛掉了，所以實際上 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 並不適用於所有 JS 執行，因此<strong>不太建議</strong>把網站上所有 JS 都改用 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 來載入。</p> <p>除此之外，目前 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 因為有用到 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics" target="_blank" rel="noopener" >Atomics</a> API 的關係，它的<a class="link" href="https://partytown.builder.io/atomics#browser-atomics-support" target="_blank" rel="noopener" >相容性</a>確實有些限制，有些太舊的手機版本是沒有支援的！詳見 <a class="link" href="https://caniuse.com/mdn-javascript_builtins_atomics" target="_blank" rel="noopener" >JavaScript built-in: Atomics | Can I use</a> 說明。</p> <p>最後要提醒大家的地方，就是使用 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 的 <a class="link" href="https://partytown.builder.io/trade-offs" target="_blank" rel="noopener" >Trade-Offs</a> (權衡)。因為這個世界沒有銀子彈，有一好就沒兩好，使用 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 不見得適用所有的網頁開發情境。以下是 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 官方認為不適用的地方：</p> <ol> <li>大量的 DOM 操作會被節流(Throttled DOM Operations)</li> </ol> <p>由於在 Web Workers 無法直接存取 DOM，所以 Partytown 會透過 onmessage 事件傳給 Main Thread 來處理，所以 DOM 處理的速度反而會變慢！</p> <ol start="2"> <li>只要是 UI 特別吃重的 JS 函式庫，處理大量 DOM 操作，都不太適合用 Partytown 來管理</li> </ol> <p>如果執行實際效果不理想，其實就這個 JS 不要用 Partytown 即可！</p> <ol start="3"> <li>若第三方函式庫在載入時沒有設定 CORS Headers 的話，透過 Partytown 是無法載入的</li> </ol> <p>必須透過 <a class="link" href="https://partytown.builder.io/proxying-requests" target="_blank" rel="noopener" >Proxying Requests</a> 從**相同來源(Same-origin)**載入！</p> <ol start="4"> <li>事件處理只要用到 <code>event.preventDefault()</code> 就會失效</li> </ol> <p>透過 Web Workers 執行 event callback 會導致 <code>event.preventDefault()</code> 的行為失效！</p> <ol start="5"> <li>若透過 Partytown 管理的 JS 動態建立 <code>iframe</code> 的話，<code>document.cookie</code>、<code>localStorage</code> 與 <code>sessionStorage</code> 都會讀不到！</li> </ol> <p>基本上程式不會報錯，但就是沒效果，所以使用上要注意！</p> <ol start="6"> <li>透過 <code>setInterval()</code> 不斷的對 <code>document</code> 進行 DOM 操作</li> </ol> <p>這也會失去使用 Partytown 的價值，因為頻繁的 DOM 操作反而會讓 Web Workers 過於忙碌！</p> <p>目前確定很適合用 <a class="link" href="https://partytown.builder.io/" target="_blank" rel="noopener" >Partytown</a> 來管理的第三方函式庫，從官網是有整理出來的，大家可以多多利用，照著官網設定即可：</p> <ul> <li><a class="link" href="https://partytown.builder.io/common-services" target="_blank" rel="noopener" >Common Services</a></li> <li><a class="link" href="https://partytown.builder.io/facebook-pixel" target="_blank" rel="noopener" >Facebook Pixel</a></li> <li><a class="link" href="https://partytown.builder.io/google-tag-manager" target="_blank" rel="noopener" >Google Tag Manager</a> (GTM)</li> </ul> <hr>https://blog.wayne-project.com/2023-01-17/why-encrypt-in-client/Tue, 17 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-17/why-encrypt-in-client/<img src="https://live.staticflickr.com/65535/52634831533_259566b84f_o.jpg" alt="Featured image of post 網站前端打 API 時把密碼加密，有意義嗎？" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.facebook.com/groups/f2e.tw/posts/5689037364466915" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/questions/10211642" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.sjoerdlangkemper.nl/2020/02/12/the-case-for-client-side-hashing-logging-passwords-by-mistake/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.huli.tw/2023/01/10/security-of-encrypt-or-hash-password-in-client-side/?fbclid=IwAR3KXQ6gSgO1uxzAhtplhEs-AtQ5KIg2GR0HRaKcbMewUrWgEi6JGas48T8" target="_blank" rel="noopener" >參考網站</a></p> <p>最近有人在臉書前端交流社群發了<a class="link" href="https://www.facebook.com/groups/f2e.tw/posts/5689037364466915" target="_blank" rel="noopener" >一則貼文</a>，內容是他看到了一個問題：<a class="link" href="https://ithelp.ithome.com.tw/questions/10211642" target="_blank" rel="noopener" >請問登入api傳賬號、密碼json明碼會有問題嗎?</a>，想知道大家對這個問題的看法。</p> <p>而底下的回答大部份都是覺得「<strong>有用 HTTPS 就好了，沒必要額外再實作一層加密，沒有什麼太大的意義</strong>」.</p> <p>老實說我以前也是這樣認為的，而且過去在社群中就有出現過類似的討論。我那時候想說都已經有 HTTPS 了，而 HTTPS 本身的目的就是為了保障傳輸的安全，為什麼要自己再做加密？</p> <p>但這一兩年接觸資安以後，我的想法有了改變，我認為前端在傳輸前把密碼加密，是有其意義的，而接下來我會詳細說明我的理由。</p> <hr> <h2 id="定義問題">定義問題</h2> <p>在進入正題之前，我想把問題定義得更明確一點，免得出現一堆張飛打岳飛，拿兩個完全不同的情境來比較的狀況。在原文底下，就有不少留言在討論的是不同的問題，把問題先定義清楚滿重要的。</p> <p>首先，我們要比較的對象是：</p> <ol> <li>在使用 <strong>HTTPS</strong> 的前提下，打登入 API 時不做任何事直接傳送密碼的明文</li> <li>在使用 <strong>HTTPS</strong> 的前提下，打登入 API 時先把密碼加密，再傳送到 server</li> </ol> <p>這邊需要注意的是「<strong>兩個狀況都是 HTTPS</strong>」，所以如果你想講的是「<strong>沒必要自己發明新技術</strong>」或是「<strong>自己發明新的加密方式不會比較安全</strong>」等等，在這個前提下全都不適用。</p> <p>因為傳輸層還是靠 <strong>HTTPS</strong> 在傳輸，所以在這個階段並沒有自己發明新的方式，我只是在應用層自己把傳輸的資料額外加密一層而已。</p> <p>再來，先不考慮成本這件事，純粹只從技術的角度去看可能有哪些優缺點(成本相關的最後再來討論)。</p> <p>最後呢，我這邊的情境是「<strong>加密密碼</strong>」而非 hash，這是因為我覺得 hash 的狀況比較複雜，我自己想先用加密來舉例，而且這個加密是「<strong>非對稱式加密</strong>」。</p> <p>也就是我們可以想像已經有一把 public key 存在於 client 端(當然，每個人都可以拿得到)，在送出 request 以前，會先使用 JavaScript 把密碼用 public key 加密以後再送出，而 server 使用 private key 解密，拿到密碼以後 hash 過再存入資料庫中。</p> <p>綜合以上，這篇想處理的問題是：「<strong>已經使用了 HTTPS，在打登入 API 以前先把密碼加密過或是不做任何處理，這兩者的差別在哪？</strong>」</p> <p>而我們可以把回答分成兩個部分：</p> <ol> <li>假設 HTTPS 被破解了，是不安全的，差在哪？</li> <li>假設 HTTPS 是安全的，差在哪？</li> </ol> <hr> <h2 id="假設-https-不安全差在哪">假設 HTTPS 不安全，差在哪？</h2> <p>首先，可以先想一下怎樣的狀況會造成 HTTPS 不安全，攻擊者掌握了系統的哪些部分？</p> <p>底下簡單分為四種狀況討論：</p> <ol> <li>攻擊者掌控整台電腦，信任惡意憑證</li> <li>攻擊者成功執行了中間人攻擊</li> <li>攻擊者可以在網路層監聽 request 並使用漏洞取得明文</li> <li>攻擊者直接針對 HTTPS server 進行攻擊</li> </ol> <h3 id="攻擊者掌控整台電腦信任惡意憑證">攻擊者掌控整台電腦，信任惡意憑證</h3> <p>若是這種類型的狀況，那當然是有沒有加密都沒差，因為攻擊者都有其他更好的手段去取得你的密碼。</p> <h3 id="攻擊者成功執行了中間人攻擊">攻擊者成功執行了中間人攻擊</h3> <p>那如果是「攻擊者成功執行了中間人攻擊（Man-In-The-Middle）」呢？你的電腦沒事，只是封包在傳輸的過程中被中間人攻擊。</p> <p>在這樣的前提底下，沒加密的情形就能直接被獲取密碼，而有加密的情形攻擊者只能獲取到加密過的密文而非明文。但需要注意的是既然是叫中間人攻擊，那攻擊者除了監聽你的 request 以外，也能傳送偽造的 response 給你，把前端用來加密密碼的部分換掉。</p> <p>因此無論密碼是否加密，攻擊者都可以拿到明文，只是如果有加密的話，攻擊者取得密碼的成本較高（需要先找到在哪邊加密的，然後把那段改掉）。</p> <h3 id="攻擊者可以在網路層監聽-request-並使用漏洞取得明文">攻擊者可以在網路層監聽 request 並使用漏洞取得明文</h3> <p>這個狀況跟上一個的不同之處在於這個只能讀，不能寫。若是有辦法解密 request 的封包，就能夠看到明文。</p> <p>所以如果有把密碼先加密，攻擊者就無法取得密碼的明文。</p> <p>這邊需要注意的是儘管無法取得明文，攻擊者依然可以透過重送請求來登入你的帳號（先假設沒有其他機制），所以你帳號還是被盜了，只是攻擊者不知道你的密碼明文。</p> <p>這有差嗎？有！</p> <p>假設他知道了你的密碼明文，就可以拿你的這組帳號密碼去各個服務都試試看，若是你其他網站也用同一組帳號密碼，就會跟著淪陷（俗稱的撞庫攻擊）。</p> <p>因此在這個狀況底下，加密密碼的安全性顯然是更高的。</p> <p>此時你可能會想問的問題是：「那在什麼狀況下攻擊者能夠取得 HTTPS 的明文？真的有可能嗎？」</p> <p>這邊有一份美國衛生及公共服務部 HHS 所做的簡報：<a class="link" href="https://www.hhs.gov/sites/default/files/securing-ssl-tls-in-healthcare-tlpwhite.pdf" target="_blank" rel="noopener" >SSL/TLS Vulnerabilities</a>，裡面有記錄一些 SSL/TLS 曾經有過的漏洞，所以取得 HTTPS 的明文確實是有可能的。</p> <p>不過光是知道「有可能」是不夠的，應該問的是「機率高嗎？」，在討論風險的時候，通常也會根據風險的高低以及嚴重程度來決定該怎麼處理這個風險。</p> <p>答案是「機率很低」，簡報裡的漏洞最近的已經是 2017 年的事情了，而且是使用一些舊的、有問題的加密演算法，除此之外還需要符合不少其他條件，才能執行攻擊，所以我認為機率確實是很低的。</p> <p>以 2016 年發表的 <a class="link" href="https://drownattack.com/" target="_blank" rel="noopener" >DROWN(Decrypting RSA with Obsolete and Weakened eNcryption)</a> 來說，Server 要支援 SSLv2，而攻擊者要能抓到加密過的 TLS connection，符合這些條件以後，進行一大堆運算後就可以解開 900 個 connection 中的 1 個，而運算成本在當時是 440 美金，約 13k 台幣。</p> <p>總之呢，針對這個狀況，我們可以說：</p> <blockquote> <p><strong>假設攻擊者可以取得 HTTPS 的明文，那確實自己在應用層加密會更安全，但要符合這個假設的成本很高，發生機率很低</strong></p></blockquote> <h3 id="攻擊者直接針對-https-server-進行攻擊">攻擊者直接針對 HTTPS server 進行攻擊</h3> <p>這個分類我指的是在 2014 年發生過的 <a class="link" href="https://devco.re/blog/2014/04/11/openssl-heartbleed-how-to-hack-how-to-protect/" target="_blank" rel="noopener" >Heartbleed 漏洞</a>，攻擊者可以藉由 OpenSSL 的漏洞讀取到 server 的記憶體。</p> <p>這個狀況跟上一個滿像的，如果有在 client 端先加密過密碼，那攻擊者在 server 上讀到的就是加密過後的，不知道密碼明文是什麼。</p> <p>所以結論跟上個一樣，就是加密密碼會更安全。</p> <hr> <h2 id="中場總結">中場總結</h2> <p>剛剛我們討論了幾種「HTTPS 變得不安全」的狀況，從以往發生過的案例可以得知「HTTPS 變得不安全」是有可能的。若是攻擊者能夠讀到 HTTPS 傳輸的明文，那在應用層將密碼加密，就能防止攻擊者取得密碼的明文，因此會比沒有加密來得更安全。</p> <p>如果要講得更詳細，可以從兩個維度去切入，一個是嚴重性（severity），另一個是可能性（possibility）。</p> <p>以嚴重性來說，不管有沒有加密密碼，只要攻擊者有辦法拿到 request 的內容，你的帳號就已經淪陷了，而有沒有加密唯一的差別只有攻擊者是否能取得明文密碼，有的話就可以執行撞庫攻擊，拿密碼去試更多其他的網站。</p> <p>而可能性就是「HTTPS 的明文被拿到」這件事的可能性，從過往的經歷以及研究來看，雖然是有可能的，但在 2023 年的今天，機率是很低的。</p> <p>因此我們現階段的結論應該是：</p> <p>攻擊者若是可以繞過 HTTPS 拿到明文的 request，那在應用層將密碼加密，確實會比較安全，但要注意的是要達成這個前提非常困難，發生的機率極低。</p> <hr> <h2 id="假設-https-是安全的">假設 HTTPS 是安全的</h2> <p>接下來我們討論第二種狀況，那就是假設 HTTPS 是安全的，沒有任何人可以從中間看到明文的內容，這應該也是留言區中大多數人假設的前提。</p> <p>在這種狀況下，會有哪些風險呢？</p> <p>有一個現實生活中會發生，而且也確實發生過的風險，那就是 <strong>logging</strong>。</p> <p>身為前端工程師，在前端加裝一些 error tracking 的服務是很合理的事情，若是我們直接實作一個「<strong>只要伺服器回傳 5xx，就把 request 記錄起來</strong>」的機制，如果好巧不巧哪天登入的 API 出現這個狀況，你就可以在 log 裡面看到使用者的明文密碼。</p> <p>而且不只前端，後端也可能有類似的機制，碰到一些問題就把 request 整個寫到 log 檔去，方便以後查看以及 debug，一不小心密碼就可能被寫進去。</p> <p>在這種狀況下，在 client 端先把密碼加密顯然是有好處的，那就是在這些錯誤處理的 log 中，被記錄下來的密碼會是密文，除非你有密鑰，否則你是不會知道使用者的密碼的。</p> <p>我在網路上找到一篇跟我論點一樣的文章：<a class="link" href="https://www.sjoerdlangkemper.nl/2020/02/12/the-case-for-client-side-hashing-logging-passwords-by-mistake/" target="_blank" rel="noopener" >The case for client-side hashing: logging passwords by mistake</a>，裡面有附上很多參考連結，都是以前各大公司不小心把密碼的明文記錄下來的案例。</p> <p>然後有個小地方稍微講一下，上面這篇做的是「在 client 端 hash」，跟我這篇一開始設定的「在 client 端做非對稱式加密」有點不同，hash 會更安全一點，確保在 server 真的沒人知道你的密碼明文是什麼。</p> <p>總之呢，在 client 端先把密碼加密或是 hash，可以避免在日誌中不小心出現使用者的密碼明文，這個顯然是個額外的優點。</p> <hr> <h2 id="加密還是-hash">加密還是 hash？</h2> <p>文章開頭我有提到 hash 的狀況有些複雜，所以我先把情境設定在「對密碼做非對稱式加密」再傳輸，因為對上面我舉的那些例子而言，這兩種情境的差異不大。</p> <p>舉例來說，HTTPS 被拿到明文內容，無論你對密碼做了非對稱式加密還是雜湊，在攻擊者無法取得伺服器端密鑰的前提之下，都是拿不到明文密碼的。</p> <p>那為什麼 hash 的狀況有些複雜呢？</p> <p>假設我們在前端先把密碼 hash 過後再傳到後端，那後端是要直接存進去資料庫嗎？如果直接存進去資料庫，哪天資料庫的內容曝光，攻擊者就拿到這些 hash 過的密碼了。</p> <p>通常在有加鹽以及雜湊演算法夠強的前提之下，被拿到 hash 的密碼還是能保證一定的安全性，可是在這種情況下，反而變得很不安全。</p> <p>因為前端傳給後端的內容已經是 hash 過的了，所以攻擊者可以直接拿 hash 過的密碼進行登入，根本不用知道明文是什麼。雖然保護了明文，但失去了原本雜湊的安全性。</p> <p>因此如果要做 client side hashing，server side 收到後也要再做一次。如此一來，就算資料庫被偷走，攻擊者也沒辦法利用資料庫中的 hash 直接登入。</p> <p>有些人可能跟我一樣好奇：「做兩次 hash 不會更不安全嗎？」，我們可以看一下 Google 在 <a class="link" href="https://cloud.google.com/static/solutions/modern-password-security-for-system-designers.pdf" target="_blank" rel="noopener" >Modern password security for system designers</a> 裡面怎麼說：</p> <blockquote> <p>Have the client computer hash the password using a cryptographically secure algorithm and a unique salt provided by the server. When the password is received by the server, hash it again with a different salt that is unknown to the client. Be sure to store both salts securely. If you are using a modern and secure hashing algorithm, repeated hashing does not reduce entropy.</p></blockquote> <p>看起來是還好，問題不大。</p> <p>總之呢，看起來最安全的但也更複雜的解法就是 client side 先 hash 一次，然後丟到 server 的時候再 hash 一次存進資料庫，如此一來就可以保證：</p> <ol> <li>HTTPS 因為各種原因失效時，攻擊者無法取得明文密碼</li> <li>在 Server 端，沒有任何人知道使用者的明文密碼</li> <li>明文密碼不會因為人為失誤被記錄到 log 中</li> </ol> <p>那如果真的比較好用，為什麼沒人在用？</p> <hr> <h2 id="現實生活中到底有誰在前端做-hash-或是加密">現實生活中，到底有誰在前端做 hash 或是加密？</h2> <p>當我一開始碰到這個問題，講出「怎麼沒人在用」的時候，其實只是「我自己沒碰過有人這樣用」，但實際上我並不知道那些知名網站的登入是怎麼做的。</p> <p>因此呢，我就直接去看了幾個知名網站的登入機制，我們一起來看一下結果，為了方便觀看，我把跟帳號密碼無關的內容都拿掉了。</p> <p>我在測試的時候，基本上都是用 test 或是 <a class="link" href="test@test.com" >test@test.com</a> 搭配簡單的密碼如 1234 在測試，然後觀察 request 的內容。</p> <p>先來看一下 FAANG 吧！</p> <h3 id="facebook">Facebook</h3> <p>API 網址：<a class="link" href="https://zh-tw.facebook.com/login" target="_blank" rel="noopener" >https://zh-tw.facebook.com/login</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">email</span><span class="o">=</span>test@test.com </span></span><span class="line"><span class="cl"><span class="nv">encpass</span><span class="o">=</span><span class="c1">#PWD_BROWSER:5:1673256089:AbJQAJUvZZNvh2dZbeDqdu9dp7HWwyHOl3+0sCGjiHMMjvYdxJokpdHE/O+E5LIbnakRmDWQfV40ZaB31MaNXFYo1b+RI+LHh6MAdDPa4PJ+BesDp4u8B4F4diVQ+q7idbEhT5wTNaU=</span> </span></span></code></pre></td></tr></table> </div> </div><p>沒想到 Facebook 就是有實作前端加密的網站！後面那段 Base64 並不是直接把密碼 Base64，而是把加密過的密碼做 Base64，解出來是這樣：<code>\x01²P\x00\x95/e\x93o\x87gYmàêvï]§±ÖÃ!Î\x97\x7F´°!£\x88s\f\x8Eö\x1DÄ\x9A$¥ÑÄüï\x84ä²\x1B\x9D©\x11\x985\x90}^4e wÔÆ\x8D\\V(Õ¿\x91#âÇ\x87£\x00t3Úàò~\x05ë\x03§\x8B¼\x07\x81xv%Pú®âu±!O\x9C\x135¥</code></p> <h3 id="amazon">Amazon</h3> <p>API 網址：<a class="link" href="https://www.amazon.com/ap/signin" target="_blank" rel="noopener" >https://www.amazon.com/ap/signin</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">email</span><span class="o">=</span>test@test.com<span class="p">&amp;</span><span class="nv">password</span><span class="o">=</span><span class="m">1234</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="apple">Apple</h3> <p>API 網址：<a class="link" href="https://idmsa.apple.com/appleauth/auth/signin" target="_blank" rel="noopener" >https://idmsa.apple.com/appleauth/auth/signin</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;accountName&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span><span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;1234&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="netflix">Netflix</h3> <p>API 網址：<a class="link" href="https://www.netflix.com/tw/login" target="_blank" rel="noopener" >https://www.netflix.com/tw/login</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">userLoginId</span><span class="o">=</span>test@test.com<span class="p">&amp;</span><span class="nv">password</span><span class="o">=</span><span class="m">1234</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="google">Google</h3> <p>API 網址：<a class="link" href="https://accounts.google.com/v3/signin/_/AccountsSignInUi/data/batchexecute" target="_blank" rel="noopener" >https://accounts.google.com/v3/signin/_/AccountsSignInUi/data/batchexecute</a>.</p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">f.req=[[[&#34;14hajb&#34;,&#34;[1,1,null,[1,null,null,null,[\&#34;1234\&#34;,null,true]]]] </span></span></code></pre></td></tr></table> </div> </div><p>看來 FAANG 裡面，只有 Facebook 是有實作的。</p> <p>接著我突然好奇起其他常用服務的登入有沒有做，底下貼結果。</p> <h3 id="github">GitHub</h3> <p>API 網址：<a class="link" href="https://github.com/session" target="_blank" rel="noopener" >https://github.com/session</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">login</span><span class="o">=</span>test@test.com<span class="p">&amp;</span><span class="nv">password</span><span class="o">=</span><span class="m">1234</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="microsoft">Microsoft</h3> <p>API 網址：<a class="link" href="https://login.live.com/ppsecure/post.srf" target="_blank" rel="noopener" >https://login.live.com/ppsecure/post.srf</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">login</span><span class="o">=</span>test@test.com<span class="p">&amp;</span><span class="nv">passwd</span><span class="o">=</span><span class="m">1234</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="ibm-cloud">IBM cloud</h3> <p>API 網址：<a class="link" href="https://cloud.ibm.com/login/doLogin" target="_blank" rel="noopener" >https://cloud.ibm.com/login/doLogin</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;username&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span><span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;1234&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>看來有實作的是少數，那資安廠商呢？資安廠商自己有做嗎？</p> <p><strong>資安廠商</strong></p> <h3 id="kaspersky">Kaspersky</h3> <p>API 網址：<a class="link" href="https://eu.uis.kaspersky.com/v3/logon/proceed" target="_blank" rel="noopener" >https://eu.uis.kaspersky.com/v3/logon/proceed</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;login&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span><span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;12345678&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="趨勢">趨勢</h3> <p>API 網址：<a class="link" href="https://sso1.trendmicro.com/api/usersigninauth" target="_blank" rel="noopener" >https://sso1.trendmicro.com/api/usersigninauth</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;email&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span><span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;12345678&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="tenable">Tenable</h3> <p>API 網址：<a class="link" href="https://cloud.tenable.com/session" target="_blank" rel="noopener" >https://cloud.tenable.com/session</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;username&#34;</span><span class="p">:</span><span class="s2">&#34;test&#34;</span><span class="p">,</span><span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;1234&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="proton">Proton</h3> <p>這個應該不算資安廠商，但突然很好奇強調隱私的 Proton 是怎麼做的，一看發現好像很複雜。<br> 在登入的時候會先把 username 送過去，拿到一些看起來是 key 的東西。</p> <p>API 網址：<a class="link" href="https://account.proton.me/api/auth/info" target="_blank" rel="noopener" >https://account.proton.me/api/auth/info</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;Username&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;Code&#34;</span><span class="p">:</span><span class="mi">1000</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;Modulus&#34;</span><span class="p">:</span><span class="s2">&#34;-----BEGIN PGP SIGNED MESSAGE-----\nHash: SHA256\n\nu9K5yr97L9VV2ijOSI62tJcewUiRhQa8qJa24baNpGyw0lf3JLiF4fxUHqTErwF9UdoxE0z4Kb147naphylBFddyKsjhzHNcxk2rBw9haiPxD69BrVYm0n+LVlPqmjXFF7btr1H7oqHGX4b4Dy9omL/KaZz/Dco2NEhw0UBhEZbTAs6Ch01ur9XLbSOI7yb6MRsqCehfy82gDTdbPtXvqQsQjg5XoC2Ib2qTYFaU/24mq/gOaMbVuAGX0hBYzr5NpN9ol2XCdHOLg28Xe90+kisg39VV04axy7Ndvh489dC1CxjcWSSpXd6cPJyOn/HH9aPeTZeucBllRGbPgwR6/w==\n-----BEGIN PGP SIGNATURE-----\nVersion: ProtonMail\nComment: https://protonmail.com\n\nwl4EARYIABAFAlwB1j0JEDUFhcTpUY8mAAD1GwEAoC91QCSfXPEuWM13NZvy\nvL9NQIABuSrVOvgJwMhUTnUBAPb4zbIdTYFOQNrPLvonJt2mmRNy4lGcW7uN\n5yHzJ18J\n=Oykn\n-----END PGP SIGNATURE-----\n&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;ServerEphemeral&#34;</span><span class="p">:</span><span class="s2">&#34;DY6eRYM1bqYZZ5jzZFdWv88tKYP2PnS0y4A+f7/eqMXj8wB2VefV2kfIDrZ5AorWfDzBq4wMtNG2k5dzbT2qWppzpvltrSl2Nm4i8eWIRVxXWHl/46dGuPXFHUcXBNMP3XEQvft0YEbHOPO9Es0RZRaObV5XPFyx6kzOJxXc1tIt4PfbhODMfsAoy/yxt6eLN3HUiORCBOvzsH2sfG99Gx1YSAe3GL6g/K+bdg59eglueXRESoB0/VFRsvQevi9nVXx/JZNTG0U4BBUOlMjpYYMgEP6eQgZZ/09ZPYD3a2tW65mSnNt6lSDfwiKj02UuDqymTvj7mYm44T0SuAocwg==&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;Version&#34;</span><span class="p">:</span><span class="mi">4</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;Salt&#34;</span><span class="p">:</span><span class="s2">&#34;dI7OcD+K4rGPBA==&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;SRPSession&#34;</span><span class="p">:</span><span class="s2">&#34;3fa6224285409b6af07c811971e05341&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著輸入密碼登入時，會送出如下的 request，看起來也很複雜：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;ClientProof&#34;</span><span class="p">:</span><span class="s2">&#34;I9Nfd0Nd3OzODf2nt9zLxFHWogEwfRje8zjoeZnblyLfyzz23uXTjJ4qgRFomjIEEtZrlM1jTQa4wRIMGIIV7E6pMqq8c6wcc2tegP4Xt76S0EbnVtE1F9i0Wj46aCPUM0Mha3Zmgi9LKerrGlaftr2FBedjPFT9rPrbLqRQcFNMD33tn69gD/p28q4RAr3/7d/tz7TYhytD5oxCAUwrkqiZOi0kg//2mUJ9YNT2nWcgqUERoaU51NbNMcaPnMteEe1PlIJdiQbvNa5K07u8rk7itpBrGW2FP26bREp0UMTzNYM5HcDDkmp4dp9GoBjFJL9n0THUdt/oRRJ/Enj5WQ==&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;ClientEphemeral&#34;</span><span class="p">:</span><span class="s2">&#34;D013N7FXYHylqMeWa6ctJIv3J4uF1hqodyYfw6O+Sj7MZOIB+wksfgk/nkXCmRxQhuSYwqwMJIpyFD3MEolOZAHMU2n6HQlxe9A4KbrE4gk3UiGwfgcZDmFejTmMMxfWhf4zO2Z1fBbohreqwwN0mz3AqqsfE5dsDh3LEfkiJB449YGZfHeUHyIzS1jTmnx/8l6uVSKwJDCJelVFYKMXrxVt0ltcGRoYD92MUj82kR0am+BN4+djHyYYXuwuIYArnTW4kDP3T2yCIAMVgZnFaUCc2gfynt40mQP4q87jmMELOl8TDIDo5iKyH4gJc/470qIuIyj4ffVLiZ7t8S+kcw==&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;SRPSession&#34;</span><span class="p">:</span><span class="s2">&#34;3fa6224285409b6af07c811971e05341&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;Username&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;Payload&#34;</span><span class="p">:{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;qcA_CRYU6gSyHWdn&#34;</span><span class="p">:</span><span class="s2">&#34;c6UZSKPo4Sfm/3+DvQN72TTxyj+/TplKT9edDiUI5wMfGUsoJs9FGerOtkoW8T49r7KOvqHkzS2+M2v8ra7J9l5kSf5jgC9ZvgZ8Ja5Xgg02nxgAABydOirGLoL4htFsYVtwLrNg8NeSEanLwYLCVaSqkjANRJks0eaKpUOd8xRhCFtUH/GCbyg27oZfzDsqKXemKprOUsOh42NTqzEmruAkxs2x8mUsLy/vXptVAdaiJLrsSRqD0YBGjvOp4W2/0g6V2zfedJpJEzVwtSi1vXTC5bwxmEJlYdV9AiQECogAAJFxLQi7JjtmgFe4tNcv97JD0B8giZ6XS35swjz0vz0mOjVBUwmiDa8n54Y5kBaAoZe5pijdp2S4SOcRAknDIcD1nf0v7oSMOE9WtH/sa+XI1D2s5lFKo/iInf7r5R9src2hHFoy0b2XT0oCfLPwFX87yjaKbf7bbkjByx/3dOgzEliAkS6nHK+fmeDDVM4EoZqVSKZHLg3QTcg4DKaICyDsotALr2UqI/ARzkX4yhAXz5xHFaxl6hWAKLJPJcgk6il6oX0s0PCBNSY0Fi3vbQvXD4WalUx+LBNto6CUqeAIzVuAh8sCubzufoSORypE5WqfnuJzAlZ9sMEjaQycuRi497aV3jmjgx53UwO0OiZGxDTEMFBcov4P0g1blZ4vxmULhZU0RfdP31udLr6GTCAB90CM6Vk9w9CsYM+hmo3+JpEAtIVgLVVqcPikTbV+yaOJ1RknxBf3g06kTl0LQ+zBV6pG2rFVi8G4XT9L4FsIgxTNsl/ryzs8vJU7K+HvyE1Lp2pAXrfcju7TAIqK/FOXvp1c8Ay9O6d4fmd/PZalnRDv5mQ6Gmd6JSNzNh6i6AibBuF13w3OBaulY3FGNU/cH/AXLBIqjSzf/OySwkKkC9HBurSs3D0zqcH9BwUpmPEL8jbc8yPE+hPAim+tDo1BXCQNClxgGLaI6FXkuCiQ4AHiKsq0xs5b3WAFzcvBv1rc003RWxRegH/2teIooKU9w1kDPQRaK8/rIYe8u+BlBeZq4OwCXxx56JHfmTxtJwBi95KqsWzLGtY3ILcb+/XkzSRmE2TWbkW1IXzRsl8F6NSJj7JnHA3UrQf4hxuwbaYxpKJrcHuHc8e1wxqXrUSKooCOUxwSBgxvLLT37eaByNTxpfWomxIsH671wuydnmMedWyNIqyaMtxBORuiWUiG4jbMC2BjrVptXJ7VWigf3Vy5OQlMOyTx8tLWi1qZODYyywMBAvHYQlFfSqmIrm4y4dmK/srJE/+daEnNS+kWF48Jm/rQORO5AUwqWL+Lefg9pchcL1BnHOANcviO8pAkxLo8TiK7VLKI5/xUsZQoQSlhRt27zMF+sIv+exY375HApiY+a1VQ6OqE4Nvba7O8ETLoLFg4a8Aj+W8erXFHW5F0vVIRphAve9orM4QYnAmOigFAiLb0Pxx124wUjFR9s5oP98hAtNL/t+uGAXrb0oxiCfyHb9wa2Qb0x6o9FpuBIc5ZXId+cEXEvOdqhnUQ7ZuOi/fX81hlqgUaiD/A6P+zjAcREXdktd+hrhSXwCIKSBkp/mNymnalQKJkLaNVT+W2sOWqXxTSTIytCQx36xABcj1BXRApntob6Qvche8QJLTjzr9bDpn+Mo59N9PSU51DPIj5Avre6ChTHEQvjz9s1IM2XroBX/KFBnPj33aYQZyov4uxrVXxic+fiY+fLMF8x1ut/eNWeQU6fn+rU5PEGQ9bbAsjVBZYA5H93ROhO5lnSxoEk5PHkgQ9WpxueckPjJIUGAs+O8QMRFicccfKjhNIc32rXTqbVqLyoz62riDn8Y18MUBoeI8ORyqZOKEEBFsi5dwqoq8t82NFdx5LFjsLdk4RmMXZ2uygNLk8gH2Yyfu3iOQS2bKtNCW42Xmo66Xu5kt8NwAneYQK0mTn6HUv94K10J4hY+Q=&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>補充：經討論串有人提醒後發現這是一個叫做 SRP（Secure Remote Password）的協議，Proton 有提供一個 <a class="link" href="https://proton.me/static/9f5e7256429a2f674c943c5825257b82/protonmail_authentication_excerpt.pdf" target="_blank" rel="noopener" >ProtonMail Security Features and Infrastructure</a>，裡面有記錄他們的安全措施，就有講到這個機制。</p> <p>看起來滿複雜要花不少時間研究，先放著，有興趣的可以參考：<a class="link" href="https://blog.amis.com/srp-1f28676aa525" target="_blank" rel="noopener" >SRP — 更健全的登入及資料傳輸保護協議</a></p> <p>雖然更安全，但成本應該又更高了。</p> <hr> <h2 id="交易所與銀行">交易所與銀行</h2> <p>看完上面案例發現有做的是少數，因此我好奇更注重安全的加密貨幣交易所與傳統銀行有沒有做。</p> <h3 id="binance">Binance</h3> <p>API 網址：<a class="link" href="https://accounts.binance.com/bapi/accounts/v2/public/authcenter/login" target="_blank" rel="noopener" >https://accounts.binance.com/bapi/accounts/v2/public/authcenter/login</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;email&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;fe2e6b4138fcd7f27a32bc9af557d69a&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;safePassword&#34;</span><span class="p">:</span><span class="s2">&#34;d404559f602eab6fd602ac7680dacbfaadd13630335e951f097af3900e9de176b6db28512f2e000b9d04fba5133e8b1c6e8df59db3a8ab9d60be4b97cc9e81db&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="coinbase">Coinbase</h3> <p>API 網址：<a class="link" href="https://login.coinbase.com/api/v1/authenticate-credentials" target="_blank" rel="noopener" >https://login.coinbase.com/api/v1/authenticate-credentials</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;email&#34;</span><span class="p">:</span><span class="s2">&#34;test@test.com&#34;</span><span class="p">,</span> <span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;1234&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="kraken">kraken</h3> <p>API 網址：<a class="link" href="https://www.kraken.com/api/internal/account/settings/tfa" target="_blank" rel="noopener" >https://www.kraken.com/api/internal/account/settings/tfa</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span><span class="nt">&#34;username&#34;</span><span class="p">:</span><span class="s2">&#34;test&#34;</span><span class="p">,</span> <span class="nt">&#34;password&#34;</span><span class="p">:</span><span class="s2">&#34;1234&#34;</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="玉山銀行">玉山銀行</h3> <p>API 網址：<a class="link" href="https://ebank.esunbank.com.tw/fco/fco08001/FCO08001_Home.faces" target="_blank" rel="noopener" >https://ebank.esunbank.com.tw/fco/fco08001/FCO08001_Home.faces</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">loginform:custid<span class="o">=</span>A0000... </span></span><span class="line"><span class="cl">loginform:name<span class="o">=</span><span class="nv">mxagZmaqygDx0XX6784Svw</span><span class="o">==</span>__NgZQcFfAx+lQmPza2eNpOA<span class="o">==</span> </span></span><span class="line"><span class="cl">loginform:pxsswd<span class="o">=</span>8,lIRnuUxw/yStOt9QIYG2U3Gn2XkG03x4Ey/UU6JGtsbUxfRXoAv9CjE3EWerDN3tfx3dD/B3ChLAPMSG2BA3jMXUCZC06y8UbQ5isKc9fCWZSSZAWWcOmJ7LdXw1ZhjV55hpw1upvAr9WEmZ0XF6x7if+dBxJ4KZ00d83qA9eA+3VaSk+JLhN8/CFBfTKTfJEs3PDNsm12XzRUBb4YE1aPQosVX10mdvh3zY5lmkrKuq8gnuImEf3oLOk4EF3eVpr6jJiFzMKlHybvGdtKYS25+pgTS68wn3v023barbSmgivcv5atm0XsyXWDY2dKEtdQz+7A6R+AB0bExbQlRjqQ<span class="o">==</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="國泰世華">國泰世華</h3> <p>API 網址：<a class="link" href="https://www.cathaybk.com.tw/MyBank/Quicklinks/Home/NormalSignin" target="_blank" rel="noopener" >https://www.cathaybk.com.tw/MyBank/Quicklinks/Home/NormalSignin</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">CustID</span><span class="o">=</span>A000... </span></span><span class="line"><span class="cl"><span class="nv">UserId</span><span class="o">=</span>DC0C6E52BE2A2354C53401207F220F1B </span></span><span class="line"><span class="cl"><span class="nv">Password</span><span class="o">=</span>8cf5e1977f149ed0362629007a7f91d0efc7b12cb1895ba701c528a12b38d12f8148ca03ee671fe25d2a3a807be980f7728566e359a675734ce046899b147658388bb60f9b900e2ccc9adac280b54b5f2e28cb7eee1b634d0e1ed1c0c0c598c350f61eb003405559331a7f047add7289466bf42cfd5b9e774a1fa116af4fd7050adb8f174d42a8e2098a014a788bd2ffae3bf4ff7a8d8d7e2e8068402fda395da41be6e5d32f2d32cbee2afc26e82c58b60357b5cb186a3b9cf69df2deb9da8c9fde45337935180cb4e177109413d7a758d38bfc8334a4509d8d8fb6a37080f0e0086b4a5ef68f7809ca2ef97183b7f66d996873bb7dbfcee61d2da424b8b968 </span></span></code></pre></td></tr></table> </div> </div><h3 id="中國信託">中國信託</h3> <p>API 網址：<a class="link" href="https://www.ctbcbank.com/IB/api/adapters/IB_Adapter/resource/preLogin" target="_blank" rel="noopener" >https://www.ctbcbank.com/IB/api/adapters/IB_Adapter/resource/preLogin</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;rqData&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;custId&#34;</span><span class="p">:</span> <span class="s2">&#34;A00....&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;pin&#34;</span><span class="p">:</span> <span class="s2">&#34;878dbee38bbb4d77a30ee128f55f7bfe2169e45380d62a75453d3ca175e8ce8b|43d0499147b62adeec4eef3c77d33171b4569d0bdf7bbbe2b8b9bde3d30a26aba69aadfb28dfbaa9a997a0ccf668aaab0b6da582275175272172569a58a60bbfc5ac3a8c6862ce31f86247d7c1adf307e363c0f251fb88c4d39afa6ed0ca0a49e053f4f90000fa77b4e78beaead72ebdf52a13ecb4f20ae9a532947fad8156d5ec69d6763243364e71659079e469d1e01d0c384b0c71f4e9e524890227d82a51a340ef0b48638e05e347d75cb93d4a825a2bce6a90ef47f512351ee2d0d1ea17fb8afd521e427578603ea775191711f81d8dcb18e46b72daf3a49a60e50d12d3887e3bafab3758730f7fb0276373ebe1da01a03162ec8e73a202091a51b7f88d&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;userId&#34;</span><span class="p">:</span> <span class="s2">&#34;bfcdb9b2d6896a3bfb4a6542e8fb2689486d000b11bdc0c7bc336a6534aec74c|1b1a758bb26702bc0ac7cd660da2a72866f2cfdcf3668f2d39a5f8b006854f52a08f418b0a460b36374f95b7a310d73ea9994788698041f524ecd1f153448ab5d51f901a9a08ac2a9ee04c5c273ecb9d4ec1b6a62e9696c6126271e2f8c334fe17ce8b8538139363b90be75c1130cb251ec240bd26c920b52f5be9fc59094ce7d935d826242d69dc1ff7047a5abbf11d3c7de639a14bb10230912903cd948c05b3b3cb0cdb100f979640e291774e623a7109bde7b55bb8a6a373c0ca12820b072132ea61c845e60e26d09c7ee0fe23f7de286cbccb067a86fd1985c5b455f9ae46ce24dc8f52bcb05c205d6a462345162ae82c35e045bf3fd43a297c3edcfe17&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="美國銀行">美國銀行</h3> <p>API 網址：<a class="link" href="https://m.globalcard.bankofamerica.com/pkmslogin.form" target="_blank" rel="noopener" >https://m.globalcard.bankofamerica.com/pkmslogin.form</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">username</span><span class="o">=</span>fcc63767-1a43-4cc6-8c3e-1346350b5274 </span></span><span class="line"><span class="cl"><span class="nv">password</span><span class="o">=</span><span class="m">12345678</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="新加坡星展銀行">新加坡星展銀行</h3> <p>API 網址：<a class="link" href="https://internet-banking.dbs.com.sg/IB/Welcome" target="_blank" rel="noopener" >https://internet-banking.dbs.com.sg/IB/Welcome</a></p> <p>請求內容：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">USER_LOGON_NAME</span><span class="o">=</span>test123 </span></span><span class="line"><span class="cl"><span class="nv">ENCRYPTED_PIN_BLOCK</span><span class="o">=</span>A8C48B7572A1A53C5A66E9B43365027C7FBF14BF461F480A46781E49648A8F70271A29C374F86FCD55A76ED17B2284B47C799B74475F29749D68631FF7E322177A21EEE8C41D8950638A2828C34A2653D7C9F69F5DA568E42D64CE89FCE8F024217B235835E6F8BC3C536F56361EDF459AFCE9A512BDBACAB2D25423209996C2E84A18EA8446685DAF9FAD4B1D6D8DF0F378EC27D9A81AD4D1A2B91BA3CFD838140A9BD48AD8D38D33B0093110BD1CA2C76F3DE4CBD969A9B0260DB890E9B1A99DC1193BFE9A1EDB3E56F71CB1CD8630558B242B040F733A4A40B2E17DE6DA03A58DEC8BB12DA87BB25971E2DBE5AF7AE6112266A3F9027B449BDF46D8DC0A1A </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="結論">結論</h2> <p>在隨機想到的 20 個網站中，有 7 個有在前端做加密或是 hash（我懶得看是哪個了，總之有做事就對了），名單是：</p> <ol> <li>Facebook</li> <li>Proton</li> <li>Binance</li> <li>玉山銀行</li> <li>國泰世華</li> <li>中國信託</li> <li>新加坡星展銀行</li> </ol> <p>雖然說 35% 看起來很高，但那是因為銀行佔了大多數，一般網站則是很少實作這個機制。</p> <p>寫到這邊，可以來下結論了。</p> <ul> <li>第一個結論是：</li> </ul> <p>「在 client 端傳送密碼前先把密碼加密或是 hash，確實能夠增加安全性」</p> <p>理由是做了以後，能夠達成以下事項：</p> <ol> <li>HTTPS 因為各種原因失效時，攻擊者無法取得明文密碼</li> <li>在 Server 端，沒有任何人知道使用者的明文密碼</li> <li>明文密碼不會因為人為失誤被記錄到 log 中</li> </ol> <p>以上都是沒有在 client 加密或是 hash 時做不到的。</p> <ul> <li>第二個結論是：</li> </ul> <p>「確實有些大公司有做這個機制，但是非大多數，不過在銀行業似乎是主流」</p> <p>這個結論上面有貼完整的資料了，一般的網站很少做這個機制，但還是有人做。</p> <ul> <li>第三個結論是：</li> </ul> <p>「雖然從技術上來看能夠增加安全性，但實際上是否實作，仍然要考慮其他因素」</p> <p>這因素就是我前面提過的「可能性」還有開頭我講先不談的「成本」。</p> <p>若是真的比較安全，為什麼一般網站不會實作這個機制？</p> <p>或許是因為覺得 HTTPS 被攻破的可能性太低，低到可以忽略不計（我相信這是大多數留言的人覺得不需要做的理由，我也同意這點），也或許是成本太高，會增加程式碼複雜度；若是採用加密的方案，也會消耗更多運算的資源在加解密上面，這也是成本。</p> <p>這就是我覺得應該講清楚的地方。</p> <p>在前端先做 hash 或是加密，它確實是有優點的，不是多此一舉，也不是沒有意義，更不是讓系統變得更危險。</p> <p>但這不代表每個系統都該實作這個機制，因為它帶來的效益或許沒有成本高，這個端看各個公司的考量。對大部分的公司來說，與其為了 HTTPS 失效這個極低的可能性去投入成本，不如把時間花在加強其他登入環節的安全性（例如說 2FA 啦，或是不同裝置登錄警告等等），帶來的效益會更高。</p> <p>有些服務還會選擇把整包 request 都加密，而非只有密碼，這個又更安全但是成本又更高，而且 debug 很不方便。雖然說既然加密做在 client 端，攻擊者一定有辦法逆向這個機制，看出是怎麼做的，但這不代表這些機制沒幫助。</p> <p>舉例來說，假設我有個搶票 App 不想讓別人知道 API 怎麼呼叫，於是就實作了一個超複雜的加解密機制，儘管高手還是可以做逆向工程，寫出一個搶票機器人，但這個機制增加了他的時間成本以及對技術的要求。</p> <p>以技術上來說，就算理論上一定會被破解，這些機制還是有意義的，它的意義在於增加破解難度，加殼、混淆都是一樣的，不會因為「在 client 端的東西一定會被看穿」而不去做這些機制。</p> <p>重點在於你想保護的商業邏輯的價值，有沒有高到你需要付出這些成本去做額外的安全機制。</p> <p>最後，如果你需要一個條列式的簡單結論，會是：</p> <ol> <li>無論如何，一定要先用 HTTPS</li> <li>在前端先把密碼做加密或是 hash 後再傳送，能夠增加安全性，但同時也帶來不少成本</li> <li>如果你是銀行或需要同等安全性，再來考慮要不要做這個，否則極大多數的狀況下，你不需要這個機制就夠安全了，資源投入在其他地方的效益會更大</li> </ol> <p>若是對這個結論有不同意見，或是有在文章中發現哪些邏輯錯誤或技術錯誤，歡迎留言指正與討論，感恩。</p> <p>補充一下，這篇大多數從技術面來看，除此之外還可以從法遵面或是資安的實務經驗來看，但這些面向我就零經驗了。許願一下有相關經驗的人出來指點迷津，或許會有不同觀點。</p> <hr>https://blog.wayne-project.com/2023-01-16/nuxt-nuxt3-practice-project/Mon, 16 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-16/nuxt-nuxt3-practice-project/<img src="https://live.staticflickr.com/65535/52630283696_c93e29e870_o.png" alt="Featured image of post 【Nuxt3】實戰練習 - 實作部落格" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10292483" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/users/20152617/ironman/5934" target="_blank" rel="noopener" >參考網站</a></p> <p>大家經過 <a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記</a> 這篇文章，應該對於 Nuxt 3 有初步的理解，接下來我們將進入實戰部分，我將會以 Nuxt 3 來實作部落格網站，讓已經註冊的使用者可以在網站上發布文章，實作這個網站的程式碼可能不會講解得非常仔細，但一些實務開發上會需要注意的細節我會把個人經驗做一個紀錄，大家可以再參考看看，文末也都會附上完整的範例程式。接下來，讓我們開始吧！</p> <hr> <h2 id="資料庫與會員系統">資料庫與會員系統</h2> <h3 id="資料庫-database">資料庫 (Database)</h3> <p>這篇文章實作的部落格，會把會員與文章等資料儲存於伺服器的資料庫之中，大家可以選擇自己習慣或合適的資料庫來做儲存。為了方便及後續的展示，我最終決定使用 <a class="link" href="https://www.prisma.io/" target="_blank" rel="noopener" >Prisma</a> 搭配本地的 <strong>SQLite</strong> 來當作儲存體，讓大家測試時不用再煩惱怎麼架設資料庫，可以快速的執行範例程式碼。</p> <blockquote> <p>你可以在自己的 Nuxt 專案或從新專案開始進行，若你已經有自己的資料庫，也可以直接跳過此段介紹後續實作自己的後端 API 來接續我們的實作系列。</p></blockquote> <h3 id="安裝-prisma">安裝 Prisma</h3> <p><a class="link" href="https://www.prisma.io/" target="_blank" rel="noopener" >Prisma</a> 操作起來很像 ORM (Object-Relational Mapping)，但實際上依據<a class="link" href="https://www.prisma.io/docs/concepts/overview/prisma-in-your-stack/is-prisma-an-orm" target="_blank" rel="noopener" >官網的說明</a>，其實不大依樣，Prisma 透過撰寫並根據 <code>Schema</code> 來建立或操作資料庫，在進行 <strong>CRUD</strong> 的操作時，都是透過 Prisma Client 進行，這也是最方便的地方，此外也支援多種資料庫的來源，只要操作 Model 就可以映射到資料庫的資料，不再需要寫 SQL，在一些情境之下是非常方便的。</p> <p>首先，使用 NPM 安裝 <code>prisma</code> 與 <code>@prisma/client</code></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D prisma @prisma/client </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D prisma @prisma/client</span> </span></span></code></pre></td></tr></table> </div> </div><p>打開終端機 (Terminal) 於 Nuxt 專案目錄中， 使用下列指令，初始化一個 <strong>Prisma</strong> 的 <code>Schema</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma ini </span></span></code></pre></td></tr></table> </div> </div><p>初始化完成後，會建立一個 <code>schema.prisma</code> 檔案。</p> <p><img src="https://live.staticflickr.com/65535/52630762803_78afc17ebe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><code>./prisma/schema.prisma</code> 檔案內容如下，這裡就是定義我們資料庫位置與 <code>Schema</code> 的地方，之後我們就可以透過 <strong>Prisma</strong> 的 <strong>Client</strong> 使用 ORM 來操作資料庫。</p> <h5 id="prismaschemaprisma">prisma/schema.prisma</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">// This is your Prisma schema file, </span></span><span class="line"><span class="cl">// learn more about it in the docs: https://pris.ly/d/prisma-schema </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">generator client { </span></span><span class="line"><span class="cl"> provider = &#34;prisma-client-js&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;postgresql&#34; </span></span><span class="line"><span class="cl"> url = env(&#34;DATABASE_URL&#34;) </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>我們調整 <code>./prisma/schema.prisma</code> 檔案內容，將 <code>datasource</code> 替換為 SQLite 並儲存在本地的 <code>./dev.db</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;sqlite&#34; </span></span><span class="line"><span class="cl"> url = &#34;file:./dev.db&#34; </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>你也可以將 provider 替換為 PostgreSQL 或 MySQL 等，可以參考<a class="link" href="https://www.prisma.io/docs/concepts/database-connectors" target="_blank" rel="noopener" >這裡</a>，但要注意可能後面定義的 Schema 語法會略微不同。</p></blockquote> <p>接下來我們定義一個 <code>User</code> 的資料表，在 <code>schema.prisma</code> 撰寫如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">model User { </span></span><span class="line"><span class="cl"> id String @id @default(uuid()) </span></span><span class="line"><span class="cl"> providerName String? </span></span><span class="line"><span class="cl"> providerUserId String? </span></span><span class="line"><span class="cl"> nickname String @default(&#34;User&#34;) </span></span><span class="line"><span class="cl"> email String @unique </span></span><span class="line"><span class="cl"> password String? </span></span><span class="line"><span class="cl"> avatar String? </span></span><span class="line"><span class="cl"> emailVerified Boolean @default(false) </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>這張 <code>User</code> 資料表，將用作於部落格的登入使用者做使用，也可以視為是會員系統使用的資料表，大家也可以依據需求來擴增欄位，以下稍微講述一下各個欄位將作為何用。</p> <ul> <li>id: 預設為 UUID，為使用者的唯一識別。</li> <li>providerName: 作為第三方登入的供應商記錄使用，例如該名使用者使用 Google OAuth 註冊登入，我會在欄位就會填上 google。如果為空值 (null) 表示使用者用電子信箱註冊登入。</li> <li>providerUserId: 與 providerName 搭配使用，第三方供應商通常也會有一組專屬於使用者的 Id，以此我們就可以來比對登入的是哪位使用者。如果為空值 (null) 表示使用者用電子信箱註冊登入。</li> <li>nickname: 使用者暱稱，預設值為字串 User。</li> <li>email: 使用者登入的電子信箱，這裡我將欄位設定為 @unique 表示，電子信箱是系統中唯一。</li> <li>password:使用者密碼的雜湊值，如果使用第三方註冊登入，則該欄位為 空值 (null)。</li> <li>avatar: 使用者的頭像，存放圖片網址。</li> <li>emailVerified: 布林值，預設為 false，表示使用者的電子信箱是尚未通過驗證。</li> <li>createdAt: 使用者建立時間，預設為插入該筆資料的時間。</li> <li>updatedAt: 使用者更新個人資料的時間，預設為更新該筆資料的時間。</li> </ul> <p><code>./prisma/schema.prisma</code> 檔案內容看起來如下：</p> <h5 id="prismaschemaprisma-1">prisma/schema.prisma</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">// This is your Prisma schema file, </span></span><span class="line"><span class="cl">// learn more about it in the docs: https://pris.ly/d/prisma-schema </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">generator client { </span></span><span class="line"><span class="cl"> provider = &#34;prisma-client-js&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;sqlite&#34; </span></span><span class="line"><span class="cl"> url = &#34;file:./dev.db&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">model User { </span></span><span class="line"><span class="cl"> id String @id @default(uuid()) </span></span><span class="line"><span class="cl"> providerName String? </span></span><span class="line"><span class="cl"> providerUserId String? </span></span><span class="line"><span class="cl"> nickname String @default(&#34;User&#34;) </span></span><span class="line"><span class="cl"> email String @unique </span></span><span class="line"><span class="cl"> password String? </span></span><span class="line"><span class="cl"> avatar String? </span></span><span class="line"><span class="cl"> emailVerified Boolean @default(false) </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>當我們調整好 schema 後，就可以執行下列指令，來初始化資料庫，Prisma 會依照 <code>schema.prism</code> 來幫我們建立對應的資料表。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma db push </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630762818_df25ebac5c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>初始化完畢後，你可以登入你的資料庫查看是否建立成功，也可使用 Prisma 提供的 <a class="link" href="https://www.prisma.io/studio" target="_blank" rel="noopener" >Prisma Studio</a> 來快速的檢視與操作資料庫內的資料。<a class="link" href="https://www.prisma.io/studio" target="_blank" rel="noopener" >Prisma Studio</a> 已經內建在 prisma 套件中，執行以下指令後，就會啟動一個 Web 服務，如 <a class="link" href="http://localhost:5555" target="_blank" rel="noopener" >http://localhost:5555</a>，我們就可以在網頁中查看資料庫內的資料囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma studio </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630533384_49e793de57_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以在 <a class="link" href="https://www.prisma.io/studio" target="_blank" rel="noopener" >Prisma Studio</a> 看到我們建立的 <code>User</code> 資料表，也將是我們稍後使用 Prisma 操作 ORM 所對應的 <strong>User Model</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52629765912_5000672fc2_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>最後記得執行下列指令來產生 Prisma Client，這樣我們就可以在 Nuxt 3 中使用 Prisma Client 操作資料庫囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma generate </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630723465_bd7f83c262_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="nuxt-3-操作-prisma-client-建立一個使用者至資料庫">Nuxt 3 操作 Prisma Client 建立一個使用者至資料庫</h3> <p>我們接下來就能使用如下程式碼建立 Prisma Client，後續可以用來來操作 <strong>Model</strong>，更多的 Prisma Client API 可以參考<a class="link" href="https://www.prisma.io/docs/reference/api-reference/prisma-client-reference" target="_blank" rel="noopener" >官方文件</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;@prisma/client&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">prismaClient</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們建立一隻 Server API，新增 <code>./server/api/test-create-user.get.js</code>，用來測試收到請求後建立一個測試使用者，詳細的程式碼如下：</p> <h5 id="serverapitest-create-usergetjs">server/api/test-create-user.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@prisma/client&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">prismaClient</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">prismaClient</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerName</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerUserId</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="s1">&#39;Ryan&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;ryanchien8125@gmail.com&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="s1">&#39;這裡要放密碼的雜湊值&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">user</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們送出 <code>/api/test-create-user</code> 後，後端會使用 Prisma Client 操作 User Model，我們就能使用 ORM 來建立出使用者的資料庫記錄。</p> <p><img src="https://live.staticflickr.com/65535/52630723535_2ec455193c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="nuxt-3-使用者註冊帳號">Nuxt 3 使用者註冊帳號</h3> <p>我們將 <a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e5%af%a6%e4%bd%9c%e7%b7%b4%e7%bf%92" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記</a> 這篇文章，所串接的 Google OAuth 及 Cookie 做一個結合，讓使用者透過 Google Auth 登入後可以自動的註冊建立使用者或登入產生 Access Token。</p> <p><code>./server/api/auth/google.post.js</code> 程式碼如下：</p> <h5 id="serverapiauthgooglepostjs">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span><span class="lnt">64 </span><span class="lnt">65 </span><span class="lnt">66 </span><span class="lnt">67 </span><span class="lnt">68 </span><span class="lnt">69 </span><span class="lnt">70 </span><span class="lnt">71 </span><span class="lnt">72 </span><span class="lnt">73 </span><span class="lnt">74 </span><span class="lnt">75 </span><span class="lnt">76 </span><span class="lnt">77 </span><span class="lnt">78 </span><span class="lnt">79 </span><span class="lnt">80 </span><span class="lnt">81 </span><span class="lnt">82 </span><span class="lnt">83 </span><span class="lnt">84 </span><span class="lnt">85 </span><span class="lnt">86 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">accessToken</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserByEmail</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">(</span><span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span> <span class="o">===</span> <span class="s1">&#39;google&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> <span class="o">===</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">)</span> <span class="o">===</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;This email address does not apply to this login method&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">createUser</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerName</span><span class="o">:</span> <span class="s1">&#39;google&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerUserId</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email_verified</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtTokenPayload</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">maxAge</span> <span class="o">=</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">expires</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="nx">maxAge</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exp</span><span class="o">:</span> <span class="nx">expires</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">jwtTokenPayload</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">jwtToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>程式碼內容稍微有一點多，但講解一下流整與概念：</p> <ol> <li>當前端 Google OAuth 登入成功後，將回傳的 Google access_token 傳送至這隻 API，並使用 Google API 取得使用者資訊。</li> <li><code>db.user.getUserByEmail</code> 這個是我封裝的方法，裡面對應著 Prisma 的 ORM 操作，如果你想也可以在這邊替換你的資料庫操作邏輯，主要這個方法，就是依照使用者的 Email 回傳資料庫內<code>是否存在一筆符合的使用者記錄</code>。</li> <li>如果存在，我會判斷 provider 是否符合 Google 的使用者資訊，否則判斷為應該是用電子信箱註冊的使用者。</li> <li>如果不存在，則建立一個新的使用者至資料庫內，建立時不需要傳入 id 資料庫因為設定為自動產生 UUID。</li> <li>最後就是產生使用者的 JWT 並設定在 cookie 之中。</li> </ol> <p>另外，我也實作了使用電子信箱直接註冊的方式，<code>./server/api/auth/register.post.js</code> 程式碼如下：</p> <h5 id="serverapiauthregisterpostjs">server/api/auth/register.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">bcrypt</span> <span class="nx">from</span> <span class="s1">&#39;bcrypt&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserByEmail</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;A user with that email address already exists&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">createUser</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerName</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">providerUserId</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="nx">bcrypt</span><span class="p">.</span><span class="nx">hashSync</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">password</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用電子信箱與密碼註冊的流程很簡單，就是判斷是否存在相同信箱的使用者，不存在的話就為它建立一筆紀錄。</p> <p>這邊要注意的是，會員系統或牽扯到帳號密碼相關的，請一律使用雜湊演算法，例如 <strong>BCrypt</strong> 或 <strong>Argon2</strong>，為使用者的密碼做 Hash，不要再存明碼在資料庫之中囉，以免發生資安事件時，造成不可挽回的悲劇。</p> <p>順便也實作一下使用電子信箱與密碼登入的 API，<code>./server/api/auth/login.post.js</code> 程式碼如下：</p> <h5 id="serverapiauthloginpostjs">server/api/auth/login.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">bcrypt</span> <span class="nx">from</span> <span class="s1">&#39;bcrypt&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserByEmail</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Email or password is incorrect&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">((</span><span class="kr">await</span> <span class="nx">bcrypt</span><span class="p">.</span><span class="nx">compare</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">password</span><span class="p">,</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">password</span><span class="p">))</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Email or password is incorrect&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtTokenPayload</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">maxAge</span> <span class="o">=</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">expires</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="nx">maxAge</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exp</span><span class="o">:</span> <span class="nx">expires</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">jwtTokenPayload</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">jwtToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>使用 Google OAuth 登入</li> </ul> <p><img src="https://live.staticflickr.com/65535/52630723565_6ddcf3d4bb_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>使用電子信箱與密碼登入</li> </ul> <p><img src="https://live.staticflickr.com/65535/52629766447_e4b4472475_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="結合-pinia-儲存使用者資料">結合 Pinia 儲存使用者資料</h3> <p>我們可以結合 Pinia 來將使用者的資料持久話儲存在 Local Storage 之中，這樣就可以在前端儲存使用者登入的狀態，例如導覽列的頭像、信箱，就可以從 Store 中拿出來囉。</p> <p>建立 <code>./server/profile.get.js</code> 檔案，用來取得使用者資料：</p> <h5 id="serverprofilegetjs">server/profile.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span><span class="nx">jwtToken</span><span class="p">,</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserById</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not find user.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個 <strong>user</strong> 的 <strong>store</strong>，<code>./stores/user.js</code> 內容如下：</p> <h5 id="storesuserjs">stores/user.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useUserStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;user&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">profile</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">async</span> <span class="nx">refreshUserProfile</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">error</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/user/profile&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">initialCache</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">error</span><span class="p">.</span><span class="nx">value</span><span class="o">?</span><span class="p">.</span><span class="nx">data</span><span class="o">?</span><span class="p">.</span><span class="nx">message</span> <span class="o">??</span> <span class="s1">&#39;未知錯誤&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">persist</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">enabled</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategies</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;user&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">storage</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">client</span> <span class="o">?</span> <span class="nx">localStorage</span> <span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以直接使用 <code>refreshUserProfile()</code> 來發送請求至 <code>/api/user/profile</code> 取得最新的使用者資料來更新 store。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">userStore</span><span class="p">.</span><span class="nx">refreshUserProfile</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630533839_b540b524b0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="使用伺服器中間件來驗證-jwt">使用伺服器中間件來驗證 JWT</h3> <p>我們的會員系統在登入後，會產生一組 JWT 放置於 cookie 之中，在後端 API 使用時都要在呼叫 <code>getCookie()</code> 來解析 cookie，所以我們可以將驗證 JWT 的流程，放置在伺服器中間件 (middleware) 之中，後端收到的每個請求就會經過這個中間件，只要有夾帶 <code>access_token</code> 的 cookie 就會進行驗證解析出 JWT 所含的 <code>payload</code> id，即為使用者的 ID。</p> <p>建立 <code>./server/middleware/auth.js</code> 檔案，內容如下：</p> <h5 id="servermiddlewareauthjs">server/middleware/auth.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">jwtToken</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span><span class="nx">jwtToken</span><span class="p">,</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">userInfo</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">auth</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Invalid token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>伺服器的中間件只要定義在 <code>./server/middleware</code> 目錄下就會自動被載入，之後在每個 Server API 收到請求，中間件只要有成功驗證並解析 JWT，就會在 <code>event.context.auth</code> 添加使用者資訊，之後在 Server API 的處理函數中，就可以以下列程式碼進行使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="o">?</span><span class="p">.</span><span class="nx">auth</span><span class="o">?</span><span class="p">.</span><span class="nx">user</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整後的 <code>./server/profile.get.js</code> 檔案，就會乾淨許多囉！</p> <h5 id="serverprofilegetjs-1">server/profile.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="o">?</span><span class="p">.</span><span class="nx">auth</span><span class="o">?</span><span class="p">.</span><span class="nx">user</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">user</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">getUserById</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">user</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not find user.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">provider</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">providerUserId</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">avatar</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userRecord</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>為了實作部落格，我們使用 Prisma 快速的建立資料庫環境，也方便大家可以下載範例程式碼，就可以在自己的電腦上運作 SQLite。也結合 Pinia 來將使用者的資料進行持久化的儲存，這樣我們就可以實作出如判斷使用者是否登入或是建立導覽列上的登入狀態。</p> <p><a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day21/nuxt-app-blog-prisma" target="_blank" rel="noopener" >範例程式碼 - Nuxt 3 - 實作部落格資料庫與會員系統</a></p> <hr> <h2 id="導覽列模板與新增文章">導覽列模板與新增文章</h2> <p>上面我們完成了基本的會員登入，接下來將進入網站的切版，以下會使用布局模板來實現，上方導覽列與下方顯示網站內容的排版方式，接下來就會快速的進入到新增一篇部落格的文章，該如何實現 Server API 與前端進行串接。</p> <h3 id="預設布局模板">預設布局模板</h3> <p>首先，建立一個預設布局模板，我們預計使每個頁面於上方顯示導覽列，下方則是依據不同的頁面來顯示，大概如下所示。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">+---------------------------+ </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> 導覽列 <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> 不同頁面的內容顯示的位置 <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl">+---------------------------+ </span></span></code></pre></td></tr></table> </div> </div><p>我們可以建立一個 <code>default.vue</code> 於 <code>layouts</code> 目錄中，作為預設的佈局模板，模板內約會實作下面的程式碼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!--</span> <span class="nx">導覽列</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>&lt;header&gt;</code> 裡面就是我們可以實作導覽列的位置，下方的 <code>&lt;slot /&gt;</code> 插槽，即會是我們可以放置頁面的容器。</p> <p>完整的 <code>./layouts/default.vue</code> 程式碼如下：</p> <h5 id="layoutsdefaultvue">layouts/default.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex w-full justify-center px-8 xl:px-0&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex w-full max-w-7xl items-center justify-between py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">aria</span><span class="nt">-label</span><span class="err">=&#34;</span><span class="na">TailwindBlog</span><span class="err">&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex items-center justify-between&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mr-3&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Icon</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-12 w-12&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;logos:nuxt-icon&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hidden h-6 text-2xl font-semibold text-gray-700 sm:block&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">Nuxt</span> <span class="mi">3</span> <span class="nx">Blog</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex items-center text-base leading-5&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-row items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-3 py-2 text-gray-700 transition hover:text-emerald-500&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/login&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">登入</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userProfile</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">userStore</span><span class="p">.</span><span class="nx">profile</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著記得調整 <code>app.vue</code> 內容，添加一個 <code>&lt;NuxtLayout&gt;</code> 元件來顯示預設的布局模板，包裹著的 <code>&lt;NuxtPage /&gt;</code> 即會放置於 <code>default.vue</code> 預設插槽之中，如此就能顯示路由的頁面。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>至此，我們就完成的第一個導覽列，可以由導覽列提供的「登入」，切換至登入頁面，並且在每個頁面中，都使用預設的布局模板，所以都會顯示導覽列。</p> <p><img src="https://live.staticflickr.com/65535/52630283636_1b4a7e4a8d_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="取消或替換特定頁面的布局模板">取消或替換特定頁面的布局模板</h3> <p>在<a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e5%b8%83%e5%b1%80%e6%a8%a1%e6%9d%bf-layouts" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記 - Nuxt 3 布局模板 (Layouts)</a> 內有介紹到，我們可以建立多個布局模板，而 Nuxt 也提供我們可以為頁面元件取消使用或選擇特定的布局模板。</p> <p>例如，我們想將登入與註冊頁面，取消套用預設的布局模板，我們就可以使用 <code>definePageMeta()</code> 來傳入 <code>layout: false</code> 屬性來取消布局模板的使用。</p> <p>調整登入頁面 <code>./pages/login.vue</code></p> <h5 id="pagesloginvue">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來，登入頁面將不會使用布局模板，導覽列也就不會顯示。</p> <p><img src="https://live.staticflickr.com/65535/52629766332_32a030f2f1_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立使用者選單">建立使用者選單</h3> <p>為了豐富導覽列，我們可以為已登入的使用者，建立一個使用者頭像，點擊後可以顯示使用者專用的選項，例如登出等功能。</p> <h4 id="安裝-headless-ui">安裝 headless UI</h4> <p>我們的使用的是 Tailwind CSS 來做樣式的處理，<a class="link" href="https://headlessui.com/" target="_blank" rel="noopener" >headless UI</a> 已經封裝一些實用且好看的元件，元件基於 Tailwind CSS 可以讓我們的風格更一致，也能更彈性的自訂成自己喜歡的樣式。</p> <p>使用 NPM 安裝 <code>@headlessui/vue</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D @headlessui/vue </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D @headlessui/vue</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <code>nuxt.config.ts</code>，將 <code>@headlessui/vue</code> 新增至 <code>build.transpile</code> 屬性之中。</p> <h5 id="nuxtconfigts">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">build</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">transpile</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@headlessui/vue&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立使用者頭像選單元件">建立使用者頭像選單元件</h3> <p>新增 <code>./components/NavigationBar/NavigationBarAvatarMenu.vue</code> 內容如下：</p> <h5 id="componentsnavigationbarnavigationbaravatarmenuvue">components/NavigationBar/NavigationBarAvatarMenu.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Menu</span> <span class="na">as</span><span class="o">=</span><span class="s">&#34;div&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;relative inline-block text-left&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">MenuButton</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex w-full justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-block h-10 w-10 rounded-full bg-white/90 object-cover object-center p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=128&amp;q=80&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;使用者選單&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">MenuButton</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">transition</span> </span></span><span class="line"><span class="cl"> <span class="na">enter</span><span class="nt">-active-class</span><span class="err">=&#34;</span><span class="na">transition</span> <span class="na">duration</span><span class="nt">-100</span> <span class="na">ease</span><span class="nt">-out</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">enter</span><span class="nt">-from-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-95</span> <span class="na">opacity</span><span class="nt">-0</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">enter</span><span class="nt">-to-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-100</span> <span class="na">opacity</span><span class="nt">-100</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">leave</span><span class="nt">-active-class</span><span class="err">=&#34;</span><span class="na">transition</span> <span class="na">duration</span><span class="nt">-75</span> <span class="na">ease</span><span class="nt">-in</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">leave</span><span class="nt">-from-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-100</span> <span class="na">opacity</span><span class="nt">-100</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">leave</span><span class="nt">-to-class</span><span class="err">=&#34;</span><span class="na">transform</span> <span class="na">scale</span><span class="nt">-95</span> <span class="na">opacity</span><span class="nt">-0</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">MenuItems</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-1 py-1&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">MenuItem</span> <span class="nt">v-slot</span><span class="o">=</span><span class="s">&#34;{ active }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="o">:</span><span class="na">class</span><span class="o">=</span><span class="s">&#34;[ </span></span></span><span class="line"><span class="cl"><span class="s"> active ? &#39;bg-emerald-500 text-white&#39; : &#39;text-gray-900&#39;, </span></span></span><span class="line"><span class="cl"><span class="s"> &#39;group flex w-full items-center rounded-md px-2 py-2 text-sm&#39; </span></span></span><span class="line"><span class="cl"><span class="s"> ]&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Icon</span> </span></span><span class="line"><span class="cl"> <span class="nt">:active</span><span class="o">=</span><span class="s">&#34;active&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mr-2 h-5 w-5 text-emerald-400&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">name</span><span class="o">=</span><span class="s">&#34;ri:logout-box-line&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">aria</span><span class="nt">-hidden</span><span class="err">=&#34;</span><span class="na">true</span><span class="err">&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">登出</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">MenuItem</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">MenuItems</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">transition</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Menu</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Menu</span><span class="p">,</span> <span class="nx">MenuButton</span><span class="p">,</span> <span class="nx">MenuItems</span><span class="p">,</span> <span class="nx">MenuItem</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@headlessui/vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>將 <code>&lt;NavigationBarAvatarMenu&gt;</code> 元件添加至導覽列之中，我們就可以擁有一個使用者頭像的選單囉。</p> <p><img src="https://live.staticflickr.com/65535/52630283566_d85ef1e3bd_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="結合使用者-store-來控制顯示的時機">結合使用者 Store 來控制顯示的時機</h3> <p>使用者頭像選單的元件應該控制於<code>使用者登入之後再顯示</code>，所以我們可以結合 <strong>Pinia</strong> 進行狀態管理，來檢查使用者資訊的 <strong>store</strong> 是否具有資料且符合我們的判定依據再進行顯示，否則，我們僅需要渲染出登入的按鈕即可。</p> <p>例如，我們從 User Store 取出使用者資訊 (Profile)，並判斷是否有 <code>id</code> 來決定要顯示<strong>使用者頭像選單</strong>或<strong>登入</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NavigationBarAvatarMenu</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;userProfile?.id&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-else</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-3 py-2 text-gray-700 transition hover:text-emerald-500&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/login&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">登入</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userProfile</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">userStore</span><span class="p">.</span><span class="nx">profile</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>整個完成後，介面看起來就會比較乾淨也符合<strong>登入</strong>與<strong>未登入</strong>時，應該顯示的介面樣子。</p> <p><img src="https://live.staticflickr.com/65535/52629766292_716565c416_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="新增部落格文章">新增部落格文章</h3> <p>當我們處理好登入後，就開可以開始來實作使用者建立部落格的文章囉！</p> <h4 id="建立文章資料表">建立文章資料表</h4> <p>我們的資料庫，是透過 Prisma 的 Schema 來自動產生資料表，我們可以建立如下的 Schema，來作為儲存文章內容的資料表。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">model Article { </span></span><span class="line"><span class="cl"> id Int @id @default(autoincrement()) </span></span><span class="line"><span class="cl"> title String </span></span><span class="line"><span class="cl"> content String </span></span><span class="line"><span class="cl"> cover String </span></span><span class="line"><span class="cl"> tags String </span></span><span class="line"><span class="cl"> authorId String? </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>欄位相對簡單，各個欄位的用途與說明如下：</p> <ul> <li>id: 文章的 ID，採用自動遞增的數字。</li> <li>title: 文章的標題。</li> <li>content: 文章的內容。</li> <li>cover: 文章的封面圖片。</li> <li>tags: 文章的標籤。</li> <li>authorId: 對應 <code>User</code> 資料表的 <code>id</code> 欄位，表示文章的作者。</li> <li>createdAt: 文章建立時間，預設為插入該筆資料的時間。</li> <li>updatedAt: 使用者更新文章資料的時間，預設為更新該筆資料的時間。</li> </ul> <p>另外，我想讓 <code>Article</code> 具有關聯性，所以我們可以使用 Prisma 提供的語法，來建立與 <code>User</code> 的外鍵 (Foreign Key)，最後完整的 <code>schema.prisma</code> 如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">// This is your Prisma schema file, </span></span><span class="line"><span class="cl">// learn more about it in the docs: https://pris.ly/d/prisma-schema </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">generator client { </span></span><span class="line"><span class="cl"> provider = &#34;prisma-client-js&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">datasource db { </span></span><span class="line"><span class="cl"> provider = &#34;sqlite&#34; </span></span><span class="line"><span class="cl"> url = &#34;file:./dev.db&#34; </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">model User { </span></span><span class="line"><span class="cl"> id String @id @default(uuid()) </span></span><span class="line"><span class="cl"> providerName String? </span></span><span class="line"><span class="cl"> providerUserId String? </span></span><span class="line"><span class="cl"> nickname String @default(&#34;User&#34;) </span></span><span class="line"><span class="cl"> email String @unique </span></span><span class="line"><span class="cl"> password String? </span></span><span class="line"><span class="cl"> avatar String? </span></span><span class="line"><span class="cl"> emailVerified Boolean @default(false) </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl"> Article Article[] </span></span><span class="line"><span class="cl">} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">model Article { </span></span><span class="line"><span class="cl"> id Int @id @default(autoincrement()) </span></span><span class="line"><span class="cl"> title String </span></span><span class="line"><span class="cl"> content String </span></span><span class="line"><span class="cl"> cover String </span></span><span class="line"><span class="cl"> tags String </span></span><span class="line"><span class="cl"> authorId String? </span></span><span class="line"><span class="cl"> createdAt DateTime @default(now()) </span></span><span class="line"><span class="cl"> updatedAt DateTime @updatedAt </span></span><span class="line"><span class="cl"> User User? @relation(fields: [authorId], references: [id]) </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>記得執行以下指令，來讓 Prisma 建立新的資料表。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx prisma db push </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立新增文章的-api">建立新增文章的 API</h3> <p>建立 <code>./server/api/manage/articles.post.js</code>，內容如下：</p> <h5 id="serverapimanagearticlespostjs">server/api/manage/articles.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="o">?</span><span class="p">.</span><span class="nx">auth</span><span class="o">?</span><span class="p">.</span><span class="nx">user</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">user</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">authorId</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">id</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articleRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">article</span><span class="p">.</span><span class="nx">createArticle</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">content</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cover</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">cover</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">tags</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">authorId</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">articleRecord</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Create article failed. Please try again later.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articleRecord</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>整個 Server API 的運作流程如下：</p> <ol> <li>使用者將欲新增的文章資料以 POST 發送至 <code>/api/manage/article</code>，伺服器中間件，將會解析 JWT 來得到 user。</li> <li>判斷 user.id 來決定是否具有權限，如果正確解析 JWT，表示請求為一個已登入的使用者發送，也將放行給予新增文章。</li> <li>處理函數將解析 Body 內的資料，並建構出往資料庫新增文章記錄的內容。</li> <li>判斷是否新增成功，回傳新增的文章資料。</li> </ol> <p>建立文章的 Prisma Client 操作如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="nx">createArticle</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articleRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">article</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">create</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">content</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cover</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">cover</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">tags</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">tags</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">authorId</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">authorId</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not create article. Please try again later.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articleRecord</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就完成了建立文章的 API 囉！</p> <p><img src="https://live.staticflickr.com/65535/52629766247_47662d0614_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="取得部落格文章">取得部落格文章</h3> <p>使用 Prisma Client 來取得文章，也非常方便，如下程式碼，我們就能取出文章資料並以建立時間遞減排序囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="nx">getArticles</span><span class="p">(</span><span class="nx">options</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articleRecords</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">article</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">findMany</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">orderBy</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">createdAt</span><span class="o">:</span> <span class="s1">&#39;desc&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">skip</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pageSize</span> <span class="o">?</span> <span class="nx">options</span><span class="p">.</span><span class="nx">page</span> <span class="o">*</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pageSize</span> <span class="o">:</span> <span class="kc">undefined</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">take</span><span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pageSize</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Could not create user. Please try again later.&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articleRecords</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>./server/api/articles.get.js</code> 是實作取得文章的 API，我們期望任何人都可以瀏覽這個部落格的文章，所以這隻 API 我們無需驗證使用者即可放行，程式碼如下：</p> <h5 id="serverapiarticlesgetjs">server/api/articles.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">db</span> <span class="nx">from</span> <span class="s1">&#39;@/server/db&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">articlesRecord</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">db</span><span class="p">.</span><span class="nx">article</span><span class="p">.</span><span class="nx">getArticles</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">articlesRecord</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們也可以在 <code>./server/api/articles.get.js</code> 處理函數內，添加資料的分頁或為文章資料進行加工，以利前端顯示。</p> <p><img src="https://live.staticflickr.com/65535/52630723890_b20d0977bf_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們建立好了部落個的版面，有了導覽列和使用者選單，網站看起來也更專業了一些，結合布局模板，我們可以控制每個頁面所顯示的布局，在未來有更多頁面的時候能具有可控性。最後也實作了新增文章的 API，完成了第一篇文章的新增與瀏覽。</p> <hr> <h2 id="頁面的導航守衛與切換效果">頁面的導航守衛與切換效果</h2> <p>我們完成了新增文章的頁面與流程，在網站開發的過程中，有些頁面是具有瀏覽的限制，例如，我們不希望一般的使用者能進到管理者頁面專用的頁面進行操作，這時候我們就需要做一些權限的驗證與限制，在 Nuxt 的頁面提供了路由中間件可以在我們導航至頁面之前，執行一些處理函數，就實作<strong>導航守衛 (Navigations Guards)</strong> 的效果。最後會介紹一下在 Nuxt 3 所提供的頁面和布局切換時的<strong>進度條 (Progress bar)</strong> 與<strong>轉場效果 (Transitions)</strong>。</p> <h3 id="頁面間的導航守衛">頁面間的導航守衛</h3> <h4 id="只允許已登入使用者新增文章">只允許已登入使用者新增文章</h4> <p>首先，我們新增一個路由中間件 <code>./middleware/manage-auth.js</code> 內容如下：</p> <h5 id="middlewaremanage-authjs">middleware/manage-auth.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useUserStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/user&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">client</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userStore</span> <span class="o">=</span> <span class="nx">useUserStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userStore</span><span class="p">.</span><span class="nx">profile</span><span class="o">?</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在頁面元件中使用 <code>definePageMeta()</code> 來套用 <code>manage-auth</code> 中間件。調整 <code>./pages/manage/articles/create.vue</code> 內容：</p> <h5 id="pagesmanagearticlescreatevue">pages/manage/articles/create.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="s1">&#39;manage-auth&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們首頁新增一個可以導向至 <code>/manage/articles/create</code> 頁面的按鈕。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">NuxtLink</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-md mt-12 rounded-sm bg-emerald-500 py-2 px-4 font-medium text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/manage/articles/create&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">前往撰寫文章</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們處於未登入的情況，點擊前往後，會經由中間件判斷 <code>process.client</code> 是否是在客戶端，進而從 User Store 取出使用者資訊進行判斷，當不存在 <code>userStore.profile.id</code> 時，表示未登入，我們將導航至登入頁面 <code>/login</code>；當登入完成後，就可以使用按鈕成功導航至新增文章的頁面。如果 <code>process.client</code> 為 <code>false</code>，表示導航是在伺服器端觸發的，例如，我們直接透過網址進入新增文章頁面，將會一律被重新導航至首頁。</p> <p><img src="https://live.staticflickr.com/65535/52630723865_fe7bb3a049_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="登入完成後導回至登入前瀏覽的頁面">登入完成後導回至登入前瀏覽的頁面</h4> <p>當使用者在瀏覽網站時被引導或準備登入時，我們可以將使用者目前的頁面進行記錄，以便登入完成後，可以重新導向至使用者登入前的頁面，以此提供使用者更棒的體驗。</p> <p>首先，我們新增一個路由中間件 <code>./middleware/logged-in-redirect.js</code> 內容如下：</p> <h5 id="middlewarelogged-in-redirectjs">middleware/logged-in-redirect.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span> <span class="nx">from</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">from</span> <span class="o">&amp;&amp;</span> <span class="nx">to</span><span class="p">.</span><span class="nx">path</span> <span class="o">!==</span> <span class="nx">from</span><span class="p">.</span><span class="nx">path</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">to</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">redirectTo</span> <span class="o">=</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">from</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">redirectTo</span> <span class="o">=</span> <span class="nx">from</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> </span></span><span class="line"><span class="cl"> <span class="nx">from</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> <span class="o">=</span> <span class="kc">undefined</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">redirectTo</span> <span class="o">=</span> <span class="nx">from</span><span class="p">.</span><span class="nx">fullPath</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">to</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> <span class="o">=</span> <span class="nx">redirectTo</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="nx">to</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個 <code>logged-in-redirect</code> 中間件的處理邏輯，我們接收 <code>to</code> 與 <code>from</code>，分別為目標頁面與來源頁面，當使用者目標頁面 <code>/login</code> 還未帶上了 Query 參數 <code>redirect_to</code>，我們就將來源的完整路徑添加上去 <code>from.fullPath</code>，最後進行導向。</p> <blockquote> <p>這裡需要進行判斷 <code>redirect_to</code>，否則會重複發生重新導向。</p></blockquote> <p>在登入頁面中使用 <code>definePageMeta()</code> 來套用 <code>logged-in-redirect</code> 中間件。調整 <code>./pages/login.vue</code> 內容：</p> <h5 id="pagesloginvue-1">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="s1">&#39;logged-in-redirect&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在登入完成的地方，我們就可以使用 <code>navigateTo()</code> 導向至 <code>redirect_to</code> 給的頁面路徑。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleEmailLogin</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">navigateTo</span><span class="p">(</span><span class="nx">route</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">redirect_to</span> <span class="o">??</span> <span class="s1">&#39;/&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>完成後，我們從首頁點擊登入後．當登入完成後就會導向回首頁；而從文章頁面點擊登入，完成後則會導向回文章頁面。</p> <p><img src="https://live.staticflickr.com/65535/52630533679_f91d6355c5_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="頁面載入進度元件">頁面載入進度元件</h3> <p>Nuxt 3 提供一個 <code>&lt;NuxtLoadingIndicator&gt;</code> 元件，用作頁面導航後顯示載入的進度，會在頁面上方有一個進度條 (Progress bar)。</p> <p>只需要將 <code>&lt;NuxtLoadingIndicator&gt;</code> 元件添加至 <code>app.vue</code> 或布局之中，調整 <code>app.vue</code> 內容如下：</p> <h5 id="appvue">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLoadingIndicator</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>元件可以傳入的屬性 (Props) 如下：</p> <ul> <li>color：進度條的顏色，可以傳入CSS 支援的<code>色碼</code>或 <code>repeating-linear-gradient()</code> 函数，預設為 <code>repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)</code>。</li> <li>height：進度條的高度數值，單位： <code>px</code>，預設值為 <code>3</code>。</li> <li>duration：進度條載入的持續時間，單位： <code>毫秒</code>，預設值為 <code>2000</code>。</li> <li>throttle：進度條的隱藏與顯示，限制在特定時間內僅觸發一次，單位： <code>毫秒</code>，預設值為 <code>200</code>。</li> </ul> <p>當我們從首頁切換頁面時，網頁上方就會出現一個進度條，表示頁面正在載入中。</p> <p><img src="https://live.staticflickr.com/65535/52630763173_598b9351b6_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="頁面切換的轉場效果">頁面切換的轉場效果</h3> <p>除了載入的進度條，頁面切換之間，也可以使用轉場效果 (Transitions) 來讓頁面之間的銜接更柔順，Nuxt 利用了 Vue 內建的 <code>&lt;Transition&gt;</code> 元件來幫助處理轉場和動畫，用以響應不斷變化的頁面與狀態。</p> <p>Nuxt 預設為所有頁面 (Pages) 都設置了轉場，如果要啟用，請將以下 CSS 添加至 <code>app.vue</code> 中：</p> <h5 id="appvue-1">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">active</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">transition</span><span class="o">:</span> <span class="nx">all</span> <span class="mf">0.4</span><span class="nx">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">from</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">page</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">opacity</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">filter</span><span class="o">:</span> <span class="nx">blur</span><span class="p">(</span><span class="mi">1</span><span class="nx">rem</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>每個頁面的 <code>pageTransition</code> 預設屬性皆為 <code>{ name: 'page', mode: 'out-in' }</code>，<strong>name</strong> 為 <code>page</code> 也就對應了 CSS 類別的開頭；<strong>mode</strong> 有 <strong>in-out</strong>、<strong>out-in</strong> 及 <strong>default</strong> 三種參數可選。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-enter-active</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-leave-active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.4</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-enter-from</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="o">.[</span><span class="nt">pageTransition</span><span class="p">.</span><span class="nc">name</span><span class="o">]</span><span class="nt">-leave-to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">blur</span><span class="p">(</span><span class="mi">1</span><span class="kt">rem</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>套用好頁面的轉場，就會有切換頁面時有模糊的效果。</p> <p><img src="https://live.staticflickr.com/65535/52630533604_548626fe62_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="自訂頁面的轉場">自訂頁面的轉場</h3> <p>既然知道 <code>pageTransition</code> 的 <strong>name</strong> 會對應頁面轉場的 CSS 名稱，我們就可以來自定義更多轉場，讓不同頁面套用不同的效果。</p> <p>例如在 <code>app.vue</code> 添加 <strong>rotate</strong> 為前綴的類別名稱 CSS。</p> <h5 id="appvue-2">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="cm">/* ... */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">active</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">transition</span><span class="o">:</span> <span class="nx">all</span> <span class="mf">0.4</span><span class="nx">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">enter</span><span class="o">-</span><span class="nx">from</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nx">rotate</span><span class="o">-</span><span class="nx">leave</span><span class="o">-</span><span class="nx">to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">opacity</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">transform</span><span class="o">:</span> <span class="nx">rotate3d</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">15</span><span class="nx">deg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在頁面中使用 <code>definePageMeta()</code> 來設定 <code>pageTransition.name</code> 為 <code>rotate</code>。調整 <code>./pages/login.vue</code> 添加如下程式碼。</p> <h5 id="pagesloginvue-2">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;rotate&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當頁面切換時，皆會使用預設的模糊轉場效果，當切換至登入頁面就會套用指定的 <code>rotate</code> 頁面轉場，而有旋轉的轉場效果。</p> <p><img src="https://live.staticflickr.com/65535/52630763038_308b2983b9_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="布局的轉場效果">布局的轉場效果</h3> <p>Nuxt 同樣為所有布局 (Layouts) 都設置了轉場，如果要啟用，請將以下 CSS 添加至 <code>app.vue</code> 中。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-enter-active</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-leave-active</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">0.4</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-enter-from</span><span class="o">,</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">layout-leave-to</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">grayscale</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <code>./layouts/teal.vue</code> 布局，程式碼如下：</p> <h5 id="layoutstealvue">layouts/teal.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-screen bg-teal-50&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>將登入頁面的布局套用 <code>teal</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;teal&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <code>./layouts/green.vue</code> 布局，程式碼如下：</p> <h5 id="layoutsgreenvue">layouts/green.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-screen bg-teal-50&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>將註冊頁面的布局套用 <code>green</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;green&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在登入頁面與註冊頁面切換時，因為兩個頁面使用了不同的布局，布局的轉場效果，使背影顏色會有灰階效果的轉場。</p> <p><img src="https://live.staticflickr.com/65535/52630533474_082235081d_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以像自訂頁面轉場一樣，來使用 <code>definePageMeta()</code> 設定 <code>layoutTransition.name</code> 屬性，來指定自訂的轉場效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;green&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;slide-in&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="禁用轉場效果">禁用轉場效果</h3> <p>頁面與布局的轉場效果，都可以透過 <code>definePageMeta</code> 來設定 <code>pageTransition</code> 或 <code>layoutTransition</code> 為 <code>false</code> 來禁止套用轉場效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="全域預設的轉場效果">全域預設的轉場效果</h3> <p>你也可以在 <code>nuxt.config.ts</code> 設置預設的頁面與轉場效果，例如：</p> <h5 id="nuxtconfigts-1">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;fade&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">mode</span><span class="o">:</span> <span class="s1">&#39;out-in&#39;</span> <span class="c1">// default </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;slide&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">mode</span><span class="o">:</span> <span class="s1">&#39;out-in&#39;</span> <span class="c1">// default </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然要將所有頁面與布局預設禁用也可以設置如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageTransition</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">layoutTransition</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>pageTransition</code> 與 <code>layoutTransition</code> 接受的屬性可以參考 <a class="link" href="https://vuejs.org/api/built-in-components.html#transition" target="_blank" rel="noopener" >TransitionProps</a>。</p> <h3 id="元件屬性傳入-transition">元件屬性傳入 transition</h3> <p>在 <code>app.vue</code> 中使用 <code>&lt;NuxtPage /&gt;</code> 時，你可以將 <strong>TransitionProps</strong> 作為元件的 Props 來啟用全域預設的轉場效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="o">:</span><span class="na">transition</span><span class="o">=</span><span class="s">&#34;{ </span></span></span><span class="line"><span class="cl"><span class="s"> name: &#39;bounce&#39;, </span></span></span><span class="line"><span class="cl"><span class="s"> mode: &#39;out-in&#39; </span></span></span><span class="line"><span class="cl"><span class="s"> }&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>當使用此方法設定轉場效果時，就不能在頁面中使用 <code>definePageMeta()</code> 來覆蓋這裡的頁面轉場設置。</p></blockquote> <p>以上我們主要實作了導航守衛，來為特定頁面添加瀏覽的權限，我們除了使用客戶端的 User Store 驗證外，也可以搭配 Cookie 再後端進行驗證，甚至為每個請求解析使用者，並查詢資料庫是否具有權限瀏覽，以此來控制使用者瀏覽頁面的權限，除了前端的阻擋外，更重要的是後端 API 也需要搭配進行權限驗證，才能有要的防止網頁漏洞產生，否則可能會發生，使用者無權瀏覽新增或管理的頁面，但是可以透過打 API 來進行相關操作，這樣是非常危險的。最後，我們將頁面切換時設置了進度條與轉場效果，使得整體網站能提供使用者更好的操作體驗，更多的轉場設置，也可以參考 <a class="link" href="https://nuxt.com/docs/getting-started/transitions" target="_blank" rel="noopener" >Nuxt 官方文件</a>。</p> <p><a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day23/nuxt-app-blog-navigation-guards" target="_blank" rel="noopener" >範例程式碼 - Nuxt 3 - 設置導航守衛與頁面切換效果範例</a></p> <hr> <h2 id="添加-html-meta-tag">添加 HTML Meta Tag</h2> <p>詳細 Nuxt3 添加 HTML Meta Tag 的說明，可以參考 <a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e6%90%9c%e5%b0%8b%e5%bc%95%e6%93%8e%e6%9c%80%e4%bd%b3%e5%8c%96-seo-%e8%88%87-html-meta-tag" >【Nuxt3】開箱即用的 Nuxt3 玩轉筆記 - 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag</a>，這邊我們說明為實作的部落格文章添加 Meta，調整 <code>./pages/articles/[id].vue</code> 檔案，添加以下程式碼：</p> <h5 id="pagesarticlesidvue">pages/articles/[id].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">summary</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;keywords&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">tags</span><span class="si">}</span><span class="sb">`</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">property</span><span class="o">:</span> <span class="s1">&#39;og:title&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">property</span><span class="o">:</span> <span class="s1">&#39;og:description&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">summary</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">property</span><span class="o">:</span> <span class="s1">&#39;og:image&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">cover</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">article</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>其中 <code>article</code> 是我們從 Server API 回傳的指定貼文的資料並具有響應性，最後看看成果。</p> <p><img src="https://live.staticflickr.com/65535/52630723575_6dd0823515_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 Nuxt 3 提供了一些可以設置網頁屬性與 <strong>Meta</strong> 的組合式函數，更能動態的調整與響應，結合 SSR 讓這些標記在伺服器端就能渲染出來，對網站做搜尋引擎最佳化 (SEO) 非常得友善，也是多數人選擇 Nuxt 3 來處理 SSR 與 SEO 的原因。除了 SEO 可能會使用到的的標記外，也有 <strong>OG Tag</strong> 可以加強網頁的連結預覽效果，雖然 <strong>OG Tag</strong> 與 SEO 沒有絕對的關係，但是透過伺服器端渲染調整這些 <strong>Meta</strong> 對搜尋引擎或網站都非常的方便，我們只要根據需求及指引做設定，就能對網站的能見度有所提升。</p> <hr> <h2 id="邁向國際化實作多國語系i18n">邁向國際化實作多國語系I18n</h2> <p>當一個網站需要面向不同國家或不同語言的使用者，我們就需要做<strong>國際化 (Internationalization)</strong>，將網站內容進行翻譯或語言的對應，讓使用者能理解網頁上的操作或內容，I18n 意謂著「Internationalization」這個單字中，I 和 n 之間有 18 個字母，也正是各個框架的實作多國語系套件的一個常用名稱，例如 Vue 生態就有 <a class="link" href="https://kazupon.github.io/vue-i18n" target="_blank" rel="noopener" >vue-i18n</a>，而這篇文章將講述如何在 Nuxt 3 中整合 Vue I18n 來協助實作多國語系。</p> <h3 id="nuxt-3-使用-vue-i18n">Nuxt 3 使用 Vue I18n</h3> <p>想要在 Vue 3 使用 Vue I18n 獲得比較好的支援度需要使用正處於 Beta 階段的 <a class="link" href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noopener" >v9 版本</a>，因此有幾種方式可以在 Nuxt 整合 Vue I18n，分別是依照 <a class="link" href="https://vue-i18n.intlify.dev/guide/integrations/nuxt3.html" target="_blank" rel="noopener" >Vue I18n 官方指引</a>、使用 Nuxt Community提供的 <a class="link" href="https://github.com/nuxt-modules/i18n/tree/next" target="_blank" rel="noopener" >@nuxtjs/i18n@next</a> 模組及 <a class="link" href="https://github.com/intlify/nuxt3" target="_blank" rel="noopener" >@intlify/nuxt3</a> 模組。</p> <p>比較早以前，Nuxt 3 社群模組還沒有支援比較新的 Vue I18n，所以需要自己額外的製作插件來安裝，後來也有一些相容性的問題，所以 Vue I18n v9 的作者 <a class="link" href="https://github.com/kazupon" target="_blank" rel="noopener" >kazupon</a> 發布了 <a class="link" href="https://github.com/intlify/nuxt3" target="_blank" rel="noopener" >@intlify/nuxt3</a> 模組來方便 Nuxt 3 整合 <a class="link" href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noopener" >vue-i18n-next</a> (Vue I18n v9)，目前仍然可以使用 <a class="link" href="https://github.com/intlify/nuxt3" target="_blank" rel="noopener" >@intlify/nuxt3</a> 來進行整合，但我最後選擇使用 <a class="link" href="https://github.com/nuxt-modules/i18n/tree/next" target="_blank" rel="noopener" >@nuxtjs/i18n@next</a> 模組，除了看好是由 Nuxt Community 提供的支援及未來的發展外，也能使用到 <strong>@nuxtjs/i18n</strong> 提供的一些組合函數等。</p> <h3 id="nuxt-3-整合-nuxtjsi18n">Nuxt 3 整合 @nuxtjs/i18n</h3> <p>目前 <code>@nuxtjs/i18n</code> 模組的穩定版本在 v7.3.0，而使用 Vue 3 和 Vue I18n v9 的模組則是<a class="link" href="https://github.com/nuxt-modules/i18n/tree/next" target="_blank" rel="noopener" >下一個迭代版本</a> v8，所以使用 NPM 安裝的時候需要稍微注意一下。</p> <blockquote> <p>下圖於 2020/10/10 擷取自 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/i18n?activeTab=versions" target="_blank" rel="noopener" >NPM - @nuxyjs/i18n</a></p></blockquote> <p><img src="https://live.staticflickr.com/65535/52658265884_72ff895ee1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="step-1-安裝-nuxtjsi18n">Step 1. 安裝 @nuxtjs/i18n</h4> <p>目前有 A 或 B 兩種方式可以安裝 @nuxtjs/i18n v8 分別如下，可以選擇其中一種即可：</p> <p><strong>A. 使用 next 標籤來安裝 v8 版本</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D @nuxtjs/i18n@next </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D @nuxtjs/i18n@next</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>B. 安裝 @nuxtjs/i18n-edge (Edge Version)</strong></p> <ol> <li>添加 <strong>&quot;@nuxtjs/i18n&quot;: &ldquo;npm:@nuxtjs/i18n-edge&rdquo;</strong> 至 <code>package.json</code> 的 <code>dependencies</code> 或 <code>devDependencies</code> 依賴中，看起來可能像這樣：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;devDependencies&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;@nuxtjs/i18n&#34;</span><span class="p">:</span> <span class="s2">&#34;npm:@nuxtjs/i18n-edge&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>執行 npm install</li> </ol> <p>這邊我使用的是用 <code>next</code> 標籤來安裝。</p> <h4 id="step-2-添加模組">Step 2. 添加模組</h4> <p>於 <code>nuxt.config.ts</code> 中的 <code>modules</code> 屬性添加 <code>'@nuxtjs/i18n'</code>，參考如下：</p> <h5 id="nuxtconfigts-2">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-設定-i18n-參數">Step 3. 設定 i18n 參數</h4> <p>當添加完模組後，我們可以先設置 <strong>@nuxhjs/i18n</strong> 模組的選項，來測試是否能正常運作，於 <code>nuxt.config.ts</code> 中，添加 <code>i18n</code> 屬性，用以設置**@nuxhjs/i18n** 模組；<code>i18n.vueI18n</code> 設置的選項也可以參考 <a class="link" href="https://vue-i18n.intlify.dev/api/general.html#createi18n" target="_blank" rel="noopener" >Vue I18n v9 官方文件</a>。</p> <h5 id="nuxtconfigts-3">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">i18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vueI18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">legacy</span>: <span class="kt">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="o">:</span> <span class="s1">&#39;zh&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">messages</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">en</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="s1">&#39;Hello!&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">language</span><span class="o">:</span> <span class="s1">&#39;Language&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">zh</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="s1">&#39;你好!&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">language</span><span class="o">:</span> <span class="s1">&#39;語言&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>記得設置 <code>i18n.vueI18n.legacy</code> 為 <code>false</code> 來關閉使用較舊的 API 模式。</p></blockquote> <h4 id="step-4-確認專案下的-pages-目錄">Step 4. 確認專案下的 pages 目錄</h4> <p>當完成 Step 3. 的模組設置後，就可以啟動伺服器來看看效果；不過若是 Nuxt 3 專案目錄下缺少了 <code>pages</code> 目錄，可能會無法啟用 Vue Router 自動產生路由，而出現下圖的錯誤。</p> <p><img src="https://live.staticflickr.com/65535/52658429590_5f6755628e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們只需要新增 <code>./pages/ingex.vue</code> 路由頁面，就可以解決錯誤囉！</p> <h3 id="建立英語和繁體中文的語系切換">建立英語和繁體中文的語系切換</h3> <p>我們安裝與配置好 <strong>@nuxtjs/i18n</strong> 後，可以嘗試建立頁面來看看效果，以下以 <code>en</code> 與 <code>zh</code> 作為英語和繁體中文兩個語系的使用範例。</p> <p>新增 <code>./pages/index.vue</code> 內容如下：</p> <h5 id="pagesindexvue">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以使用 <code>$t()</code> 來傳入我們在 <code>nuxt.config.ts</code> 中的 <code>i18n.vueI18n.messages</code> 定義語系與對應的文字，而我們預設是 <code>zh</code> 繁體中文語系，畫面上就出現 <strong>hello: &lsquo;你好!&rsquo;</strong> 對應的「你好!」文字囉！</p> <p><img src="https://live.staticflickr.com/65535/52657492347_b9e6e46d40_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>新增按鈕來實現切換不同的語系，完整的程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-24 space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setLocale(&#39;en&#39;)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">English</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setLocale(&#39;zh&#39;)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">繁體中文</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 flex flex-row justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-gray-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;language&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-4 font-bold text-gray-800&#34;</span><span class="p">&gt;{{</span> <span class="nx">locale</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若沒有特殊需求，切換語系你可以選擇直接設定 <code>locale</code> 來自動響應或使用 <code>setLocale()</code> 來設定語系。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">setLocale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;en&#39;</span> </span></span><span class="line"><span class="cl"><span class="c1">// or </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setLocale</span><span class="p">(</span><span class="s1">&#39;en&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>完成後我們就可以切換 <code>en</code> 與 <code>zh</code> 語系，當然你也可以製作成選單來放置更多的語系來支援切換。</p> <p><img src="https://live.staticflickr.com/65535/52658265989_72dbc51a8e_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="獨立存放語系檔案">獨立存放語系檔案</h3> <p>隨著專案增大，語系的翻譯數量也會增多，而全部放在 <code>nuxt.config.ts</code> 中也實在太過冗長，所以我習慣獨立放置在一個資料夾內做處理。</p> <p>稍微調整一下 <code>nuxt.config.ts</code> 如下：</p> <h5 id="nuxtconfigts-4">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">i18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">defaultLocale</span><span class="o">:</span> <span class="s1">&#39;zh&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">langDir</span><span class="o">:</span> <span class="s1">&#39;locales&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">locales</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">code</span><span class="o">:</span> <span class="s1">&#39;en&#39;</span><span class="p">,</span> <span class="nx">file</span><span class="o">:</span> <span class="s1">&#39;en.json&#39;</span><span class="p">,</span> <span class="nx">iso</span><span class="o">:</span> <span class="s1">&#39;en-US&#39;</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;English&#39;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">code</span><span class="o">:</span> <span class="s1">&#39;zh&#39;</span><span class="p">,</span> <span class="nx">file</span><span class="o">:</span> <span class="s1">&#39;zh.json&#39;</span><span class="p">,</span> <span class="nx">iso</span><span class="o">:</span> <span class="s1">&#39;zh-TW&#39;</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;繁體中文&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategy</span><span class="o">:</span> <span class="s1">&#39;no_prefix&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">vueI18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">legacy</span>: <span class="kt">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們就可以建立各個語系放置的資料夾對應著 <code>i18n.langDir</code> 屬性，目錄名稱為 <code>locales</code>，再依序建立 <code>en.json</code> 與 <code>zh.json</code> 檔案，最終目錄的結構大概會長這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── ... </span></span><span class="line"><span class="cl">├── locales/ </span></span><span class="line"><span class="cl">│ ├── en.json </span></span><span class="line"><span class="cl">│ └── zh.json </span></span><span class="line"><span class="cl">├── ... </span></span><span class="line"><span class="cl">└── nuxt.config.ts </span></span></code></pre></td></tr></table> </div> </div><p>./locales/en.json 內容如下：</p> <h5 id="localesenjson">locales/en.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;hello&#34;</span><span class="p">:</span> <span class="s2">&#34;Hello!&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;language&#34;</span><span class="p">:</span> <span class="s2">&#34;Language&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>./locales/zh.json 內容如下：</p> <h5 id="localeszhjson">locales/zh.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;hello&#34;</span><span class="p">:</span> <span class="s2">&#34;你好!&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;language&#34;</span><span class="p">:</span> <span class="s2">&#34;語言&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>翻譯的語系檔案，也可以在根據需求使用 <strong>.js</strong>、<strong>yaml</strong> 或 <strong>json</strong> 格式的檔案，來搭配接受參數來產生翻譯文字。</p> <h3 id="持久化語系設定">持久化語系設定</h3> <p>當使用者切換語系之後，我們希望儲存這個語系設定，讓使用者下次瀏覽網站時，能套用儲存的語系，而不用再次切換，我們可以藉由瀏覽器的 <strong>LocalStorage</strong> 或 <strong>Cookie</strong> 來持久化。</p> <h4 id="localstorage-來儲存語系設定">LocalStorage 來儲存語系設定</h4> <p>我們可以在變更語系時，同時將語系儲存至 LocalStorage 之中，下次瀏覽網站時，再從中取出套用語系。</p> <p>例如，我們調整 <code>./pages/index.vue</code> 程式碼如下，在我們自訂的 <code>changeLanguage()</code> 方法內，同時呼叫 <code>localStorage.setItem('i18n-lang', localeCode)</code> 來儲存語系。</p> <h5 id="pagesindexvue-1">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-24 space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-for</span><span class="o">=</span><span class="s">&#34;localeItem in locales&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="nt">:key</span><span class="o">=</span><span class="s">&#34;localeItem.code&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;changeLanguage(localeItem.code)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">localeItem</span><span class="p">.</span><span class="nx">name</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 flex flex-row justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-gray-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;language&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-4 font-bold text-gray-800&#34;</span><span class="p">&gt;{{</span> <span class="nx">locale</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localeCode</span> </span></span><span class="line"><span class="cl"> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;i18n-lang&#39;</span><span class="p">,</span> <span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <code>app.vue</code> 從 LocalStorage 讀取 <code>i18n-lang</code> 的設定值</p> <h5 id="appvue-3">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">defaultLocaleCode</span> <span class="o">=</span> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">client</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;i18n-lang&#39;</span><span class="p">)</span> <span class="o">??</span> <span class="nx">defaultLocaleCode</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當下次我們瀏覽網站時，就會查看 LocalStorage 中的語系設定並套用。</p> <p><img src="https://live.staticflickr.com/65535/52657982231_da9975d14a_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="cookie-來儲存語系設定">Cookie 來儲存語系設定</h4> <p>Nuxt 3 的伺服器渲染，會導致第一次的請求無法在伺服器端取得 LocalStorage 的設定，所以上面的例子，仔細看會發現，雖然正確的套用儲存的 <code>en</code> 英語語系設定，但畫面是先從預設的 <code>zh</code> 繁體中文再切換過去，導致語系切換時閃了一下。</p> <p>我們可以透過使用 cookie 的方式來儲存語系，這樣伺服器端在接受第一次請求時也能解析出使用者的偏好設定，回傳正確的語系翻譯文字。</p> <p>你可以自己使用 Nuxt 3 提供 useCookie 等方式操作 cookie 來實現這套流程，不過呢，<strong>@nuxtjs/i18n</strong> 模組預設是啟用 cookie 相關的設定，提供的 <code>setLocaleCookie()</code> 與 <code>getLocaleCookie()</code> 可以來協助儲存語系設定至 cookie。</p> <p>調整 <code>./pages/index.vue</code> 程式碼如下，在我們自訂的 <code>changeLanguage()</code> 方法內，同時呼叫 <code>setLocaleCookie(localeCode)</code> 來儲存語系。</p> <h5 id="pagesindexvue-2">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-48 text-8xl font-medium text-blue-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-24 space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-for</span><span class="o">=</span><span class="s">&#34;localeItem in locales&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="nt">:key</span><span class="o">=</span><span class="s">&#34;localeItem.code&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inline-flex items-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;changeLanguage(localeItem.code)&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">localeItem</span><span class="p">.</span><span class="nx">name</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 flex flex-row justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-gray-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">$t</span><span class="p">(</span><span class="s1">&#39;language&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-4 font-bold text-gray-800&#34;</span><span class="p">&gt;{{</span> <span class="nx">locale</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span><span class="p">,</span> <span class="nx">setLocaleCookie</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localeCode</span> </span></span><span class="line"><span class="cl"> <span class="nx">setLocaleCookie</span><span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <code>app.vue</code> 呼叫 <code>getLocaleCookie()</code> 從 cookie 解析的設定值，並再進行套用。</p> <h5 id="appvue-4">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">getLocaleCookie</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">defaultLocaleCode</span> <span class="o">=</span> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">getLocaleCookie</span><span class="p">()</span> <span class="o">??</span> <span class="nx">defaultLocaleCode</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們使用 <code>setLocaleCookie()</code> 儲存語系至 cookie，會將 localeCode 儲存在 cookie 的 <code>i18n_redirected</code> 值上，當我們重新進入網頁，cookie 也將自動夾帶了這個 cookie 過去給伺服器端，並由 <code>getLocaleCookie()</code> 解析再由我們進行語系套用。</p> <p><img src="https://live.staticflickr.com/65535/52657492437_ee15a398eb_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其實 <strong>@nuxtjs/i18n</strong> 因為已將 detectBrowserLanguage.useCookie 預設為 true 等啟用了 cookie 儲存的相關設定，當使用者進入網站時，就會嘗試檢查瀏覽器的 cookie 來將使用者儲存的偏好語言進行套用或重定向。</p> <p>因此，我們在 <code>app.vue</code> 也不需要特別從 cookie 取出再進行套用，<strong>@nuxtjs/i18n</strong> 會自動幫我們完成。</p> <h5 id="appvue-5">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 除非你有特需的需求，不然這邊都不需要自己來了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// import { useI18n } from &#39;vue-i18n&#39; </span></span></span><span class="line"><span class="cl"><span class="c1">// const { locale, getLocaleCookie } = useI18n() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// const defaultLocaleCode = locale.value </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// locale.value = getLocaleCookie() ?? defaultLocaleCode </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>而當使用者調整語系時，在第一個範例有提到，如果沒有特別需求，我們可以直接使用 <code>locale</code> 來設定語系，來自動響應變更語系，再使用 <code>setLocaleCookie(localeCode)</code> 將語系保存至 cookie 之內。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span><span class="p">,</span> <span class="nx">setLocaleCookie</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">locale</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localeCode</span> </span></span><span class="line"><span class="cl"> <span class="nx">setLocaleCookie</span><span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>但我們只要使用 <code>setLocal()</code> 方法來套用語系，就會一同更新至 cookie 中進行儲存，非常方便。最後我們將 <code>./pages/index.vue</code> 中的 調整如下，一樣可以達到在 cookie 中儲存使用者語系並在下次瀏覽網頁時自動套用。</p> <h5 id="pagesindexvue-3">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useI18n</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-i18n&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">locale</span><span class="p">,</span> <span class="nx">locales</span><span class="p">,</span> <span class="nx">setLocale</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useI18n</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setLocale</span><span class="p">(</span><span class="nx">localeCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>setLocaleCookie()</code> 與 <code>getLocaleCookie()</code> 操作的預設設定，我們可以透過 <code>nuxt.config.ts</code> 中的 <code>i18n.detectBrowserLanguage</code> 進行調整，例如，調整 <code>cookieKey</code> 來變更儲存的名稱 <code>i18n_redirected</code> 等，更多選項可以<a class="link" href="https://v8.i18n.nuxtjs.org/options/browser/" target="_blank" rel="noopener" >參考這裡</a>。</p> <h5 id="nuxtconfigts-5">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/i18n&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">i18n</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">detectBrowserLanguage</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">useCookie</span>: <span class="kt">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">cookieKey</span><span class="o">:</span> <span class="s1">&#39;i18n_redirected&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>@nuxtjs/i18n</strong> 模組提供的 cookie 操作語系持久化，甚至能做到一些重導向等行為，較 Nuxt 3 提供 useCookie 等方式自己來實現這套流程能更擁有更多功能。</p> <hr> <p><a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day24/nuxt-app-meta" target="_blank" rel="noopener" >範例程式碼 - Nuxt 3 - 搜尋引擎最佳化 (SEO) 之設定網頁 Meta 及 OG Tag 範例</a></p> <hr>https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/Sat, 14 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/<img src="https://live.staticflickr.com/65535/52616698791_b7b8bbce05_o.jpg" alt="Featured image of post 【Nuxt3】開箱即用的 Nuxt3 玩轉筆記" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10292483" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/users/20152617/ironman/5934" target="_blank" rel="noopener" >參考網站</a></p> <p>在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境，為了解決該情境問題，你可能會找到使用 Vite 做預渲染或其他方式，<a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 也是其中一個解決方案，且有更多強大的功能，目前 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 已經正式發布穩定版，就讓我們開始嘗鮮上手吧！</p> <p>本篇會著重在 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 的特色與功能學習，所以你可能需具備些 Vue 3 基礎，我將從搭建 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 開發環境、頁面路由與佈局一直到使用 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 建立 SEO 所需的資訊做些筆記及介紹，讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG，進而解決 Vue 3 SPA 不好做 SEO 的問題。</p> <hr> <h2 id="nuxt-3-介紹">Nuxt 3 介紹</h2> <h3 id="前言">前言</h3> <p>採用 SSR + SPA，將第一個畫面透過 SSR 產生，其他就交給 CSR 來做處理，既能兼具 SEO 還能擁有 SPA 的使用者體驗，不是很完美嗎？沒有錯，但在沒有任何框架輔助之下，同一個頁面你可能就需要實作兩次程式碼，也就是前後端各一次的渲染邏輯，這也就是相應的代價。在介紹 Nuxt 3 之前就稍微提一下 <strong>Isomorphic JavaScript</strong> 與 <strong>Universal JavaScript</strong>。</p> <h3 id="isomorphic-javascript-與-universal-javascript">Isomorphic JavaScript 與 Universal JavaScript</h3> <h4 id="isomorphic-javascript">Isomorphic JavaScript</h4> <p>隨著 Node.js 的出現，讓客戶端瀏覽器之外的伺服器也能執行 JavaScript 程式碼，使得 JavaScript 成為一種同構語言 (Isomorphic Language)。Isomorphic JavaScript 即稱之為<strong>同樣的 JavaScript 程式碼可以在客戶端及伺服器端運行</strong>；也就是說同一份 Code 除了能在前端瀏覽器也能在後端執行。</p> <p>然而 <code>Isomorphic JavaScript</code> 與 <code>Universal JavaScript</code> 的名詞存有一些爭議與差異，如今，<code>Isomorphic JavaScript</code> 多以稱<strong>相同的程式碼元件，可以在客戶端與伺服器端用來組裝或渲染出頁面的技術</strong>。</p> <h4 id="universal-javascript">Universal JavaScript</h4> <p>Michael Jackson 的<a class="link" href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9" target="_blank" rel="noopener" >文章</a>提到，Isomorphic 這個詞的含義「corresponding or similar in form and relations」為兩個實體不相同，但具有相似的操作或對應的關係，換句話說就是，兩個看起來不一樣的使用方法或語法，但最終的執行結果是一樣的，例如 jQuery 或 Zepto 操作 DOM 的語法長的不大一樣，但是最終也都是對應 JavaScript 的 <code>document.querySelector</code> 等方法。</p> <p>所以說，為了描述相同的程式碼但能在不同環境中運行的名詞，就有了 <code>Universal JavaScript</code> 一詞，這個名字告訴人們 JavaScript 它<strong>不僅可以在服務器和瀏覽器上運行，還可以在本機設備和嵌入式架構上運行</strong>。</p> <p>那麼 Isomorphic JavaScript 和 Universal JavaScript 與我們又有什麼關係呢？</p> <p>有的，因為 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 正是一個 <code>Isomorphic JavaScript</code> 框架，<a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 是目前你使用 Vue 3 在開發網站時，會需要採用 SSR 技術或優化 SEO 問題所可以使用的解決方案。</p> <h3 id="nuxt-3">Nuxt 3</h3> <p><a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 官方在 2022/11/16 正式發布穩定版本 <a class="link" href="https://github.com/nuxt/framework/releases/tag/v3.0.0" target="_blank" rel="noopener" >Nuxt 3.0 stable</a>。</p> <p><img src="https://live.staticflickr.com/65535/52617186163_0145c6b0f2_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 官網的標語 <code>The Intuitive Web Framework</code>，<a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 將讓你更直覺的體驗混合渲染等新功能，讓在使用 Vue 3 開發時變得更加簡單！</p> <h4 id="nuxt-3-的新特性">Nuxt 3 的新特性</h4> <p>從 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 官網的提供訊息所列，簡單說明一下 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 的新特性，共有下列 12 個：</p> <p><img src="https://live.staticflickr.com/65535/52616188037_f6476e512d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>Lighter：更輕量，針對現在瀏覽器，伺服器部署與客戶端打包能減少最高 75 倍之多。</li> <li>Faster：更快速，通過 Nitro 提供支持的動態伺服器端程式碼拆分來優化冷啟動問題。</li> <li>Hybird：動態的靜態頁面生成和其他高級模式，現在這些都將成為可能。</li> <li>Suspense：在導航觸發的前後，皆可以在任何元件中取得數據資料。</li> <li>Composition API：使用 Composition API 和 Nuxt 3 的 Composables 實現真正的程式碼可重用性。</li> <li>Nuxt CLI：全新的零依賴體驗，幫助你輕鬆建立專案與模組整合。</li> <li>Nuxt Dev Tools：專屬開發除錯工具，提供更多的資訊與快速修復，讓工作更高效。</li> <li>Nuxt Kit：具備基於 TypeScript 和跨版本兼容性的全新模組開發。</li> <li>webpack 5：更快速的打包時間與打包出更小的體積，並且無需任何配置。</li> <li>Vite：使用 Vite 作為打包工具，體驗閃電般快速的 HMR。</li> <li>Vue 3：完全支持 Vue 3。</li> <li>TypeScript：使用 TypeScript 與 ESM 構建而成，無需額外的配置步驟。</li> </ul> <h4 id="nitro">Nitro</h4> <p>Nuxt 3 由一個全新的伺服器引擎 <a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 提供支持，它具有以下幾個特點：</p> <ul> <li>跨平台支持，支持 Node.js 與瀏覽器等。</li> <li>Serverless 支持。</li> <li>API 路由，使用 <a class="link" href="https://github.com/unjs/h3" target="_blank" rel="noopener" >unjs/h3</a>。</li> <li>自動程式碼拆分 (code-splitting) 與異步加載 chunk (async-loaded chunks)。</li> <li>混合渲染模式，供靜態 (static)與無伺服器 (serverless) 網站。</li> <li>開發伺服器上的 HMR (hot module reloading)。</li> </ul> <p>簡單來說，<a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 已經是 <a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 包含的全新伺服器引擎，無需再進行配置。<a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 除了支援 SPA、建立靜態的網站，甚至能在後端打 API 時直接調用相關函數，從而降低 API Request，整體來說是非常強大的伺服器引擎。</p> <h4 id="nuxt-3-渲染模式">Nuxt 3 渲染模式</h4> <p><a class="link" href="https://nuxt.com/" target="_blank" rel="noopener" >Nuxt 3</a> 目前支援兩種渲染模式，<code>Client-side Only Rendering</code> 與 <code>Universal Rendering</code>。之後將會推出更先近的渲染模式，<code>混合渲染 (Hybrid Rendering)</code> 與<code>邊緣渲染 (Edge-Side Rendering)</code>。</p> <ul> <li>Client-side Only Rendering</li> </ul> <p>Nuxt 3 設定為該模式，如同單純使用 Vue 3 建置出的 SPA，瀏覽器下載並載入完 Vue 程式碼後，<code>渲染 HTML 的所有動作皆在客戶端執行</code>，也就是客戶端渲染 CSR。</p> <ul> <li>Universal Rendering</li> </ul> <p>Universal Rendering 是 <code>Nuxt 3 預設的渲染模式</code>，在這個模式之下，無論頁面是預先產生並緩存還是動態渲染，Nuxt 都會在伺服器環境中執行 Vue 程式碼，並渲染 HTML，也就是如同 SSR，伺服器會向瀏覽器返回一個完整呈現的 HTML 頁面。當瀏覽器完整呈現的頁面出現後，也會開始載入 Vue 程式碼，以因應後續的動態頁面與路由跳轉等，即轉換為 SPA 開始由客戶端進行渲染。也就是說 Nuxt 3 的 <code>Universal Rendering</code> 即是指 <code>SSR + SPA</code>。</p> <ul> <li>混合渲染 (Hybrid Rendering)</li> </ul> <p>我們在使用 Vue 開發 SPA 網站時，通常是會設置路由 (Route) 讓網頁能夠到達不同的頁面再來請求資料，此為 CSR。在使用 Nuxt 開發時能讓能網站擁有 SSR + SPA 的 Universal Rendering 渲染方式，除此之外，Nuxt 3 還提供了一種更先進的渲染模式——<code>混合渲染 (Hybrid Rendering)</code>，可以<code>為每個路由設置不同的渲染與緩存的規則</code>，讓部分頁面使用 CSR 在客戶端進行渲染，另一部分使用 SSR 在伺服器端進行渲染。</p> <ul> <li>邊緣渲染 (Edge-Side Rendering)</li> </ul> <p>Nitro 為 Nuxt 3 提供支持的全新伺服器端渲染引擎，它為 Node.js、Deno、Worker 等提供跨平台的支持，讓 Nuxt <code>可以在 CDN Edge Workers 進行渲染</code>，故稱為<code>邊緣渲染 (Edge-Side Rendering)</code>，能有效分擔在伺服器端渲染時的資源負荷，將其提升到另一個層次，從而減少網路延遲及成本。</p> <h4 id="nuxt-3-的建構工具">Nuxt 3 的建構工具</h4> <p>Nuxt 3 預設的建構工具如下：</p> <ul> <li>預設使用 <a class="link" href="https://vitejs.dev/" target="_blank" rel="noopener" >Vite</a> 也可以切換成 <a class="link" href="https://webpack.js.org/" target="_blank" rel="noopener" >webpack</a></li> <li><a class="link" href="https://rollupjs.org/" target="_blank" rel="noopener" >Rollup</a></li> <li><a class="link" href="https://postcss.org/" target="_blank" rel="noopener" >PostCSS</a></li> <li><a class="link" href="https://esbuild.github.io/" target="_blank" rel="noopener" >esbuild</a></li> </ul> <p>Nuxt 3 已經幫我們配置好一堆設定啦，真的是開箱即用，而且 Nuxt 也支援 TypeScript。如果說真的要調整配置，也可以再 <code>nuxt.config</code> 中進行調整，非常方便貼心。</p> <hr> <h2 id="使用-nuxi-建立第一個專案">使用 nuxi 建立第一個專案</h2> <h3 id="線上玩玩看">線上玩玩看</h3> <p>如果你還在觀望或是從隔壁棚過來的，還不想安裝相關工具與環境，那麼可以點擊下面其一連結，在 StackBlitza 或 CodeSandbox 的線上編輯器環境稍微玩玩，直接線上體驗 Nuxt 3。</p> <ul> <li><a class="link" href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" target="_blank" rel="noopener" >Play on StackBlitz</a></li> <li><a class="link" href="https://codesandbox.io/p/github/nuxt/starter/v3-codesandbox" target="_blank" rel="noopener" >Play on CodeSandbox</a></li> </ul> <h3 id="開始建立第一個專案">開始建立第一個專案</h3> <h4 id="先決條件">先決條件</h4> <p>開始之前，依照 Nuxt 3 官網的<a class="link" href="https://nuxt.com/docs/getting-started/installation" target="_blank" rel="noopener" >起手式</a>我們有幾個項目需要做一下檢查，我們這裡僅先注意一下 Node.js 的版本，建議使用目前<a class="link" href="https://nodejs.org/zh-tw/download/" target="_blank" rel="noopener" >最新 LTS 版本</a> <code>v16.17.0</code> (包含 NPM v8.15.0)。</p> <h4 id="使用-nuxi-建立-nuxt-3-專案">使用 nuxi 建立 Nuxt 3 專案</h4> <p><a class="link" href="https://www.npmjs.com/package/nuxi" target="_blank" rel="noopener" >nuxi</a> 全名為 <strong>Nuxt Command Line Interface</strong>，是由 Nuxt 提供開發的標準工具，Nuxt CLI 就像是 Vue CLI 可以建立 Vue 專案，我們當然也就可以使用 Nuxt CLI 來建立 Nuxt 的專案。</p> <p>首先，打開終端機 (Terminal)，將目錄切換至自己習慣的工作區，接著輸入如下的 nuxi 提供指令並執行，來初始化建立一個 Nuxt 3 專案。在此，我們的專案名為 <code>nuxt-app</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi init nuxt-app </span></span></code></pre></td></tr></table> </div> </div><p>如下圖，npx 會詢問你是否安裝最新版本的套件 <code>nuxi@3.0.0-rc.10</code> 輸入 <code>y</code> 即可。</p> <p><img src="https://live.staticflickr.com/65535/52616697991_767a632430_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>執行完指令後直到出現如下提示，代表專案已經初始建立成功，完成後可以發現目前目錄下多了一個名為 <code>nuxt-app</code> 的資料夾，這個資料夾也就是 Nuxt 3 專案的根目錄。</p> <p><img src="https://live.staticflickr.com/65535/52616964239_b438581d8d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來，我們可以進入專案目錄 <code>nuxt-app</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">cd</span> nuxt-app </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>nuxt-app</code> 專案目錄下可以看到熟悉的 <code>package.json</code>，我們就可以開始安裝 Nuxt 3 專案的相關依賴套件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt CLI 如同 Vue CLI 已經在建立專案時幫我們初始完成許多事情，再安裝完相關依賴套件後輸入下列指令，我們就可以在開發環境下啟動 Nuxt 了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev -- -o </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run dev -- -o</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果沒有意外，可以看到 Nitro 幫我們啟動了 Nuxt 3 的服務。</p> <p><img src="https://live.staticflickr.com/65535/52617186213_f7a11b0b5a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>根據提示，我們可以在瀏覽器輸入網址 <a class="link" href="http://localhost:3000/" target="_blank" rel="noopener" >http://localhost:3000/</a> 看看服務是否正常運作。</p> <p>如果看到如下圖的歡迎畫面，恭喜你！我們已經成功建立第一個 Nuxt 3 專案囉！</p> <p><img src="https://live.staticflickr.com/65535/52616964264_faa521ed78_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在你可以嘗試打開在專案目錄下的 <code>app.vue</code> 檔案之中，<code>app.vue</code> 是我們 Nuxt 專案的進入點，它的內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現它與 Vue 3 的單一元件檔 (Single File Component, SFC) 相比，好像少了點什麼，怎麼有用了 <code>&lt;NuxtWelcome /&gt;</code> 卻沒看見在哪邊 import 的呢？</p> <p>其實呢，<code>&lt;NuxtWelcome /&gt;</code> 這個元件就是我們前面瀏覽器看到的歡迎畫面，是 Nuxt 框架自帶的一個元件，而且 Nuxt 自動導入元件的更是其特色之一，後面的系列我們會再提到<strong>自動導入 (Auto Imports)</strong>。</p> <p>在這裡直接移除 <code>&lt;NuxtWelcome /&gt;</code> 就可以了，我們將 app.vue 調整如下，並保存檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span> <span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看見因為 Nuxt 預設 Vite 建構並支援 <a class="link" href="https://vitejs.dev/guide/features.html#hot-module-replacement" target="_blank" rel="noopener" >HMR</a> (Hot Module Replacement)，我們可以在瀏覽器快速的看見修改後的結果。</p> <p><img src="https://live.staticflickr.com/65535/52616698026_1bf03d908a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>至此，大家就可以先簡單的玩玩 Nuxt 3，接下來我將補充一些 nuxi 的指令與參數簡介。</p> <h3 id="nuxt-cli-常用指令">Nuxt CLI 常用指令</h3> <p>以下將簡單介紹一些常用的指令，若您在專案目錄下記得使用 <code>npx</code> 來執行 <code>nuxi</code>。</p> <p>另外在此提醒，下面所列的指令<code>部分參數會進行省略</code>，若有興趣翻翻完整的指令與參數說明，可以參考 <a class="link" href="https://v3.nuxtjs.org/api/commands/add" target="_blank" rel="noopener" >Nuxt 3 官方文件</a>。</p> <h4 id="nuxi-init">nuxi init</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi init<span class="p">|</span>create <span class="o">[</span>dir<span class="o">]</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個 <code>nuxi init</code> 指令是用來初始化一個 Nuxt 專案，等同 <code>nuxi create</code> 指令，<code>dir</code> 你可以填字串作為專案與資料夾名稱，也可以填寫完整路徑來建立專案目錄。</p> <h4 id="nuxi-dev">nuxi dev</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi dev <span class="o">[</span>--open, -o<span class="o">]</span> <span class="o">[</span>--port, -p<span class="o">]</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們在本地端進行開發時，需要運行開發環境，當我們執行 <code>npm run dev -- -o</code> 時，依據 <code>package.json</code> 中的 scripts 所列，其實就是在執行 <code>nuxi dev -o</code>，其中的 <code>-o</code> 表示<strong>服務啟動後開啟瀏覽器</strong>。</p> <p>如果啟動服務發現 Port 衝突，你也可以透過 <code>-p</code> 來將預設的監聽的 Port: 3000 調整為其他數值。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxi dev -p <span class="m">3001</span> </span></span><span class="line"><span class="cl"><span class="c1"># 或</span> </span></span><span class="line"><span class="cl"><span class="c1"># npm run dev -- -o -p 3001</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="nuxi-cleanup">nuxi cleanup</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi clean<span class="p">|</span>cleanup </span></span></code></pre></td></tr></table> </div> </div><p><code>nuxi cleanup</code> 等同 <code>nuxi clean</code> 指令，用來刪除 Nuxt 自動產生的檔案和緩存包括：</p> <ul> <li>.nuxt</li> <li>.output</li> <li>node_modules/.vite</li> <li>node_modules/.cache</li> </ul> <h4 id="nuxi-upgrade">nuxi upgrade</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi upgrade <span class="o">[</span>--force<span class="p">|</span>-f<span class="o">]</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個指令可以用來將目前專案的 Nuxt 3 升級至最新的版本，如果有一些可能行為調整或不相容的情況，可以再依據實際情境搭配 <code>-f</code> 參數來強制更新。</p> <p>如下圖，只要一行指令 <code>npx nuxi upgrade</code> 就可以將專案版本由 <code>3.0.0-rc.9</code> 升級至 <code>3.0.0-rc.10</code>，在 RC 階段或之後想定期升級版本來說非常好用，但也請記得<code>升級前可以先看一下官方的 Changelog</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617186283_00309ed597_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="nuxt-3--typescript--eslint--prettier-環境建置">Nuxt 3 + TypeScript + ESLint + Prettier 環境建置</h2> <p>在我們使用完 Nuxt CLI 建立完專案後，其實就可以開始進行專案的開發，但是呢，相信不少人對於程式碼的排版都有自己的風格，不同人的 Coding Style 肯定也都不一樣，然而在團隊協作需要標準或為了整體一致且美觀下，Linter 就是你的好幫手，此外，TypeScript 在 Nuxt 3 已經有內建支援，我也建議及推薦使用 TypeScript，接下來分享我自己在使用 Nuxt 3 開發時的 Linter 環境配置，包含了 <code>TypeScript</code>、<code>ESLint</code> 與 <code>Prettier</code>。</p> <h3 id="typescript-類型檢查">TypeScript 類型檢查</h3> <p><img src="https://live.staticflickr.com/65535/52616964289_0dbc29572e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Nuxt 3 已經有內建支援 TypeScript，一些 TypeScript 設定都可以在專案根目錄下配置 <code>tsconfig.json</code>，例如，在開發過程中針對 TypeScript 我會在開發環境下啟動類型檢查，可以參考以下進行配置。</p> <h4 id="step-1-安裝-vs-code-插件">Step 1. 安裝 VS Code 插件</h4> <p>首先，推薦大家安裝下列兩個 VS Code 插件：</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" target="_blank" rel="noopener" >Vue Language Features (Volar)</a>：寫 Vue 3 強力推薦必裝的插件，包含了上色、語法提示、編輯器快速分割等強大功能，而且也是 Nuxt 3 推薦的編輯器插件。</li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin" target="_blank" rel="noopener" >TypeScript Vue Plugin (Volar)</a>：Vue 的 TypeScript 插件。</li> </ul> <h4 id="step-2-安裝-vue-類型檢查套件">Step 2. 安裝 Vue 類型檢查套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vue-tsc typescript </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vue-tsc typescript</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-調整-nuxtconfigts-設定">Step 3. 調整 nuxt.config.ts 設定</h4> <p>根據 nuxt3 官方文件<a class="link" href="https://nuxt.com/docs/guide/concepts/typescript" target="_blank" rel="noopener" >說明</a>，我們可以在 <code>nuxt.config.ts</code> 中，設置 <code>typescript.typeCheck: true</code> 來讓開發時期能執行類型檢查。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">typescript</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">typeCheck</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-重新啟動開發環境服務">Step 4. 重新啟動開發環境服務</h4> <p>我們重新執行 <code>npm run dev -- -o</code> 來重啟開發環境的服務，這樣就配置完成囉！</p> <h4 id="看看效果">看看效果</h4> <p>如果我們在 <code>app.vue</code> 寫了以下程式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="s1">&#39;2022&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb"> iThome 鐵人賽`</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現終端機 (Terminal) 就<code>指出了一個錯誤的類型指派</code>，並告知你有錯誤程式碼的位置。</p> <p><img src="https://live.staticflickr.com/65535/52616964299_7ee542dbc3_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="eslint-設置-linter">ESLint 設置 Linter</h3> <p><img src="https://live.staticflickr.com/65535/52616698096_7b89a76f54_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>ESLint 是一個 <code>JavaScript Linter</code>，它用來檢查 JavaScript Coding Style 的工具，主要能幫你<code>分析並找到語法錯誤</code>，也能用來<code>統一風格</code>，例如：縮排空白數、字串要用單引號或雙引號等，提醒你刪掉多餘程式碼或遵照最佳的實踐方式，確保程式碼能具有一定的水準。在團隊協作下 ESLint 更能讓大家撰寫程式碼時遵照規則，確保程式碼品質。ESLint 除了提供你可以使用大公司如 Google、Airbnb 等的規則配置來作為檢查基準，也可以客製自訂出自己喜好或團隊共識的規則來分析與提醒你校正語法。</p> <h4 id="step-1-安裝-eslint-套件">Step 1. 安裝 ESLint 套件</h4> <p>現在我們至 Nuxt 專根目錄下，開始安裝 ESLint 相關套件，當然，你也可以挑自己喜歡的進行配置，不過在這裡選擇以 Nuxt 3 官方提供的 ESLint 設定來做標準配置，並添加支援 Vue 3 的 ESLint 設定。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-配置-eslint-設定檔">Step 2. 配置 ESLint 設定檔</h4> <p>安裝完所需套件後，接下來我們就可以來設定 ESLint，我們在專案根目錄下建立 <code>.eslintrc.js</code> 檔案，內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">env</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">browser</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">es2021</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="kr">extends</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/eslint-config-typescript&#39;</span><span class="p">,</span> <span class="s1">&#39;plugin:vue/vue3-recommended&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">parserOptions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ecmaVersion</span><span class="o">:</span> <span class="mi">13</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sourceType</span><span class="o">:</span> <span class="s1">&#39;module&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">overrides</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">files</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/pages/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/layouts/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/app.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/error.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;vue/multi-word-component-names&#39;</span><span class="o">:</span> <span class="s1">&#39;off&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>在我們建立的 <code>.eslintrc.js</code> 檔案中 <code>extends</code> 可以是一個陣列，主要是來放置<code>擴展</code> ESLint 的規則的配置，這裡稍微注意一下順序如下：</p> <ol> <li> <p><strong>@nuxtjs/eslint-config-typescript</strong>：對應 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config-typescript" target="_blank" rel="noopener" >@nuxtjs/eslint-config-typescript</a> 套件，由 Nuxt 官方提供用於 Nuxt 的 ESLint 規則配置。如果你不是使用 TypeScript 可以使用 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config" target="_blank" rel="noopener" >@nuxtjs/eslint-config</a>。</p> </li> <li> <p><strong>plugin:vue/vue3-recommended</strong>：對應 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-vue" target="_blank" rel="noopener" >eslint-plugin-vue</a> 套件，由 Vue.js 官方提供的 ESLint <a class="link" href="https://github.com/vuejs/eslint-plugin-vue" target="_blank" rel="noopener" >插件</a>，包含了能配合 Vue SFC 語法及特性的規則，也可以參考<a class="link" href="https://eslint.vuejs.org/user-guide/#bundle-configurations" target="_blank" rel="noopener" >官方文件</a>，依據需求稍作調整。</p> </li> </ol> <p>將特定目錄下的檔案關閉 <code>vue/multi-word-component-names</code> 規則，以此來因應 nuxt 的開發避免提示錯誤。</p> <blockquote> <p>因為目前 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config-typescript" target="_blank" rel="noopener" >@nuxtjs/eslint-config-typescript</a> 是基於 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config" target="_blank" rel="noopener" >@nuxtjs/eslint-config</a> 來擴展 TypeScript 的設定，而且 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/eslint-config" target="_blank" rel="noopener" >@nuxtjs/eslint-config</a> 包含的是 Vue 2 的 ESLint 設定，所以我們需要再額外安裝 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-vue" target="_blank" rel="noopener" >eslint-plugin-vue</a> 來擴展 Vue 3 規則配置，並覆寫 <strong>vue/multi-word-component-names</strong> 規則。</p></blockquote> <h4 id="用-eslint-來嘗試檢查">用 ESLint 來嘗試檢查</h4> <p>首先，我們編輯 <code>app.vue</code> 檔案內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">2022</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb"> iThome 鐵人賽`</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們執行下列指令來使用 eslint 檢查 <code>app.vue</code> 這個檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx eslint -- app.vue </span></span></code></pre></td></tr></table> </div> </div><p>可以看到下圖，ESLint 指出 <code>app.vue</code> 的問題，在第 9 行中的 <code>title</code> 這個變數已經宣告了卻沒有被使用。</p> <p>這個錯誤訊息正是依據上面我們的 ESLint 配置所被檢視出來的，在 ESLint 規則定義好後，也有分成錯誤 (Error) 與警告 (Warning)，我們可以再依據 ESLint 給予的提示進行調整與修正。</p> <p><img src="https://live.staticflickr.com/65535/52616188177_46465e3ffe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們嘗試修正一下 <code>app.vue</code> 這個檔案，在 template 中使用 title 這個變數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">2022</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="sb">`</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb"> iThome 鐵人賽`</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>再一次執行 <code>npx eslint -- app.vue</code>，就會發現沒有錯誤訊息產生囉！</p> <h3 id="在-packagejson-設置腳本">在 package.json 設置腳本</h3> <p>我們除了逐個檔案做檢查，也可以設置腳本來檢查整個專案目錄下的程式碼。</p> <p>在 <code>package.json</code> 的 scripts 腳本中，我們可以新增一個指令 <code>&quot;lint&quot;: &quot;eslint --ext .ts,.js,.vue .&quot;</code>，這樣一來我們就可以使用如下指令來檢查專案目錄下的所有包含 <strong>.ts</strong>、<strong>.js</strong>、<strong>.vue</strong> 副檔名的檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run lint </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run lint</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="在-vs-code-中顯示-eslint-錯誤或警告">在 VS Code 中顯示 ESLint 錯誤或警告</h3> <p>推薦大家安裝 VS Code 的 ESLint 插件：</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank" rel="noopener" >ESLint</a>：讓你在編輯器開發時就能有指令檢查，更可以做到全域或特定工作區開啟儲存或快捷鍵自動修正程式碼等設置。</li> </ul> <blockquote> <p>安裝完畢後，建議重啟 VS Code 來重新載入相關設定。</p></blockquote> <p>現在，你會發現在 VS Code 中編輯程式的過程中，如果有 ESLint 檢查到的錯誤或建議，就會出現<code>紅色或黃色的波浪底線</code>，當滑鼠指標移動至波浪底線處，就會發現有個小視窗提示你錯誤或警告的原因是什麼。</p> <p><img src="https://live.staticflickr.com/65535/52617186373_67101210bd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="在-vs-code-中自動修正-eslint-錯誤或警告">在 VS Code 中自動修正 ESLint 錯誤或警告</h3> <p>在某些情況，ESLint 可以幫助你做自動修正程式碼，甚至在存擋時將錯誤部分直接進行修正。</p> <h4 id="手動快速修正">手動快速修正</h4> <p>我們可以在編輯器將滑鼠指標移動至波浪底線點擊「<strong>快速修正 (Quick Fix)&hellip;</strong>」，你也可以使用編輯器建議的快捷鍵 <strong>Command + . (macOS)</strong>，此時就能選擇要修復或關閉略過錯誤原因；這裡我們選擇「<strong>Fix all auto-fixable problems</strong>」，來修復所有可能可以被自動修復的問題。</p> <p><img src="https://live.staticflickr.com/65535/52617134545_8b88fdc93b_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="存擋自動修正">存擋自動修正</h4> <p>除了手動快速修正外，你也可以透過添加 VS Code 的設定檔，如專案目錄下新增 <code>.vscode/settings.json</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;editor.formatOnSave&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;prettier.semi&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;files.trimTrailingWhitespace&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;editor.defaultFormatter&#34;</span><span class="p">:</span> <span class="s2">&#34;esbenp.prettier-vscode&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;editor.codeActionsOnSave&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;source.fixAll.eslint&#34;</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint.format.enable&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint.validate&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;javascript&#34;</span><span class="p">,</span> <span class="s2">&#34;javascriptreact&#34;</span><span class="p">,</span> <span class="s2">&#34;html&#34;</span><span class="p">,</span> <span class="s2">&#34;vue&#34;</span><span class="p">,</span> <span class="s2">&#34;typescript&#34;</span><span class="p">,</span> <span class="s2">&#34;typescriptreact&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint.enable&#34;</span><span class="p">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們編輯完程式碼，並保存檔案或快捷鍵存擋 <strong>Command + S (macOS)</strong>，就會觸發 ESLint 自動修復囉。</p> <p><img src="https://live.staticflickr.com/65535/52616698136_f967028caa_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="prettier-設置">Prettier 設置</h3> <p><img src="https://live.staticflickr.com/65535/52617186383_1c8d988fe4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Prettier 是程式碼格式化的工具，也可以與 ESLint 進行搭配，ESLint 與 Prettier 就能各司其職將 JaveScript 與 Vue 等檔案依照配置進行檢查與排版。</p> <h4 id="step-1-安裝-prettier-套件">Step 1. 安裝 Prettier 套件</h4> <p>我們直接安裝 prettier、eslint-config-prettier 與 eslint-plugin-prettier 三個套件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D prettier eslint-config-prettier eslint-plugin-prettier </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D prettier eslint-config-prettier eslint-plugin-prettier</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-配置-prettier-設定檔案">Step 2. 配置 Prettier 設定檔案</h4> <p>我們在專案根目錄下建立 <code>.prettierrc.js</code> 檔案，內容如下，這些配置都可以自己設定來配合 ESLint，更多選項或說明可以參考 <a class="link" href="https://prettier.io/docs/en/options.html" target="_blank" rel="noopener" >Prettier 官方說明文件</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">printWidth</span><span class="o">:</span> <span class="mi">120</span><span class="p">,</span> <span class="c1">// 每行文字數量達 100 字元就換到新的一行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">semi</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 每個語句的結尾不需要分號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">singleQuote</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 字串使用單引號，而不是雙引號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">trailingComma</span><span class="o">:</span> <span class="s2">&#34;none&#34;</span><span class="p">,</span> <span class="c1">// 如 Object、Array 內的元素不需要尾隨逗號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">endOfLine</span><span class="o">:</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">vueIndentScriptAndStyle</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-配置-eslint-設定檔案">Step 3. 配置 ESLint 設定檔案</h4> <p>我們在安裝時多裝了兩個 ESLint 相關套件，分別為 <a class="link" href="https://github.com/prettier/eslint-config-prettier" target="_blank" rel="noopener" >eslint-config-prettier</a> 及 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-prettier" target="_blank" rel="noopener" >eslint-plugin-prettier</a>。</p> <p>對此我們需要將其添加至 ESLint 的 <code>.eslintrc.js</code> 設定檔內，在 <code>extends</code> 添加字串 <code>prettier</code> 表示使用 <a class="link" href="https://github.com/prettier/eslint-config-prettier" target="_blank" rel="noopener" >eslint-config-prettier</a> 擴充配置，主要用來防止 Prettier 排版與 ESLint 發生衝突，讓其可以用來禁用 ESLint 的格式化；接著在 <code>plugins</code> 中添加 <code>prettier</code> 字串表示使用 <a class="link" href="https://www.npmjs.com/package/eslint-plugin-prettier" target="_blank" rel="noopener" >eslint-plugin-prettier</a> 套件擴充，讓 ESLint 可以提示我們格式有錯誤的地方。</p> <p>為了讓 Prettier 與 ESLint 有更好的搭配，在 <code>rules</code> 的參數中記得添加 <code>'prettier/prettier': 'error'</code> 讓 ESLint 可以提示 Prettier 的排版異常提示供我們做修正，至此 <code>.eslintrc.js</code> 設定檔應該會如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">env</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">browser</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">es2021</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="kr">extends</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;@nuxtjs/eslint-config-typescript&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;plugin:vue/vue3-recommended&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;prettier&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">parserOptions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ecmaVersion</span><span class="o">:</span> <span class="mi">13</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sourceType</span><span class="o">:</span> <span class="s1">&#39;module&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;prettier&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;prettier/prettier&#39;</span><span class="o">:</span> <span class="s1">&#39;error&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">overrides</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">files</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/pages/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/layouts/**/*.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/app.{js,ts,vue}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;**/error.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;vue/multi-word-component-names&#39;</span><span class="o">:</span> <span class="s1">&#39;off&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-安裝-vs-code-的-prettier-插件">Step 4. 安裝 VS Code 的 Prettier 插件</h4> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noopener" >Prettier - Code formatter</a>：提供我們做程式碼的格式化，最重要的是來協助我們自動載入 <code>.prettierrc.js</code> 配置。</li> </ul> <blockquote> <p>安裝完畢後，建議重啟 VS Code 來重新載入相關設定。</p></blockquote> <p>我們完成了 TypeScript 與 Linter 的配置，雖然配置有些繁瑣，但寫程式的風格有個標準及規則依循，肯定能協助你寫出令人讚嘆的完美的程式碼。</p> <hr> <h2 id="使用-tailwind-css">使用 Tailwind CSS</h2> <p><img src="https://live.staticflickr.com/65535/52617186403_1fa6ef95d7_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>為了後續範例程式在頁面呈現上能有比較好看的樣式，原先有想過使用 UI 框架或純寫 CSS，但是總覺得好像不夠潮，所以呢，我決定帶入近年滿熱門的 CSS 框架 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a>，在本篇文章我就不再多花篇幅介紹 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind</a> 的語法及指令等，主要針對 Nuxt 3 如何導入 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 至專案內使用。</p> <p>其實有稍微糾結一下要不要使用 <a class="link" href="https://css.master.co/tw" target="_blank" rel="noopener" >Master CSS</a>，雖然最後決定先緩緩，但我認為它非常有淺力成為這類框架的霸主，大家有空也可以支持一下或玩玩這個由臺灣團隊開發的 CSS 框架哦！</p> <p><a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 是近年滿熱門的 <code>Utility-First CSS</code> 框架，曾掀起一番論戰說 Class 不是讓你這樣用的之類的批評及缺點，但如果你深入暸解它後，確實不可否認它能為你帶來更好的生產效率等諸多優點。</p> <p>接下來，我會分別介紹兩種導入 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 方式，分別為 <strong>Nuxt Community 釋出的 Tailwind CSS 整合模組</strong> 及 <strong>Tailwind CSS 官方指引步驟</strong>，以下的 <strong>A</strong> 或 <strong>B</strong> 兩種導入方式，大家只要<code>擇一</code>就可以了。</p> <h3 id="使用-nuxt-tailwind-模組">使用 Nuxt Tailwind 模組</h3> <h4 id="step-1-安裝相關套件">Step 1. 安裝相關套件</h4> <p>首先安裝 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D @nuxtjs/tailwindcss </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D @nuxtjs/tailwindcss</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-添加模組至-nuxtconfigts">Step 2. 添加模組至 nuxt.config.ts</h4> <p>打開 <code>./nuxt.config.ts</code> 將 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 模組添加至 <code>modules</code> 設定參數中，完成後看起來會像下面這樣。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// https://v3.nuxtjs.org/api/configuration/nuxt.config </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@nuxtjs/tailwindcss&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">typescript</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">typeCheck</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-重啟-nuxt-服務">Step 3. 重啟 Nuxt 服務</h4> <p>重新啟動我們的 Nuxt 服務。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev -- -o </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run dev -- -o</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 只需要兩個步驟就完成了 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 的配置，這個模組已經包含手動安裝時需要建立的 <a class="link" href="https://tailwindcss.com/" target="_blank" rel="noopener" >Tailwind CSS</a> 指令 <code>tailwindcss.css</code> 需要的全域設定與 PostCSS 參數選項，同時也預設了 <code>tailwind.config.js</code> 的相關 <strong>content</strong> 目錄路徑，詳細可以參考 <a class="link" href="https://github.com/nuxt-modules/tailwindcss" target="_blank" rel="noopener" >Nuxt Tailwind</a>。</p> <h4 id="擴充或覆寫-nuxtjstailwindcss-配置">擴充或覆寫 @nuxtjs/tailwindcss 配置</h4> <blockquote> <p>如果你沒有特別需要擴充或覆寫設定可以跳過這一段。</p></blockquote> <p>專案內若使用 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 模組，這兩個 <code>tailwind.css</code> 與 <code>tailwind.config.js</code> 檔案其實模組已經有預設，不需要手動建立，<code>tailwind.css</code> 對應模組內的 <strong>tailwind.css</strong> 可以參考專案檔案內容 <a class="link" href="https://github.com/nuxt-modules/tailwindcss/blob/main/src/runtime/tailwind.css" target="_blank" rel="noopener" >tailwind.css</a>，<code>tailwind.config.js</code> 則是透過模組動態新增配置。</p> <p>倘若想要修改也可以透過建立設定檔案來新增或覆寫預設定，例如在專案下分別建立 <code>tailwind.css</code> 與 <code>tailwind.config.js</code> 兩個檔案：</p> <ul> <li>tailwind.css</li> </ul> <p>專案目錄下若存在路徑檔名一致的 <code>./assets/css/tailwind.css</code> 檔案，<a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 就會以這個檔案取代模組內預設的 <code>tailwind.css</code> 檔案。</p> <p><code>tailwind.css</code> 預設內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">base</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">components</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">utilities</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果有成功覆蓋配置，在重啟 Nuxt 3 服務時，Terminal 會提示下列字串，表示使用了自訂的 <code>tailwind.css</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">Using Tailwind CSS from ~/assets/css/tailwind.css </span></span></code></pre></td></tr></table> </div> </div><ul> <li>tailwind.config.js</li> </ul> <p>專案目錄下若存在 <code>tailwind.config.js</code> 檔案就會以新的配置拓展或覆寫 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 預設的 <code>tailwind.config</code>。</p> <p>例如，我們想拓展或覆寫 content 的配置：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/** @type {import(&#39;tailwindcss&#39;).Config} */</span> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./components/**/*.{vue,js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./layouts/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./pages/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./composables/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./plugins/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./app.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">extend</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="tailwind-css-官方指引步驟">Tailwind CSS 官方指引步驟</h3> <blockquote> <p>如果你已經使用了 <a class="link" href="https://www.npmjs.com/package/@nuxtjs/tailwindcss" target="_blank" rel="noopener" >@nuxtjs/tailwindcss</a> 進行配置，則可以跳過這一段。</p></blockquote> <h4 id="step-1-安裝相關套件-1">Step 1. 安裝相關套件</h4> <p>首先進入我們的 Nuxt 專案目錄，並安裝 Tailwind CSS 會使用到的一些相關套件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D tailwindcss postcss@latest postcss-custom-properties@latest autoprefixer@latest </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D tailwindcss postcss@latest postcss-custom-properties@latest autoprefixer@latest</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-建立-tailwindconfigjs">Step 2. 建立 tailwind.config.js</h4> <p>安裝完套件後，可以執行下列指令進行初始化，完成後會在專案根目錄下產生一個名為 <code>tailwind.config.js</code> 的 Tailwind CSS 設定檔。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx tailwindcss init </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-調整-tailwindconfigjs">Step 3. 調整 tailwind.config.js</h4> <p>打開剛剛產生的設定檔 <code>tailwind.config.js</code>，在配置中的 <code>content</code> 陣列添加一些路徑，這些路徑皆是跟 Nuxt 有關的資料夾目錄與檔案，完成後檔案內容如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/** @type {import(&#39;tailwindcss&#39;).Config} */</span> </span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./components/**/*.{vue,js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./layouts/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./pages/**/*.vue&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./composables/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./plugins/**/*.{js,ts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;./app.{js,ts,vue}&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">extend</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-建立-tailwindcss">Step 4. 建立 tailwind.css</h4> <p>接著我們在專案建立目錄 <strong>assets</strong> 與子目錄 <strong>css</strong> 用來放置 Tailwind CSS 的自定義指令，我們將其放置在 <strong>tailwind.css</strong> 供後續做使用，<strong>tailwind.css</strong> 的路徑應會是 <code>./assets/css/tailwind.css</code> 檔案內容如下。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">base</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">components</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">tailwind</span> <span class="nt">utilities</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-5-配置全域共用-css">Step 5. 配置全域共用 CSS</h4> <p>上面我們建立好 <strong>tailwind.css</strong> 後，為了讓每個頁面都可以吃得到 Tailwind CSS，我們修改專案根目錄的 <code>nuxt.config.ts</code> 檔案，在 <code>css</code> 參數陣列內新增 <code>tailwind.css</code> 路徑，讓 Nuxt 可以配置全域共用的 CSS，並添加 <code>postcss</code> 選項及我們剛才安裝的套件作為插件，最後 <code>nuxt.config.ts</code> 檔案看起來如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// https://v3.nuxtjs.org/api/configuration/nuxt.config </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">postcss</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;postcss-import&#39;</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;tailwindcss/nesting&#39;</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">tailwindcss</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">autoprefixer</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">css</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@/assets/css/tailwind.css&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">typescript</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">typeCheck</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>至此，我們專案目錄檔案如下結構。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app </span></span><span class="line"><span class="cl">├── .nuxt/ </span></span><span class="line"><span class="cl">├── assets/ </span></span><span class="line"><span class="cl">│ └── css/ </span></span><span class="line"><span class="cl">│ └── tailwind.css // 手動新增的檔案，用於設置 Tailwind CSS 指令並讓全部頁面引用 </span></span><span class="line"><span class="cl">├── node_modules/ </span></span><span class="line"><span class="cl">├── .eslintrc.js </span></span><span class="line"><span class="cl">├── .gitignore </span></span><span class="line"><span class="cl">├── .prettierrc.js </span></span><span class="line"><span class="cl">├── app.vue </span></span><span class="line"><span class="cl">├── nuxt.config.ts </span></span><span class="line"><span class="cl">├── package-lock.json </span></span><span class="line"><span class="cl">├── package.json </span></span><span class="line"><span class="cl">├── README.md </span></span><span class="line"><span class="cl">├── tailwind.config.js // Tailwind 初始化指令產生的設定檔 </span></span><span class="line"><span class="cl">└── tsconfig.json </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-6-重啟-nuxt-服務">Step 6. 重啟 Nuxt 服務</h4> <p>重新啟動我們的 Nuxt 服務。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev -- -o </span></span></code></pre></td></tr></table> </div> </div><h3 id="開始感受-tailwind-css-的魅力">開始感受 Tailwind CSS 的魅力</h3> <p>當我們配置完 Tailwind CSS 並重啟 Nuxt 服務後，我們編輯 <code>app.vue</code> 檔案內容，撰寫以下程式碼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-blue-600&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-900&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>重新瀏覽一次網頁，可以發現排版、顏色、字型都有出現我們設定的效果了。</p> <p><img src="https://live.staticflickr.com/65535/52616188202_d650c12b2b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="自動排序-tailwind-css-的-class">自動排序 Tailwind CSS 的 Class</h3> <p><img src="https://live.staticflickr.com/65535/52616964384_7ac2dd7e78_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當我們在寫 Tailwind CSS 時終究會碰到類型過多，第一眼不確定是否包含某個 class，或者對於順序上有強烈統一的要求，那麼這個 Prettier 的<a class="link" href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss" target="_blank" rel="noopener" >插件</a>，<code>prettier-plugin-tailwindcss</code> 插件是 Tailwind 推出的，目的在於可以使用官方推薦的 class 順序，來實現<code>自動排序 class</code> 來做到統一程式碼風格。</p> <h3 id="tailwind-x-prettier">Tailwind x Prettier</h3> <h4 id="step-1-安裝插件">Step 1. 安裝插件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D prettier-plugin-tailwindcss </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D prettier-plugin-tailwindcss</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>如果你不是照著前面的步驟建置專案，請記得確認已經有安裝 prettier 套件。</p></blockquote> <h4 id="step-2-配置設定檔">Step 2. 配置設定檔</h4> <p>開啟 <code>.prettierrc.js</code> 檔案，添加 <code>'prettier-plugin-tailwindcss'</code> 至 <code>plugins</code> 陣列中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;prettier-plugin-tailwindcss&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">printWidth</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="c1">// 每行文字數量達 100 字元就換到新的一行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">semi</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 每個語句的結尾不需要分號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">singleQuote</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// 字串使用單引號，而不是雙引號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">trailingComma</span><span class="o">:</span> <span class="s1">&#39;none&#39;</span> <span class="c1">// 如 Object、Array 內的元素不需要尾隨逗號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-自動修正效果">Step 3. 自動修正效果</h4> <p>你可以在編輯器內移至錯誤波浪底線使用「<strong>快速修復 (Quick Fix)&hellip;</strong>」功能，或設置 <code>&quot;editor.codeActionsOnSave&quot;</code> 中 <code>&quot;source.fixAll.eslint&quot;: true</code> 來達到保存後自動修正 prettier 引發的 ESLint 錯誤。</p> <p><img src="https://live.staticflickr.com/65535/52616698186_25eebdd0f7_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="小結">小結</h3> <p>相較於 Tailwind CSS 官方指引的安裝方式，使用 Nuxt Community 幫我們整理好的 <code>@nuxtjs/tailwindcss</code> 模組，可以省去繁瑣的設定步驟，也解決了一些目前 Nuxt 3 專案中，導入 Tailwind CSS 使用 HMR 可能無法自動編譯並重新套用等問題。</p> <hr> <h2 id="使用-pug">使用 Pug</h2> <p><img src="https://live.staticflickr.com/65535/52616698191_9faacb41c6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 為 html 模板語言，可支援撰寫 JS 邏輯。寫法上，省略了 HTML 的開、閉合標籤，能夠大大的提升工程師開發速度，看上去也更為簡潔。</p> <p>在本篇文章我依舊不再多花篇幅介紹 <a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 的語法，主要針對 Nuxt 3 如何導入 <a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 至專案內使用。</p> <p>為了之後開發能少打一點 Code，這邊加入 <a class="link" href="https://pugjs.org/" target="_blank" rel="noopener" >pug</a> 到專案。</p> <h3 id="安裝-vite-plugin-pug">安裝 @vite-plugin-pug</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vite-plugin-pug </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vite-plugin-pug</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="直接開始體驗-pug">直接開始體驗 Pug</h3> <p>直接將原先的 <code>app.vue</code> 改用 pug 語法來撰寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;pug&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">div</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">bg</span><span class="o">-</span><span class="nx">white</span><span class="p">.</span><span class="nx">py</span><span class="o">-</span><span class="mi">24</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">flex</span><span class="o">-</span><span class="nx">col</span><span class="p">.</span><span class="nx">items</span><span class="o">-</span><span class="nx">center</span><span class="p">.</span><span class="nx">flex</span> </span></span><span class="line"><span class="cl"> <span class="nx">h1</span><span class="p">.</span><span class="nx">text</span><span class="o">-</span><span class="mi">6</span><span class="nx">xl</span><span class="p">.</span><span class="nx">font</span><span class="o">-</span><span class="nx">semibold</span><span class="p">.</span><span class="nx">text</span><span class="o">-</span><span class="nx">blue</span><span class="o">-</span><span class="mi">600</span> <span class="mi">2022</span> <span class="nx">iThome</span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">mt</span><span class="o">-</span><span class="mf">4.</span><span class="nx">text</span><span class="o">-</span><span class="mi">9</span><span class="nx">xl</span><span class="p">.</span><span class="nx">font</span><span class="o">-</span><span class="nx">bold</span><span class="p">.</span><span class="nx">text</span><span class="o">-</span><span class="nx">gray</span><span class="o">-</span><span class="mi">900</span> <span class="nx">鐵人賽</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">year</span><span class="o">:</span> <span class="nx">string</span> <span class="o">=</span> <span class="s2">&#34;2022&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這邊推薦一款 VS Code 的套件 - <a class="link" href="https://marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug" target="_blank" rel="noopener" >html2pug</a>，將 HTML 反白後點選 VS Code 上方的 <strong>View</strong> &gt; <strong>Command Palette&hellip;</strong>，尋找並執行 <strong>&quot;&gt; html2pug: Transform&quot;</strong>，即可將反白的 HTML 自動轉換成 pug 語法。</p> <p>不用管 HTML 的結尾符號，寫起來整個就是舒服阿~~~</p> <hr> <h2 id="目錄結構與自動載入-auto-imports">目錄結構與自動載入 (Auto Imports)</h2> <p>隨著整個專案的開發，目錄與元件勢必也會越來越多，如同 Vue 3 的專案可能會有專門放置元件目錄 components 等，在 Vue 3 我們可能不太需要去在意目錄的名稱，但在 Nuxt 3 的專案下，有一些目錄與名稱其實有一些基本的規定與名稱，只要照著 Nuxt 3 約定好的方式進行開發，就能更好利用 Nuxt 3 幫你完成許多貼心的功能。</p> <h3 id="nuxt-3-的目錄結構">Nuxt 3 的目錄結構</h3> <p>當我們 Nuxt CLI 建立第一個 Nuxt 3 專案並第一次啟動開發伺服器後，專案目錄結構會長得像這樣：</p> <p><img src="https://live.staticflickr.com/65535/52616964404_21aac96f76_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果你是跟著這個系列安裝了 TypeScript、Linter、Tailwind CSS 及 Pug 等套件，那麼專案目錄結構會長得像這樣：</p> <p><img src="https://live.staticflickr.com/65535/52616698211_e29e8f9352_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>雖然我們能依照需求建立檔案及目錄，但 Nuxt 3 在<code>目錄的結構與命名其實有一定的規則與模式</code>，以下針對 Nuxt 3 來講述一下目錄的結構與遵循的方式。</p> <h3 id="nuxt-3-預設的目錄結構">Nuxt 3 預設的目錄結構</h3> <p>Nuxt 3 框架希望我們可以專注在開發而不是在配置，所以在預設的情況專案的目錄架構已經有一個不錯的結構可以遵循。</p> <p>依據<a class="link" href="https://nuxt.com/docs/guide/concepts/auto-imports" target="_blank" rel="noopener" >官方文件</a>，一個完整的 Nuxt 3 專案，它的目錄結構如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── .nuxt/ </span></span><span class="line"><span class="cl">├── .output/ </span></span><span class="line"><span class="cl">├── assets/ </span></span><span class="line"><span class="cl">├── components/ </span></span><span class="line"><span class="cl">├── composables/ </span></span><span class="line"><span class="cl">├── content/ </span></span><span class="line"><span class="cl">├── layouts/ </span></span><span class="line"><span class="cl">├── middleware/ </span></span><span class="line"><span class="cl">├── node_modules/ </span></span><span class="line"><span class="cl">├── pages/ </span></span><span class="line"><span class="cl">├── plugins/ </span></span><span class="line"><span class="cl">├── public/ </span></span><span class="line"><span class="cl">└── server/ </span></span><span class="line"><span class="cl"> ├── api/ </span></span><span class="line"><span class="cl"> ├── routes/ </span></span><span class="line"><span class="cl"> └── middleware/ </span></span><span class="line"><span class="cl">├── .gitignore </span></span><span class="line"><span class="cl">├── .nuxtignore </span></span><span class="line"><span class="cl">├── app.config.ts </span></span><span class="line"><span class="cl">├── app.vue </span></span><span class="line"><span class="cl">├── nuxt.config.ts </span></span><span class="line"><span class="cl">├── package.json </span></span><span class="line"><span class="cl">└── tsconfig.json </span></span></code></pre></td></tr></table> </div> </div><h4 id="nuxt-目錄">.nuxt 目錄</h4> <p>開發環境下由 Nuxt 產生出 Vue 的網站，.nuxt 目錄是<code>自動產生</code>的，<strong>你不應該任意的調整裡面檔案</strong>。</p> <h4 id="output-目錄">.output 目錄</h4> <p>當你的網站準備部署至正式環境時，每次編譯建構專案時，皆會<code>自動重新產生</code>這個目錄，<strong>你不應該任意的調整裡面檔案</strong>。</p> <h4 id="assets-目錄">assets 目錄</h4> <p>顧名思義，這是靜態資源檔案所放置的位置，目錄內通常包含以下類型的檔案：</p> <ul> <li>CSS 樣式檔案 (CSS、SASS 等&hellip;)</li> <li>字型</li> <li>圖片</li> </ul> <p>這些靜態資源，最終在專案編譯建構時，由 Vite 或 webpack 進行編譯打包。</p> <h4 id="components-目錄">components 目錄</h4> <p>放置 Vue 元件的地方，Nuxt 會自動載入這個目錄中的任何元件。</p> <h4 id="composables-目錄">composables 目錄</h4> <p>組合式函數放置的目錄，簡單來說可以把常用或通用的功能寫成一個共用的函數或 JS 檔案，放置在這個目錄視為組合式函數，Nuxt 也會自動載入這些組合式函數，讓需要使用的頁面或元件可以直接做使用。</p> <h4 id="content-目錄">content 目錄</h4> <p>透過使用 <a class="link" href="https://content.nuxtjs.org/" target="_blank" rel="noopener" >Nuxt Content</a>，我們可以在這個目錄下建立 <strong>.md</strong>、<strong>.yml</strong>、<strong>.csv</strong> 和 <strong>.json</strong> 檔案，Nuxt Content 會讀取並解析這些文件並進行渲染，用來建立基於文件的<strong>內容管理系統</strong>(Content Management System，簡稱：CMS)。</p> <h4 id="layouts-目錄">layouts 目錄</h4> <p>用於放置通用或可能重複使用到的佈局模板，提供程式碼的可重複使用性。</p> <h4 id="middleware-目錄">middleware 目錄</h4> <p>Nuxt 3 提供了路由中間件的概念，用於導航到下一個頁面之前執行一些程式碼如<strong>權限驗證</strong>&hellip;等。</p> <h4 id="node_modules-目錄">node_modules 目錄</h4> <p>通常有使用 Node.js 的套件管理，例如 NPM，對此目錄應該有一些印象，使用 Nuxt 3 及專案所需要的相依套件都會存放在這個目錄。</p> <h4 id="pages-目錄">pages 目錄</h4> <p>這個目錄主要是用來配置我們的頁面，你也可以只使用 <strong>app.vue</strong> 來完成你的網站，但如果建立了 <strong>pages</strong> 這個目錄，Nuxt 3 會自動整合 <code>vue-router</code>，並會依據目錄及檔案結構規則來<code>自動產生出對應路由</code>，也是 Nuxt3 產生路由的方式。</p> <h4 id="plugins-目錄">plugins 目錄</h4> <p>Nuxt 會自動載入這個目錄檔案，作為插件使用，在檔案名稱可以使用後綴 <code>.server</code> 或 <code>.client</code>，例如，<code>plugin.server.ts</code> 或 <code>plugin.client.ts</code> 來決定只讓伺服器端或客戶端載入這個插件。</p> <h4 id="server-目錄">server 目錄</h4> <p>用於建立任何後端的邏輯如後端 API，這個目錄下還包含了 <code>api</code>、<code>server</code> 和 <code>middleware</code> 來區分功能，不具有自動載入，但支援 HMR。</p> <h4 id="gitignore-檔案">.gitignore 檔案</h4> <p>在使用 Git 版本控制時，可以設置一些不需要或忽略關注變動的檔案及目錄。</p> <h4 id="nuxtignore-檔案">.nuxtignore 檔案</h4> <p>可以設置讓 Nuxt 編譯建構時，忽略一些不需要或欲忽略的檔案。</p> <h4 id="appconfigts-檔案">app.config.ts 檔案</h4> <p>提供服務運行時暴露給客戶端使用的設定，因此，請不要在 <strong>app.config.ts</strong> 檔案中添加任何機密資訊。</p> <h4 id="appvue-檔案">app.vue 檔案</h4> <p>Nuxt 3 網站的入口點元件。</p> <h4 id="nuxtconfigts-檔案">nuxt.config.ts 檔案</h4> <p>用於配置 Nuxt 專案的設定檔。</p> <h4 id="packagejson-檔案">package.json 檔案</h4> <p>這個檔案裡面定義了專案資訊、腳本、相依套件及版本號，通常有使用 Node.js 套件管理工具建置的專案都會包含此檔案。</p> <h4 id="tsconfigjson-檔案">tsconfig.json 檔案</h4> <p>Nuxt 3 會在 <strong>.nuxt</strong> 目錄下<code>自動產生</code>一個 <code>tsconfig.json</code> 檔案，其中已經包含了一些解析別名等預設配置；你可以透過<code>專案目錄</code>下的 <code>tsconfig.json</code> 來配置擴展或覆蓋 Nuxt 3 預設的 TypeScript 設定檔。</p> <h3 id="自訂目錄名稱">自訂目錄名稱</h3> <p>前面簡介了 Nuxt 3 的預設目錄結構與用途，在目錄名稱上 Nuxt 3 也提供了可以調整目錄名稱的方式，只要在 <code>nuxt.config.ts</code> 修改對應的參數，就可以自訂目錄的名稱。不過呢，也並不是所有的目錄都能修改，目前<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config#dir" target="_blank" rel="noopener" >官方提供</a>的 dir 參數共有以下四個目錄參數選項供修改：</p> <ul> <li>layouts</li> <li>middleware</li> <li>pages</li> <li>public</li> </ul> <p>例如我想將 <strong>pages</strong> 目錄名稱調整為 <strong>views</strong> 就可以新增下列 <code>dir</code> 設定添加至 <code>nuxt.config.ts</code>，就可以將 <strong>pages</strong> 目錄功能及規則調整為 <strong>views</strong> 目錄來實現。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">dir</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">pages</span><span class="o">:</span> <span class="s1">&#39;views&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="自動載入-auto-imports">自動載入 (Auto Imports)</h3> <p>在介紹目錄結構時有提到，某些目錄下的檔案是具有<code>自動載入 (Auto Imports)</code>的功能，意思就是說，當我們在這些特定的目錄 <code>components</code>、<code>composables</code>、<code>layouts</code>、<code>plugins</code> 添加檔案時，Nuxt 3 會自動載入這些元件或函數。</p> <p>Nuxt 3 的自動載入具體有以下三種：</p> <ul> <li>Nuxt 常用元件與函數</li> <li>Vue 3 的 API</li> <li>基於目錄的自動載入</li> </ul> <h4 id="nuxt-常用元件與函數的自動載入">Nuxt 常用元件與函數的自動載入</h4> <p>Nuxt 會自動載入一些元件或組合式函數，用以讓開發時可以在全部頁面或定義組件和插件可以使用。</p> <p>Nuxt 自動載入的元件就好比 <strong>app.vue</strong> 程式碼內，一開始在 <strong>template</strong> 就有的 <code>&lt;NuxtWelcome /&gt;</code> 歡迎頁面元件，其他還包含了 <code>&lt;NuxtPage&gt;</code>、<code>&lt;NuxtLayout&gt;</code> 和 <code>&lt;NuxtLink&gt;</code> 等，詳細可以參考<a class="link" href="https://nuxt.com/docs/api/components/client-only" target="_blank" rel="noopener" >官方文件</a>。</p> <p>例如，下面程式碼中的 <code>useAsyncData</code> 與 <code>$fetch</code> 就是 Nuxt 自動載入的組合式函數，在各個頁面或元件都能做使用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">refresh</span><span class="p">,</span> <span class="nx">pending</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useAsyncData</span><span class="p">(</span><span class="s1">&#39;/api/hello&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/hello&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="vue-3-api-的自動載入">Vue 3 API 的自動載入</h4> <p>例如，Vue 3 中會使用到的 <code>ref</code>、<code>computed</code> 等這類的 helpers 或 lifecycle hooks，在 Nuxt 3 也都將會自動的載入，不需要在 import。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 不需要在 import ref 或 computed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="基於目錄的自動載入">基於目錄的自動載入</h4> <p>如前面所提及的，Nuxt 會自動載入定義在特定目錄的檔案，例如：</p> <ul> <li>components: 相對於 Vue 的組件。</li> <li>composables: 相對於 Vue 的組合式函數。</li> </ul> <h3 id="建立一個自動導入的元件">建立一個自動導入的元件</h3> <p>我們建立一個 <strong>./components/IronManWelcome.vue</strong> 檔案：</p> <h5 id="componentsironmanwelcomevue">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <strong>app.vue</strong> 檔案中，新增 <code>&lt;IronManWelcome /&gt;</code> 元件。</p> <h5 id="appvue">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>現在，瀏覽器可以看見我們添加的元件效果。</p> <p><img src="https://live.staticflickr.com/65535/52616188282_4d52db7fc1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以發現，我們不需要添加 <code>import IronManWelcome from './components/IronManWelcome'</code> 就可以直接在 template 直接使用 <code>&lt;IronManWelcome /&gt;</code> 元件，這就是 Nuxt 3 基於目錄的自動載入功能。</p> <h3 id="關閉自動載入">關閉自動載入</h3> <p>如果想<code>關閉</code> Nuxt 的自動載入元件或函數的功能，可以修改專案目錄下的 <code>nuxt.config.ts</code> 檔案，將 <code>imports.autoImport</code> 設定為 <code>false</code>。</p> <h5 id="nuxtconfigts">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">imports</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">autoImport</span>: <span class="kt">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="顯式載入-explicit-imports">顯式載入 (Explicit Imports)</h3> <p>Explicit (顯式、明確的)，當我們需要手動載入，就可以用 <code>#import</code> 這個 Nuxt 釋出的別名，來個別載入那些具有自動載入的元件或函數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;#imports&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>Nuxt 3 的專案目錄與結構已經有一個規定可以遵守，Nuxt 3 規劃的目錄及檔案架構，讓我們可以不用再煩惱該如何配置，只需要專注開發，當你熟悉這些目錄檔案規則與自動載入的特性，肯定能更快上手 Nuxt 3。</p></blockquote> <hr> <h2 id="頁面-pages-與路由-routing">頁面 (Pages) 與路由 (Routing)</h2> <p>在 Vue 中，我們會使用到 <a class="link" href="https://router.vuejs.org/" target="_blank" rel="noopener" >Vue Router</a> 來實現切換頁面或路由的需求，而在 Nuxt 3 中，預設是沒有使用路由相關套件，直至建立了 <strong>pages</strong> 目錄，Nuxt 將會自動載入 Vue Router 來管理路由，並且具有一定的規則需要遵循，以下將介紹頁面目錄與路由之間的關係。</p> <h3 id="基於檔案的路由-file-based-routing">基於檔案的路由 (File-based Routing)</h3> <p>在 Nuxt 3 專案的 <strong>pages</strong> 目錄下，當我們建立了一個頁面檔案，就會以該檔案建立出相對應的路由，Nuxt 3 基於檔案的路由，也使用了程式碼拆分將每個頁面需要的程式碼梳理出來，並以動態載入的方式載入最小所需要的程式碼。因為是以<strong>目錄結構</strong>與<strong>檔案命名</strong>方式來約定，也稱之為約定式路由。</p> <h4 id="建立第一個頁面">建立第一個頁面</h4> <p>Nuxt 3 的 <strong>pages</strong> 目錄，是用來建立頁面並放置的目錄，當專案下有存在 <strong>pages</strong> 目錄，Nuxt 將會自動載入 Vue Router 來實現路由效果，目錄下的檔案通常是 Vue 的元件，也允許具有 <strong>.vue</strong>、<strong>.js</strong>、<strong>.jsx</strong>、<strong>.ts</strong> 或 <strong>.tsx</strong> 副檔名的檔案。</p> <p>當我們建立 <strong>./pages/index.vue</strong>，檔案內容如下，則表示路由 <code>/</code> 對應到這個頁面檔案，我們只需要建立檔案，路由的配置將會由 Nuxt 3 自動產生。</p> <h5 id="pagesindexvue">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若你還記得 Vue Router 中的 <code>&lt;router-view /&gt;</code>，這是路由需要的進入點，同樣的在 Nuxt 3 我們需要使用 <code>&lt;NuxtPage /&gt;</code> 來顯示我們建立的路由頁面，<code>這裡非常重要，否則路由及頁面將無法正確運作</code>。</p> <p>修改 <strong>./app.vue</strong>，檔案內容如下：</p> <h5 id="appvue-1">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在瀏覽器瀏覽 <code>/</code> 路由，如 <code>http://localhost:3000/</code>，就可以看到我們在 <strong>./pages/index.vue</strong> 頁面內寫的標題文字「這是首頁」囉！</p> <p><img src="https://live.staticflickr.com/65535/52617186498_fb79e37a84_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="多個路由頁面">多個路由頁面</h3> <p>在實務上，通常一個網站會有多個頁面，並分別對應到不同的路由，接下來我們嘗試建立 About 與 Contact 兩個頁面。</p> <h4 id="建立多個路由頁面">建立多個路由頁面</h4> <p>建立 <strong>./pages/about.vue</strong>，內容如下：</p> <h5 id="pagesaboutvue">pages/about.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-yellow-400&#34;</span><span class="p">&gt;</span><span class="nx">大家好</span><span class="err">！</span><span class="nx">我是</span> <span class="nx">Ryan</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">about</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./pages/contact.vue</strong>，內容如下：</p> <h5 id="pagescontactvue">pages/contact.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-rose-400&#34;</span><span class="p">&gt;</span><span class="nx">如果沒事不要找我</span> <span class="nx">xDDD</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">contact</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在瀏覽器分別瀏覽 <strong>/about</strong> 或 <strong>/contact</strong>，就可以看到我們路由效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52617186538_a097e76893_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52616188307_6a7217ce85_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以發現所建立的<code>檔案名稱</code>，最終就會<code>自動對應產生</code>出 <strong>/about</strong> 及 <strong>/contact</strong> 路由。</p> <h4 id="自動產生的路由">自動產生的路由</h4> <p>如果你有興趣想看看 Nuxt 自動產生出來的路由配置長什麼樣子，可以使用 <code>npm run build</code> 或 <code>npx nuxt build</code> 來建構出 <code>.output</code> 目錄，並打開 <strong>.output/server/chunks/app/server.mjs</strong>，搜尋 <code>const _routes =</code> 或剛剛建立的檔案名稱 <code>about.vue</code>，就可以找到下面這一段程式碼：</p> <p><img src="https://live.staticflickr.com/65535/52616964449_0da965dc38_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這段程式碼與 Vue 中的路由配置非常相像，其實這就是 Nuxt 3 檢測到 <strong>pages</strong> 目錄，自動幫我們載入 Vue Router 與依據 <strong>pages</strong> 目錄下的檔案結構，自動產生出所需的路由配置。</p> <h3 id="建立路由連結">建立路由連結</h3> <p>在 Vue Router 我們可以使用 <code>&lt;router-link&gt;</code> 來建立路由連結，以此來導航至其他頁面，而在 Nuxt 3 的路由中，則是使用 <code>&lt;NuxtLink&gt;</code> 來建立路由連結來進行頁面的跳轉，我們嘗試在首頁新增幾個路由連結來進行頁面導航。</p> <p>調整 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-1">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/about&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">About</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/contact&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Contact</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在瀏覽器瀏覽首頁，點擊「前往 About」或「前往 Contact」就可以看見路由導航效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52617134125_7f1f7071b0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>使用 <code>&lt;NuxtLink&gt;</code> 時，可以就把它想像為 <code>&lt;router-link&gt;</code> 的替代品，像 <code>to</code> 這個 Pros 控制路由位置的用法基本上一樣，其他更多的 Pros 用法及說明可以參考官網的<a class="link" href="https://nuxt.com/docs/api/components/nuxt-link#props" target="_blank" rel="noopener" >文件</a>。</p> <p>如果想要使用像 Vue Router 提供的 <code>router.push</code> 方法於 Vue 中直接呼叫來導航至其他頁面，在 Nuxt 中你可以使用 <code>navigateTo</code>，參數可以參考<a class="link" href="https://nuxt.com/docs/api/utils/navigate-to#navigateto" target="_blank" rel="noopener" >官方文件</a>。</p> <h3 id="約定式路由中的-indexvue">約定式路由中的 index.vue</h3> <p>在開頭有提到，Nuxt 3 提供了一個基於檔案的路由，從上述例子你或許能發現，基本上檔案名稱就是對應著路由名稱，但 <strong>index.vue</strong> 比較特別，它所對應的是路由 <code>/</code>。</p> <blockquote> <p><strong>index.[ext]</strong> 這個效果和特性，其實是與 Node.js 底層核心有關，在此就不贅述。</p></blockquote> <p>舉例來說，我可以在 <strong>pages</strong> 下建立一個 <strong>docs.vue</strong> 表示對應路由 <strong>/docs</strong>，也可以將檔案放置在 <strong>docs</strong> 目錄下並重新命名為 <strong>index.vue</strong> 即 <strong>./pages/docs/index.vue</strong>，這樣也可以透過 <strong>/docs</strong> 瀏覽到相同的頁面。</p> <p>所以當 <strong>index.vue</strong> 存在於 <strong>pages</strong> 目錄下，已經位於網站頁面的第一層，所以我們瀏覽 <a class="link" href="http://localhost:3000/" target="_blank" rel="noopener" >http://localhost:3000/</a> 就可以做出首頁的效果。</p> <h3 id="帶參數的動態路由匹配">帶參數的動態路由匹配</h3> <p>在實務上，我們可能需要將路徑作為參數傳遞給同一個元件，例如，我們有一個 <strong>users</strong> 頁面元件，在 <strong>/users/ryan</strong> 或 <strong>/users/jennifer</strong> 路徑，都能匹配到同一個 <strong>users</strong> 元件，並將 <strong>ryan</strong> 或 <strong>jennifer</strong> 當作參數傳遞給 <strong>users</strong> 頁面元件使用，那麼我們就需要動態路由來做到這件事。</p> <p>在 Vue 3 使用 Vue Router 我們可能會寫出如下路由配置：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">name:</span> <span class="nt">&#34;users&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;/users/:id&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="nt">&#34;./pages/users.vue&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣我們就能達到進入 <strong>/users/ryan</strong> 路由將 ryan 當作 <strong>id</strong> 參數傳入 <strong>users</strong> 元件中，路徑參數用冒號 <code>:</code> 表示，這個被匹配的參數 (params)，會在元件中可以使用 <strong>useRoute()</strong> 與 <strong>route.params.id</strong> 取得。</p> <p>在 Nuxt 3 中，我們要實現這個效果，需要將檔案名稱添加中括號 <code>[]</code>，其中放入欲設定的參數名稱，譬如下面的目錄結構與檔案名稱。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">└── users/ </span></span><span class="line"><span class="cl"> └── <span class="o">[</span>id<span class="o">]</span>.vue </span></span></code></pre></td></tr></table> </div> </div><p>建立 <code>./pages/users/[id].vue</code> 檔案，內容如下：</p> <h5 id="pagesusersidvue">pages/users/[id].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="nx">Users</span> <span class="nx">動態路由頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Id</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-blue-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">id</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">id</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們在 <strong>script</strong> 就可以從 <strong>route.params</strong> 拿到我們所設定的參數名稱 <strong>id</strong>，並將其在 <strong>template</strong> 中渲染出來。瀏覽 <a class="link" href="http://localhost:3000/users/ryan" target="_blank" rel="noopener" >http://localhost:3000/users/ryan</a> ，看看效果，Nuxt 3 就能匹配到使用者的 <strong>id</strong> 參數 <strong>ryan</strong>，並傳入 <strong>users</strong> 頁面元件。</p> <p><img src="https://live.staticflickr.com/65535/52617186583_c117eb473b_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以在 <strong>template</strong> 直接使用 <code>{{ $route.params.id }}</code> 來渲染出 <strong>id</strong> 參數。</p> <h3 id="匹配所有層級的路由">匹配所有層級的路由</h3> <p>如果你需要匹配某個頁面下的所有層級的路由，你可以在參數前面加上 <code>...</code> ，例如，<code>[...slug].vue</code>，這將匹配該路徑下的所有路由。</p> <p>建立 <strong>./catch-all/[&hellip;slug].vue</strong> 檔案：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">└── catch-all/ </span></span><span class="line"><span class="cl"> └── <span class="o">[</span>...slug<span class="o">]</span>.vue </span></span></code></pre></td></tr></table> </div> </div><p><strong>./catch-all/[&hellip;slug].vue</strong> 檔案內容如下：</p> <h5 id="catch-allslugvue">catch-all/[&hellip;slug].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-4xl text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="k">catch</span><span class="o">-</span><span class="nx">all</span><span class="o">/</span><span class="p">...</span> <span class="nx">下的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">匹配到的</span> <span class="nx">Params</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 text-5xl font-semibold text-violet-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">$route</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">slug</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-xl text-gray-400&#34;</span><span class="p">&gt;</span><span class="nx">每個陣列元素對應一個層級</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以輸入 <strong>/catch-all/hello</strong> 及 <strong>/catch-all/hello/world</strong>，路由的參數 <strong>slug</strong> 就會是一個陣列，陣列的每個元素對應每一個層級。</p> <p><img src="https://live.staticflickr.com/65535/52616964479_ab69ffff26_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立-404-not-found-頁面">建立 404 Not Found 頁面</h3> <p>Nuxt 3 提供一個配置來處理 <strong>404 Not Found</strong> 的頁面，當我們建立 <strong>./pages/[&hellip;slug].vue</strong> 頁面， Nuxt 3 所有未匹配的路由，將會交由這個頁面元件做處理，並同時使用 <code>setResponseStatus(404)</code> 函數設定 <strong>404 HTTP Status Code</strong>。</p> <h5 id="pagesslugvue">pages/[&hellip;slug].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-8xl font-semibold text-red-500&#34;</span><span class="p">&gt;</span><span class="mi">404</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">Not</span> <span class="nx">Found</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-xl text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">真的是找不到這個頁面啦</span> <span class="o">&gt;</span><span class="c1">///&lt;&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">setResponseStatus</span><span class="p">(</span><span class="mi">404</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>/omg</strong> 這個是不存在的頁面，未匹配的路由就會交由 <strong>./pages/[&hellip;slug].vue</strong> 頁面來處理。</p> <p><img src="https://live.staticflickr.com/65535/52616188362_24b6c38fab_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立多層的目錄結構">建立多層的目錄結構</h3> <p>如果理解了動態路由的中括號 <code>[]</code> 用法，那我們就可以建立更複雜的頁面目錄結構：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">└── posts/ </span></span><span class="line"><span class="cl"> ├── <span class="o">[</span>postId<span class="o">]</span>/ </span></span><span class="line"><span class="cl"> │ ├── comments/ </span></span><span class="line"><span class="cl"> │ │ └── <span class="o">[</span>commentId<span class="o">]</span>.vue </span></span><span class="line"><span class="cl"> │ └── index.vue </span></span><span class="line"><span class="cl"> ├── index.vue </span></span><span class="line"><span class="cl"> └── top-<span class="o">[</span>number<span class="o">]</span>.vue </span></span></code></pre></td></tr></table> </div> </div><p>這四個 Vue 頁面的參考程式碼如下：</p> <h5 id="pagespostsindexvue">pages/posts/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-4xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">Posts</span> <span class="nx">首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/8&#34;</span><span class="p">&gt;</span> <span class="nx">前往指定的文章</span> <span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/8/comments/1&#34;</span><span class="p">&gt;</span><span class="nx">前往指定的文章留言</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/top-3&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Top</span> <span class="mi">3</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/posts/top-10&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Top</span> <span class="mi">10</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagespoststop-numbervue">pages/posts/top-[number].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">posts</span><span class="o">/</span><span class="nx">top</span><span class="o">-</span><span class="p">[</span><span class="nx">number</span><span class="p">]</span> <span class="nx">的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Top</span> <span class="nb">Number</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-rose-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">number</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">number</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagespostspostidindexvue">pages/posts/[postId]/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">posts</span><span class="o">/</span><span class="p">[</span><span class="nx">postId</span><span class="p">]</span> <span class="nx">的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Post</span> <span class="nx">Id</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-blue-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">postId</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">postId</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagespostspostidcommentscommentidvue">pages/posts/[postId]/comments/[commentId].vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這是</span> <span class="nx">posts</span><span class="o">/</span><span class="p">[</span><span class="nx">postId</span><span class="p">]</span><span class="o">/</span><span class="nx">comments</span><span class="o">/</span><span class="p">[</span><span class="nx">commentId</span><span class="p">]</span> <span class="nx">的頁面</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Post</span> <span class="nx">Id</span><span class="o">:</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-blue-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">postId</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">匹配到的</span> <span class="nx">Comment</span> <span class="nx">Id</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-5xl font-semibold text-purple-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">commentId</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">postId</span><span class="p">,</span> <span class="nx">commentId</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">route</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>來看看實際路由及匹配效果。</p> <p><img src="https://live.staticflickr.com/65535/52617186598_0c9c996bdc_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>為了方便理解，整理了以下表格，來表示頁面結構及期望匹配的模式與參數：</p> <p><strong>./pages/posts/index.vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts</td> <td>/posts</td> <td>無</td> </tr> </tbody> </table> <p><strong>./pages/posts/top-[number].vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts/top-:number</td> <td>/posts/top-3</td> <td>{ number: 3 }</td> </tr> <tr> <td>/posts/top-:number</td> <td>/posts/top-5</td> <td>{ number: 5 }</td> </tr> </tbody> </table> <p><strong>./pages/posts/[postId]/index.vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts/:postId</td> <td>/posts/8</td> <td>{ postId:8 }</td> </tr> </tbody> </table> <p><strong>./pages/posts/[postId]/comment/[commentId].vue</strong>：</p> <table> <thead> <tr> <th>匹配模式</th> <th>匹配路徑</th> <th>匹配參數 (Params)</th> </tr> </thead> <tbody> <tr> <td>/posts/:postId/comments/:commentId</td> <td>/posts/8/comments/1</td> <td>{ postId: 8, commentId: 1 }</td> </tr> </tbody> </table> <p>到這裡應該對於如何使用檔案名稱與目錄結構，來製作動態路由與匹配參數有一些概念了。</p> <h3 id="巢狀路由-nested-routes">巢狀路由 (Nested Routes)</h3> <p>巢狀路由 (Nested Routes) 或稱嵌套路由，顧名思義，當我們想要在一個頁面鑲嵌另一個頁面時，就需要巢狀路由來幫助我們。</p> <p>例如，我們想要在 <strong>docs</strong> 頁面元件中顯示 <strong>doc-1</strong> 或 <strong>doc-2</strong> 頁面元件，並在切換 <strong>doc-1</strong> 或 <strong>doc-2</strong> 頁面時，只是在 <strong>docs</strong> 下的嵌套頁面進行切換。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">/docs/doc-1 /docs/doc-2 </span></span><span class="line"><span class="cl">+------------------+ +-----------------+ </span></span><span class="line"><span class="cl"><span class="p">|</span> docs <span class="p">|</span> <span class="p">|</span> docs <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +--------------+ <span class="p">|</span> <span class="p">|</span> +-------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> doc-1 <span class="p">|</span> <span class="p">|</span> +------------&gt; <span class="p">|</span> <span class="p">|</span> doc-2 <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +--------------+ <span class="p">|</span> <span class="p">|</span> +-------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl">+------------------+ +-----------------+ </span></span></code></pre></td></tr></table> </div> </div><p>在 Vue 3 使用 Vue Router 實作上述巢狀路由時，即 <strong>docs</strong> 頁面要能顯示 <strong>doc-1</strong>，我們在路由配置可能就會寫 <code>path: '/docs'</code> 與 <code>children</code>，並在 <code>children</code> 加入 <code>path: '/doc-1'</code>，其中 <strong>docs</strong> 頁面包含 <code>&lt;router-view /&gt;</code>，最終瀏覽路由路徑 <code>/docs/doc-1</code> 就可以看到嵌套頁面的效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;/docs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="err">()</span> <span class="err">=&gt;</span> <span class="err">import(</span><span class="nt">&#34;./pages/docs.vue&#34;</span><span class="err">)</span> </span></span><span class="line"><span class="cl"> <span class="err">children</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;doc-1&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="err">()</span> <span class="err">=&gt;</span> <span class="err">import(</span><span class="nt">&#34;./pages/docs/doc-1.vue&#34;</span><span class="err">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>而在 Nuxt 3 頁面的約定式路由機制下，我們即是透過目錄結構與頁面元件實做出嵌套路由的效果。</p> <p>舉例來說，當我們建立了下面的目錄頁面結構：</p> <blockquote> <p>這裡需要注意，一定要有 <strong>docs.vue</strong> 與 <strong>docs</strong> 同名的目錄</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">./pages/ </span></span><span class="line"><span class="cl">├── docs/ </span></span><span class="line"><span class="cl">│ ├── doc-1.vue </span></span><span class="line"><span class="cl">│ └── doc-2.vue </span></span><span class="line"><span class="cl">└── docs.vue </span></span></code></pre></td></tr></table> </div> </div><p>頁面元件的參考程式碼如下：</p> <h5 id="pagesdocsvue">pages/docs.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-3xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="nx">Docs</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/docs/doc-1&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Doc</span> <span class="mi">1</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/docs/doc-2&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Doc</span> <span class="mi">2</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;border-b-2 border-gray-100&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagesdoc-1vue">pages/doc-1.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-blue-500&#34;</span><span class="p">&gt;</span><span class="nx">這是我的第一份文件</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagesdoc-2vue">pages/doc-2.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-green-500&#34;</span><span class="p">&gt;</span><span class="nx">這是我的第二份文件</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 3 在自動生成路由時，實際上幫我們做出了類似這樣子的路由結構：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">name:</span> <span class="nt">&#34;docs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;/docs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="nt">&#34;./pages/docs.vue&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">children:</span> <span class="err">[</span> </span></span><span class="line"><span class="cl"> <span class="err">{</span> </span></span><span class="line"><span class="cl"> <span class="err">name:</span> <span class="nt">&#34;docs-first-doc&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">path:</span> <span class="nt">&#34;doc-1&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="err">component:</span> <span class="nt">&#34;./pages/docs/doc-1.vue&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="err">]</span> </span></span><span class="line"><span class="cl"><span class="err">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>一定要記得在 <strong>docs</strong> 頁面加上 <code>&lt;NuxtPage /&gt;</code>，來作為顯示巢狀頁面的容器，接著分別瀏覽 <code>/docs</code>、<code>/docs/doc-1</code> 與 <code>/docs/doc-2</code>，可以發現在兩個頁面中上方的皆有顯示標題「這裡是 Docs」，該文字是由 <code>docs.vue</code> 元件提供的標題文字，而頁面下方則是 <strong>doc-1</strong> 與 <strong>doc-2</strong> 子頁面顯示的地方，以此就可以實現巢狀路由效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52616964494_bc91598456_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>透過目錄檔案的結構與名稱及中括號 <code>[]</code> 我們就可以完成多數路由的情境，確實方便很多，也足以應付大部分實務上的需求，如果真的需要手動建立路由規則可以在參考<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#router" target="_blank" rel="noopener" >官方文檔</a>或等待釋出更好解決方案。</p> <hr> <h2 id="布局模板-layouts">布局模板 (Layouts)</h2> <p>Nuxt 3 提供了一個布局模板 (Layouts) 的功能，可以讓你定義好布局模板後，在整個 Nuxt 中使用，舉例來說就很適合如上方有導覽列，下方是網頁主體內容的這種排版方式，將其構建成一個布局模板後，我們就可以重複使用這種布局方式。</p> <p>布局模板通常放置在 <strong>./layouts</strong> 目錄之下，也具有異步自動導入的效果，當新增好布局檔案後，我們就可以在 <strong>app.vue</strong> 中，添加 <code>&lt;NuxtLayout /&gt;</code> 元件來表示使用布局模板，也可以通過 <strong>name</strong> 設定不同的模板名稱。</p> <h3 id="建立一個預設的布局模板">建立一個預設的布局模板</h3> <p>布局模板在 Nuxt 3 中有約定一個名稱為 <code>default.vue</code> 作為預設的模板，如果在頁面元件中未特別指定要使用哪個模板或 <code>&lt;NuxtLayout /&gt;</code> 沒有設定 <strong>name</strong> 屬性，那麼都將會使用 <strong>default</strong> 作為預設的布局。</p> <h4 id="step-1-建立預設布局模板">Step 1. 建立預設布局模板</h4> <p>新增 <strong>./layouts/default.vue</strong> 檔案內容如下：</p> <h5 id="layoutsdefaultvue">layouts/default.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-sky-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">這是預設的布局</span><span class="err">，</span><span class="nx">全部頁面都會使用到</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在布局模板中，通常會包含一個 <code>&lt;slot /&gt;</code> 插槽，這個未命名的插槽 (slot) 即為預設插槽，這將會是採用這個布局模板的頁面元件，顯示的內容容器位置。</p> <h4 id="step-2-添加-元件">Step 2. 添加 元件</h4> <p>調整 <strong>app.vue</strong> 檔案，內容如下，我們添加 <code>&lt;NuxtLayout&gt;</code> 作為布局模板顯示的位置，<strong>name</strong> 屬性預設是 <strong>default</strong>，不過我們還是寫上 <code>name=&quot;default&quot;</code> 避免誤會，這個 <strong>name</strong> 屬性值對應的即是布局模板的名稱。</p> <p>下圖可以看見，我們在 <strong>app.vue</strong> 所寫的文字「這裡是最外層 app.vue」，會是在最外層，而緊接著的 <code>&lt;NuxtLayout name=&quot;default&quot;&gt;&lt;/NuxtLayout&gt;</code>，就是布局頁面 <code>default.vue</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617134195_02b2a3944c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="布局模板中的插槽">布局模板中的插槽</h3> <p>如果你有注意到，<strong>default.vue</strong> 檔案內程式碼內，有一個插槽 <code>&lt;slot /&gt;</code>，這裡就會是 <code>&lt;NuxtLayout&gt;</code> 內的元素所顯示的位置。</p> <p>例如，我們在 <strong>app.vue</strong> 稍作調整：</p> <h5 id="appvue-2">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-4 bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pb-4 text-2xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是最外層</span> <span class="nx">app</span><span class="p">.</span><span class="nx">vue</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;default&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-slate-800&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">被</span> <span class="nx">NuxtLayout</span> <span class="nx">包裹的元件將會放置到</span> <span class="nx">Layout</span> <span class="nx">的</span> <span class="nx">slot</span> <span class="nx">中</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>被 <code>&lt;NuxtLayout name=&quot;default&quot;&gt;</code> 包裹的元素，就會在布局模板中的插槽 <code>&lt;slot /&gt;</code> 顯示。</p> <p><img src="https://live.staticflickr.com/65535/52616188382_5a181ede48_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="在布局模板中建立多個插槽">在布局模板中建立多個插槽</h3> <p>當然，你也可以在布局模板中添加多個插槽，並給予名稱，這樣就可以將內容安排到特定的位置。</p> <h4 id="step-1-建立兩個具名的插槽-slot分別為-header-與-footer">Step 1. 建立兩個具名的插槽 (Slot)，分別為 <strong>header</strong> 與 <strong>footer</strong></h4> <blockquote> <p>如果插槽沒有給予 <strong>name</strong> 屬性，預設為 <code>default</code>。</p></blockquote> <h5 id="layoutsdefaultvue-1">layouts/default.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-sky-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">這是預設的布局</span><span class="err">，</span><span class="nx">全部頁面都會使用到</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;header&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;footer&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-將不同內容顯示於指定的插槽位置">Step 2. 將不同內容，顯示於指定的插槽位置。</h4> <h5 id="appvue-3">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-4 bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pb-4 text-2xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是最外層</span> <span class="nx">app</span><span class="p">.</span><span class="nx">vue</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;default&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">header</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-green-500&#34;</span><span class="p">&gt;</span><span class="nx">這段會放置在</span> <span class="nx">header</span> <span class="nx">插槽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-cyan-500&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">被</span> <span class="nx">NuxtLayout</span> <span class="nx">包裹的元件將會放置到</span> <span class="nx">Layout</span> <span class="nx">的預設</span> <span class="nx">slot</span> <span class="nx">中</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">footer</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 pt-4 text-xl text-blue-500&#34;</span><span class="p">&gt;</span><span class="nx">這段會放置在</span> <span class="nx">footer</span> <span class="nx">插槽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>下圖可以看見，我們就可以依此來安排各個元件，於布局模板插槽的所在位置。</p> <p><img src="https://live.staticflickr.com/65535/52617186618_5d72657e32_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="布局模板與路由頁面">布局模板與路由頁面</h3> <p>當你熟悉了插槽配置，你也可以在其中添加 <code>&lt;NuxtPage /&gt;</code> 與建立 <strong>pages</strong> 下的頁面元件，以達到不同的路由頁面，使用相同的布局方式。</p> <p>如果布局模板結合了路由頁面，整體網站就會如下的巢狀顯示方式，網站的入口點 <strong>app.vue</strong> 放置布局模板，模板內的內容則使用路由的 <code>&lt;NuxtPage /&gt;</code>，最後各個路由的頁面就會在 <code>&lt;NuxtPage /&gt;</code> 容器中顯示。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">+---------------------------+ </span></span><span class="line"><span class="cl"><span class="p">|</span> app.vue <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> layout <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> +-------------------+ <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> page <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> <span class="p">|</span> +-------------------+ <span class="p">|</span> <span class="p">|</span> </span></span><span class="line"><span class="cl"><span class="p">|</span> +-----------------------+ <span class="p">|</span> </span></span><span class="line"><span class="cl">+---------------------------+ </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立布局模板與路由頁面">建立布局模板與路由頁面</h3> <h4 id="step-1-調整-appvue-入口點">Step 1. 調整 app.vue 入口點</h4> <p>將 <strong>app.vue</strong> 調整為以下內容：</p> <h5 id="appvue-4">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-4 bg-white&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pb-4 text-2xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是最外層</span> <span class="nx">app</span><span class="p">.</span><span class="nx">vue</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtPage</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-建立路由頁面">Step 2. 建立路由頁面</h4> <p>建立 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-2">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-6 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣我們就可以來讓路由頁面共用相同的布局模板。</p> <p><img src="https://live.staticflickr.com/65535/52617186638_b40c944d07_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="多個路由頁面共用預設布局模板">多個路由頁面共用預設布局模板</h3> <p>承上，我們建立好預設的布局模板，讓它負責顯示路由的頁面。</p> <h4 id="step-1-新增路由頁面">Step 1. 新增路由頁面</h4> <p>新增 <strong>./pages/about.vue</strong>，內容如下：</p> <h5 id="pagesaboutvue-1">pages/about.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-yellow-400&#34;</span><span class="p">&gt;</span><span class="nx">大家好</span><span class="err">！</span><span class="nx">我是</span> <span class="nx">Ryan</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">about</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./pages/contact.vue</strong>，內容如下：</p> <h5 id="pagescontactvue-1">pages/contact.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-rose-400&#34;</span><span class="p">&gt;</span><span class="nx">如果沒事不要找我</span> <span class="nx">xDDD</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-8 text-3xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">這裡是</span> <span class="o">/</span><span class="nx">contact</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-新增路由連結">Step 2. 新增路由連結</h4> <p>調整 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-3">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex space-x-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/about&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">About</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/contact&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="nx">Contact</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現，現在首頁 <code>/</code>、<code>/about</code> 與 <code>/contact</code> 都套用上了預設布局。</p> <p><img src="https://live.staticflickr.com/65535/52616964569_b4e67e211a_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="建立多個布局模板">建立多個布局模板</h3> <p>你也可以建立多個布局模板，再依據不同的情境，使用不同的布局模板。</p> <h4 id="step-1-建立新的布局模板">Step 1. 建立新的布局模板</h4> <p>新增 <strong>./layouts/custom.vue</strong>，內容如下：</p> <h5 id="layoutscustomvue">layouts/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-rose-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">使用</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-rose-500&#34;</span><span class="p">&gt;</span><span class="nx">Custom</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">布局</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-新增一個路由頁面">Step 2. 新增一個路由頁面</h4> <p>新增 <strong>./pages/custom.vue</strong>，內容如下：</p> <h5 id="pagescustomvue">pages/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;m-6 bg-slate-50 py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-使用指定布局模板">Step 3. 使用指定布局模板</h4> <p>在 <strong>./pages/custom.vue</strong> 中的 <strong>script</strong> 使用 <code>definePageMeta</code> 方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;custom&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>definePageMeta</code> 方法，提供我們可以設定特定的布局模板，<code>layout</code> 參數值所對應的名稱，即為 <strong>./layouts</strong> 目錄下的布局模板。</p> <blockquote> <p>注意，布局模板的命名被規範使用 <strong>Kebab Case</strong> 命名法，若檔案名稱為 <strong>customLayout.vue</strong>，它將會以 <code>custom-layout</code> 作為 <strong>name</strong> 屬性傳遞給</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52616188442_127e72da50_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="更進階的指定布局模板">更進階的指定布局模板</h3> <p>我們能使用 <strong>layout: false</strong> 來禁止使用預設的布局模板，並在 <strong>template</strong> 添加 <code>&lt;NuxtLayout name=&quot;custom&quot;&gt;</code> 來使用 <strong>custom</strong> 布局模板。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;custom&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當布局模板可以在 <strong>template</strong> 中設定使用，我們就能結合插槽甚至動態的調整 <strong>name</strong> 屬性，做出更多樣靈活的布局效果。</p> <p><img src="https://live.staticflickr.com/65535/52616964574_0e7759f29b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>上圖的參考程式碼：</p> <h5 id="layoutscustomvue-1">layouts/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-rose-100 py-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;px-6 py-4 text-2xl text-gray-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">使用</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-rose-500&#34;</span><span class="p">&gt;</span><span class="nx">Custom</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">布局</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;footer&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="pagescustomvue-1">pages/custom.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLayout</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;custom&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-6 mb-4 bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">footer</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-xl text-slate-600&#34;</span><span class="p">&gt;</span><span class="nx">感謝您閱讀</span> <span class="nx">Nuxe</span> <span class="mi">3</span> <span class="nx">學習筆記</span><span class="err">～</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">NuxtLayout</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">layout</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當你使用 <strong>definePageMeta</strong> 方法，禁止使用預設的布局模板後，你也能使用 <code>setPageLayout</code> 方法來動態改變布局。</p> <p>例如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="o">=</span> <span class="nx">enableCustomLayout</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setPageLayout</span><span class="p">(</span><span class="s1">&#39;custom&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當你看過了這篇內容後，你會發現 Nuxt 3 所提供的布局模板非常的好用，布局模板規劃好後，爾後頁面所使用到的相同布局，只需要更改同一個布局模板，如果再結合元件化技巧，更是讓你的程式碼兼具重複使用性與維護性。</p> <hr> <h2 id="元件-components">元件 (Components)</h2> <p>在建立 Vue 的網站開發過程中，我們可能會自己封裝元件 (Component) 讓程式碼可以被重複使用，也方便開發者維護，這些一個個的元件，可以透過<code>全域註冊 (Global Registration)</code> 讓整個 Vue 應用程式中都可以使用這個元件，也可以透過<code>區域註冊 (Local Registration)</code> 於特定的元件再載入使用。接下來我們將介紹 Nuxt 3 使用元件時應該遵循的規範及特色。</p> <h3 id="元件自動載入">元件自動載入</h3> <p>在 Vue 中，雖然區域註冊使得元件間的依賴關係更加明確也對於 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking" target="_blank" rel="noopener" >Tree shaking</a> 更加友好，但我們在使用元件時，就得在需要的地方個別載入及註冊。而 Nuxt 3 提供在 <strong>components</strong> 目錄下專門放至這些元件，並具有自動載入及延遲載入等功能特色。</p> <h4 id="建立與使用元件">建立與使用元件</h4> <p>新增 <strong>./components/IronManWelcome.vue</strong>，內容如下：</p> <h5 id="componentsironmanwelcomevue-1">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <strong>./app.vue</strong>，內容如下：</p> <h5 id="appvue-5">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們建立了 <strong>./components/IronManWelcome.vue</strong> 檔案後，Nuxt 會自動載入 <strong>./components</strong> 目錄中的<code>任何元件</code>，在使用時的元件名稱也對應著檔案名稱，所以我們只需直接添加 <code>&lt;IronManWelcome /&gt;</code> 就可以直些使用這個元件。</p> <h3 id="元件名稱">元件名稱</h3> <p>Nuxt 所自動載入 <strong>./components</strong> 目錄下的元件，在使用時的元件名稱也對應著檔案名稱，而當你在巢狀的目錄結構下的元件，<code>元件的名稱將會基於目錄的路徑與檔案名稱，並刪除重複的字段</code>。</p> <p>舉例來說，如果 <strong>./components</strong> 目錄結構如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">components/ </span></span><span class="line"><span class="cl">└── base/ </span></span><span class="line"><span class="cl"> └── apply/ </span></span><span class="line"><span class="cl"> └── Button.vue </span></span></code></pre></td></tr></table> </div> </div><p><strong>./components/base/apply/Button.vue</strong> 元件的名稱就會是由目錄與檔案名稱組合出的 <code>&lt;BaseApplyButton&gt;</code>。</p> <p>為了開發上能更清楚辨別，建議將檔案名稱設置與使用元件時的名稱相同，所以我們重新命名 <strong>./components/base/apply/</strong> 下的 <strong>Button.vue</strong> 為 <code>BaseApplyButton.vue</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">components/ </span></span><span class="line"><span class="cl">└── base/ </span></span><span class="line"><span class="cl"> └── apply/ </span></span><span class="line"><span class="cl"> └── BaseApplyButton.vue </span></span></code></pre></td></tr></table> </div> </div><p>你也不用擔心元件名稱會不會變成 <code>&lt;BaseApplyBaseApplyButton&gt;</code> 看起來有點醜醜的，因為 Nuxt 會幫我們<code>刪除重複的字段</code>，所以在使用時元件名稱為 <code>&lt;BaseApplyButton&gt;</code>。</p> <h4 id="元件名稱的命名規則">元件名稱的命名規則</h4> <p>Vue 在註冊元件時，可以使用大駝峰式命名法 (Pascal Case) 或烤肉串命名法 (Kebab Case) 來為元件命名，並在 <strong>template</strong> 也可以自由使用兩種命名方式作為使用元件的標籤。</p> <p>例如，以 <code>&lt;base-apply-button&gt;</code> 來表示使用 <strong>./components/base/apply/BaseApplyButton.vue</strong> 元件。</p> <p>抑或建立 <strong>./components/base/apply/base-apply-button.vue</strong> 元件，使用時以 <code>&lt;BaseApplyButton&gt;</code> 表示。</p> <p>兩種方式 Nuxt 都支援，可以根據自己的習慣做選擇，而我個人是以大駝峰式命名法 (Pascal Case) 為主，以此區別為自己建立的元件。</p> <h3 id="動態元件-dynamic-components">動態元件 (Dynamic Components)</h3> <p>如果想要使用像 Vue 中的 <code>&lt;component :is=&quot;someComputedComponent&quot;&gt;</code> 來<a class="link" href="https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components" target="_blank" rel="noopener" >動態</a>的切換不同的元件，則需要使用 Vue 提供的 <code>resolveComponentVue</code> 方法來進行輔助。</p> <p>例如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">component</span> <span class="o">:</span><span class="na">is</span><span class="o">=</span><span class="s">&#34;show ? DynamicComponent : &#39;div&#39;&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">show</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">DynamicComponent</span> <span class="o">=</span> <span class="nx">resolveComponent</span><span class="p">(</span><span class="s1">&#39;BaseApplyButton&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立動態元件">建立動態元件</h3> <h4 id="step-1-建立元件">Step 1. 建立元件</h4> <p>新增 <strong>./components/base/apply/BaseApplyButton.vue</strong>，內容如下：</p> <h5 id="componentsbaseapplybaseapplybuttonvue">components/base/apply/BaseApplyButton.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 bg-blue-600 py-3 px-8 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">立即報名</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./components/round/apply/RoundApplyButton.vue</strong>，內容如下：</p> <h5 id="componentsroundapplyroundapplybuttonvue">components/round/apply/RoundApplyButton.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-full bg-blue-600 py-3 px-8 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">立即報名</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-使用-resolvecomponent">Step 2. 使用 resolveComponent()</h4> <p>調整 <strong>./app.vue</strong>，內容如下：</p> <h5 id="appvue-6">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> </span></span><span class="line"><span class="cl"> <span class="na">id</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;useRound&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;h-5 w-5&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 block text-base text-slate-800&#34;</span><span class="p">&gt;</span><span class="nx">使用圓角按鈕</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">component</span> <span class="o">:</span><span class="na">is</span><span class="o">=</span><span class="s">&#34;useRound ? RoundButton : BaseButton&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">useRound</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">BaseButton</span> <span class="o">=</span> <span class="nx">resolveComponent</span><span class="p">(</span><span class="s1">&#39;BaseApplyButton&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">RoundButton</span> <span class="o">=</span> <span class="nx">resolveComponent</span><span class="p">(</span><span class="s1">&#39;RoundApplyButton&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>呈現效果：</p> <p><img src="https://live.staticflickr.com/65535/52617134245_0c359ab608_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="動態載入-dynamic-imports">動態載入 (Dynamic Imports)</h3> <p>動態載入 (Dynamic Imports) 元件也稱之為<code>延遲載入 (lazy-loading)</code>，如果頁面中不需要立刻使用或顯示某個元件，透過動態載入的方式可以<code>延遲元件載入的時間點</code>，有助於優化 JavaScript 首次載入時的檔案大小。</p> <p>使用的方式也非常簡單，只需要在使用元件時，加上前綴 <code>Lazy</code> 就可以有延遲載入的效果。</p> <h4 id="建立一個動態載入的按鈕">建立一個動態載入的按鈕</h4> <h4 id="step-1-建立按鈕元件">Step 1. 建立按鈕元件</h4> <p>新增 <strong>./components/base/apply/BaseApplyButton.vue</strong>，內容如下：</p> <h5 id="componentsbaseapplybaseapplybuttonvue-1">components/base/apply/BaseApplyButton.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;submit&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-sm bg-blue-600 py-3 px-8 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">立即報名</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-添加-lazy-前綴">Step 2. 添加 Lazy 前綴</h4> <p>調整 <strong>./app.vue</strong>，內容如下：</p> <h5 id="appvue-7">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;show&#34; name=&#34;show-button&#34; type=&#34;checkbox&#34; class=&#34;h-5 w-5&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;show-button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 block text-base text-slate-800&#34;</span><span class="p">&gt;</span><span class="nx">顯示報名按鈕</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">LazyBaseApplyButton</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;show&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">show</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>看看延遲載入的效果：</p> <p>在頁面上有一個核取方塊，使用者勾選時才顯示按鈕，我們透過瀏覽器的開發者工具觀察網路 (Network) 的使用情況，可以發現只有首次勾選後才請求了 <strong>BaseApplyButton.vue</strong> 按鈕元件 JS。當這個按鈕元件被設置為 <code>Lazy</code> 動態載入時，頁面首次載入其實不會包含這個按鈕的程式碼，而是等待需要這個元件時才去請求下載，以此達到<code>延遲載入</code>的效果，同時也降低首次進入網頁時需要下載的 JavaScript 程式碼大小。</p> <p><img src="https://live.staticflickr.com/65535/52616698371_6fc18a0e8b_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="控制伺服器端或客戶端渲染元件">控制伺服器端或客戶端渲染元件</h3> <h4 id="clientonly-元件"><code>&lt;ClientOnly&gt;</code> 元件</h4> <p>Nuxt 3 提供了一個 <code>&lt;ClientOnly&gt;</code> 元件，可以控制被包裹的元件僅在客戶端進行渲染。</p> <p>例如，我們建立 <strong>./components/IronManWelcome.vue</strong> 檔案，內容如下：</p> <h5 id="componentsironmanwelcomevue-2">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>&lt;ClientOnly&gt;</code> 元件包裹 <code>&lt;IronManWelcome&gt;</code>。</p> <p>調整 <strong>./app.vue</strong> 中，內容如下：</p> <h5 id="appvue-8">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣就可以將 <code>&lt;IronManWelcome&gt;</code> 元件設定為僅在客戶端進行渲染，首次請求頁面時將不會包含這個元件的 HTML。</p> <p><code>&lt;ClientOnly&gt;</code> 元件中提供了一個名為 <code>fallback</code> 的插槽 (Slot)，可以用作於在伺服器渲染的預設內容，等到客戶端載入完成才接手渲染被包裹的 <code>&lt;IronManWelcome&gt;</code> 元件。</p> <p>調整 <strong>./app.vue</strong> 中，內容如下：</p> <h5 id="appvue-9">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 flex justify-center&#34;</span><span class="p">&gt;[</span><span class="nx">IronManWelcome</span><span class="p">]</span> <span class="nx">載入中</span><span class="p">...&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當進入首次網頁，會先渲染 <code>fallback</code> 插槽內的元素，所以瀏覽器先顯示 <strong>[IronManWelcome] 載入中&hellip;</strong> 文字，接著客戶端載入完 JS 後接手渲染 <code>&lt;IronManWelcome&gt;</code> 元件。</p> <p><img src="https://live.staticflickr.com/65535/52616188487_a1bc229272_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以透過瀏覽器頁面中點擊右鍵後展開選單的「檢視網頁原始碼」功能，所看到的網頁原始碼，發現伺服器端僅先回應了 <code>&lt;p class=&quot;my-6 flex justify-center&quot;&gt;[IronManWelcome] 載入中...&lt;/p&gt;</code>，表示這是由伺服器端渲染 <code>&lt;ClientOnly&gt;</code> 元件 <code>fallback</code> 插槽的內容。</p> <p><img src="https://live.staticflickr.com/65535/52616964604_68d7e7bf6a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="client-與-server">.client 與 .server</h4> <p>Nuxt 3 的元件，也可以透過元件的檔案名稱來控制僅顯示在客戶端或伺服器端。</p> <p>如果元件僅在客戶端呈現，則可以將 <code>.client</code> 加入元件檔名的後綴中。</p> <p>建立一個 <strong>./components/JustClient.client.vue</strong> 元件檔案，表示 <code>&lt;JustClient&gt;</code> 元件，僅會在客戶端進行渲染。</p> <p>而添加 <code>.server</code> 後綴的元件檔案，則會是這個元件在伺服器端渲染的內容。</p> <h4 id="控制伺服器端或客戶端渲染元件範例">控制伺服器端或客戶端渲染元件範例</h4> <p>我們使用 <code>&lt;ClientOnly&gt;</code> 元件、<code>.client</code> 與 <code>.server</code> 做一個範例來看呈現的效果。</p> <h5 id="componentsironmanwelcomevue-3">components/IronManWelcome.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;</span><span class="mi">2022</span> <span class="nx">iThome</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-bold text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">鐵人賽</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="componentsjustclientclientvue">components/JustClient.client.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-16 my-4 rounded-lg bg-green-100 p-4 text-sm text-green-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-semibold&#34;</span><span class="p">&gt;[</span><span class="nx">JustClient</span><span class="p">]&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2&#34;</span><span class="p">&gt;</span><span class="nx">這是只有在</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold&#34;</span><span class="p">&gt;</span><span class="nx">Client</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">才會渲染的元件</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="componentsclientandserverclientvue">components/ClientAndServer.client.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-16 my-4 rounded-lg bg-sky-100 p-4 text-sm text-sky-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-semibold&#34;</span><span class="p">&gt;[</span><span class="nx">ClientAndServer</span><span class="p">]&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">這是從</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-red-500&#34;</span><span class="p">&gt;</span><span class="nx">Client</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">渲染出來的元件</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="componentsclientandserverservervue">components/ClientAndServer.server.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mx-16 my-4 rounded-lg bg-sky-100 p-4 text-sm text-sky-700&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-semibold&#34;</span><span class="p">&gt;[</span><span class="nx">ClientAndServer</span><span class="p">]&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">這是從</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-bold text-red-500&#34;</span><span class="p">&gt;</span><span class="nx">Server</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="nx">渲染出來的元件</span><span class="err">，</span><span class="nx">請等待</span> <span class="nx">Client</span> </span></span><span class="line"><span class="cl"> <span class="nx">接手渲染</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="appvue-10">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">IronManWelcome</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="err">#</span><span class="na">fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 flex justify-center&#34;</span><span class="p">&gt;[</span><span class="nx">IronManWelcome</span><span class="p">]</span> <span class="nx">載入中</span><span class="p">...&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">JustClient</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientAndServer</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們重新瀏覽網頁，可以發現到由伺服器渲染的插槽元素 <strong>[IronManWelcome] 載入中&hellip;</strong> 文字與 <strong>ClientAndServer.server.vue</strong> 元件，率先被顯示了出來。接著當 JS 載入完畢後，被 包裹的元件 <code>&lt;IronManWelcome&gt;</code> 也接手並覆蓋了「<strong>[IronManWelcome] 載入中&hellip;</strong>」文字，<strong>ClientAndServer.client.vue</strong> 與 <strong>JustClient.client.vue</strong> 僅在客戶端渲染的元件，也分別的覆蓋與顯示出來。</p> <p><img src="https://live.staticflickr.com/65535/52617186703_ecb68732a9_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>透過元件我們能更好的整理可重複使用的程式碼，也提升了可維護性，而 Nuxt 中的動態載入更是能將非必要使用的元件延遲載入，大大提升了首次進入網頁所需要下載的檔案大小，最後我們也介紹了如何控制伺服器端或客戶端渲染元件，熟悉了之後就能針對網站需求設定元件的載入及渲染方式囉！</p> <hr> <h2 id="組合式函數-composables">組合式函數 (Composables)</h2> <p>組合式函數 (Composables) 是一種利用 Vue 3 的 <strong>Composition API</strong> 來封裝和複用<code>有狀態邏輯</code>的函數，在 Nuxt 我們可以將一些通用的商業邏輯放置在 <code>composables</code> 來建立組合式函數，這樣一來就可以在各個頁面共用這個組合式函數。</p> <h3 id="options-api-與-composition-api">Options API 與 Composition API</h3> <ul> <li>選項式 API (Options API)：</li> </ul> <p>下列這段是 Vue 依據 Options API 撰寫出來的程式碼，也是 Vue 2 處理邏輯的寫法，所謂 Options (選項、可選的) 指的就是以程式碼的性質來分割程式碼，所有設定資料初始值的都會在 <strong>data</strong> 這邊處理，這個元件所需要的方法則會在 <strong>methods</strong> 這裡建立，<strong>data</strong> 及 <strong>methods</strong> 也就是使用者需要的<strong>選項</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">incrementByTwo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">doubleCount</span> <span class="o">+=</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>組合式 API (Composition API)：</li> </ul> <p>目前在 Vue 3 你仍可以繼續使用 Vue 2 的 Options API，但隨著程式碼邏輯的增加，看似有條理的分類，其實對於理解及維護上沒有想像中便利。</p> <p>Vue 3 提出的<strong>組合式 API (Composition API)</strong> 則是以邏輯功能來進行分類，你可以將所有與某個功能的 <strong>data</strong>、<strong>computed</strong>、<strong>methods</strong> 與 <strong>watch</strong> &hellip;等，寫在同一個段落行程一個區塊。</p> <p>詳細說明可閱讀先前撰寫的<a class="link" href="https://blog.wayne-project.com/2022-08-11/option-api-vs-composition-api/" >圖解 Option API vs Composition API</a>文章。</p> <h3 id="mixins-與-composables">Mixins 與 Composables</h3> <p>在 Options API 可以使用 <code>mixin</code> 來引入可以重複使用的程式碼，讓不同的元件可以共用函數方法，但隨著專案變大，同一個元件可能使用 mixin 同時來引用許多的共用函數，這將導致容易產生命名衝突、元件間的耦合與來源不夠清晰等問題（詳細原因請參考<a class="link" href="https://blog.wayne-project.com/2022-12-30/why-use-hooks/" >淺談為什麼 Vue 和 React 都選擇了 Hooks？</a>）。</p> <p>Vue 3 為我們帶來了組合式 API，實現了更乾淨的程式碼編排與高效的邏輯重用，**組合式函數 (Composables)**也基於組合式 API 來進行封裝這些可複用的邏輯，更解決了使用 mixin 實現共用函數的缺點。</p> <h3 id="組合式函數-composables-1">組合式函數 (Composables)</h3> <p>在 Nuxt 3 中要建立一個<code>組合式函數 (Composables)</code> 我們可以在 <code>composables</code> 目錄下編寫，這些常用的函數，將會被 Nuxt 3 自動載入做使用，實現在各個元件使用這些函數方法。</p> <h4 id="建立組合式函數">建立組合式函數</h4> <p>首先，我們新增 <strong>./composables/useCounter.js</strong>，內容如下：</p> <h5 id="composablesusecounterjs">composables/useCounter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 自動導入的特性，現在我們就能在其他元件中使用 <strong>useCounter</strong> 組合式函數。</p> <p>新增 <strong>./pages/count.vue</strong>，內容如下：</p> <h5 id="pagescountvue">pages/count.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 text-4xl text-gray-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-6 rounded-sm bg-sky-600 py-2 px-4 text-base font-medium text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;increment&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="nx">increment</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="composables-組合式函數的名稱">Composables 組合式函數的名稱</h3> <p>前面範例使用的 <code>useCounter()</code> 是 Nuxt 3 從 <strong>./composables/useCounter.js</strong> 自動載入的，而且 Nuxt 3 的組合式函數的名稱，有兩種方式會影響使用時的函數名稱，不過也建議在建立組合式函數可以使用 <code>use</code> 作為開頭來加以識別。</p> <h4 id="1-使用預設匯出-default-export">1. 使用預設匯出 (Default export)</h4> <p>如果在檔案內使用的是預設匯出，那麼這個組合式函數在使用時，即<code>對應檔案名稱</code>，檔案名稱可以是小寫駝峰式 (Camel case) 或烤肉串 (Kebab case)，例如建立 <strong>./composables/useCounter.js</strong> 或 <strong>./composables/use-counter.js</strong> 檔案內容如下，使用時組合式函數為小寫駝峰式(Camel case) 名為 <code>useCounter</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="2-使用具名匯出-named-export">2. 使用具名匯出 (Named export)</h4> <p>如果建立組合式函數時，使用的是有具名的匯出，那麼<code>組合式函數對應的名稱，就不是檔案名稱，而是檔案內 export 出來的名稱</code>。</p> <p>例如，建立 <strong>./composables/count.js</strong>，檔案內容如下，組合式函數名稱就不會是檔案名稱 count，而是具名導出的名稱 <code>useCounter</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounter</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="composables-自動載入的規則">Composables 自動載入的規則</h3> <p><strong>composables</strong> 目錄下，Nuxt 3 會自動掃描 <strong>.js</strong>、<strong>.ts</strong> 與 <strong>.vue</strong> 副檔名的檔案，但只有<code>最上層的檔案</code>，才會自動的被載入為組合式函數，以下面這個目錄結構為例，只有 <strong>./composables/useCounter.js</strong> 才會被正確的自動載入。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">composables/ </span></span><span class="line"><span class="cl">├── time/ </span></span><span class="line"><span class="cl">│ └── useDateFormat.js </span></span><span class="line"><span class="cl">└── useCounter.js </span></span></code></pre></td></tr></table> </div> </div><p>下列這種形式，<strong>./composables/time/index.js</strong> 也能正確的自動載入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">composables/ </span></span><span class="line"><span class="cl">├── time/ </span></span><span class="line"><span class="cl">│ └── index.js </span></span><span class="line"><span class="cl">└── useCounter.js </span></span></code></pre></td></tr></table> </div> </div><p>如果你想讓巢狀的目錄結構下也能被 Nuxt 自動掃描載入，那麼你可以使用下面兩種方法：</p> <h4 id="一重新匯出-推薦">一、重新匯出 <span class="focus">[推薦]</span></h4> <p>配置 <strong>./composables/index.js</strong> 將目錄下的函數於這裡整理並匯出你需要的作為組合式函數。</p> <h4 id="二配置掃描巢狀目錄">二、配置掃描巢狀目錄</h4> <p>修改 <code>nuxt.config.ts</code> 檔案，配置自動載入額外掃描 <code>composables</code> 下的巢狀目錄。</p> <h5 id="nuxtconfigts-1">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">imports</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">dirs</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 掃描 composables 目錄頂層 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;composables&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 掃描深度一層的特定檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;composables/*/index.{ts,js,mjs,mts}&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 掃描整個 composables 目錄下的檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;composables/**&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>不論在 Nuxt 3 或是 Vue 3，組合式函數 (Composables) 都是能幫助你在整個網站可以共用函數的方法，目前也有專案 <a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a> 提供了常用與實用的組合式函數集合，能幫我們省去不少開發時間與提升重複使用性，<a class="link" href="https://blog.wayne-project.com/2022-12-30/npm-vueuse/" >VueUse的介紹請點我前往</a>。</p> <hr> <h2 id="插件-plugins">插件 (Plugins)</h2> <p>在開發時，為了不重複造輪子，我們可能會在網路上找看看有沒有現成的套件可以做使用，如果這個套件在 Nuxt 3 沒有專用的模組或插件，那麼我們就只能依照套件的支援與安裝方式嘗試添加至 Nuxt 中使用。這邊將會介紹在 Nuxt 插件的規則與特性，如何建立自己的插件及安裝 Vue 的插件。</p> <p>說到插件 (Plugins)，Chrome 或 Firefox 等瀏覽器的使用者，一定都聽過也安裝過插件；如果瀏覽器中的功能不夠滿足你的需求，那麼你可以透過安裝插件來嘗試解決你的問題，而插件做的就是幫助你的瀏覽器或是網站，添加一些功能或是配置，做一個擴充的動作。在 Nuxt 3 指的插件，道理也是一樣的，我們可以透過插件來協助我們擴充功能。</p> <h3 id="nuxt-3-插件目錄">Nuxt 3 插件目錄</h3> <p>Nuxt 將自動讀取 <strong>plugins</strong> 目錄中的檔案並自動載入它們，也因為目錄中的所有插件都是自動載入的，因此不必於 <code>nuxt.config.ts</code> 中再個別配置。</p> <p>Nuxt 會自動掃描 <strong>plugins</strong> 目錄下的 <strong>.js</strong>、<strong>.ts</strong> 與 <strong>.vue</strong> 副檔名的檔案，但只有最上層的檔案或最上層目錄下的 <strong>index.js</strong> 檔案才會被自動載入。</p> <p>例如，只有 <strong>./plugins/myPlugin.js</strong> 及 <strong>./plugins/myPlugin/index.js</strong> 會自動的被 Nuxt 載入。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">plugins/ </span></span><span class="line"><span class="cl">├── myPlugin/ </span></span><span class="line"><span class="cl">│ └── index.js </span></span><span class="line"><span class="cl">└── myPlugin.js </span></span></code></pre></td></tr></table> </div> </div><h3 id="如何建立插件">如何建立插件</h3> <p>當您建立好插件的檔案後，只需要使用預設導出 Nuxt 3 中的 <code>defineNuxtPlugin</code> 方法，傳遞給插件的唯一參數是 <code>nuxtApp</code>，接著就可以在裡頭實作功能。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">(</span><span class="nx">nuxtApp</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 可以使用 nuxtApp 來做一些事情 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>初次建立插件時，可以嘗試印出 <code>nuxtApp</code> 參數看看，如下圖，<code>nuxtApp</code> 包含了各種的實例 (Instance)，例如我們要使用 Vue 的 <code>app.use</code>，就可以在 <code>nuxtApp</code> 找到 Vue 的實例 <code>vueApp</code>，並透過 <code>nuxtApp.vueApp.use</code> 來安裝 Vue 的插件。</p> <p><img src="https://live.staticflickr.com/65535/52616188532_bb5139c839_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="在插件中使用組合式函數-composables">在插件中使用組合式函數 (Composables)</h3> <p>你也可以在自定義的插件中使用組合式函數，但在插件中存在著一些限制和差異。</p> <h4 id="插件的載入順序">插件的載入順序</h4> <p>插件是依照順序來呼叫的，如果你使用的組合式函數，依賴著尚未載入的插件，它將無法正常的執行；除非你很確定插件的載入順序，不然儘量在插件內使用其他會依賴插件或由其他插件所提供的組合式函數。</p> <h4 id="依賴-vue-的生命週期">依賴 Vue 的生命週期</h4> <p>如果插件內所使用的組合式函數，依賴於 Vue 的生命週期，那麼也會無法正常的執行，因為插件只會綁定到 nuxtApp 的實例上，與 Vue 元件內使用組合式函數綁定的元件實例，有所不同。</p> <h3 id="automatically-providing-helpers">Automatically Providing Helpers</h3> <p>如果想在 NuxtApp 的實例上提供 <code>helper</code>，我們可以在插件回傳的物件中添加 <code>provide</code>。</p> <p>例如，我們建立一個插件 <strong>./plugins/myPlugin.js</strong>，內容如下：</p> <h5 id="pluginsmypluginjs">plugins/myPlugin.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">hello</span><span class="o">:</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="sb">`Hello </span><span class="si">${</span><span class="nx">msg</span><span class="si">}</span><span class="sb">!`</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整 <strong>./app.vue</strong> 內容：</p> <h5 id="appvue-11">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-2 text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-2 text-6xl font-semibold text-emerald-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">$hello</span><span class="p">(</span><span class="s1">&#39;Jennifer&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">$hello</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useNuxtApp</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">$hello</span><span class="p">(</span><span class="s1">&#39;Ryan&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以直接在 <strong>template</strong> 中使用 <code>$hello</code>，這個由插件提供的 <strong>Helper</strong>，注意這邊要加上錢字符號 <code>$</code>。也可以透過 <code>useNuxtApp</code> 方法取得 NuxtApp 的實例後再使用 <code>$hello</code>。</p> <p><img src="https://live.staticflickr.com/65535/52616964639_61f022bcfe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="僅限伺服器端或客戶端中使用">僅限伺服器端或客戶端中使用</h4> <p>有些插件可能只能在瀏覽器中使用，原因可能是這個插件不需要或無法在伺服器端中執行。</p> <p>我們可以透過插件的檔案名稱來添加後綴 <code>.client</code> 或 <code>.server</code>，控制伺服器端或客戶端中使用。</p> <h3 id="vue-插件與指令">Vue 插件與指令</h3> <p>這裡我們嘗試在 Nuxt 3 中使用 Vue 的 <a class="link" href="https://github.com/MatteoGabriele/vue-gtag" target="_blank" rel="noopener" >vue-gtag</a> 插件，來添加 Google 分析標籤。</p> <h3 id="nuxt-3-中使用-vue-gtag-插件">Nuxt 3 中使用 vue-gtag 插件</h3> <h4 id="step-1-安裝套件">Step 1. 安裝套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vue-gtag-next </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vue-gtag-next</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-建立-nuxt-插件">Step 2. 建立 Nuxt 插件</h4> <p>新增 <strong>vue-gtag.client.js</strong> 檔案，內容如下：</p> <h5 id="pluginsvue-gtagclientjs">plugins/vue-gtag.client.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">VueGtag</span> <span class="nx">from</span> <span class="s1">&#39;vue-gtag-next&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">VueGtag</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">property</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;GA_MEASUREMENT_ID&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="完成效果">完成效果</h4> <p>可以看見瀏覽器就出現使用 vue-gtag 插件，幫我們自動插入與配置 script 的效果囉！</p> <p><img src="https://live.staticflickr.com/65535/52617186723_d4fd2eee98_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="nuxt-3-中建立-vue-指令">Nuxt 3 中建立 Vue 指令</h3> <p>在插件中可以取得 Vue 的實例，所以我們也能在插件註冊自定義的指令。</p> <p>例如，新增 <strong>./plugins/directive.js</strong> 檔案，內容如下：</p> <h5 id="pluginsdirectivejs">plugins/directive.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;focus&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">getSSRProps</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// you can provide SSR-specific props here </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以直接使用 <code>v-focus</code> 這個指令來控制元素聚焦的效果。</p> <p><img src="https://live.staticflickr.com/65535/52616964679_7e9f1e5d2c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Nuxt 讓我們可以很輕鬆的建立插件並選擇配置於伺服器端或客戶端，對於使用 UI 框架或元件，更能在插件中直接取得實例來安裝 Vue 的插件與指令，不過呢，目前也有個 <a class="link" href="https://github.com/nuxt/framework/discussions/1175" target="_blank" rel="noopener" >RFC</a> 正在徵求意見期待讓 Nuxt 使用 Vue 插件可以更方便容易。</p> <hr> <h2 id="模組-modules">模組 (Modules)</h2> <p>Nuxt 提供了一個模組系統來擴展自身框架的核心，也簡化了整合過程中需要的繁瑣配置。當你想擴展 Nuxt 或 Vue 的功能，雖然 Nuxt 可以通過安裝與配置插件進行功能擴展，但是在多個專案或使用上可能繁瑣耗時或重複性很高的，但如果套件已經有針對 Nuxt 模組做整合，我們就不必從頭開始開發或像安裝插件一樣需要建立與維護這些配置。</p> <h3 id="nuxt-3-中插件與模組的差異">Nuxt 3 中插件與模組的差異</h3> <p>Nuxt 模組與 Nuxt 插件的差異在於，<code>模組載入執行的時間點更早</code>，意思是 Nuxt 在啟動伺服器後，首先會<code>依序的載入模組並執行</code>，接續建立 Nuxt 的環境 (Context) 與 Vue 的實例 (Instance)，最後才開始執行 Nuxt 的插件。</p> <p>因此，Nuxt 模組可以做更多的事情，包含在使用 <code>nuxi dev</code>、<code>nuxi build</code> 啟動或建構 Nuxt 時，可以透過模組來覆蓋模板、配置 webpack 及配置插件等許多任務。</p> <h3 id="nuxt-3-安裝使用模組">Nuxt 3 安裝使用模組</h3> <p>Nuxt 模組是一個導出異步函數的 JavaScript 檔案，當安裝使用模組時，通常會配置在 <code>nuxt.config.ts</code> 檔案的 <code>modules</code> 中，例如<a class="link" href="https://blog.wayne-project.com/2023-01-14/nuxt-try-nuxt3/#%e4%bd%bf%e7%94%a8-nuxt-tailwind-%e6%a8%a1%e7%b5%84" >使用 Nuxt Tailwind 模組</a> 會添加上 <strong>&rsquo;@nuxtjs/tailwindcss&rsquo;</strong>。</p> <p>通常模組的開發人員會提供這些模組應該如何在 <strong>modules</strong> 屬性來做配置，甚至一些可選用的參數來配置這些模組。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 使用套件名稱 (推薦使用) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;@nuxtjs/example&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 載入本地目錄的模組 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">&#39;./modules/example&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 添加模組的選項參數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">[</span><span class="s1">&#39;./modules/example&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;123&#39;</span> <span class="p">}]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 在行內定義模組 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">async</span> <span class="p">(</span><span class="nx">inlineOptions</span><span class="p">,</span> <span class="nx">nuxt</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="nuxt-3-模組列表">Nuxt 3 模組列表</h3> <p>你可以在 <a class="link" href="https://nuxt.com/modules" target="_blank" rel="noopener" >Explore Nuxt Modules</a> 上尋找由 Nuxt 官方或社群生態所發展建置的模組，Nuxt 的模組通常遵循著官方指南所製，使用時只需要安裝與添加至 <strong>nuxt.config</strong> 中，基本上就能完成配置。</p> <h3 id="使用-nuxt-icon-模組">使用 Nuxt Icon 模組</h3> <p>Nuxt Icon 模組整合了 Iconify 提供多達 100,000 個以上的 Icon 圖示，只要在 Nuxt 中安裝後，我們就可以直接做使用。</p> <h4 id="step-1-安裝套件-1">Step 1. 安裝套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D nuxt-icon </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D nuxt-icon</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-2-配置使用模組">Step 2. 配置使用模組</h4> <p>在 <strong>nuxt.config.ts</strong> 中的 <strong>modules</strong> 屬性，添加 Nuxt Icon 模組的名稱 <code>nuxt-icon</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;nuxt-icon&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-開始使用">Step 3. 開始使用</h4> <p>依照說明，我們就可以使用 Nuxt Icon 模組，為我們所添加的元件 <code>&lt;Icon&gt;</code>，這個 Icon 元件可以傳入 <strong>name</strong> 屬性，以此來顯示不同的 Icon 圖示，<strong>size</strong> 則可以控制圖示的大小。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex justify-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Icon</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;logos:nuxt&#34;</span> <span class="na">size</span><span class="o">=</span><span class="s">&#34;360&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52617186748_8c9b770823_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="如何建立-nuxt-模組">如何建立 Nuxt 模組</h3> <p><a class="link" href="https://nuxt.com/docs/api/advanced/kit" target="_blank" rel="noopener" >Nuxt Kit</a> 是 Nuxt 官方提供的一個標準和方便的 API 來定義 Nuxt 模組。</p> <p>通常使用如下程式碼使用 <code>defineNuxtModule</code> 方法來建立一個模組：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineNuxtModule</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@nuxt/kit&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtModule</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 模組的名稱，通常也會對應 NPM 發布的套件名稱 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;@nuxtjs/example&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 如果有配置這個模組的一些選項，會將其保存在這個設定鍵值下 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">configKey</span><span class="o">:</span> <span class="s1">&#39;sample&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 相容性限制 `nuxt.config` </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">compatibility</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 為了控制模組的版本相容性，通常會在這裡配置 Nuxt 版本的需求 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">nuxt</span><span class="o">:</span> <span class="s1">&#39;^3.0.0&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 模組預設的選項 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">hooks</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="kr">async</span> <span class="nx">setup</span><span class="p">(</span><span class="nx">moduleOptions</span><span class="p">,</span> <span class="nx">nuxt</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Nuxt 啟動載入模組後，模組所執行的邏輯會在這裡實作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>更多 Nuxt 模組的建立指南可以參考 <a class="link" href="https://nuxt.com/docs/guide/going-further/modules" target="_blank" rel="noopener" >Nuxt 3 - Module Author Guide</a>，這邊就不再贅述，畢竟我們比較常為模組的使用者。</p> <h3 id="模組的載入">模組的載入</h3> <p>前面我們使用了 Nuxt Icon 模組，我們也可以閱讀一下 <a class="link" href="https://github.com/nuxt-modules/icon/tree/v0.1.6" target="_blank" rel="noopener" >Nuxt Icon v0.1.6</a> 模組套件的原始碼。</p> <p>以下是 Nuxt Icon 模組的 <a class="link" href="https://github.com/nuxt-modules/icon/blob/v0.1.6/src/module.ts" target="_blank" rel="noopener" >module.ts</a> 檔案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtModule</span><span class="p">&lt;</span><span class="nt">ModuleOptions</span><span class="p">&gt;({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;nuxt-icon&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">configKey</span><span class="o">:</span> <span class="s1">&#39;icon&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">compatibility</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxt</span><span class="o">:</span> <span class="s1">&#39;^3.0.0-rc.9&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span> <span class="p">(</span><span class="nx">_options</span><span class="p">,</span> <span class="nx">nuxt</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">resolve</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">createResolver</span><span class="p">(</span><span class="kr">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">addComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Icon&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">global</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">filePath</span>: <span class="kt">resolve</span><span class="p">(</span><span class="s1">&#39;./runtime/Icon.vue&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 的模組使用了一個 <code>defineNuxtModule</code> 方法來定義模組，也可以視為模組的入口點，<code>meta.name</code> 對應的就是模組的名稱，也是我們添加至 <code>modules</code> 屬性所需要的模組名稱。</p> <p><code>setup</code> 就是模組載入後執行的函數，可以看到模組使用 <code>addComponent</code> 為我們 Nuxt 添加了一個元件名稱為 <strong>Icon</strong>，使用的元件檔案來自 <strong>./runtime/Icon.vue</strong>。</p> <p>模組中的 <a class="link" href="https://github.com/nuxt-modules/icon/blob/v0.1.6/src/runtime/Icon.vue" target="_blank" rel="noopener" >runtime/Icon.vue</a> 為我們封裝了 Iconify 圖示的使用邏輯以及取得 Nuxt 配置的參數等。</p> <p>透過模組我們可以省去這些繁瑣的封裝與配置，只需要專注在配置模組與開發上面。</p> <p>模組與插件其實還是存在著載入執行順序與使用情境上的差異性，以 Nuxt 來說，通常 Nuxt 的插件會是用來封裝及使用 Vue 中會使用到的插件與或套件；而 Nuxt 的模組，會將需要繁瑣配置的套件或插件來與 Nuxt 進行整合與封裝，不論是透過第三方插件或模組，這都將使 Nuxt 在開發與擴充上擁有更多的可能性。</p> <hr> <h2 id="中間件目錄-middleware-directory">中間件目錄 (Middleware Directory)</h2> <p>在 Vue 的專案內我們的頁面通常由 Vue Router 來控制路由及導航，Vue Router 提供了導航守衛 (Navigation Guards) 的 Hook API，讓我們可以在全域、路由甚至是元件中，來控制路由跳轉或取消的方式來守護我們的路由，不讓其隨意導航至特定頁面。Nuxt 3 提供了一個中間件的目錄，讓我們可以製作路由的中間件，來實作出類似導航守衛的效果。</p> <h3 id="vue-router-的導航守衛-navigation-guards">Vue Router 的導航守衛 (Navigation Guards)</h3> <p>導航守衛就是在訪問頁面之前，會攔截你的路由請求並執行自訂的驗證邏輯，依據驗證的成功與否，准予放行跳轉至路由頁面，抑或是取消訪問該路由，再依照不同處理方式進行中斷或重導向至特定路由頁面。</p> <p>導航守衛在實務上常見的使用情境，就是拿來做頁面訪問的權限驗證，例如，只有管理員才能訪問 <code>/admin</code> 路由下的頁面，我們可能就會添加攔截的 hook 來驗證使用者是否登入及夾帶的 Token 或 Role 是否有權限可以瀏覽，如果驗證成功就准予瀏覽管理員相關頁面，否則，將路由頁面導回至首頁、登入頁或錯誤頁面，如同一個守衛在路由之間進行把關驗證權限。</p> <p>我們以 Vue Route v4 來舉例，Vue Route 提供了以下三種情況下可以使用的 hook，分別是在全域、路由或是元件中：</p> <h3 id="全域">全域</h3> <h4 id="全域前置守衛-global-before-guards">全域前置守衛 (Global Before Guards)</h4> <p>當全域守衛 hook 添加好之後，每次導航至不同路由時，都會攔截以異步的方式執行相對應的處理邏輯。</p> <p>全域守衛提供了 <code>router.beforeEach()</code> hook 可以在進入任何一個路由前進行攔截處理，當導航觸發時就會依照建立的順序做呼叫，因為是異步函數解析執行，所以在所有的守衛 <strong>resolve</strong> 之前，會一直處於 <strong>pending</strong> 的狀態。</p> <h4 id="全域解析守衛-global-resolve-guards">全域解析守衛 (Global Resolve Guards)</h4> <p>而同樣屬於全域守衛的 <code>router.beforeResolve()</code> hook 會在所有元件內的導航守衛、路由都被解析及執行完畢後才執行，也就是說這個 <code>router.beforeResolve()</code> 呼叫的時間點晚於 <code>router.beforeEach()</code>。</p> <h4 id="全域後置-hooks-global-after-hooks">全域後置 Hooks (Global After Hooks)</h4> <p>與 <code>router.beforeEach()</code> hook 相反，全域後置 hooks 提供的 <code>router.afterEach()</code> Hook 會是在路由跳轉結束後才觸發，在這裡路由已經完成跳轉，路由本身也不會再被更動，這個 hook 通常用於分析類或設置頁面相關的資訊等輔助型的功能很有幫助。</p> <h3 id="路由獨有守衛-per-route-guard">路由獨有守衛 (Per-Route Guard)</h3> <p>與 <strong>router.beforeEach()</strong> 不同，我們可以為每一個路由添加 <code>beforeEnter()</code> hook，來達到每一個路由頁面有不同的執行方法，同時也只會在不同的路由導航中切換才會觸發。</p> <h3 id="元件內的守衛">元件內的守衛</h3> <p>在元件的內部中，也提供三種 hooks 分別為：</p> <ul> <li>beforeRouteEnter(): 在路由進入並渲染這個元件之前呼叫，所以還沒有元件的實體可以操作使用。</li> <li>beforeRouteUpdate(): 目前的路由改變，而且還處於同一個元件中時呼叫。</li> <li>beforeRouteLeave(): 當導航準備離開時且沒有使用到這個元件時呼叫。</li> </ul> <p>導航守衛 (Navigation Guards) 在導航出發後的 hook 觸發順序如下圖：</p> <p><img src="https://live.staticflickr.com/65535/52616698461_6a2572bcab_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="nuxt-3-路由中間件">Nuxt 3 路由中間件</h2> <p>Nuxt 3 中提供了一個路由中間件的框架，我們可以在專案下建立名為 <code>middleware</code> 目錄，在這個目錄下我們可以建立中間件，並讓整個 Nuxt 頁面或特定的路由做使用，也可以在頁面中添加，這個中間件可以理解為 Vue Router 中的導航守衛 (Navigation Guards)，同樣有 <code>to</code> 與 <code>from</code> 參數用以在導航至特定路由之前驗證權限或執行商業邏輯等。</p> <h3 id="路由中間件格式">路由中間件格式</h3> <p>當我們想要建立路由中間件時，可以在 Nuxt 專案的 <code>middleware</code> 目錄下建立檔案，並預設匯出一個由 <code>defineNuxtRouteMiddleware()</code> 定義的函數，例如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span> <span class="nx">from</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">to</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="s1">&#39;1&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">abortNavigation</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>路由中間件能接收目前的路由 <code>to</code> 與下一個路由 <code>from</code> 做為參數，如同 Vue Router 的導航守衛，以此我們就可以來做一些判斷與驗證操作。</p> <h3 id="路由中間件的回傳">路由中間件的回傳</h3> <p>Nuxt 提供了兩個全域的 helpers，可以直接從中間件回傳：</p> <h4 id="navigatetoto-options">navigateTo(to, options)</h4> <p>在插件或中間件中重新定向到給定的路由。也可以直接呼叫它進行頁面導航。</p> <p>navigateTo 參數依序為：</p> <ul> <li><strong>to</strong>： RouteLocationRaw | undefined | null</li> <li><strong>options</strong>： { replace: boolean, redirectCode: number, external: boolean }</li> </ul> <h4 id="abortnavigationerr">abortNavigation(err)</h4> <p>可以在中間件中回傳 <code>abortNavigation()</code> 來中止導航，並可以選擇是否傳入錯誤訊息。</p> <p>abortNavigation 參數為：</p> <blockquote> <p>err?: string | Error</p></blockquote> <p>與 Vue Router 中的導航守衛稍有不同，在 Nuxt 的中間件中可以使用 <code>navigateTo</code> 與 <code>abortNavigation</code> 來決定導航至新的路由或終止導航，如果中間件沒有回傳任何東西，則表示不阻塞導航，如果有下一個中間件，則而移往下一個功能做執行，或者完成路由導航。</p> <ul> <li>nothing - 不阻塞導航並且會移動到下一個中間件功能。</li> <li>如果有的話，或者完成路由導航 return navigateTo(&rsquo;/&rsquo;) 或 return navigateTo({ path: &lsquo;/&rsquo; }) - 重定向到給定路徑。</li> </ul> <p>如果使用 <code>navigateTo()</code> 重定向是發生在伺服器端 ，則將 HTTP Status Code 設置為<code>暫時</code>重定向狀態碼 <strong>302 Found</strong>。</p> <p>如果使用 <code>navigateTo()</code> 並夾入 <code>options.redirectCode</code> 屬性，例如 <code>return navigateTo('/', { redirectCode: 301 })</code>，發生的重定向在伺服器端，將 HTTP Status Code 設置為<code>永久</code>重定向狀態碼 <strong>301 Moved Permanently</strong>。</p> <h3 id="路由中間件的種類">路由中間件的種類</h3> <p>在 Nuxt 中路由中間件分為以下三種：</p> <h4 id="匿名或者是行內的路由中間件">匿名或者是行內的路由中間件</h4> <p>不需要建立檔案，通常在路由頁面中使用 <code>definePageMeta()</code> 來定義的中間件，就屬於這種類型。</p> <p>例如，直接定義一個匿名的中間件在頁面元件中使用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[匿名中間件] 我是直接定義在頁面內的匿名中間件`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="具名的路由中間件">具名的路由中間件</h4> <p>在 <code>middleware</code> 目錄下所建立的中間件，當在頁面使用 <code>definePageMeta()</code> 來指定使用具名的中間件時，將透過異步來自動載入。具名的路由的名稱被規範為是烤肉串式 (Kebab case) 命名。</p> <p>例如，建立一個 <strong>./middleware/random-redirect.js</strong> 中間件檔案：</p> <h5 id="middlewarerandom-redirectjs">middleware/random-redirect.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mf">0.5</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[來自 random-redirect 中間件] 重新導向至 /haha`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">navigateTo</span><span class="p">(</span><span class="s1">&#39;/haha&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[來自 random-redirect 中間件] 沒發生什麼特別的事情～`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們要使用這個中間件時，可以在頁面中使用 <code>definePageMeta()</code> 並傳入 <code>middleware</code> 屬性，來添加路由中間件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="s1">&#39;random-redirect&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果中間件有多個，你也可以使用陣列來傳入多個中間件，並且會依序執行這些路由中間件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">middleware</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;random-redirect&#39;</span><span class="p">,</span> <span class="s1">&#39;other&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們在頁面中添加這個中間件後，在切換到這個路由頁面時，約有一半的機會，會被導航至 <strong>/haha</strong> 頁面。</p> <p><img src="https://live.staticflickr.com/65535/52617186763_d4ff53ce17_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="全域的路由中間件">全域的路由中間件</h4> <p>在具名的中間件的檔名添加後綴 <code>.global</code>，如 <strong>auth.global.js</strong>，這個路由中間件將會被自動載入，並在每次導航變更時自動執行。</p> <p>例如，我們建立一個 <strong>./middleware/always-run.global.js</strong> 中間件檔案，內容如下：</p> <h5 id="middlewarealways-runglobaljs">middleware/always-run.global.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtRouteMiddleware</span><span class="p">((</span><span class="nx">to</span><span class="p">,</span> <span class="nx">from</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`[全域中間件] to: </span><span class="si">${</span><span class="nx">to</span><span class="p">.</span><span class="nx">path</span><span class="si">}</span><span class="sb">, from: </span><span class="si">${</span><span class="nx">from</span><span class="p">.</span><span class="nx">path</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個全域的路由中間件，將會在每一次導航切換頁面時執行。</p> <p><img src="https://live.staticflickr.com/65535/52617134335_bac452e9f6_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="動態添加路由中間件">動態添加路由中間件</h4> <p>你可以使用 <code>addRouteMiddleware()</code> 輔助函數來手動添加全域或命名路由中間件，例如在插件中。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addRouteMiddleware</span><span class="p">(</span><span class="s1">&#39;global-test&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;這個是由插件添加的全域中間件，並將在每次路由變更時執行&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> <span class="nx">global</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">addRouteMiddleware</span><span class="p">(</span><span class="s1">&#39;named-test&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;這個是由插件添加的具名中間件，並將會覆蓋任何現有的同名中間件&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 Nuxt 中我們可以使用所提供的中間件框架，來建立路由頁面中的中間件，而路由中間件會在到特定路由之前執行想要運行的邏輯，對於驗證權限等非常方便，也正是實現導航守衛 (Navigation Guards) 的方式。這裡我們主要講述的路由中間件，也將會與我們後面會提到的伺服器端的中間件有所不同，雖然名稱相似但與 Nitro 啟動時執行的伺服器中間件<code>完全不同</code>。</p> <hr> <h2 id="server-api-與-nitro-engine">Server API 與 Nitro Engine</h2> <p>這裡會先介紹一下 Nitro Engine 是什麼東西，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 可能不多人聽過但與 Nuxt 3 息息相關，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 伺服器引擎除了有跨平台支援與多種強大的功能外，更包含了 API 路由的支援，意思就是我們可以直接在基於 <a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 的 Nuxt 3 上直接開發由後端處理的邏輯或與資料庫互動，再將結果回傳至前端，實作出 Server API。</p> <h3 id="nitro-engine">Nitro Engine</h3> <p>在開始建置 Sever API 之前，先來介紹一下 Nitro 伺服器引擎，Nuxt 3 的一大特點就是採用了一個名為 <a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 的伺服器引擎 (Server Engine)，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 基於 rollup 與 <a class="link" href="https://github.com/unjs/h3" target="_blank" rel="noopener" >h3</a>，為達高效能與可移植性目標而建構的最小 <code>HTTP</code> 框架。</p> <p><a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 提供了以下多種功能特色，使得 Nuxt 更佳完善與強大，如同官網所說 <strong><a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 讓 Nuxt 直接解鎖了新的全端能力</strong>。</p> <ul> <li><strong>快速的開發體驗</strong>：開箱即用的特性，無需任何配置，就可以啟動具有 <strong>hot module reloading</strong> 的開發伺服器，寫完程式碼存檔後，就能讓伺服器載入新的程式邏輯。</li> <li><strong>基於檔案系統的路由</strong>：我們只需要專注在建立伺服器的目錄與頁面，就能擁有自動載入與路由的效果。</li> <li><strong>可移植且便攜</strong>：基本上 Nuxt 3 使用的依賴套件都在 <strong>package.json</strong> 檔案的 <strong>devDependencies</strong> 中，建構正式環境的網站時，<a class="link" href="https://github.com/unjs/nitro" target="_blank" rel="noopener" >Nitro</a> 自動拆分的程式碼與打包出來的 <code>.output</code> 目錄不再需要安裝依賴套件，意味著不再有 <strong>node_modules</strong>，因此部署時更輕便好攜。</li> <li><strong>混合模式</strong>：透過**混合模式 (Hybrid mode)**可以將一部分頁面預渲染產生出靜態頁面，部分頁面是動態的在伺服器或客戶端渲染，讓每個路由頁面有不同的靜態或動態甚至擁有快取規則，這將讓 Nuxt 3 的<a class="link" href="https://nuxt.com/docs/guide/concepts/rendering#universal-rendering" target="_blank" rel="noopener" >通用渲染 (Universal Rendering)</a> 方式更進一步成<a class="link" href="https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering" target="_blank" rel="noopener" >混合渲染 (Hybrid Rendering)</a> 也能結合無伺服器 (Serverless) 來配置混合模式。</li> </ul> <p>看到這裡，可以發現 Nuxt 3 與 Nitro 都下了非常大的功夫，雖然還有些功能尚未穩定與需要改進的地方，但是已經為開發上提供了強大支援與良好的體驗，更多特性與細節可以參考 <a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine" target="_blank" rel="noopener" >Nuxt 3 - Server Engine</a> 或 <a class="link" href="https://nitro.unjs.io/" target="_blank" rel="noopener" >Nitro 官方</a>。</p> <h3 id="nuxt-3-的-server-目錄">Nuxt 3 的 Server 目錄</h3> <p>我們可以透過 Nuxt 3 專案下的 <code>server</code> 目錄來建立具有 <strong>hot module reloading</strong> 支援的 Server API 與後端處理邏輯。</p> <p><strong>server</strong> 目錄常用的有下面三個子目錄：</p> <ul> <li>api</li> </ul> <p>在這個目錄的檔案，將會由 Nuxt 自動載入並產生 <code>/api</code> 開頭的路由並對應檔案名稱，例如建立 <strong>./server/api/hello.js</strong>，就會擁有 <strong>/api/hello</strong> 的路由對應這個 API，可以使用 <a class="link" href="http://localhost:3000/api/hello" target="_blank" rel="noopener" >http://localhost:3000/api/hello</a> 訪問該路由。</p> <ul> <li>routes</li> </ul> <p>在這個目錄的檔案，將會由 Nuxt 自動載入並產生對應檔案名稱的路由，例如建立 <strong>./server/routes/world.js</strong>，就會擁有 <code>/world</code> 的路由對應這個 API，可以使用 <a class="link" href="http://localhost:3000/world" target="_blank" rel="noopener" >http://localhost:3000/world</a> 訪問該路由。</p> <ul> <li>middleware</li> </ul> <p>在這個目錄的檔案，會被 Nuxt 自動載入，並添加至<code>伺服器中間件</code>，並在每個 Request 進入伺服器 API 的路由前執行。</p> <h3 id="建立第一個伺服器-api">建立第一個伺服器 API</h3> <p>Nuxt 會自動掃描 <code>server</code> 目錄中的檔案結構，建立 Server API 時通常以 <strong>.js</strong> 或 <strong>.ts</strong> 作為副檔名，並依照官方建議，每個檔案都應該預設匯出 <code>defineEventHandler()</code> 函數，並在其 handler 內實作處理邏輯。</p> <p>handler 接收了一個 <code>event</code> 參數，用來解析請求的資料，並可以直接回傳一個<strong>字串</strong>、<strong>JSON</strong>、<strong>Promise</strong> 或者使用 <strong>event.res.end()</strong> 送出請求回應。</p> <p>舉例來說，我們建立一個檔案 <strong>./server/api/hello.js</strong>，內容如下：</p> <h5 id="serverapihellojs">server/api/hello.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="s1">&#39;Hello World!&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如同 <code>pages</code> 頁面路由一樣，在 <strong>./server/api</strong> 目錄下會基於檔案系統結構來產生出相對應的路由，並且會添加一個路由前綴 <code>/api</code>，現在，可以使用 <a class="link" href="http://localhost:3000/api/hello" target="_blank" rel="noopener" >http://localhost:3000/api/hello</a> 訪問該路由，看見回傳的 JSON 資料。</p> <p><img src="https://live.staticflickr.com/65535/52616964704_e3841ca57a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器路由">伺服器路由</h3> <h4 id="基於檔案的路由">基於檔案的路由</h4> <p>前面的例子有提到，Server API 的路由是<code>基於檔案結構來自動產生</code>，如果你不想要有 <code>/api</code> 的前綴，可以將 API 處理邏輯檔案，放置在 <strong>./server/routes</strong> 目錄中。</p> <p>舉例來說，以下的檔案結構會產生兩個可以訪問的伺服器 API 路由，分別為 <strong>/api/hello</strong> 及 <strong>/api/world</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">└── server/ </span></span><span class="line"><span class="cl"> ├── api/ </span></span><span class="line"><span class="cl"> │ └── hello.js </span></span><span class="line"><span class="cl"> └── routes/ </span></span><span class="line"><span class="cl"> └── world.js </span></span></code></pre></td></tr></table> </div> </div><h4 id="匹配路由參數">匹配路由參數</h4> <p>將檔案名稱添加中括號 <code>[]</code>，其中放入欲設定的參數名稱，以此來處理動態路由匹配。 舉例來說，建立 <strong>./server/api/hello/[name].js</strong> 檔案，內容如下：</p> <h5 id="serverapihellonamejs">server/api/hello/[name].js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">params</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`Hello, </span><span class="si">${</span><span class="nx">name</span><span class="si">}</span><span class="sb">!`</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 handler 內就能使用 <code>event.context.params</code> 來訪問 <strong>name</strong> 路由參數。</p> <p><img src="https://live.staticflickr.com/65535/52616698486_37c5da2beb_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="匹配-http-請求方法-http-request-method">匹配 HTTP 請求方法 (HTTP Request Method)</h4> <p>我們可以添加 <strong>.get</strong>、<strong>.post</strong>、<strong>.put</strong> 或 <strong>.delete</strong> 等檔案名稱後綴，來匹配對應的 HTTP request methods。</p> <p>新增 <strong>server/api/test.get.js</strong>，內容如下：</p> <h5 id="serverapitestgetjs">server/api/test.get.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;測試 [GET] /api/test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>server/api/test.post.js</strong>，內容如下：</p> <h5 id="serverapitestpostjs">server/api/test.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;測試 [POST] /api/test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們使用 <a class="link" href="https://www.postman.com/" target="_blank" rel="noopener" >Postman</a> 來打這兩隻 API，可以看到使用不同的 HTTP Request Method，就會匹配至對應後綴檔案中的 handler 進行處理。</p> <h5 id="get-apitest">[GET] /api/test</h5> <p><img src="https://live.staticflickr.com/65535/52616188612_a1886c609d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h5 id="post-apitest">[POST] /api/test</h5> <p><img src="https://live.staticflickr.com/65535/52616964714_af11679e95_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>從上面的例子，我們建立了 <code>test.get.js</code> 與 <code>test.post.js</code> 檔案，分別對應了 <strong>GET</strong> 與 <strong>POST</strong> 方法，如果同一個路由使用了其他方法而無法匹配處理的檔案時，則會回傳 HTTP 狀態碼 <strong>405 Method Not Allowed</strong> 表示錯誤。</p> <h4 id="匹配包羅萬象的路由-catch-all-route">匹配包羅萬象的路由 (Catch-all Route)</h4> <p>你可以建立 <code>[…].js</code> 的檔案，來將所有不匹配的路由交由這個 handler 作處理。</p> <p>例如，建立 <strong>./server/api/catch-all/[…].js</strong>，將可以匹配 <strong>/api/catch-all/x</strong>、<strong>/api/catch-all/x/y</strong>&hellip;等 <strong>/catch-all</strong> 下所有層級的路由。</p> <h5 id="serverapicatch-alljs">server/api/catch-all/[…].js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;/api/catch-all 下不匹配的路由都會進入這裡&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./server/api/[…].js</strong> 檔案如下，將可以接手所有 <strong>/api</strong> 下無法匹配的路由。</p> <h5 id="serverapijs">server/api/[…].js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;/api 下不匹配的路由都會進入這裡&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>下圖示範中，當我們輸入的路由如果沒有辦法處理，將會被 <code>[...].js</code> 所匹配，以此我們可以來實作返回、重新導向或錯誤頁面。</p> <p><img src="https://live.staticflickr.com/65535/52617186823_7aa4ffbd74_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器中間件">伺服器中間件</h3> <p>Nuxt 會自動載入 <code>./server/middleware</code> 中的檔案，並添加至<code>伺服器中間件</code>，伺服器的中間件與路由中間件不同的是，<code>pages</code> 路由頁面的請求是不會執行伺服器中間件。</p> <p>伺服器的中間件會在每個 Request 進入伺服器 API 的路由前執行，通常用來添加或檢查請求的標頭 (headers)、記錄請求或擴展調整請求的物件。</p> <blockquote> <p>伺服器中間件的處理邏輯，不應該回傳任何內容，也不應中斷或直接回應請求，伺服器中間件應該僅檢查、擴展請求上下文或直接拋出錯誤。</p></blockquote> <p>舉理來說，你可以新增 <strong>./server/middleware/log.js</strong> 用來記錄每個請求的 URL。</p> <h5 id="servermiddlewarelogjs">server/middleware/log.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;New request: &#39;</span> <span class="o">+</span> <span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者，新增 <strong>./server/middleware/auth.js</strong> 用來解析請求或擴展請由物件。</p> <h5 id="servermiddlewareauthjs">server/middleware/auth.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">event</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">auth</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;ryan&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="伺服器插件">伺服器插件</h3> <p>Nuxt 會自動掃描並載入 <code>./server/plugins</code> 目錄下的檔案，並將他們註冊為 Nitro 的插件，在 Nitro 啟動時，這些插件將會在伺服器載入並執行，插件允許擴展 Nitro 執行時的行為及連接到生命週期的事件。</p> <p>更多細節可以參考 <a class="link" href="https://nitro.unjs.io/guide/advanced/plugins" target="_blank" rel="noopener" >Nitro Plugins</a>。</p> <h3 id="伺服器通用功能">伺服器通用功能</h3> <p>Nuxt 中伺服器的路由，是由 <a class="link" href="https://github.com/unjs/h3" target="_blank" rel="noopener" >unjs/h3</a> 所提供，h3 內建一些方便實用的 helpers，可以參考 <a class="link" href="https://www.jsdocs.io/package/h3#package-index-functions" target="_blank" rel="noopener" >Available H3 Request Helpers</a>。</p> <h3 id="伺服器路由常用的-http-請求處理">伺服器路由常用的 HTTP 請求處理</h3> <h4 id="處理-http-請求中的-body">處理 HTTP 請求中的 Body</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">body</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以使用 <code>readBody(event)</code> 來解析請求中的 Body，注意 <code>readBody()</code> 是一個異步函數，記得 <code>await</code> 等待解析完成。</p> <p><img src="https://live.staticflickr.com/65535/52617186843_8c75e8307f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="處理-url-中的查詢參數-query-parameters">處理 URL 中的查詢參數 (Query Parameters)</h4> <p>可以使用 <code>getQuery(evnet)</code> 來解析查詢參數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">getQuery</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">query</span><span class="p">.</span><span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當請求 URL 為 <strong>/api/query?name=ryan</strong>，可以解析出查詢參數 <strong>query.name</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52616964724_f604a17188_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="解析-http-請求所夾帶的-cookie">解析 HTTP 請求所夾帶的 Cookie</h4> <p>可以使用 <code>parseCookies(event)</code> 來解析請求所夾帶的 Cookie。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">cookies</span> <span class="o">=</span> <span class="nx">parseCookies</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ok</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">cookies</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我透過瀏覽器的開發工具，手動添加了一組 <strong>cookie</strong> 名為 <code>token</code>，Server API 可以透過 <code>parseCookies()</code> 來解析出瀏覽器自動夾帶的 <strong>cookie</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52616698541_f2d257d4c0_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="進階使用範例">進階使用範例</h3> <h4 id="nitro-配置">Nitro 配置</h4> <p>你可以在 <code>nuxt.config.ts</code> 中使用 <code>nitro</code> 屬性來配置 <a class="link" href="https://nitro.unjs.io/config" target="_blank" rel="noopener" >Nitro 設定</a>。</p> <h5 id="nuxtconfigts-2">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// https://nitro.unjs.io/config </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用巢狀路由">使用巢狀路由</h4> <p>你可以直接使用 <a class="link" href="https://www.jsdocs.io/package/h3" target="_blank" rel="noopener" >h3</a> 的 <code>createRouter()</code> 方法來建立巢狀路由。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">createRouter</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;h3&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">router</span> <span class="o">=</span> <span class="nx">createRouter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">router</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="s1">&#39;Hello World&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">router</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="伺服器儲存">伺服器儲存</h4> <p>Nitro 提供了一個跨平台的<a class="link" href="https://nitro.unjs.io/guide/introduction/storage" target="_blank" rel="noopener" >儲存層</a>，你可以 Nitro 的配置中設定 <code>storage</code> 屬性，來配置額外的儲存掛載位置，官網提供了一個<a class="link" href="https://nuxt.com/docs/guide/directory-structure/server/#example-using-redis" target="_blank" rel="noopener" >使用 Redis 的範例</a>。</p> <p>更多 Nitro 伺服器的設定與使用可以參考<a class="link" href="https://nuxt.com/docs/guide/directory-structure/server/" target="_blank" rel="noopener" >官網</a>。</p> <p>Nitro 伺服器引擎將 Nuxt 3 提升至另一個境界，不僅功能強大且讓開發中擁有不錯的體驗，伺服器路由更是能在後端直接處理邏輯實作 Server API，而接下來將介紹如何在 Nuxt 打 API 取得資料。</p> <hr> <h2 id="資料獲取-data-fetching">資料獲取 (Data Fetching)</h2> <p>Nuxt 提供了 <code>$fetch</code> 及四種組合式函數 (Composables)，來進行資料獲取，也就是說，我們不需要再額外安裝任何 HTTP Client ，如 <a class="link" href="https://github.com/axios/axios" target="_blank" rel="noopener" >axios</a> 來發送 HTTP 請求，因為 Nuxt 本身就自帶了打 API 的方法，而且在頁面、元件或插件中都能直接呼叫做使用，非常方便。</p> <p>首先，我們先介紹一下 <code>$fetch</code> 這個由 Nuxt 提供使用 <a class="link" href="https://github.com/unjs/ofetch" target="_blank" rel="noopener" >ohmyfetch</a> 套件所封裝的 helper，<code>$fetch</code> 可以在 Nuxt 中用於發送 HTTP 請求。</p> <p>如果在伺服器端渲染的期間，呼叫 <code>$fetch</code> 打內部 API 路由，也就是打我們自己在 <code>./server</code> 下實作的後端 API，那麼因為使用 <code>$fetch</code> 的關係，Nuxt 會模擬請求，改由直接呼叫內部 API 的處理函數，這樣就能節省額外的 API 呼叫。</p> <p>使用的方法，如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">$fetch</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以使用 <strong>$fetch(&rsquo;/api/count&rsquo;)</strong> 建立一個 GET 請求，發送至 <strong>/api/count</strong> 後會返回一個 Promise，完成後我們就可以接收回傳的資料。</p> <p><code>$fetch</code> 的 <strong>options</strong> 的參數及建立攔截器等功能可以參考 <a class="link" href="https://github.com/unjs/ohmyfetch" target="_blank" rel="noopener" >ohmyfetch</a>，不過呢，我們還會使用 Nuxt 提供的組合函數結合 <strong>$fetch</strong> 來打 API。</p> <p>接下來我們就來依序介紹，如何使用 Nuxt 提供的四種組合函數來從 API 獲取資料。</p> <h3 id="useasyncdata">useAsyncData</h3> <p>這個 <code>useAsyncData()</code> 組合函數，其實不是傳入 URL 直接呼叫就會發出 API 請求，而是 Nuxt 可以透過這個函數來添加異步請求資料的邏輯。</p> <p><code>useAsyncData</code> 組合函數能接收 <code>key</code>、<code>handler</code> 與 <code>options</code>，其中 <strong>handler</strong> 會來添加請求異步資料的邏輯。當我們在頁面、元件和插件中呼叫 <strong>useAsyncData</strong>，並等待回傳的 <strong>Promise</strong>，我們的頁面或元件的渲染將會<code>阻塞路由載入</code>至 <strong>handler</strong> 異步邏輯處理完畢後才會繼續執行，也就是說，整個頁面元件將會等待所有使用 <strong>useAsyncData</strong> 呼叫的 API 回傳完成後才會開始進行渲染。</p> <p>舉個例子，我們新增一個 Server API，並稍微添加一下延遲，模擬 API 約需要處理 2 秒才回傳資料，<strong>./server/api/count.js</strong> 內容如下：</p> <h5 id="serverapicountjs">server/api/count.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="mi">2</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> <span class="c1">// 等待 2 秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">counter</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個路由頁面，<strong>./pages/count/useAsyncData.vue</strong> 內容如下：</p> <h5 id="pagescountuseasyncdatavue">pages/count/useAsyncData.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-4xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">瀏覽次數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-6xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們瀏覽 <strong>/count/useAsyncData</strong> 時，會打 <strong>/api/count</strong> 這隻 API，並等待返回後才開始渲染元件。</p> <p><img src="https://live.staticflickr.com/65535/52617186873_0f1db5744d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>因為瀏覽 <a class="link" href="http://localho:3000/count/useAsyncData" target="_blank" rel="noopener" >http://localho:3000/count/useAsyncData</a> 時，第一次都是由後端渲染處理，看不太出導航有被阻塞的效果，建議可以添加一下路由連結來進行導航，就可以發現差異。</p> <p>當我們從首頁，由客戶端導航至 <code>/count/useAsyncData</code> 頁面時，會發現網址的路由已經變化，但是頁面約等了一會兒才渲染出現，這就是因為頁面中使用了 <code>useAsyncData()</code> 來獲取資料，<code>await</code> 將阻塞整個頁面元件的載入與渲染，直至 API 處理完畢回傳後才開始載入路由渲染元件。</p> <p><img src="https://live.staticflickr.com/65535/52617186898_35b72a8173_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><strong>useAsyncData() 共有兩種呼叫時使用參數差異，可以選擇是否傳入第一個參數 <code>key</code>，所傳入參數的類型如下</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useAsyncData</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">handler</span><span class="o">:</span> <span class="p">(</span><span class="nx">nuxtApp?</span>: <span class="kt">NuxtApp</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options?</span>: <span class="kt">AsyncDataOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">:</span> <span class="nx">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useAsyncData</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span>: <span class="kt">string</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">handler</span><span class="o">:</span> <span class="p">(</span><span class="nx">nuxtApp?</span>: <span class="kt">NuxtApp</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options?</span>: <span class="kt">AsyncDataOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">:</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">AsyncDataOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">server?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">lazy?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> <span class="o">|</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="nx">transform</span><span class="o">?:</span> <span class="p">(</span><span class="nx">input</span>: <span class="kt">DataT</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> </span></span><span class="line"><span class="cl"> <span class="nx">pick?</span>: <span class="kt">string</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">watch?</span>: <span class="kt">WatchSource</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">initialCache?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">immediate?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">interface</span> <span class="nx">RefreshOptions</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">_initial?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">,</span> <span class="na">ErrorT</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">DataT</span> <span class="err">|</span> <span class="na">null</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pending</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">boolean</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">execute</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">refresh</span><span class="o">:</span> <span class="p">(</span><span class="nx">opts?</span>: <span class="kt">RefreshOptions</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">error</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">ErrorT</span> <span class="err">|</span> <span class="na">null</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="useasyncdata-傳入的參數">useAsyncData() 傳入的參數</h4> <ul> <li><strong>key</strong>：唯一鍵，可以確保資料不會重複的獲取，也就是如果 Key 相同便不會再發送相同的請求，除非重新整理頁面由後端再次渲染獲取，或呼叫 <code>useAsyncData</code> 回傳的 <code>refresh()</code> 函數重新取得資料。</li> <li><strong>handler</strong>：回傳異步請求資料的處理函數，打 API 或加工的異步邏輯都可以在這裡處理。</li> <li><strong>options</strong>： <ul> <li><strong>server</strong>：是否在伺服器端獲取資料，預設為 <code>true</code>。</li> <li><strong>lazy</strong>：是否於載入路由後才開始執行異步請求函數，預設為 <code>false</code>，所以會阻止路由載入直到請求完成後才開始渲染頁面元件。</li> <li><strong>default</strong>：當傳入這個 factory function，可以將異步請求發送與回傳解析前，設定資料的預設值，對於設定 <code>lazy: true</code> 選項特別有用處，至少有個預設值可以使用及渲染顯示。</li> <li><strong>transform</strong>：修改加工 <code>handler</code> 回傳結果的函數。</li> <li><strong>pick</strong>：<code>handler</code> 若回傳一個物件，只從中依照需要的 key 取出資料，例如只從 JSON 物件中取的某幾個 key 組成新的物件。</li> <li><strong>watch</strong>：監聽 <code>ref</code> 或 <code>reactive</code> 響應式資料發生變化時，觸發重新請求資料，適用於資料分頁、過濾結果或搜尋等情境。</li> <li><strong>initialCache</strong>：預設為 <code>true</code>，當第一次請求資料時，將會把有效的 payload 快取，之後的請求只要是相同的 key，都會直接回傳快取的結果。</li> <li><strong>immediate</strong>：預設為 <code>true</code>，請求將會立即觸發。</li> </ul> </li> </ul> <h4 id="useasyncdata-的回傳值">useAsyncData() 的回傳值</h4> <ul> <li><strong>data</strong>：傳入異步函數的回傳結果。</li> <li><strong>pending</strong>：以 <code>true</code> 或 <code>false</code> 表示是否正在獲取資料。</li> <li><strong>refresh / execute</strong>：一個函數，可以用來重新執行 <code>handler</code> 函數，回傳新的資料，類似重新整理、重打一次 API 的概念。預設情況下 <code>refresh()</code> 執行完並回傳後才能再次執行。</li> <li><strong>error</strong>：資料獲取失敗時回傳的物件。</li> </ul> <p>看到這裡，我們再重新閱讀與解釋 <code>useAsyncData()</code> 的範例</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">refresh</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useAsyncData</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;count&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>呼叫 <code>useAsyncData()</code> 並不是直接幫我們送出 HTTP 請求，而是在 <code>handler</code> 內使用 <code>$fetch</code> 來打 API，只是 <code>useAsyncData()</code> 組合式函數，封裝了更多打 API 時可以使用的方法與參數，來因應不同的使用情境。當然如果想要，你也可以使用其他套件來替換 <code>$fetch</code> 但可能就沒辦法享受它所帶來的好處。</p> <h3 id="usefetch">useFetch</h3> <p>這個組合式函數將 <code>useAsyncData</code> 和 <code>$fetch</code> 進行包裝，當使用這個函數時它會根據 URL 和 fetch 的選項來自動產生 <code>useAsyncData</code> 需要的參數 <code>key</code>，如果呼叫的 API 是伺服器端所提供的，也會自動根據伺服器 API 路由來為請求提供類型提示，並推斷 API 的回傳類型。</p> <p><strong>useFetch() 所傳入參數的類型如下</strong></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useFetch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span>: <span class="kt">string</span> <span class="o">|</span> <span class="nx">Request</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">string</span> <span class="err">|</span> <span class="na">Request</span><span class="p">&gt;</span> <span class="o">|</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="kt">string</span> <span class="o">|</span> <span class="nx">Request</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">options?</span>: <span class="kt">UseFetchOptions</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">:</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">UseFetchOptions</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">method?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">params?</span>: <span class="kt">SearchParams</span> </span></span><span class="line"><span class="cl"> <span class="nx">body?</span>: <span class="kt">RequestInit</span><span class="p">[</span><span class="s1">&#39;body&#39;</span><span class="p">]</span> <span class="o">|</span> <span class="nx">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">?:</span> <span class="p">{</span> <span class="nx">key</span>: <span class="kt">string</span><span class="p">,</span> <span class="nx">value</span>: <span class="kt">string</span> <span class="p">}[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">baseURL?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">server?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">lazy?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="nx">immediate?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> </span></span><span class="line"><span class="cl"> <span class="nx">transform</span><span class="o">?:</span> <span class="p">(</span><span class="nx">input</span>: <span class="kt">DataT</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">DataT</span> </span></span><span class="line"><span class="cl"> <span class="nx">pick?</span>: <span class="kt">string</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">watch?</span>: <span class="kt">WatchSource</span><span class="p">[]</span> </span></span><span class="line"><span class="cl"> <span class="nx">initialCache?</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">type</span> <span class="nx">AsyncData</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">DataT</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pending</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">boolean</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">refresh</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">execute</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">Promise</span><span class="p">&lt;</span><span class="nt">void</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">error</span>: <span class="kt">Ref</span><span class="p">&lt;</span><span class="nt">Error</span> <span class="err">|</span> <span class="na">boolean</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="usefetch-傳入的參數">useFetch() 傳入的參數</h4> <ul> <li><strong>url</strong>：要獲取資料的 URL 或 API Endpoint。</li> <li><strong>options</strong>：(繼承自 <a class="link" href="https://github.com/unjs/ohmyfetch" target="_blank" rel="noopener" >unjs/ohmyfetch</a> 選項與 <a class="link" href="https://nuxt.com/docs/api/composables/use-async-data#params" target="_blank" rel="noopener" >AsyncDataOptions</a>) <ul> <li><strong>method</strong>：發送 HTTP 請求的方法，例如 GET、POST 或 DELETE 等。</li> <li><strong>params</strong>：查詢參數 (Query params)。</li> <li><strong>body</strong>：請求的 body，可以傳入一個物件，它將自動被轉化為字串。</li> <li><strong>headers</strong>：請求的標頭 (headers)。</li> <li><strong>baseURL</strong>：請求的 API 路徑，基於的 URL。</li> </ul> </li> <li><strong>options</strong>：(繼承自 <code>useAsyncData</code> 的選項) <ul> <li><strong>key</strong>：唯一鍵，可以確保資料不會重複的獲取，也就是如果 Key 相同便不會再發送相同的請求，除非重新整理頁面由後端再次渲染獲取，或呼叫 <code>useAsyncData</code> 回傳的 <code>refresh()</code> 函數重新取得資料。</li> <li><strong>server</strong>：是否在伺服器端獲取資料，預設為 <code>true</code>。</li> <li><strong>lazy</strong>：是否於載入路由後才開始執行異步請求函數，預設為 <code>false</code>，所以會阻止路由載入直到請求完成後才開始渲染頁面元件。</li> <li><strong>immediate</strong>：預設為 <code>true</code>，請求將會立即觸發。</li> <li><strong>default</strong>：當傳入這個 factory function，可以將異步請求發送與回傳解析前，設定資料的預設值，對於設定 <code>lazy: true</code> 選項特別有用處，至少有個預設值可以使用及渲染顯示。</li> <li><strong>transform</strong>：修改加工 <code>handler</code> 回傳結果的函數。</li> <li><strong>pick</strong>：<code>handler</code> 若回傳一個物件，只從中依照需要的 key 取出資料，例如只從 JSON 物件中取的某幾個 key 組成新的物件。</li> <li><strong>watch</strong>：監聽 <code>ref</code> 或 <code>reactive</code> 響應式資料發生變化時，觸發重新請求資料，適用於資料分頁、過濾結果或搜尋等情境。</li> <li><strong>initialCache</strong>：預設為 <code>true</code>，當第一次請求資料時，將會把有效的 payload 快取，之後的請求只要是相同的 key，都會直接回傳快取的結果。</li> </ul> </li> </ul> <h4 id="usefetch-的回傳值">useFetch() 的回傳值</h4> <ul> <li><strong>data</strong>：傳入異步函數的回傳結果。</li> <li><strong>pending</strong>：以 <code>true</code> 或 <code>false</code> 表示是否正在獲取資料。</li> <li><strong>refresh / execute</strong>：一個函數，可以用來重新執行 <code>handler</code> 函數，回傳新的資料，類似重新整理、重打一次 API 的概念。預設情況下 <code>refresh()</code> 執行完並回傳後才能再次執行。</li> <li><strong>error</strong>：資料獲取失敗時回傳的物件。</li> </ul> <p>舉個例子，我們新增一個 Server API，<strong>./server/api/about.js</strong> 內容如下：</p> <h5 id="serverapiaboutjs">server/api/about.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Ryan&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">gender</span><span class="o">:</span> <span class="s1">&#39;男&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;ryanchien8125@gmail.com&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個路由頁面，<strong>./pages/about/useFetch.vue</strong> 內容如下：</p> <h5 id="pagesaboutusefetchvue">pages/about/useFetch.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-2xl text-gray-600&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">請求狀態</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">pending</span> <span class="o">?</span> <span class="s1">&#39;請求中&#39;</span> <span class="o">:</span> <span class="s1">&#39;完成&#39;</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;error&#34; class=&#34;mt-4 text-6xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="na">是否錯誤</span><span class="o">:</span> <span class="p">{{</span> <span class="na">error</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">回傳資料</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-sm bg-blue-500 py-3 px-8 text-xl font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;refresh&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">重新獲取資料</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">refresh</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/about&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">pick</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;name&#39;</span><span class="p">,</span> <span class="s1">&#39;counter&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>透過 <code>useFetch()</code> 我們能更簡單的發送 API 請求，並能得到狀態與重新獲取資料的函數，甚至在第一次進入頁面時，利用 <code>$fetch</code> 可以直接呼叫伺服器 API 函數的特性來降低 API 的請求次數。</p> <p><img src="https://live.staticflickr.com/65535/52616964759_a9278ba6d0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="攔截器">攔截器</h3> <p>我們也可以透過 <code>$fetch</code> 提供的選項來設置攔截器。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">error</span><span class="p">,</span> <span class="nx">refresh</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/auth/login&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">onRequest</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">options</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 設定請求時夾帶的標頭 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span> <span class="o">||</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">authorization</span> <span class="o">=</span> <span class="s1">&#39;...&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">onRequestError</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 處理請求時發生的錯誤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">onResponse</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">,</span> <span class="nx">options</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 處理請求回應的資料 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">response</span><span class="p">.</span><span class="nx">_data</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">onResponseError</span><span class="p">({</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">,</span> <span class="nx">options</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 處理請求回應發生的錯誤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="uselazyasyncdata">useLazyAsyncData</h3> <p>預設的情況下，<code>useAsyncData()</code> 的 <code>options.lazy</code> 為 <code>false</code>，意思是，預設得情況下，當進入路由後，會開始執行異步請求函數，並會會阻止路由載入元件等，直到請求完成後才開始渲染頁面元件。</p> <p><code>useLazyAsyncData()</code> 則是 <code>options.lazy</code> 預設為 <code>true</code> 的封裝，也就是請求資料時它將不會阻塞，並讓頁面繼續渲染元件。</p> <p>舉個例子，我們新增一個 Server API，並稍微添加一下延遲，模擬 API 約需要處理 2 秒才回傳資料，<strong>./server/api/count.js</strong> 內容如下：</p> <h5 id="serverapicountjs-1">server/api/count.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="mi">2000</span><span class="p">))</span> <span class="c1">// 等待 2 秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">counter</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增一個路由頁面，<strong>./pages/count/useLazyAsyncData.vue</strong> 內容如下：</p> <h5 id="pagescountuselazyasyncdatavue">pages/count/useLazyAsyncData.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">瀏覽次數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/count&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useLazyAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現，我們使用 <code>useLazyAsyncData()</code> 後，會與前面使用 <code>useAsyncData()</code> 的效果不一樣，會先渲染出元件，即看到的文字「瀏覽次數」，並再 API 回傳後才響應資料重新渲染數值。</p> <p><img src="https://live.staticflickr.com/65535/52617186908_7d896f5934_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>透過 <code>default</code> 選項可以來建立 API 回傳前的預設值，在 <code>options.lazy</code> 為 <code>true</code> 的情況下，都建議設定一下預設值，可以讓使用者體驗更好一些。</p> <p>添加 <strong>default</strong> 選項，<strong>./pages/count/useLazyAsyncData.vue</strong> 內容如下：</p> <h5 id="pagescountuselazyasyncdatavue-1">pages/count/useLazyAsyncData.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">瀏覽次數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-9xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useLazyAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">),</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="s1">&#39;-&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 API 請求回來前，預設值會是 <code>-</code>。</p> <p><img src="https://live.staticflickr.com/65535/52616964784_390b71eeb8_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="uselazyfetch">useLazyFetch</h3> <p>如同 <code>useLazyAsyncData</code> 所描述，<code>useLazyFetch</code> 則是 <strong>useFetch</strong> 的 <code>options.lazy</code> 選項預設為 <code>true</code> 的封裝。</p> <h4 id="重新獲取資料">重新獲取資料</h4> <p>前面有提到我們可以使用 <code>refresh()</code> 來重新獲取具有不同查詢參數的資料。</p> <h4 id="refreshnuxtdata">refreshNuxtData</h4> <p>你也可以透過 <code>refreshNuxtData</code> 來使 <strong>useAsyncData</strong>、<strong>useLazyAsyncData</strong>、<strong>useFetch</strong> 與 <strong>useLazyFetch</strong> 的快取失效，再觸發刷新資料。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">pending</span> <span class="o">?</span> <span class="s1">&#39;Loading&#39;</span> <span class="o">:</span> <span class="nx">count</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="nt">@click</span><span class="s">=&#34;refresh&#34;</span><span class="p">&gt;</span><span class="na">Refresh</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">pending</span><span class="p">,</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">count</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useLazyAsyncData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">$fetch</span><span class="p">(</span><span class="s1">&#39;/api/count&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">refresh</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">refreshNuxtData</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>Nuxt 已經為我們封裝好可以打 API 的組合函數，用起來也相當簡單方便，照著<a class="link" href="https://nuxt.com/docs/api/composables/use-async-data#example" target="_blank" rel="noopener" >官網範例</a>及 <a class="link" href="https://github.com/unjs/ofetch" target="_blank" rel="noopener" >ohmyfetch</a> 套件的說明，相信很快就能上手。</p> <hr> <h2 id="狀態管理-state-management">狀態管理 (State Management)</h2> <p>Vue 3 父子元件間資料傳遞與讀寫或是跨元件間的狀態共享，可以選擇使用 <strong>Props / Emit</strong>、<strong>Provide / Inject</strong> 或 <strong>Vuex store</strong> 來處理，這三種資料流都不大一樣，我們也會依據情境來決定狀態管理的方式。這邊會針對 Nuxt 3 所提供的組合式函數 <code>useState</code> 來講述元件間的共享狀態，應該如何做定義，以及使用 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 替代 <a class="link" href="https://vuex.vuejs.org/" target="_blank" rel="noopener" >Vuex</a> 來做狀態管理。</p> <h3 id="hydration">Hydration</h3> <p>首先，我們先來看一個例子，建立 <strong>./pages/random.vue</strong> 內容如下：</p> <h5 id="pagesrandomvue">pages/random.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>頁面呈現出，每次重新整理頁面，頁面會顯示新的亂數：</p> <p><img src="https://live.staticflickr.com/65535/52617186923_40cff8bd77_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>細心你的可能會發現，每次重整頁面，數字好像<code>變化了兩次</code>，圖中數字停留在 <strong>517</strong>，重新整理網頁後竟然先變成了 <strong>163</strong> 後再變成 <strong>101</strong>。</p> <p>這個現象其實是伺服器端渲染後與客戶端再次渲染所導致的。講的白話一點就是，因為 Nuxt 預設的渲染模式 <a class="link" href="https://nuxt.com/docs/guide/concepts/rendering/#universal-rendering" target="_blank" rel="noopener" >Universal Rendering</a> 在 SSR 時期，將 <code>random.vue</code> 內容於伺服器端渲染完成後亂出產生出 <strong>163</strong> 作為初始值，意即 <strong>const count = ref(<code>163</code>)</strong>，所以網頁先顯示了 <strong>163</strong> 這個數字，同時，瀏覽器的背景也正在下載客戶端所需要的 JS 準備接手做 CSR，當 JS 載入完成後又再一次的執行 Vue 元件的 <strong>const count = ref(Math.round(Math.random() * 1000))</strong> 這段程式碼，此時亂數產生了 <strong>101</strong> 這個數字，客戶端也就重新渲染出了 <strong>101</strong> 於頁面上，這也就是為什麼每次重新整理數字會變化兩次的原因。</p> <p>Nuxt 預設的<strong>通用渲染 (Universal Rendering)</strong> 模式，是結合了 SSR 與 CSR 的技術，在 Nuxt 收到網頁請求後，會在伺服器渲染出 HTML 回傳至瀏覽器渲染顯示出靜態頁面，同時開始載入需要的 Vue 程式碼，讓客戶端接手為 SPA 使得網頁具有互動性，接手後的渲染行為都是在客戶端進行的 CSR，這也就讓通用渲染同時兼具 SSR 對 SEO 的友善以及 CSR 良好互通性的使用者體驗。</p> <p>這種在瀏覽器中使後端渲染出的靜態頁面具有交互性，稱之為「<strong>Hydration</strong>」。</p> <p>依據官網所提供的<a class="link" href="https://nuxt.com/docs/guide/concepts/rendering/" target="_blank" rel="noopener" >圖片</a>，我添加了一些文字來幫助理解。前述提到了在伺服器渲染網頁 HTML 給瀏覽器時，使用可以正常的看見網頁，但是在 JS 下載完成之前，網頁是<code>不具有互動性</code>的，也就是還不具有路由跳轉等 Vue 互動邏輯，直至 JS 下載完後會 Hydrate Vue 程式碼，這時客戶端就完全接手後續的互動與 CSR，到這邊 Hydration 完成，我們也就能與網站完整的互動了。</p> <p><img src="https://live.staticflickr.com/65535/52616964794_a7eaeeb3ef_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>回到一開始的例子，我們在瀏覽器打開開發者工具的主控台 (Console)，可以發現到其實開發的過程，也出現了錯誤提示「<code>Hydration completed but contains mismatches.</code>」，告訴我們 <strong>Hydration</strong> 完成了但是包含了不匹配，正是前端與後端初始值不同的錯誤。</p> <p><img src="https://live.staticflickr.com/65535/52616964799_2110719e1c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來我們將介紹 Nuxt 提供的組合式函數 <code>useState</code>，來可以解決這個問題。</p> <h3 id="nuxt-3-的狀態管理-state-management">Nuxt 3 的狀態管理 (State Management)</h3> <p>Nuxt 提供了一個組合式函數 <code>useState</code> 用來建立具有響應式及對於 SSR 友善的共享狀態。</p> <p>在前面的例子我們提到因為 <strong>Hydration</strong> 而導致前後端的初始值可能不一致，而 <code>useState</code> 是一個對 SSR 友善的 <code>ref</code> 替代品，使用 <code>useState</code> 建立的響應式變數，它的值會在伺服器端渲染後與客戶端 <strong>Hydration</strong> 期間的得以被保留。</p> <p><code>useState</code> 有兩種接收不同數量參數的呼叫方式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">useState</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;(</span><span class="nx">init</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">T</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;)</span><span class="o">:</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">useState</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;(</span><span class="nx">key</span>: <span class="kt">string</span><span class="p">,</span> <span class="nx">init</span><span class="o">?:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">T</span> <span class="o">|</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;)</span><span class="o">:</span> <span class="nx">Ref</span><span class="p">&lt;</span><span class="nt">T</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><strong>key</strong>：唯一鍵，用於確保資料能被正確請求且不重複。</li> <li><strong>init</strong>：用於提供的初始值給 State 的函數，這個函數也可以回傳一個 <code>ref</code>。</li> </ul> <p>舉個例子，新增 <strong>./pages/count.vue</strong>，內容如下：</p> <h5 id="pagescountvue-1">pages/count.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-emerald-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現，使用 <code>useState</code> 初始化 count 的值後，瀏覽器重整頁面，就不像前面的例子會發生兩次的數值變動。</p> <p><img src="https://live.staticflickr.com/65535/52616698646_9098f6524f_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當我們使用 <code>useState</code> 並以 <strong>count</strong> 當作 key，在網頁請求進入伺服器端執行時，還沒有這個 <strong>count</strong> 狀態，所以執行了初始化函數產生出一個亂數，例如 <strong>888</strong> 就會回傳給 <strong>count</strong> 當作響應式變數的初始值，此時這個網頁請求，已經有一個 <strong>count</strong> 的響應式狀態，當前端於 <strong>Hydration</strong> 步驟再次的執行了下面這段程式碼，<code>useState</code> 一樣是以 <strong>count</strong> 當作 <strong>key</strong>，但是存在了一個由伺服器端建立好的 <strong>count</strong>，就會直接使用該狀態，也就不會在執行初始化函數，而導致前後端的初始狀態不一致的問題。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="usestate-的基本用法">useState 的基本用法</h3> <p>新增 <strong>./pages/counter/increment.vue</strong>，內容如下：</p> <h5 id="pagescounterincrementvue">pages/counter/increment.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex flex-row&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter++&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter--&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">減少</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-slate-500&#34;</span><span class="p">&gt;</span><span class="nx">如果是第一次進入這個頁面</span><span class="err">，</span><span class="nx">數值初始設定為</span> <span class="mi">0</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們使用 <code>useState</code> 並以 <strong>counter</strong> 當作 key，首次於後端渲染時會初始化為 0，當前端Hydration 步驟載入 Vue 或跳轉頁面，因為使用相同的 key 所以這個狀態也會繼續被保留，直至我們下一次重新整理網頁。</p> <p><img src="https://live.staticflickr.com/65535/52616698666_a945fe9cc8_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="usestate-的共享狀態">useState 的共享狀態</h3> <p>前面 <code>useState</code> 的基本用法以 <code>counter</code> 當作 <strong>key</strong>，我們可以再建立不同的頁面元件並使用 <code>useState('counter')</code> 就可以把這個狀態拿做出來用，也就達到了在任何元件中可以共享相同的響應式狀態。</p> <p>新增 <strong>./pages/counter/surprise.vue</strong>，內容如下：</p> <h5 id="pagescountersurprisevue">pages/counter/surprise.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex flex-row&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter++&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counter--&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">減少</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-slate-500&#34;</span><span class="p">&gt;</span><span class="nx">如果是第一次進入這個頁面</span><span class="err">，</span><span class="nx">數值初始設定為亂數</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以任意導航至 <strong>/counter/increment</strong> 與 <strong>/counter/surprise</strong> 頁面，可以發現兩個頁面可以共享相同的 <code>counter</code> 狀態，當首次進入或重新整理 <strong>increment.vue</strong> 頁面，會將 <code>counter</code> 初始化為 <strong>0</strong>；而首次進入或重新整理 <code>surprise.vue</code> 頁面則是產生一個亂數給予 <strong>counter</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52616964824_e6466ee572_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當然你也可以直接在其他元件中使用 <code>useState('counter')</code>，就可以取得共享的響應式裝態，但如果這個元件是初次進入而沒有預設值的建立函數，可能會引發一些錯誤，要特別的注意。</p> <h3 id="使用組合式函數建立共享狀態">使用組合式函數建立共享狀態</h3> <p>如下例子，我們可以建立組合式函數 (Composables) 來搭配 <code>useState</code>。</p> <p>新增 <strong>./composables/states.ts</strong>，內容如下：</p> <h5 id="composablesstatests">composables/states.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useColor</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">useState</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">&gt;(</span><span class="s1">&#39;color&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="s1">&#39;green&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./pages/color.vue</strong>，內容如下：</p> <h5 id="pagescolorvue">pages/color.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-emerald-400&#34;</span><span class="p">&gt;{{</span> <span class="nx">color</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">useColor</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來我們定義好的組合式函數就可以被自動的導入及建立具有類型安全的狀態，在各個元件之間就可以呼叫這個組合函數來取得共享狀態。</p> <p><img src="https://live.staticflickr.com/65535/52617134505_9cb332e17c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在通用渲染的模式之下，瀏覽器於 Hydration 完成前，網頁雖然能瀏覽但是尚不具有互動性，直至 Hydration 完成後，Vue 的頁面元件會重新載入與綁定，因此我們對於響應式的變數，儘量使用 <code>useState</code> 來替代 <code>ref</code> 以確保 Hydration 前後的初始值得以被保留，而且 <code>useState</code> 因為可以使用 <code>key</code> 來使狀態於元件間共享。</p> <hr> <h2 id="狀態管理---store--pinia">狀態管理 - Store &amp; Pinia</h2> <p>上述我們介紹了如何在 Nuxt 3 使用 useState 來建立一個元件間的共享狀態，隨著專案的健壯增大，我們就需要一個更好的方式來管理與儲存這些狀態，例如在 Vue 中使用 <a class="link" href="https://vuex.vuejs.org/" target="_blank" rel="noopener" >Vuex</a> 或 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 來建立一個 Store 管理這些狀態就是一個解決方案。如果你還不了解 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a>，可以理解為是 Vuex v5。因為目前 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 已經成為 Vue 官方推薦的狀態管理解決方案，本篇將針對 Nuxt 使用 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 做一個簡單的介紹。</p> <p><img src="https://live.staticflickr.com/65535/52616698686_1ffe5c9e82_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="pinia">Pinia</h3> <p>如果你使用過 Vuex 大概會知道 Vue 如何建立 Store 來做狀態管理，隨著時間 Vuex 很積極的蒐集社群及使用者的<a class="link" href="https://github.com/vuejs/rfcs/discussions/270" target="_blank" rel="noopener" >意見</a>來規劃 Vuex v5。Pinia 的作者 <a class="link" href="https://github.com/posva" target="_blank" rel="noopener" >Eduardo</a> 是 Vue.js 核心團隊的成員之一，也參與著 Vuex 的開發，當時他正測試著 Vuex v5 的<a class="link" href="https://github.com/kiaking/rfcs/blob/vuex-5/active-rfcs/0000-vuex-5.md" target="_blank" rel="noopener" >提案</a>，而 <a class="link" href="https://pinia.vuejs.org/" target="_blank" rel="noopener" >Pinia</a> 成為探索這些意見及可能性的先驅，實現了 Vuex v5 可能的樣子，現在 Pinia 的 API 已經進入穩定狀態，也成為 Vue 官方推薦使用的狀態管理解決方案，並遵循著 Vue 生態的 RFC 流程。</p> <p>Pinia 相較於 Vuex 有以下差異：</p> <ul> <li>沒有 <code>mutation</code>，只需要使用 <code>action</code> 就可以改狀態。</li> <li>不再有 <code>modules</code> 巢狀的結構，也不再需要為模組定義命名空間，因為在 Pinia 中，可以定義多個 Store 而且每個都是獨立的也都具有自己的命名空間。</li> <li>更完整的支援 TypeSctipt，也不再需要使用多餘的 types 來封裝，所有的內容都是類型化的，Pinia API 的設計方式盡可能使用 TypeSctipt 類型推斷。</li> <li>非常輕巧，約僅有 1 KB，而且可以自定義插件。</li> <li>支援伺服器端渲染 (SSR) 與程式碼自動拆分。</li> </ul> <h3 id="nuxt-3-安裝-pinia">Nuxt 3 安裝 Pinia</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D pinia @pinia/nuxt --force </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D pinia @pinia/nuxt --force</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>目前照著官方安裝 Pinia，會發生一些問題，所以我們在安裝時加上 <strong>&ndash;force</strong> 參數</p></blockquote> <p>添加 <code>@pinia/nuxt</code> 至 <code>nuxt.config.ts</code> 的 <strong>modules</strong> 屬性中。</p> <h5 id="nuxtconfigts-3">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">modules</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;@pinia/nuxt&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="建立第一個-pinia-的-store">建立第一個 Pinia 的 Store</h3> <p>Pinia 提供了一個函數 <code>defineStore</code> 用來定義 store，呼叫時需要一個唯一的名稱來當作第一個參數傳遞，也稱之為 <code>id</code>，Pinia 會使用它來將 store 連接到 devtools。</p> <p>建議將回傳的函數命名為 <code>use...</code>，例如 <code>useCounterStore</code>，<code>use</code> 作為開頭是組合式函數命名的約定，來符合使用上的習慣。</p> <p>而 <code>defineStore</code> 的第二個參數，可以傳入 <code>Options 物件</code>或是 <code>Setup 函數</code>，例如我們使用 Options 來定義一個 Store，新增 <strong>./stores/counter.js</strong>，內容如下：</p> <h5 id="storescounterjs">stores/counter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以發現到與 Vue 的 Options API 非常類似，我們可以傳遞帶有 <strong>state</strong>、<strong>actions</strong> 和 <strong>getters</strong> 屬性的物件。這些屬性正好讓 Store 與 Options API 呼應彼此的關係，如 <strong>state</strong> 對應 <strong>data</strong>、<strong>actions</strong> 對應 <strong>methods</strong> 而 <strong>getters</strong> 對應 <strong>computed</strong>。</p> <p>還有另一種方式可以來定義 Store，與 Vue Composition API 的 setup 函數類似，我們可以傳入一個函數，這個函數裡面定義響應式屬性、方法等函數，最後回傳我們想公開的屬性和方法所組成的物件。</p> <p>以 setup 函數定義 counter store，內容如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">decrement</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">doubleCount</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="開始使用-store">開始使用 Store</h3> <p>我們只需要在元件中，如下程式碼匯入並呼叫 <code>useCounterStore()</code> 就可以操作 store 裡面的方法或屬性囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useCounterStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/counter&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們新增一個頁面元件 <strong>./pages/counter.vue</strong>，內容如下：</p> <h5 id="pagescountervue">pages/counter.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-9xl font-semibold text-sky-600&#34;</span><span class="p">&gt;{{</span> <span class="nx">counterStore</span><span class="p">.</span><span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8 flex flex-row&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counterStore.increment&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">增加</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;font-base mx-2 rounded-full bg-sky-500 px-4 py-2 text-xl text-white hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;counterStore.decrement&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">減少</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useCounterStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/counter&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣我們就完成了一個 store 的顯示狀態值，透過呼叫 <code>counterStore</code> 內定義的 <strong>increment</strong> 與 <strong>decrement</strong> 來改變狀態。</p> <p><img src="https://live.staticflickr.com/65535/52616188807_576821f99a_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在不同的元件間，你也可以使用 <code>useCounterStore</code> 取得已經建立好的 store 來共享這些狀態或進行操作。</p> <p><img src="https://live.staticflickr.com/65535/52617187013_1e1f4c217e_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="pinia-store-的-state">Pinia Store 的 State</h3> <p>預設情況下，可以直接對 store 的實例來取得狀態，而使用 Pinia 定義的 store 比較特別的是，我們可以不用透過呼叫函數來修改狀態，也可以直接對 store 的狀態進行修改。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">counterStore</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">10</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="改變狀態">改變狀態</h4> <p>除了直接使用 <code>counterStore.count += 10</code> 修改 store，你也可以使用 store 提供的 helper <code>$patch</code> 來修改部分的狀態。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">userStore</span><span class="p">.</span><span class="nx">$patch</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Ryan&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">money</span><span class="o">:</span> <span class="s1">&#39;88888888&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>對於集合類型的修改，例如陣列的新增、刪除或指定修改某一個元素等操作，你可以使用 <code>$patch</code> 傳入一個函數，這個函數會接收一個 <code>state</code> 讓你可以修改，對於比較複雜的操作會很方便。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">cartStore</span><span class="p">.</span><span class="nx">$patch</span><span class="p">((</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="p">.</span><span class="nx">items</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;shoes&#39;</span><span class="p">,</span> <span class="nx">quantity</span><span class="o">:</span> <span class="mi">1</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="p">.</span><span class="nx">hasChanged</span> <span class="o">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果你需要，也可以將 store 的整個 state 重新設置成一個新的物件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">cartStore</span><span class="p">.</span><span class="nx">$state</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">items</span><span class="o">:</span> <span class="p">[],</span> </span></span><span class="line"><span class="cl"> <span class="nx">hasChanged</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="重置狀態">重置狀態</h4> <p>store 的實例提供了一個 <code>$reset()</code> 的 helper，呼叫它就可以將 store 的狀態重置至初始值，不過目前只在使用 Option 物件定義的 store 才有實作。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">counterStore</span><span class="p">.</span><span class="nx">$reset</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="pinia-store-的-getters">Pinia Store 的 Getters</h3> <h4 id="使用同一個-store-中的其他-getter">使用同一個 store 中的其他 getter</h4> <p>在 store 內你可以組合多個 getter，在 Option 物件下，可以透過使用 <code>this</code> 來呼叫使用其他的 getter。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;main&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">counter</span> <span class="o">*</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCountPlusOne</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">doubleCount</span> <span class="o">+</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用其他-store-的-getter">使用其他 store 的 getter</h4> <p>在 store 內你也可以組合其他 store 的 getter，只要建立出其他 store 實例就可以呼叫使用了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useOtherStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;./other-store&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;main&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">otherGetter</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">otherStore</span> <span class="o">=</span> <span class="nx">useOtherStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">localData</span> <span class="o">+</span> <span class="nx">otherStore</span><span class="p">.</span><span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="pinia-store-的-actions">Pinia Store 的 Actions</h4> <p>Actions 相當於元件中的方法，也是修改狀態的商業邏輯定義的位置，action 可以是同步也可以是異步的，因此，我們也能在 action 中打後端 API 來取得資料後更新狀態。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useUserStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;user&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">profile</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">gender</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">async</span> <span class="nx">getUserProfile</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/profile&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">profile</span> <span class="o">=</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">error</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="store-的解構">Store 的解構</h3> <p>有些情況，你可能需要將 Store 中的屬性或方法獨立的提取出來，但為了保持屬性的響應性，你需要使用 <code>storeToRefs</code> 來建立屬性的參考，就像使用 <code>toRefs</code> 來建立 <code>props</code> 的參考一樣。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">storeToRefs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useCounterStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@/stores/counter&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counterStore</span> <span class="o">=</span> <span class="nx">useCounterStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">count</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">storeToRefs</span><span class="p">(</span><span class="nx">counterStore</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">increment</span><span class="p">,</span> <span class="nx">decrement</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">counterStore</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="pinia-持久化插件---pinia-plugin-persistedstate">Pinia 持久化插件 - Pinia Plugin Persistedstate</h2> <p>Pinia 是個非常輕量的狀態管理解決方案，而且也提供底層 API 使得 Pinia 能夠自定義插件來擴展功能，舉例來說，我們有些狀態需要儲存在使用者瀏覽器中，下次再瀏覽時可以取的當時儲存的狀態資料，我們就需要將 store 的狀態持久化。</p> <p>我們可以使用 <a class="link" href="https://github.com/prazdevs/pinia-plugin-persistedstate" target="_blank" rel="noopener" >Pinia Plugin Persistedstate</a> 這個插件，來做到持久化這件事，這對於儲存使用者資訊或登入狀態非常的方便。</p> <h3 id="在-nuxt-3-中配置使用-pinia-plugin-persistedstate">在 Nuxt 3 中配置使用 Pinia Plugin Persistedstate</h3> <h4 id="step-1-安裝套件-2">Step 1. 安裝套件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D pinia-plugin-persistedstate --force </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D pinia-plugin-persistedstate --force</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>目前照著官方安裝 Pinia，會發生一些問題，所以我們在安裝時加上 <strong>&ndash;force</strong> 參數</p></blockquote> <h4 id="step-2-在-nuxt-3-為-pinia-添加-persist-插件">Step 2. 在 Nuxt 3 為 Pinia 添加 Persist 插件</h4> <p>建立 <strong>./plugins/pinia-plugin-persistedstate.client.js</strong>，內容如下：</p> <h5 id="pluginspinia-plugin-persistedstateclientjs">plugins/pinia-plugin-persistedstate.client.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">piniaPersistedstate</span> <span class="nx">from</span> <span class="s1">&#39;pinia-plugin-persistedstate&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">$pinia</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">piniaPersistedstate</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-3-為你的-store-添加持久化配置">Step 3. 為你的 Store 添加持久化配置</h4> <p>在現有的 store 定義中添加，<code>persist</code> 屬性，來配置 store 持久化，將狀態儲存在瀏覽器的 <code>localStorage</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="nx">actions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">getters</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span><span class="o">:</span> <span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">persist</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">enabled</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategies</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">storage</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">client</span> <span class="o">?</span> <span class="nx">localStorage</span> <span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果是使用 setup 函數定義 store，你可以在 defineStore 傳入第三個參數並添加 <code>persist</code> 屬性。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;pinia&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useCounterStore</span> <span class="o">=</span> <span class="nx">defineStore</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">increment</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">decrement</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">-=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">doubleCount</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">increment</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">decrement</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">doubleCount</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">persist</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">enabled</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">strategies</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">storage</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">client</span> <span class="o">?</span> <span class="nx">localStorage</span> <span class="o">:</span> <span class="kc">null</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="step-4-持久化效果">Step 4. 持久化效果</h4> <p>當我們設置好 counterStore 的持久化後，我們的狀態就會被儲存在瀏覽器的 <code>localStorage</code> 之中，就算關閉瀏覽器或重新整理網頁，store 的狀態都會再從 <code>localStorage</code> 讀取出來。</p> <p><img src="https://live.staticflickr.com/65535/52617187033_e0fd11b0a5_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在小型的專案中，你可以使用 useState 來管理，但大專案你就需要一個更好的方式來管理這些狀態，如 Pinia 來為我們管理這些狀態，甚至定義多個 store，Pinia 支援的插件能協助我們擴展 Pinia 的功能，Pinia Plugin Persistedstate 就是一個很常用的插件，能協助我們將 Pinia 的狀態持久化至瀏覽器的 <code>localStorage</code> 或 <code>sessionStorage</code> 中。</p> <hr> <h2 id="runtime-config--app-config">Runtime Config &amp; App Config</h2> <p>在 Nuxt 3 中提供了兩種可以方式設定環境變數或前端需要使用的共用設定，分別是在 Nuxt 啟動時會在後端載入使用的 Runtime Config 及可以在前端被使用的 App Config 這兩者間的區別這邊做一些講解。</p> <h3 id="runtime-config">Runtime Config</h3> <p>在開發網站或部署時，我們總是有一些環境變數需要做設置，<a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a> 就是一個很好用的套件，能幫助我們將專案下的 <code>.env</code> 檔案載入到 Node.js 的 <code>process.env</code> 之中，尤其在後端伺服器的 API 開發，這些不能公開或敏感的 Key 或設定值，通常不會與整個專案一起進行版本控制，而是針對不同環境與機器，配置於 <code>.env</code> 或環境變數之中。</p> <p>這個 <code>.env</code> 設定檔內的環境變數，例如：資料庫的帳號密碼、第三方服務的 Token 或 API Key &hellip;等，通常只會在伺服器被讀取做使用，也不會洩漏這些設定給使用者知道，我們也稱之為<code>執行時的設定 (Runtime Config)</code>。</p> <p>Nuxt 3 提供了可以設定 <strong>Runtime Config</strong> 的方式，我們可以很方便的來設定這些環境變數給予伺服器執行時使用。</p> <h4 id="配置-runtimeconfig">配置 runtimeConfig</h4> <p>我們可以在 <code>nuxt.config.ts</code> 中添加 <code>runtimeConfig</code> 屬性，就可以來設定只有伺服器端可以使用的環境變數。</p> <p>例如，在 <strong>nuxt.config.ts</strong> 檔案中，添加一個 <code>apiSecret</code> 至 <code>runtimeConfig</code> 屬性內：</p> <h5 id="nuxtconfigts-4">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以在 Server API 使用 <code>useRuntimeConfig()</code> 獲得執行時的設定，再從中取得 <code>apiSecret</code> 環境變數。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">apiSecret</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`接收到了一個 Server API 請求: </span><span class="si">${</span><span class="nx">event</span><span class="p">.</span><span class="nx">req</span><span class="p">.</span><span class="nx">url</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`執行時的環境變數 [apiSecret]: </span><span class="si">${</span><span class="nx">apiSecret</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s1">&#39;ok&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>因為我們是定義在 Server API，所以可以在測試伺服器啟動的 Terminal 看見 console.log 的結果。</p> <p><img src="https://live.staticflickr.com/65535/52617187068_2610474e64_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>此外你也可以在插件或 Vue 中使用 <code>useRuntimeConfig()</code> 來取得執行時的設置，但也僅在 <strong>setup</strong> 或 <strong>Nuxt Lifecycle Hooks</strong> 中有效。</p> <h4 id="客戶端使用-runtimeconfig">客戶端使用 runtimeConfig</h4> <p>通常一些密鑰或敏感資訊，我們都會定義在 <code>runtimeConfig</code> 僅供伺服器端做使用，而 <code>runtimeConfig</code> 也可以配置一個 <code>public</code> 的屬性，來把一些環境變數於伺服器端或客戶端做使用，例如，API 的 Base URL 這類在伺服器端打 API 時會需要使用，而客戶端的操作流程也會打同樣的 API 位置，我們就可以使用 <code>public</code> 的屬性。</p> <p>例如，在 <strong>nuxt.config.ts</strong> 檔案中，添加一個 <code>apiBase</code> 至 <code>runtimeConfig.public</code> 屬性內：</p> <h5 id="nuxtconfigts-5">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiBase</span><span class="o">:</span> <span class="s1">&#39;/api&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>新增 <strong>./pages/profile.vue</strong> 頁面：</p> <h5 id="pagesprofilevue">pages/profile.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">回傳資料</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">data</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">apiBase</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">toRaw</span><span class="p">(</span><span class="nx">runtimeConfig</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">apiBase</span><span class="si">}</span><span class="sb">/hello`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>添加在 <code>runtimeConfig.public</code> 屬性的環境變數，在伺服器端與客戶端都可以讀取得到。</p> <p>下圖中可以發現，在瀏覽器中的 Console 所印出的 <code>runtimeConfig</code> 是不會包含僅有在伺服器端能使用的 <code>apiSecret</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617134565_8558d435e9_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="使用-env-建立環境變數">使用 .env 建立環境變數</h4> <p>Nuxt 在開發模式或執行時，已經有內建 <a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a>，如果在專案目錄下添加了 <code>.env</code>，Nuxt 會在開發期間、建構時或產生靜態網站時，自動載入 <code>.env</code> 內的環境變數。</p> <p>例如建立 <strong>.env</strong> 檔案，內容如下：</p> <h5 id="env">.env</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-env" data-lang="env"><span class="line"><span class="cl"><span class="nv">NUXT_API_SECRET</span><span class="o">=</span>api_secret_token </span></span><span class="line"><span class="cl"><span class="nv">NUXT_PUBLIC_API_BASE</span><span class="o">=</span>https://nuxtjs.org </span></span></code></pre></td></tr></table> </div> </div><p>這兩個值，將被 <a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a> 自動載入至 <code>process.env</code> 中，作為環境變數。</p> <h4 id="環境變數的覆蓋">環境變數的覆蓋</h4> <p>不論是透過 <a class="link" href="https://github.com/motdotla/dotenv" target="_blank" rel="noopener" >dotenv</a> 自動載入 <strong>.env</strong> 或其他方式配置的環境變數，只要環境變數命名是 <code>NUXT_</code> 開頭，這個環境變數將會覆蓋 <code>runtimeConfig</code> 的設置。</p> <p>舉例來說，當我們 <code>runtimeConfig</code> 設置如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiBase</span><span class="o">:</span> <span class="s1">&#39;/api&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>.env</strong> 檔案或其他方式設置下列環境變數：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-env" data-lang="env"><span class="line"><span class="cl"><span class="nv">NUXT_API_SECRET</span><span class="o">=</span>api_secret_token </span></span><span class="line"><span class="cl"><span class="nv">NUXT_PUBLIC_API_BASE</span><span class="o">=</span>https://nuxtjs.org </span></span></code></pre></td></tr></table> </div> </div><p>那麼 <code>NUXT_API_SECRET</code> 環境變數，將會覆蓋 <code>runtimeConfig.apiSecret</code>，而 <code>NUXT_PUBLIC_API_BASE</code> 將會覆蓋 <code>runtimeConfig.public.apiBase</code>，最終 runtimeConfig 的設定會變成如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">apiSecret:</span> <span class="nt">&#34;api_secret_token&#34;</span><span class="p">,</span> <span class="c1">// 被 NUXT_API_SECRET 環境變數覆蓋 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="err">public:</span> <span class="err">{</span> </span></span><span class="line"><span class="cl"> <span class="err">apiBase:</span> <span class="nt">&#34;https://nuxtjs.org&#34;</span> <span class="c1">// 被 NUXT_PUBLIC_API_BASE 環境變數覆蓋 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="err">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>會有這樣子的特性是因為 Nuxt 會在啟動時，先載入 <code>nuxt.conf.ts</code> 內的 <code>runtimeConfig</code>，建立出呼叫 <code>useRuntimeConfig()</code> 所得到的執行時設定，例如，先建構出了 <code>_runtimeConfig</code> 物件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_runtimeConfig</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiSecret</span><span class="o">:</span> <span class="s1">&#39;怎麼可以讓你知道呢 :P&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apiBase</span><span class="o">:</span> <span class="s1">&#39;/api&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著會走訪這個 <strong>_runtimeConfig</strong> 物件裡面的 <code>key</code>，逐一將 <strong>key</strong> 的名稱轉換<strong>蛇形命名法 (Snake case)</strong>，並轉成全大寫再加上 <code>NUXT_</code> 前綴後取得對應的環境變數，如果存在就會以新值來覆蓋 <strong>_runtimeConfig</strong> 內的屬性。</p> <p>例如 <strong>apiSecret</strong> 經過轉換變成 <strong>api_secret</strong>，接著轉大寫 <strong>API_SECRET</strong> 最後加上前綴變成 <strong>NUXT_API_SECRET</strong>，如此環境變數 <strong>NUXT_API_SECRET</strong> 的值就覆蓋 <strong>runtimeConfig.apiSecret</strong>。</p> <p>而在 <strong>public</strong> 下的設置，也會先轉為 <strong>public_apiBase</strong> 再經過蛇行命名成 <strong>public_api_base</strong> 等步驟，最後變成 <strong>NUXT_PUBLIC_API_BASE</strong> 來載入環境變數並覆蓋。</p> <blockquote> <p>最後小提醒，當建構出生產環境的網站，如 .output 目錄後，dotenv 並不會包含在建構的網站內， 你需要再自己載入或配置環境變數才能正常運作哦，例如在 PM2 配置 env。</p></blockquote> <h3 id="app-config">App Config</h3> <h4 id="配置-appconfig">配置 appConfig</h4> <p>在 <code>nuxt.config.ts</code> 檔案中，可以在 <code>appConfig</code> 屬性內添加設置，例如，通常我們會添加像網站主題的主色等這類<code>可以公開</code>的配置，讓網站可以使用這個設置。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">appConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">primaryColor</span><span class="o">:</span> <span class="s1">&#39;#0ea5e9&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當建立好 appConfig 後，就可以使用組合式函數 <code>useAppConfig()</code> 來取得設置。</p> <p>例如，建立 <strong>./pages/config.vue</strong>，內容如下：</p> <h5 id="pagesconfigvue">pages/config.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">useAppConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">theme</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">appConfig</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="appconfig-檔案">app.config 檔案</h4> <p>你也可以在專案目錄下建立 <code>app.config.ts</code> 來配置 App Config，這個檔案的副檔名可以是 <strong>.ts</strong>、<strong>.js</strong> 或 <strong>.mjs</strong>。</p> <h5 id="appconfigts">app.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineAppConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">primaryColor</span><span class="o">:</span> <span class="s1">&#39;#3b82f6&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當建立了 <code>app.config.ts</code> 檔案，該設定會與 <strong>nuxt.config.ts</strong> 檔案中的 <strong>appConfig</strong> 屬性結合，如果具有相同的命名，則以 <code>app.config.ts</code> 檔案內的設置為主。</p> <h4 id="具有響應式的設定">具有響應式的設定</h4> <p>當設定好的 App Config 在使用時，解構出的變數是具有響應性的，也就是說在其他頁面修改主題顏色的設定，可以響應至所有使用這個設定的元件。</p> <p>舉個例子，新增一個 <strong>darkMode</strong> 的屬性至 <strong>app.config.ts</strong> 檔案內的 theme：</p> <h5 id="appconfigts-1">app.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineAppConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">theme</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">primaryColor</span><span class="o">:</span> <span class="s1">&#39;#3b82f6&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">darkMode</span>: <span class="kt">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./pages/index.vue</strong>，內容如下：</p> <h5 id="pagesindexvue-4">pages/index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white py-24&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-6xl font-semibold text-gray-800&#34;</span><span class="p">&gt;</span><span class="nx">這裡是首頁</span><span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-4 flex flex-col space-y-4&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/config&#34;</span><span class="p">&gt;</span><span class="nx">前往</span> <span class="o">/</span><span class="nx">config</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">useAppConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">theme</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">appConfig</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 <strong>./pages/config.vue</strong>，內容如下：</p> <h5 id="pagesconfigvue-1">pages/config.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-24 flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">primaryColor</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-2xl text-gray-600&#34;</span><span class="p">&gt;</span><span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-4 text-3xl font-semibold text-blue-500&#34;</span><span class="p">&gt;{{</span> <span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 rounded-sm bg-blue-500 py-2 px-4 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;theme.darkMode = !theme.darkMode&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="sb">`</span><span class="si">${</span><span class="nx">theme</span><span class="p">.</span><span class="nx">darkMode</span> <span class="o">?</span> <span class="s1">&#39;取消&#39;</span> <span class="o">:</span> <span class="s1">&#39;啟用&#39;</span><span class="si">}</span><span class="sb">深色模式`</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">NuxtLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/&#34;</span><span class="p">&gt;</span><span class="nx">回首頁</span><span class="p">&lt;/</span><span class="nt">NuxtLink</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">useAppConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">theme</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">appConfig</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如下圖，我們的首頁取得了 <strong>App Config</strong> 中的 <strong>theme.darkMode</strong> 預設為 <code>false</code>，接著我們切換至 <strong>/config</strong> 頁面，可以將從 <code>useAppConfig()</code> 解構出的 theme 進行變更，我們使用按鈕來設置 <strong>theme.darkMode</strong> 為 <code>true</code> 或 <code>false</code> 表示啟用或取消深色模式。當變更完成後，回至首頁，可以發現 <strong>theme.darkMode</strong> 發生了響應。</p> <p><img src="https://live.staticflickr.com/65535/52616188867_a568b0a7c2_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="小結-1">小結</h3> <p>Nuxt 3 提供了 <strong>Runtime Config</strong> 及 <strong>App Config</strong> 來讓我們將常用或預設設定應用在不同的情境，使用時，我們僅需記得，<code>不能公開的金鑰</code>或<code>敏感訊息</code>，僅放置在 <code>runtimeConfig</code> 中而且<code>不在 public 屬性內</code>，<code>runtimeConfig.public</code> 通常放的是<code>前後端會使用到且不常修改的常數</code>。而 <code>App Config</code> 則是當伺服器端與客戶端<code>需要使用的設置</code>，如主題顏色、是否啟用深色模式等這類可以被使用者調整變動的且需要具有響應性，就可以放置在 <code>appConfig</code> 之中。</p> <hr> <h2 id="實作練習">實作練習</h2> <p>這裡介紹網站的會員系統常會使用到第三方登入，將以 Google OAuth 為例來實際於 Nuxt 3 中做串接。</p> <h3 id="串接-google-oauth-登入">串接 Google OAuth 登入</h3> <p>首先，我們需要有一組 Google OAuth 使用的 <code>Client ID</code>，你可以到 <a class="link" href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener" >Google Console</a> 新增一個「<strong>OAuth 2.0 用戶端 ID</strong>」，這裡我就不再贅述網頁應用程式用的申請過程。</p> <p>這邊小提醒一下，在建立 OAuth Client ID 時，<strong>已授權的 JavaScript 來源</strong>，記得填寫上您的正式環境或開發環境的 Domain，且建議使用 HTTPS。</p> <p><img src="https://live.staticflickr.com/65535/52618245251_3509e645c4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>完成後，記得保管好<code>用戶端密碼</code>、<code>用戶端 ID (Client ID)</code> 是我們稍後會需要的，用戶端編號格式大概如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">168152363730-b37gnijdpa2rdvvbq0qc29cjh4082t3b.apps.googleusercontent.com </span></span></code></pre></td></tr></table> </div> </div><p>我們將這組 Client ID，放置在 Nuxt 的 Runtime Config 之中。調整 <strong>nuxt.config.ts</strong> 內容，在 runtimeConfig.public 添加 <code>googleClientId</code>。</p> <h5 id="nuxtconfigts-6">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">public</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleClientId</span><span class="o">:</span> <span class="s1">&#39;這邊放上你的 Google Client ID&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接下來，安裝 Vue 的 Google OAuth 插件，這邊使用的是 <a class="link" href="https://github.com/yobaji/vue3-google-login" target="_blank" rel="noopener" >vue3-google-login</a>，也有詳細的<a class="link" href="https://yobaji.github.io/vue3-google-login/" target="_blank" rel="noopener" >說明文件</a>可以參考。</p> <p>安裝 <a class="link" href="https://yobaji.github.io/vue3-google-login/" target="_blank" rel="noopener" >vue3-google-login</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vue3-google-login </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D vue3-google-login</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 Nuxt 3 插件來使用 <a class="link" href="https://yobaji.github.io/vue3-google-login/" target="_blank" rel="noopener" >vue3-google-login</a>，新增 <strong>./plugins/vue3-google-login.client.js</strong>，內容如下：</p> <h5 id="pluginsvue3-google-loginclientjs">plugins/vue3-google-login.client.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">vue3GoogleLogin</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtPlugin</span><span class="p">((</span><span class="nx">nuxtApp</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">nuxtApp</span><span class="p">.</span><span class="nx">vueApp</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">vue3GoogleLogin</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們在元件中可以直接使用 <code>&lt;GoogleLogin&gt;</code> 元件，並添加一個 <code>callback</code> 屬性；此外，我使用了 Nuxt 3 提供的 <code>&lt;ClientOnly&gt;</code> 元件，將 <code>&lt;GoogleLogin&gt;</code> 包裹起來，以確保該元件僅在客戶端做渲染，以免登入按鈕在初始化發生問題。</p> <h5 id="pagesloginvue">pages/login.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ClientOnly</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">callback</span> <span class="o">=</span> <span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們啟動 Nuxt 伺服器，這邊我會習慣使用 <code>yarn run dev -- --https</code> 來啟用 <strong>HTTPS</strong> 做測試，就能發現使用 Google 帳號登入成功後，所返回的 Credential。</p> <p><img src="https://live.staticflickr.com/65535/52618682810_b13a4d8304_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="one-tap-prompt">One Tap prompt</h3> <p>你可以在 <code>&lt;GoogleLogin&gt;</code> 元件添加 <code>prompt</code> 屬性並設為 <code>true</code>，這樣就能同時啟用 <strong>Google 一鍵登入 (One Tap prompt)</strong> 的功能囉！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span> <span class="na">prompt</span> <span class="p">/&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者也可以在 <code>onMounted</code> 中呼叫 <strong>vue3-google-login</strong> 的 <code>googleOneTap()</code> 方法，來單獨使用 <strong>One Tap prompt</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleOneTap</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleOneTap</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="自訂按鈕">自訂按鈕</h3> <p>如果你想自訂登入按鈕的樣式，可以在 <code>&lt;GoogleLogin&gt;</code> 的預設插槽 (Slot) 做建立。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span><span class="nx">使用</span> <span class="nx">Google</span> <span class="nx">進行登入</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">GoogleLogin</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用自訂按鈕會讓 OAuth 流程稍微有點不一樣，當你登入成功後預設會回傳 <a class="link" href="https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling" target="_blank" rel="noopener" >Auth Code</a>。</p> <p>如果設定屬性 <code>popup-type=&quot;TOKEN&quot;</code>，則回傳 <a class="link" href="https://developers.google.com/identity/oauth2/web/guides/use-token-model" target="_blank" rel="noopener" >Access Token</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GoogleLogin</span> <span class="nt">:callback</span><span class="o">=</span><span class="s">&#34;callback&#34;</span> <span class="na">popup</span><span class="nt">-type</span><span class="err">=&#34;</span><span class="na">TOKEN</span><span class="err">&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span><span class="nx">使用</span> <span class="nx">Google</span> <span class="nx">進行登入</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">GoogleLogin</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="使用-googletokenlogin">使用 googleTokenLogin()</h3> <p>在元件中我們也可以自己建立 <code>handleGoogleLogin</code> 點擊事件，呼叫 <code>googleTokenLogin()</code> 方法並傳入設定在 <strong>Runtime Config</strong> 中的 <strong>Google Client ID</strong>，這樣點擊登入按鈕就能處理 Google 登入取得 <strong>Access Token</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleTokenLogin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleGoogleLogin</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleTokenLogin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立一個登入按鈕來呼叫 <code>handleGoogleLogin</code> 點擊事件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;handleGoogleLogin&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">使用</span> <span class="nx">Google</span> <span class="nx">繼續</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <strong>vue3-google-login</strong> 提供的 <code>googleTokenLogin()</code> 方法，我們就能取得 Google 使用者的 <strong>Access Token</strong> 囉！</p> <p><img src="https://live.staticflickr.com/65535/52617734947_56a5365817_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="使用-googleauthcodelogin">使用 googleAuthCodeLogin()</h3> <p>我們也可以使用 <code>googleAuthCodeLogin()</code> 來取得 <strong>Auth Code</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleAuthCodeLogin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleGoogleLogin</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">googleAuthCodeLogin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52618245191_6103912bce_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器端驗證">伺服器端驗證</h3> <p>當使用者於前端成功登入後，通常會傳至後端進行登入或記錄使用者，再產生使用於網站的 Token、Cookie 或 Session 等，以供後續的網站驗證做使用。</p> <p>我們可使用 <a class="link" href="https://github.com/googleapis/google-auth-library-nodejs" target="_blank" rel="noopener" >google-auth-library</a> 於後端進行一系列的驗證或取得使用者資訊。</p> <p>安裝 <a class="link" href="https://github.com/googleapis/google-auth-library-nodejs" target="_blank" rel="noopener" >google-auth-library</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D google-auth-library </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add -D google-auth-library</span> </span></span></code></pre></td></tr></table> </div> </div><p>接下來，我們就能依照不同的登入方式取得的 <code>Credential</code>、<code>Access Token</code> 或 <code>Auth Code</code> 送至後端做驗證。</p> <h4 id="驗證-access-token">驗證 Access Token</h4> <p>新增一個 Server API，只接受 POST 方法，在 Body 中夾帶 <code>accessToken</code> 發送至後端。</p> <p>建立 <strong>./server/api/auth/google.post.js</strong>，內容如下：</p> <h5 id="serverapiauthgooglepostjs">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">accessToken</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email_verified</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>調整元件內的登入流程。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">googleTokenLogin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue3-google-login&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">googleClientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="kr">public</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleGoogleLogin</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">accessToken</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">googleTokenLogin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="nx">GOOGLE_CLIENT_ID</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="o">?</span><span class="p">.</span><span class="nx">access_token</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">accessToken</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s1">&#39;登入失敗&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/auth/google&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">accessToken</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">initialCache</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們使用 Google OAuth 登入成功後，會取得 <strong>Access Token</strong>，並將其傳至 Server API，<code>/api/auth/google</code> 接收 <strong>Access Token</strong> 並使用 Google API 取得使用者的資訊，最後回傳給前端。</p> <p><img src="https://live.staticflickr.com/65535/52618245256_903381f8c0_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="驗證-credential">驗證 Credential</h4> <p>在元件中，我們使用的登入方式如果是 <code>Google 渲染的預設按鈕</code>或 <code>One Tap prompt</code>，回傳值就會包含 <code>Credential</code>，我們將就可使用下面修改後的 Server API 進行驗證。</p> <p><strong>server/api/auth/google.post.js</strong> 內容修改為如下：</p> <h5 id="serverapiauthgooglepostjs-1">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">ticket</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">verifyIdToken</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">idToken</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">credential</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">payload</span> <span class="o">=</span> <span class="nx">ticket</span><span class="p">.</span><span class="nx">getPayload</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">payload</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">payload</span><span class="p">.</span><span class="nx">email_verified</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="驗證-auth-code">驗證 Auth Code</h4> <p>我們使用的登入方式如果是呼叫 <strong>vue3-google-login</strong> 的 <code>googleAuthCodeLogin()</code>，回傳值就會包含 <code>Auth Code</code>，我們就可使用下面修改後的 Server API 進行驗證。</p> <p><strong>server/api/auth/google.post.js</strong> 內容修改為如下：</p> <h5 id="serverapiauthgooglepostjs-2">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientId</span><span class="o">:</span> <span class="s1">&#39;你的 Google Client ID&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">clientSecret</span><span class="o">:</span> <span class="s1">&#39;你的 Google Client Secret&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">redirectUri</span><span class="o">:</span> <span class="s1">&#39;你的 Google Redirect Uri&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">tokens</span> <span class="p">}</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">getToken</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">authCode</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">tokens</span><span class="p">.</span><span class="nx">access_token</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emailVerified</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email_verified</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>以上實現了串接 Google OAuth 登入，並將 <code>Access Token</code> 資訊發送至後端進行驗證，大家可以在依照使用情境自己挑選登入方式及驗證方式，後續也能將使用者資訊儲存到資料庫中，有了資料庫我們就能依照使用者資訊，來比對資料庫進行註冊、驗證登入及產生後續的 Session 或 Cookie 等。</p> <hr> <h2 id="cookie-的設置與-jwt-的搭配">Cookie 的設置與 JWT 的搭配</h2> <p>Cookie 在瀏覽網站時多會使用到，不論是用來儲存臨時的資訊或是辨識使用者等，這一個儲存在瀏覽器的一小段文字資料，會在每次發送 HTTP 請求時自動夾帶，所以 Cookie 最常見的用途就包含了登入狀態、驗證身份等。</p> <p>以下將講述在 Nuxt 3 如何設置 Cookie，並結合 JWT (JSON Web Token) 來做一個實際使用者驗證。</p> <h3 id="nuxt-3-cookie-的設置方式">Nuxt 3 Cookie 的設置方式</h3> <h4 id="usecookie">useCookie</h4> <p>Nuxt 3 提供了一個組合式函數 <code>useCookie()</code> 來讓我們可以讀寫 Cookie，並且對於 SSR 也有支援，在頁面、元件或插件中，都可以使用 <code>useCookie()</code> 來建立一個 cookie 具有響應性的參考。</p> <p>使用方式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">cookie</span> <span class="o">=</span> <span class="nx">useCookie</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><strong>name</strong>：對應的就是 cookie 的 key。</li> <li><strong>options</strong>：傳入一個物件來設置多個 cookie 屬性： <ul> <li><strong>maxAge</strong>：指定 <code>Max-Age</code> 屬性的值，單位是秒。如果沒有設置，則這個 cookie 將會是 Session Only，意即網頁關閉後就會消失。</li> <li><strong>expires</strong>：指定一個 Date 物件來作為過期的時間，通常是要相容比較舊的瀏覽器做使用，如果 <strong>maxAge</strong> 與 <strong>expires</strong> 屬性都有設定，則過期時間應該要設定為一樣。</li> <li><strong>httpOnly</strong>：是一個布林值，預設為 <code>false</code>，當設置為 <code>true</code> 時，表示客戶端的 JavaScript 將無法使用 <code>document.cookie</code> 來查看這個 cookie。通常是比較敏感或機密的訊息，如 Token 或 Session Id 會設定為 <code>true</code>，只讓瀏覽器發出請求時自動夾帶。</li> <li><strong>secure</strong>：是一個布林值，預設為 <code>false</code>，當設置為 <code>true</code> 時瀏覽器得是 HTTPS 的加密傳輸協定的情境下，才會自動夾帶這個 cookie。</li> <li><strong>domain</strong>：指定 cookie 可以適用的 Domain，通常會保持預設，表示適用於自己的 Domain 之下。</li> <li><strong>path</strong>：指定 cookie 適用的路徑。</li> <li><strong>sameSite</strong>：為一個布林值或是字串，用於設定<a class="link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite" target="_blank" rel="noopener" >安全策略</a>。</li> <li><strong>encode</strong>：由於 cookie 的值只能使用有限的字元集，所以這個設置可以將 cookie 編碼成合法的字串值，預設的編碼是使用 <code>JSON.stringify</code> + <code>encodeURIComponent()</code>。</li> <li><strong>decode</strong>：cookie 會經過一個解碼的過程，預設的解碼是使用 <code>decodeURIComponent</code> + <code>destr</code>。</li> <li><strong>default</strong>：為一個函數，可以用於回傳 cookie 的預設值，也可以是回傳一個 <code>Ref</code>。</li> </ul> </li> </ul> <p>舉個例子，新增 <strong>pages/cookie.vue</strong>，內容如下：</p> <h5 id="pagescookievue">pages/cookie.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;w-full max-w-md&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 text-center text-3xl font-bold tracking-tight text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">Cookie</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex w-full max-w-md flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 w-fit rounded-sm bg-emerald-500 py-2 px-4 text-sm text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setNameCookie&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">設置</span> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-lg font-semibold text-emerald-500&#34;</span><span class="p">&gt;</span><span class="nx">name</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 flex text-lg text-slate-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">name</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex w-full max-w-md flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 w-fit rounded-sm bg-emerald-500 py-2 px-4 text-sm text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;setCounterCookie&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">設置</span> <span class="nx">counter</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 flex&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-lg font-semibold text-emerald-500&#34;</span><span class="p">&gt;</span><span class="nx">counter</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 flex text-lg text-slate-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">useCookie</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">useCookie</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">maxAge</span><span class="o">:</span> <span class="mi">60</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">setNameCookie</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;Ryan&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">setCounterCookie</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們就可以設置一個只有目前網頁有效的 cookie 名為 <code>name</code> 及一個過期時間為 60 秒後的 <code>counter</code>。</p> <p><img src="https://live.staticflickr.com/65535/52618245241_9307ee8408_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="伺服器端使用-getcookie-與-setcookie">伺服器端使用 getCookie 與 setCookie</h3> <p>你可以在伺服器端使用 <code>getCookie()</code> 來取得前端夾帶過來的 cookie，也可以使用 <code>setCookie</code> 來設置 cookie 回應給前端。</p> <p>舉個例子，新增 <strong>server/api/coookie.js</strong>，內容如下：</p> <h5 id="serverapicoookiejs">server/api/coookie.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">counter</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;counter&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">counter</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="nx">counter</span> <span class="o">+=</span> <span class="mi">1</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="nx">counter</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">counter</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當前端打 <code>/api/cookie</code> 這隻 Server API 時，就會自動夾帶瀏覽器中的 cookie，伺服器端收到請求解析 cookie 後得到 <code>counter</code>，將其轉為數值或預設為 0 後增加 1，再重新設定回去給前端。</p> <p><img src="https://live.staticflickr.com/65535/52618682865_832fc7b792_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="使用-cookie-做使用者驗證">使用 Cookie 做使用者驗證</h3> <p>我們可以將 Cookie 的運作機制應用在會員系統當中，使用者登入成功後，後端產生的 Token 或 Session 回傳並儲存在使用者的瀏覽器中，之後的請求將會自動夾帶可以辨識出使用者的 cookie，我們就可以在後端解析或比對 cookie 來驗證使用者的資訊，並依照策略給予不同的處理邏輯。</p> <p>我們延續上述的<a class="link" href="#%e4%b8%b2%e6%8e%a5-google-oauth-%e7%99%bb%e5%85%a5" >使用 Google OAuth 登入</a>，我們可以在後端實作產生我們自己系統使用的 Token，並設置在 <code>access_token</code> 這個 cookie 之中，後端可以寫如下程式碼，來設置 <code>httpOnly</code> 及 <code>maxAge</code> 過期時間等參數。</p> <h5 id="serverapiauthgooglepostjs-3">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">accessToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們使用 <a class="link" href="https://github.com/auth0/node-jsonwebtoken" target="_blank" rel="noopener" >jsonwebtoken</a> 產生 JWT，裡面的 Payload 放置了使用者資訊，其中 <code>jwtSignSecret</code> 作為核發 JWT 的簽署金鑰，我們定義在 <code>nuxt.config.ts</code> 中的 <code>runtimeConfig.jwtSignSecret</code>。</p> <p>安裝 <a class="link" href="https://github.com/auth0/node-jsonwebtoken" target="_blank" rel="noopener" >jsonwebtoken</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install jsonwebtoken </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn add jsonwebtoken</span> </span></span></code></pre></td></tr></table> </div> </div><p>完整的 <strong>./server/api/auth/google.post.js</strong> 程式碼如下：</p> <h5 id="serverapiauthgooglepostjs-4">server/api/auth/google.post.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">OAuth2Client</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;google-auth-library&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">(</span><span class="kr">async</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">readBody</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">oauth2Client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OAuth2Client</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">setCredentials</span><span class="p">({</span> <span class="nx">access_token</span><span class="o">:</span> <span class="nx">body</span><span class="p">.</span><span class="nx">accessToken</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">oauth2Client</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">request</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;https://www.googleapis.com/oauth2/v3/userinfo&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">oauth2Client</span><span class="p">.</span><span class="nx">revokeCredentials</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">userInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Invalid token&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtTokenPayload</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">sub</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">maxAge</span> <span class="o">=</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">expires</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="nx">maxAge</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">sign</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exp</span><span class="o">:</span> <span class="nx">expires</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="nx">jwtTokenPayload</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">,</span> <span class="nx">jwtToken</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">httpOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">maxAge</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">expires</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">expires</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">secure</span><span class="o">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">avatar</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">picture</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>JWT 在核發時使用的加密金鑰，建議使用非對稱式的金鑰進行加密，這邊僅是為了範例展示方便而使用相同的 Secret 進行加解密。</p></blockquote> <p>接著，我們可以實作一個 Server API，<strong>./server/api/whoami.js</strong> 來從 cookie 得到 <code>access_token</code>，再用 <code>jwt.verify()</code> 方法，來驗證 JTW 後的到使用者資訊。</p> <h5 id="serverapiwhoamijs">server/api/whoami.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="nx">from</span> <span class="s1">&#39;jsonwebtoken&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">runtimeConfig</span> <span class="o">=</span> <span class="nx">useRuntimeConfig</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineEventHandler</span><span class="p">((</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">jwtToken</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="s1">&#39;access_token&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">userInfo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span><span class="nx">jwtToken</span><span class="p">,</span> <span class="nx">runtimeConfig</span><span class="p">.</span><span class="nx">jwtSignSecret</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">nickname</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">nickname</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">email</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="nx">createError</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span><span class="o">:</span> <span class="mi">401</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusMessage</span><span class="o">:</span> <span class="s1">&#39;Unauthorized&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們在前端，就可以使用 <code>/api/whoami</code> 這隻 API 來得到使用者的資訊囉！</p> <p><img src="https://live.staticflickr.com/65535/52618515934_2af8149c8f_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>上圖的流程如下：</p> <ol> <li>前往登入頁面，並使用 Google 進行登入</li> <li>登入成功後，打 <strong>/api/auth/google</strong> API，Body 夾帶 Google OAuth 回傳的 <code>access_token</code>。</li> <li><strong>/api/auth/google</strong> API 回傳後端產生的時效七天的 JWT，並設置於 cookie 的 <code>access_token</code>，並將前端頁面導航至 <strong>/whoami</strong> 頁面。</li> <li>在 <strong>/whoami</strong> 頁面，點擊「<strong>打 /api/whoami API</strong>」按鈕，送出 <strong>/api/whoami</strong> API 請求，瀏覽器會自動夾帶 cookie 至後端。</li> <li>後端 API <strong>/api/whoami</strong> 收到請求後，從 cookie 中解析出 <code>access_token</code> 的值，並驗證解析出 JWT 內含的使用者資訊，並將其回傳至前端渲染。</li> </ol> <p><strong>pages/whoami.vue</strong> 完整程式碼：</p> <h5 id="pageswhoamivue">pages/whoami.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;w-full max-w-md&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;flex flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 text-center text-3xl font-bold tracking-tight text-gray-700&#34;</span><span class="p">&gt;</span><span class="nx">我是誰</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-6 flex w-full max-w-md flex-col items-center&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> </span></span><span class="line"><span class="cl"> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">=</span><span class="s">&#34;mt-2 w-fit rounded-sm bg-emerald-500 py-2 px-4 text-sm text-white hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nt">@click</span><span class="s">=&#34;whoami&#34;</span><span class="p"> </span></span></span><span class="line"><span class="cl"><span class="p"></span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">打</span> <span class="o">/</span><span class="nx">api</span><span class="o">/</span><span class="nx">whoami</span> <span class="nx">API</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;userInfo&#34; class=&#34;mt-8 flex w-full max-w-md flex-col&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="nt">v-for</span><span class="o">=</span><span class="s">&#34;key in Object.keys(userInfo)&#34; :key=&#34;key&#34; class=&#34;mt-1 flex flex-wrap break-all&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-lg font-semibold text-emerald-500&#34;</span><span class="p">&gt;</span> <span class="p">{{</span> <span class="nx">key</span> <span class="p">}}</span><span class="o">:</span><span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;ml-2 flex flex-1 text-lg text-slate-700&#34;</span><span class="p">&gt;{{</span> <span class="nx">userInfo</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="p">}}&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">userInfo</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">whoami</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/whoami&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userInfo</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>至此，我們就實作出一個 Google OAuth 的登入及驗證機制，後續可以再將這些資訊儲存至資料庫之中做後續的使用。</p> <p>這個範例的完整程式碼可以參考 <a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/day20/nuxt-app-whoami" target="_blank" rel="noopener" >Nuxt 3 - 使用 Cookie 與 JWT 做使用者驗證</a></p> <p>小提醒，如果是在伺服器端打 API，可以使用 <a class="link" href="https://nuxt.com/docs/api/composables/use-request-headers" target="_blank" rel="noopener" >useRequestHeaders</a> 就可以從伺服器端訪問和代理 cookie 到 API。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">userInfo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">useFetch</span><span class="p">(</span><span class="s1">&#39;/api/whoami&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">:</span> <span class="nx">useRequestHeaders</span><span class="p">([</span><span class="s1">&#39;cookie&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="cookielocalstoragetoken-與-jwt">Cookie、LocalStorage、Token 與 JWT</h3> <p>在做使用者驗證的時候，Cookie、LocalStorage、Token 與 JWT 是個重要的概念，這邊稍微簡述一下之間的差異與使用情境。</p> <h4 id="cookie">Cookie</h4> <p>通常採用 Cookie 來驗證使用者時，當使用者登入成功，會由伺服器端產生一組 cookie 來當作後續驗證使用的依據，這個依據會是一個字串形式，瀏覽器每次發送請求時會<code>自動夾帶</code>符合 Domain、路徑設定等的 cookie，伺服器端就可以依據 cookie 來解析驗證這個字串所代表的涵意，例如是不是匹配代表某位使用者字串。</p> <p>如同前面的例子，我們將一組能夠代表 <strong>Ryan</strong> 的 JWT 由登入後產生，並在後續請求中夾帶，以達到驗證使用者的效果。</p> <p>這串字串，不一定是要 JWT，只要伺服器端能回推或從資料庫比對出所代表的使用者或特定資訊，那麼也可以是隨意產生的字串。</p> <h4 id="localstorage">LocalStorage</h4> <p>LocalStorage 是現今瀏覽器基本上都支援的一個儲存空間，同樣具有 Domain 的寫入與讀取的概念，在 cookie 我們最多只能儲存 <strong>4KB</strong> 左右的字串資料，但是在 LocalStorage 通常有 <code>5MB</code> 所以能夠儲存更多的資訊。</p> <p>也有網站會把驗證使用者的 Token 或憑證依據儲存在 LocalStorage，之後發送請求或需要時再從中拿取出來並手動夾帶出去，同樣也可以實作出驗證使用者的流程。</p> <p>在瀏覽器的儲存空間，還有一個 SessionStorage，儲存在這裡面的資料，當網頁關閉時，就會自動清除。與 LocalStorage 不同，除非手動或使用 JS 清除，不然資料永遠存在，也不會有過期時間。</p> <h4 id="token">Token</h4> <p>用於提供給使用者後續夾帶給後端的憑據，相當於一個身分證，Token 通常由字串組成，且需要夠長不容易被暴力嘗試破解，Token 字串通常不具有任何意義，直至後端與資料庫或其他方式比對後，會對應出 Token 所代表的意義，例如使用者資訊。</p> <p>通常請求夾帶的 Token，需要每次往快取或資料庫做比對，才能知道 Token 所代表的使用者。</p> <h4 id="jwtjson-web-token">JWT(JSON Web Token)</h4> <p>JWT 是一種開放的標準 <a class="link" href="https://www.rfc-editor.org/rfc/rfc7519" target="_blank" rel="noopener" >RFC 7519</a>，如同名字 JWT 是基於 JSON Object 所編碼出來的，JWT 是由三個部分 <code>Header</code>、<code>Payload</code> 及 <code>Signature</code> 組合而成。</p> <p>其中最大的特色就是 <code>Payload</code> 這個部分，當後端伺服器收到 JWT 時，可以從 <code>Payload</code> 解析出當初簽發 JWT 所包含的資訊，通常會在 <code>Payload</code> 放置使用者的相關資料，如 Id、姓名或信箱等，因為這個特色我們不需要再比對快取或資料庫，就可以直接解析出使用者資料。</p> <p>而 <code>Payload</code> 這個欄位，因為可以被解碼出來，再任意的修改後重新編碼，所以我們就會借助 <code>Header</code> 及 <code>Signature</code> 這兩個部分，來確認當初加密的演算法及驗證簽章是否符合，以防止 <code>Payload</code> 被任意的竄改。</p> <h4 id="token-或-jwt-選哪一個">Token 或 JWT 選哪一個？</h4> <p>這兩者之間各有優缺點，雖然自產 Token 需要每次比對資料庫，但是能有效的記錄使用者 Token 核發使用的位置及註銷特定的 Token，因為 JWT 在簽發後，一定得等到過期才會失效無法使用，也就導致 JWT 在核發之後是無法註銷的，除非自己在實作一個黑名單或白名單的機制。</p> <p>可以依據使用的情境來決定 Token 或 JWT，只要記得使用 Token 作為解決方案，要保證 Token 足夠複雜或隨機，不容易被推測或暴力嘗試，如果真的要使用比較短的 Token 也確保過期的時間不要設定太長，要頻繁的更換這組 Token 或添加其他驗證機制。</p> <p>而 JWT 的利於可以包含 Payload，也切記在後端核發時不要將敏感資料或密鑰夾帶在 Payload 之中，因為 JWT 的 Payload 就算不知道加密的私鑰還是可以被解碼的。而簽發 JWT 選擇加密的方式也盡量採用非對稱式的家姐密，例如使用 ES256 (ECDSA-SHA256) 演算法產生的非對稱金鑰來進行加密。</p> <h4 id="token-要放在-cookie-還是-localstorage">Token 要放在 Cookie 還是 LocalStorage？</h4> <p>後端產生的 Token 或 JWT，不管存放在 Cookie 或 LocalStorage 只要注意其特性及安全，那麼想存在哪裡，都是可以被接受的。</p> <ul> <li>放在 Cookie</li> </ul> <p>將 Token 存放在 Cookie 的好處，可以用來控制網站的 Domain 或 SubDomain 進行存取，也可以設定過期時間來控制前端是否要重新問後端產生新的 Token，最大的特點就是自動夾帶在每個請求當中，也因為這項特性，有一些資安風險就需要稍微注意一下。</p> <p><a class="link" href="https://owasp.org/www-community/attacks/csrf" target="_blank" rel="noopener" >跨站請求偽造 (Cross Site Request Forgery, CSRF)</a> 就是一個 cookie 使用時所需要注意的資安問題，所以當使用 cookie 作為驗證機制時，建議在敏感的操作上多添加驗證的機制，或使用 CSRF Token 來保護你的 cookie 不被隨意偽造請求的夾帶出去。</p> <p>將 Token 或敏感資料儲存在 cooike 時，還是可以透過 JavaScript 的 <code>document.cookie</code> 做存取，所以如果網站有存在<a class="link" href="https://owasp.org/www-community/attacks/xss/" target="_blank" rel="noopener" >跨網站指令碼 (Cross-site scripting, XSS)</a> 的弱點，你的 cookie 很可能就會直接被偷走，為了防止 XSS 弱點導致 cookie 外洩，你可以將 cookie 設值時的屬性 <code>httpOnly</code> 設置為 <code>true</code>，讓客戶端瀏覽器無法直接存取，僅有在發送請求時，由瀏覽器自動夾帶至後端，此外，也可以設置 <code>secure</code> 讓 cookie 只在 HTTPS 下傳輸。</p> <ul> <li>放在 LocalStorage</li> </ul> <p>關於 Token 是否儲存在 LocalStorage 其實有不同的看法，因為 cookie 存在著 CSRF 或 XSS 等問題需要解決，而存放在 LocalStorage 不僅有更大的空間，還不自帶免疫 CSRF，難道不香嗎？</p> <p>但是別忘了 LocalStorage 也是透過 JS 來做儲存與讀取，所以就算使用 LocalStorage 了，但 XSS 弱點如果存在，你的 Token 一樣有外洩的可能性。</p> <p>而且 LocalStorage 不具有過期自動刪除的特性，除非自己實作或刪除否則將永遠的存在瀏覽器之中。</p> <p>所以？</p> <p>網路上有許多使用 Cookie 或 LocalStorage 儲存 Token 說法，有興趣也可以看看兩派各自論述的優缺點，所以，不管是 Cookie 還是 LocalStorage 沒有說一定不能使用誰，而是要依據特性及情境來做使用，並做好定期重新產生及相關的安全配置。</p> <p>我自己大概會依照這個網站或服務，是相對簡單也比較不會有會造成悲劇的操作或內容管理為主的服務，我可能就會採用 cookie 的方案處理驗證，因為相對來說自動夾帶與有效期限及 <code>httpOnly</code> 來控制客戶端是否能直接存取，對我來說還是挺方便與安全的，可能在適當的時機再添加 CSRF Token 或多道驗證機制，就能安全的使用 cookie。</p> <p>而在多為內部系統使用或是 API 在 Mobile App 甚至是不支援 Cookie 環境之下需要使用 Token 來驗證，我就會採納將 Token 儲存在 LocalStorage。</p> <hr> <h2 id="搜尋引擎最佳化-seo-與-html-meta-tag">搜尋引擎最佳化 (SEO) 與 HTML Meta Tag</h2> <p>選擇使用 Nuxt 3 作為網站開發框架的開發者，多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置，這篇將會講述 Nuxt 提供的幾個組合式函數，來協助我們設置網頁的標題、內文、Meta 等，以此來設置 SEO 或外部連結可能會解析到的標籤與數值內容。</p> <h3 id="搜尋引擎最佳化-seo---網站的標題-title-與描述-description">搜尋引擎最佳化 (SEO) - 網站的標題 (Title) 與描述 (Description)</h3> <p>當網站需要做搜尋引擎最佳化 (SEO) 的時候，<strong>Meta Tag</strong> 這個名詞你一定不能忽略，<strong>Meta Tag</strong> 稱之為<strong>元標籤</strong>或<strong>描述標籤</strong>，顧名思義，是來額外描述網頁的資料使用；<strong>Meta Tag</strong> 通常放置在 HTML 的 中，雖然 <strong>Meta Tag</strong> 不會直接顯示在網頁上，但對於搜尋引擎的爬蟲來說，是相當重要的一項識別資訊，也是 Facebook 提出的 <strong>Open Graph</strong> 放置的位置，讓網頁的標題、描述或縮圖等，能正確的被解析顯示出來。</p> <p>那麼網頁標題與描述，如果正確設定會有什麼樣子的效果呢？舉例來說，前面的【串接 Google OAuth 登入】我們可以透過網頁原始碼來查看，可以發現 <code>&lt;title&gt;</code> 與 <code>&lt;meta name=&quot;description&quot; … /&gt;</code> 都有設定。</p> <p><img src="https://live.staticflickr.com/65535/52618814898_c2eb521b53_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>搜尋引擎爬蟲在收錄網頁時，就會解析這些標籤來建立索引，我們在使用搜尋資料時，網頁的資訊也就對應著顯示出來，如下圖。</p> <p><img src="https://live.staticflickr.com/65535/52618326416_00c8081182_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>各家的搜尋引擎爬蟲，雖然都有自己解析的規則，不過根據 SEO 的經驗都有大方向能夠依循做建立，此外就是在針對特定的搜尋引擎加強識別標記，遵照官方指引就能讓網站的內容能見度有顯著提升。</p> <h3 id="網站的-open-graph-og">網站的 Open Graph (OG)</h3> <p><strong>OG</strong> 是由 Facebook 所提出的設定，全名為 <strong>Open Graph Protocol</strong>，官方翻譯為「<strong>開放社交關係圖</strong>」，在設定網站的 <strong>Meta</strong> 時通常也稱 <strong>OG Tag</strong>，Facebook 提供了<a class="link" href="https://developers.facebook.com/docs/sharing/webmasters" target="_blank" rel="noopener" >網站管理員分享指南</a>，當初設計的目的是，當網頁中設定了 <strong>OG Tag</strong>，能讓網頁被分享至社群媒體時，能有呈現更為豐富的內容，例如標題、描述及縮圖等。</p> <p>舉例來說，當<a class="link" href="https://blog.wayne-project.com/2022-12-12/nodejs-create-openai-line-bot/" target="_blank" rel="noopener" >網頁</a>設定了 <strong>OG Tag</strong>，以連結形式被分享至 Facebook，會呈現如下的資訊，Facebook 會解析網頁內的 <strong>OG Tag</strong> 將對應的如標題及縮圖等資訊顯示出來。</p> <p><img src="https://live.staticflickr.com/65535/52618326446_7205784c15_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其中縮圖依照 Facebook 的指引，即是對應網頁中的 <code>&lt;meta property=&quot;og:image&quot; ... /&gt;</code>。</p> <p><img src="https://live.staticflickr.com/65535/52617815467_ca6f72b1e6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>不只是在 Facebook 上分享連結會有<code>連結預覽</code>的效果，也因為大家都遵循著 <strong>OG Tag</strong> 進行設定，所以在其他主流的社群媒體或通訊軟體等也都有跟進解析。例如，我們使用 LINE 傳送一條連結，也會因為設置了 <strong>OG Tag</strong> 也有成功解析出<code>連結預覽</code>的效果。</p> <p><img src="https://live.staticflickr.com/65535/52618814953_27c41dfc45_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>LINE 開發者也有提供一些問答指引可以做參考，<code>連結預覽</code>與 <code>og:title</code>、<code>og:description</code> 和 <code>og:image</code> 有著相應的設定關係。</p> <p><img src="https://live.staticflickr.com/65535/52618595494_9fd4af0f1e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="usehead">useHead</h3> <p>我們可以使用 Nuxt 3 提供的 <code>useHead()</code> 組合式函數，來設定網站的一些標籤或標記，使用方式如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">viewport</span><span class="o">:</span> <span class="s1">&#39;width=device-width, initial-scale=1, maximum-scale=1&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">charset</span><span class="o">:</span> <span class="s1">&#39;utf-8&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;這裡是 Nuxt 3 學習筆記 實戰部落格&#39;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">bodyAttrs</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">class</span><span class="o">:</span> <span class="s1">&#39;test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>useHead()</code> 函數接受參數的類型如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">(</span><span class="nx">meta</span>: <span class="kt">Computable</span><span class="p">&lt;</span><span class="nt">MetaObject</span><span class="p">&gt;)</span><span class="o">:</span> <span class="k">void</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">interface</span> <span class="nx">MetaObject</span> <span class="kr">extends</span> <span class="nx">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">charset?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">viewport?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">link?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">style?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">script?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">noscript?</span>: <span class="kt">Array</span><span class="p">&lt;</span><span class="nt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">titleTemplate?</span>: <span class="kt">string</span> <span class="o">|</span> <span class="p">((</span><span class="nx">title</span>: <span class="kt">string</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="kt">string</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">title?</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">bodyAttrs?</span>: <span class="kt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">htmlAttrs?</span>: <span class="kt">Record</span><span class="p">&lt;</span><span class="nt">string</span><span class="p">,</span> <span class="na">any</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><strong>charset</strong>：指定 HTML 的字元編碼，預設為 <code>utf-8</code>。</li> <li><strong>viewport</strong>：設定網頁的可見區域，預設為 <code>width=device-width, initial-scale=1</code>。</li> <li><strong>meta</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;meta&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>link</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;link&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>style</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;style&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>script</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;script&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>noscript</strong>：接受一個陣列，陣列中的每個元素，都將會建立一個 <code>&lt;noscript&gt;</code> 標記，元素中物件的屬性將對應至 的屬性。</li> <li><strong>titleTemplage</strong>：接受一個字串或函數，用來動態的設定該頁面元件的<code>網頁標題</code>。</li> <li><strong>title</strong>：在頁面元件設置靜態的<code>網頁標題</code>。</li> <li><strong>bodyAttrs</strong>：接受一個物件，設置網頁中 標籤的屬性，物件中的屬性將對應至 的屬性。</li> <li><strong>htmlAttrs</strong>：接受一個物件，設置網頁中 標籤的屬性，物件中的屬性將對應至 的屬性。</li> </ul> <h4 id="自訂-metadata">自訂 Metadata</h4> <p>使用 <code>useHead()</code> 函數設定屬性所傳入的字串或物件可以是具有響應性的變數，當數值變動時，相對應的數值也會一同響應，例如下面的程式碼，可以動態的變更標題或描述。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">description</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;這裡是 Nuxt 3 學習筆記 實戰部落格&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="nx">description</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="添加動態網頁的標題">添加動態網頁的標題</h4> <p>我們可以在 <strong>app.vue</strong> 添加如下程式碼，<strong>titleTemplage</strong> 中的 <code>%s</code> 將會帶入目前頁面 <code>title</code> 或更上層頁面的 <code>title</code> 屬性：</p> <h5 id="appvue-12">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">titleTemplate</span><span class="o">:</span> <span class="s1">&#39;%s - 首頁&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到網頁的標題變為「Nuxt 3 Blog - 首頁」。</p> <p><img src="https://live.staticflickr.com/65535/52618326576_756d879b60_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以傳入一個函數來動態的添加網頁的標題。</p> <h5 id="appvue-13">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">titleTemplate</span><span class="o">:</span> <span class="p">(</span><span class="nx">title</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">title</span> <span class="o">?</span> <span class="sb">`</span><span class="si">${</span><span class="nx">title</span><span class="si">}</span><span class="sb"> - 首頁`</span> <span class="o">:</span> <span class="s1">&#39;首頁&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="添加外部-css">添加外部 CSS</h4> <p>我可以使用 <code>useHead()</code> 來添加 Google 字體至 <code>link</code> 屬性之中。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">link</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">rel</span><span class="o">:</span> <span class="s1">&#39;preconnect&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;https://fonts.googleapis.com&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">rel</span><span class="o">:</span> <span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">crossorigin</span><span class="o">:</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="添加第三方的-javascript">添加第三方的 JavaScript</h4> <p>你也可以使用 <code>useHead()</code> 來插入第三方的 JS。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">script</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">src</span><span class="o">:</span> <span class="s1">&#39;https://third-party-script.com&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="o">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="在模板中使用相對應的元件設置屬性及標籤">在模板中使用相對應的元件設置屬性及標籤</h4> <p>Nuxt 提供 <code>&lt;Title&gt;</code>、<code>&lt;Base&gt;</code>、<code>&lt;Script&gt;</code>、<code>&lt;NoScript&gt;</code>、<code>&lt;Style&gt;</code>、<code>&lt;Meta&gt;</code>、<code>&lt;Link&gt;</code>、<code>&lt;Body&gt;</code>、<code>&lt;Html&gt;</code> 和 <code>&lt;Head&gt;</code>，我們可以直接在元件中模板 (Template) 使用這些元件進行設定網頁的屬性及標籤。</p> <p>因為這些元件名稱與原生 HTML 標記相似，所以記得在模板中使用要開頭為<code>大寫</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Title</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">Title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;description&#34;</span> <span class="nt">:content</span><span class="o">=</span><span class="s">&#34;description&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Style</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span> <span class="na">children</span><span class="o">=</span><span class="s">&#34;body { background-color: green; }&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">Style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;{{</span> <span class="nx">title</span> <span class="p">}}&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;Nuxt 3 Blog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">description</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;這裡是 Nuxt 3 學習筆記 實戰部落格&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="definepagemeta">definePageMeta()</h3> <p>我們其實在前面就有使用過 <code>definePageMeta()</code> 來設置頁面的布局或中間件，在各個頁面之中，我們也可以使用 <code>definePageMeta()</code> 來設置一些屬性與 <code>useHead()</code> 進行搭配。</p> <p>例如，我們的 <strong>app.vue</strong> 使用 <code>useHead</code> 設定的一個 <strong>meta</strong>，並且是根據 <strong>route.meta.title</strong> 所動態的設定。</p> <h5 id="appvue-14">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">route</span> <span class="o">=</span> <span class="nx">useRoute</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">useHead</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">meta</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;og:title&#39;</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="sb">`</span><span class="si">${</span><span class="nx">route</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb"> | Nuxt 3 Blog`</span> <span class="p">}]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們在 <strong>pages/articles.vue</strong> 添加如下程式碼：</p> <h5 id="pagesarticlesvue">pages/articles.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="nx">definePageMeta</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;所有文章&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們瀏覽 <strong>/articles</strong> 頁面時，Nuxt 在伺服器端就幫我們渲染好 <code>og:title</code> 的 <code>meta</code> 了。我們可以透過檢視原始碼的方式來看看效果。</p> <p><img src="https://live.staticflickr.com/65535/52618815023_04fb4a9b6a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 Nuxt 3 提供了一些可以設置網頁屬性與 <strong>Meta</strong> 的組合式函數，更能動態的調整與響應，結合 SSR 讓這些標記在伺服器端就能渲染出來，對網站做搜尋引擎最佳化 (SEO) 非常得友善，也是多數人選擇 Nuxt 3 來處理 SSR 與 SEO 的原因。除了 SEO 可能會使用到的標記外，也有 <strong>OG Tag</strong> 可以加強網頁的連結預覽效果，雖然 <strong>OG Tag</strong> 與 SEO 沒有絕對的關係，但是透過伺服器端渲染調整這些 <strong>Meta</strong> 對搜尋引擎或網站都非常的方便，我們只要根據需求及指引做設定，就能對網站的能見度有所提升。</p> <hr> <h2 id="public-與-assets-資源目錄nuxt-3-的靜態資源">Public 與 Assets 資源目錄(Nuxt 3 的靜態資源)</h2> <p>在網站的開發過程中，多少會使用到圖片、樣式或設定字體，而當這些檔案若沒有外部連結或某些需求下需要包含在專案內做使用，最後連帶這些檔案一起部署。在使用 <a class="link" href="https://github.com/vuejs/create-vue" target="_blank" rel="noopener" >create-vue</a> 建立的 Vue 的專案下包含了 <code>public</code> 與 src 內的 <code>assets</code> 目錄，這兩個目錄都是可以放置這類不常變動的靜態資源，但這兩個目錄各自因為一些特性，建議放置的檔案類型依據使用目的有所區別。</p> <p>Nuxt 3 使用專案下的兩個目錄來提供使用者處理圖片、樣式或字體，這兩個目錄分別為 <code>public</code> 與 <code>assets</code>。</p> <h3 id="public-目錄">public 目錄</h3> <p>在 Nuxt 3 的專案根目錄下，存在一個名為 <code>public</code> 的目錄，這個目錄如同 Vue 中的 <code>public</code> 目錄或 Nuxt 2 中的 <code>static</code> 目錄。這個目錄下的檔案，將會由 Nuxt 直接於網站的根路徑，例如 <code>/</code> 提供存取。</p> <p>例如建立 <strong>public/robots.txt</strong> 將可以使用 <a class="link" href="http://localhost:3000/robots.txt" target="_blank" rel="noopener" >http://localhost:3000/robots.txt</a> 存取。</p> <p>通常我們會在 <code>public</code> 目錄放置不常更動的檔案，或是需要保留檔案的名稱，例如 <strong>robots.txt</strong> 就需要一個固定的名稱，才能正確的被搜尋引擎的爬蟲所解析再決定檢索的規則，抑或 <strong>sitemap.xml</strong> 與 <strong>favicon.ico</strong> 檔案等，都很適合放置在 <code>public</code> 目錄。</p> <p>你可能也會想，那圖片或 CSS 樣式，我也不常變動，難道就不能放置在 public 目錄嗎？</p> <p><strong>行，當然行，哪次不行！</strong></p> <p><img src="https://live.staticflickr.com/65535/52630176588_1a720e08f8_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>舉個例子，我們將這張圖片放置於 <code>public</code> 目錄下並命名為 <strong>bg.png</strong>，專案目錄下其他檔案就先不列，整個結構大概長的像下面這樣。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── public/ </span></span><span class="line"><span class="cl">│ └── bg.png </span></span><span class="line"><span class="cl">└── app.vue </span></span></code></pre></td></tr></table> </div> </div><p>根據規則，我可以使用 <a class="link" href="http://localhost:3000/bg.png" target="_blank" rel="noopener" >http://localhost:3000/bg.png</a> 存取，如下圖我們確實成功的能存取到圖片。</p> <p><img src="https://live.staticflickr.com/65535/52630176003_baa9c8737a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>所以，我們在 <strong>app.vue</strong> 新增如下程式碼，使用 <code>/bg.png</code> 來等同訪問 <strong>public/bg.png</strong> 檔案：</p> <h5 id="appvue-15">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/bg.png&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>也確實能在網頁中使用 <code>&lt;img src=&quot;/bg.png&quot; /&gt;</code> 來顯示圖片。</p> <p><img src="https://live.staticflickr.com/65535/52629175752_c8f3b2c406_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>既然 <code>public</code> 目錄已經能提供靜態資源的連結，那麼為什麼還有一個名為 <code>assets</code> 的目錄呢？接下來我們先介紹 <code>assets</code> 目錄，最後再來總結一下差異。</p> <h3 id="assets-目錄-1">assets 目錄</h3> <p>Nuxt 3 使用 <a class="link" href="https://vitejs.dev/guide/assets.html" target="_blank" rel="noopener" >Vite</a> 或 <a class="link" href="https://webpack.js.org/guides/asset-management/" target="_blank" rel="noopener" >Webpack</a> 來建構專案進行打包，這些建構工具主要功能是用來處理 JavaScript 檔案將其編譯、轉換或壓縮等，但它們可以透過各自的<strong>插件</strong>或 <strong>Loader</strong> 來處理其他檔案類型的資源，例如樣式、字體或 SVG 等。</p> <p>舉例來說，我們在 <code>assets</code> 下建立一個 Sass 的樣式，當這個 Sass 檔案被載入使用，就會經過<strong>插件</strong>或 <strong>Loader</strong> 來進行 CSS 的預處理及編譯，最終產生一個 CSS 檔案，也可以針對單純的 CSS 檔案進行壓縮。又或者說，當使用 <code>&lt;img&gt;</code> 的 <strong>src</strong> 屬性設定載入我們放置在 <code>assets</code> 的圖片或圖示，最終需要轉換為 Base64 編碼而不是產生一個連結，我們也需要依賴建構工具插件的擴展來幫助。</p> <p>其主要的目的，不外乎就是為了效能與解決瀏覽器的快取。放置在 <code>assets</code> 目錄下的檔案，可能會被<strong>插件</strong>或 <strong>Loader</strong> 進行轉換或壓縮，最終產生出來的檔案也具備連結可以進行存取。</p> <p>如果使用 <code>public</code> 目錄下導出的 <strong>/bg.png</strong>，就算我們替換了 <strong>bg.png</strong> 圖片，可能就會因為檔案根據檔案名稱被瀏覽器快取住，導致前端還是看到舊的檔案。我們在使用 <code>assets</code> 目錄下的檔案時雖然檔名都是 <strong>bg.png</strong>，但在建構時產生的檔案通常會夾帶 <code>Hash</code>，例如：<strong>bg.16a2f98c.png</strong>，如此一來我們每次更新圖片，都都會隨機的產生一組 Hash 就能防止瀏覽器快取，導致好像網站更新失效的錯覺。</p> <p>舉例來說，我們以相同的圖片，改放置於 <strong>assets/bg.png</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nuxt-app/ </span></span><span class="line"><span class="cl">├── assets/ </span></span><span class="line"><span class="cl">│ └── bg.png </span></span><span class="line"><span class="cl">└── app.vue </span></span></code></pre></td></tr></table> </div> </div><h5 id="appvue-16">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;~/assets/bg.png&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在開發環境 <code>~/assets/bg.png</code> 會轉換為 <code>/_nuxt/assets/bg.png</code>，實際上也能使用 <a class="link" href="http://localhost:3000/_nuxt/assets/bg.png" target="_blank" rel="noopener" >http://localhost:3000/_nuxt/assets/bg.png</a> 進行訪問。</p> <p><img src="https://live.staticflickr.com/65535/52630134105_59cf185408_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>除了 ~/assets 可以對應 assets 目錄外，也可以參考官方的 <a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config#alias" target="_blank" rel="noopener" >alias</a> 更多或自訂別名來使用相對路徑。</p></blockquote> <p>但當你的網站部署完成或啟動建構出來的專案，會發現圖片檔名包含了 <code>Hash</code>，例如 <code>/_nuxt/bg.0a299ea1.png</code>。</p> <p><img src="https://live.staticflickr.com/65535/52630176173_dd37d79c67_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>最後我們以最終建構出來的專案結構對比如下圖，在 <code>public</code> 目錄下的檔案，會原封不動的照搬至 <code>.output/public</code> 下，也就可以使用 <strong>/bg.png</strong> 存取；而放置在 <code>assets</code> 下的檔案，可能會被處理加工，最後檔案名稱會加上一個 <code>Hash</code> 並放置在 <code>.output/public/_nuxt</code> 下，也就需要使用 <strong>/_nuxt/bg.0a299ea1.png</strong> 存取。</p> <p><img src="https://live.staticflickr.com/65535/52629175877_933064e5f8_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>總結來說多數情況建議把靜態資源放置在 <code>assets</code>，也因為靜態資源多為 SFC 所使用，通常也會放置最多檔案，最後建構時也會因為建構工具的設定來進行轉換或壓縮，最後添加 <code>Hash</code> 來提供存取，也因為每次建構產生的檔案都不一樣，所以不適合直接以完整的 URL 供外部連結使用。而當有些例外情況不適合，例如 <code>robots.txt</code> 或 <code>sitemap.xml</code> 這類的檔案不需要經過額外處理且需要絕對路徑保持檔案名稱，那就得放置在 <code>public</code> 目錄下提供存取。</p> <hr> <h2 id="發布網站前的建構打包-build-與靜態網站生成-static-site-generation">發布網站前的建構打包 (Build) 與靜態網站生成 (Static Site Generation)</h2> <p>當網站開發完成或有導入 CI/CD，在準備發布網站前，我們會將 Nuxt 網站的開發專案透過 Nuxt 提供的指令，我們可以來建構出<strong>正式環境</strong>所需要的版本，這個建構的過程你可以理解為專案將會打包需要的依賴套件、編譯與轉換相關的 Vue SFC 與樣式等，甚至幫你壓縮這些檔案等許多步驟，這些繁瑣的過程都透過 Nuxt 的建構指令來幫你完成，你可以結合一些設定參數與指令，來幫助你建構出<strong>正式環境</strong>所需要的網站專案，最後再進行部署的動作。</p> <h3 id="nuxt-3-專案如何建構正式環境版本">Nuxt 3 專案如何建構正式環境版本？</h3> <p>當我們建立一個乾淨的 Nuxt 3 專案，可以使用 <strong>package.json</strong> 中 <strong>scripts</strong> 內的指令來進行建構或預渲染產生靜態頁面：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run build </span></span><span class="line"><span class="cl">npm run generate </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run build</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run generate</span> </span></span></code></pre></td></tr></table> </div> </div><p>或者你也可以使用 Nuxt CLI 來達到一樣的效果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi build </span></span><span class="line"><span class="cl">npx nuxi generate </span></span></code></pre></td></tr></table> </div> </div><p><code>generate</code> 指令會觸發 <code>build</code> 的指令並帶有 <strong>prerender</strong> 為 <code>true</code> 的參數，最終產生出來的目錄可以直接進行部署，不需要再執行一次 <code>build</code> 的指令。</p> <h3 id="使用預設配置進行建構---建構通用渲染-universal-rendering-的網站">使用預設配置進行建構 - 建構通用渲染 (Universal Rendering) 的網站</h3> <p>這邊我們以 <a class="link" href="https://blog.wayne-project.com/2023-01-16/nuxt-nuxt3-practice-project/" >【Nuxt3】實戰練習 - 實作部落格</a> 所建立的<a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/nuxt-app-blog" target="_blank" rel="noopener" >部落格</a>作為範例，來嘗試以預設的配置進行建構，目前 Nuxt 3 預設 <code>nuxt.config.ts</code> 中 <code>ssr</code> 屬性為 <code>true</code>，也就使用<strong>通用渲染 (Universal Rendering)</strong>。</p> <p>我們進入專案目錄，執行下列指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run build </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run build</span> </span></span></code></pre></td></tr></table> </div> </div><p>不需要在額外的配置或步驟，Nuxt 就會自動幫我們打包並建構出可以部署的網站。</p> <p><img src="https://live.staticflickr.com/65535/52630176278_33ffb31297_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>建構完成後會在專案目錄下多出一個 <code>.output</code> 目錄，<code>public</code> 就是在網站根目錄直接公開打包後的 JS、CSS 圖片等相關檔案。由於通用渲染使用 Nitro 作為服務引擎，所以會需要使用 Node.js 來啟動我們的服務，所以 <code>server</code> 則是會放置伺服器端的 Nitro、Server API 處理邏輯等。</p> <p><img src="https://live.staticflickr.com/65535/52630134450_bf00a38cea_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們可以先在本地執行下列指令來預覽建構出來的網站與 Nitro 是否能運作正常。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">node .output/server/index.mjs </span></span></code></pre></td></tr></table> </div> </div><p>當確認沒問題後，就能以 <code>.output</code> 目錄進行網站部署。</p> <h3 id="使用預渲染建置全靜態頁面網站">使用預渲染建置全靜態頁面網站</h3> <p>我們可以在 Nuxt 3 建構時期來進行<strong>預渲染 (pre-rendering)</strong>，將專案內需要打 API 請求及動態渲染元件的地方，先渲染生成出 HTML 網頁，這個過程也稱之為<strong>靜態網站生成 (Static Site Generation)</strong>，進而建構出全靜態頁面的網站。</p> <p>執行下列指令進行靜態頁面生成：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run generate </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run generate</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>generate</code> 指令會觸發 <code>build</code> 的指令並帶有 <strong>prerender</strong> 為 <code>true</code> 的參數，最終會提示產生的目錄 <code>.output/public</code> 可以用來部署至靜態託管伺服器。</p> <p><img src="https://live.staticflickr.com/65535/52629943864_15a3b70736_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當建構完成後，會在專案目錄下多出一個 <code>.output</code> 目錄同時也會有 <code>dist</code> 目錄，可以發現 <code>.output/public</code> 目錄內容與 <code>dist</code> 目錄相同。</p> <p><img src="https://live.staticflickr.com/65535/52629176072_058cbabe22_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>靜態頁面的生成因為 Nuxt 使用基於爬蟲的技術為每個頁面產生 HTML 與 Payload 檔案，可以發現產生的靜態頁面目錄結構，也對應著我們專案的路由頁面，而頁面元件資料夾內會由一個 <code>index.html</code> 與 <code>_payload.js</code> 組成。</p> <p>下圖所產生的結構，是因為我們的部落格資料庫內已經有三筆文章資料，<code>/articles</code> 頁面會取得所有的文章，並列出對應著 <code>/articles/1</code>、<code>/articles/2</code> 與 <code>/articles/3</code> 目錄，每個頁面內也都包含預先從 Server API 請求好的文章資料並存於 <code>_payload.js</code> 之中。</p> <p><img src="https://live.staticflickr.com/65535/52630134335_4a264f46cd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>至此我們就可以將 <code>.output</code> 目錄部署至伺服器或靜態託管服務，而且也不需要在使用 Node.js 伺服器來服務這些靜態檔案。</p> <h3 id="手動設定預渲染的路由規則">手動設定預渲染的路由規則</h3> <p>我們使用 <code>generate</code> 指令所產生的全靜態頁面網站，是基於 Nuxt 的爬蟲技術來分析頁面，如同前個例子文章頁面的產生所描述，如果我們的資料庫存在著 <strong>200</strong> 筆資料，但 <code>/articles</code> 頁面所打的 API 總是只回傳最新的 <strong>10</strong> 筆，那麼那些沒有路由連結可以連結過去的文章頁面，就無法被 Nuxt 的爬蟲所分析到，也就無法產生對應的靜態頁面。</p> <p>為了解決這個問題，我們可以藉由配置 Nitro 的預渲染路由，來手動的設定哪些頁面要進行預渲染產生靜態頁面，或者忽略產生靜態頁面。</p> <h5 id="nuxtconfigts-7">nuxt.config.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">prerender</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ignore</span><span class="o">:</span> <span class="p">[],</span> <span class="c1">// 忽略特定路由不進行預渲染 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">routes</span><span class="o">:</span> <span class="p">[],</span> <span class="c1">// 指定路由進行預渲染 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">crawlLinks</span>: <span class="kt">true</span> <span class="c1">// 啟用 Nuxt 爬蟲蒐集頁面連結來進行預渲染 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然，也可以搭配 <code>build</code> 或 <code>generate</code> 指令做使用，但會稍微有些不一樣。</p> <h4 id="build">build</h4> <p>例如：設置如下，並使用 <code>npm run build</code> 指令。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">prerender</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">routes</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;/articles&#39;</span><span class="p">,</span> <span class="s1">&#39;/articles/2&#39;</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼建構出來的通用渲染網站，就會包含部分頁面是已經預渲染好的靜態頁面。</p> <p><img src="https://live.staticflickr.com/65535/52629696171_a693e5422d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="generate">generate</h4> <p>當我們使用 <code>generate</code> 時，因為是進行全站的靜態頁面生成，所以基本上涵蓋了所有路由頁面，並且 <code>nitro.prerender.crawlLinks</code> 屬性預設為 <code>true</code> 會啟用 Nuxt 爬蟲來蒐集整的網站的路由頁面，進而開始預渲染產生靜態頁面。</p> <p>例如：設置如下，並使用 <code>npm run generate</code> 指令。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">nitro</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">prerender</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ignore</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="s1">&#39;/register&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">routes</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;/articles/2&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">crawlLinks</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼建構出來的 <code>.output</code> 目錄，就會因為設置了 <code>nitro.prerender.ignore</code> 而忽略 <strong>/login</strong> 與 <strong>/register</strong> 頁面的靜態生成 ，而 <strong>/articles/2</strong> 在網站中因為沒有任何頁面能連結到此，所以 Nuxy 爬蟲無法蒐集到，所以可以手動添加進 <code>nitro.prerender.routes</code> 之中。</p> <p><img src="https://live.staticflickr.com/65535/52629696156_f6e435c338_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果我們將 <code>nitro.prerender.crawlLinks</code> 屬性設為 <code>false</code>，那麼在產生靜態頁面的時候，就算 <code>/articles</code> 包含了所有文章的連結，Nuxt 爬蟲也就不會蒐集連結來產生靜態頁面，而是僅依照專案目錄下的 <code>pages</code> 所產生出的路由但不包含 <code>[id].vue</code> 這類動態匹配的路由來產生靜態頁面。</p> <h3 id="建構僅在客戶端渲染的網站">建構僅在客戶端渲染的網站</h3> <p>同樣的使用<a class="link" href="https://github.com/wjdesign/ithome-2022-ironman-nuxt3/tree/nuxt-app-blog" target="_blank" rel="noopener" >部落格</a>作為範例，來嘗試將 <code>nuxt.config.ts</code> 中 <code>ssr</code> 屬性設為 <code>false</code>，也就讓網站<strong>僅在客戶端渲染 (Client-side Only Rendering)</strong>。</p> <p>執行下列指令進行建構：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run build </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run build</span> </span></span></code></pre></td></tr></table> </div> </div><p>建構完成後，會在專案目錄下多出一個 <code>.output</code> 目錄，可以發現 <code>public</code> 目錄結構與通用渲染建構出的不大一樣，多出了像 Vue 專案建構完成後的 <code>index.html</code> 檔案，來作為顯示的容器。</p> <p><img src="https://live.staticflickr.com/65535/52629176037_b1ec094f74_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這邊比較需要留意的地方是，當我們將 <code>ssr</code> 屬性設為 <code>false</code>，也還是會在 <code>.output</code> 建構出 <code>server</code> 目錄，也擁有著 <code>.output/server/index.mjs</code>。</p> <p>那這不就意謂著我還是得有 Node.js 服務才能部署嗎？其實你可以這麼理解，當我們設定 Nuxt 僅在客戶端進行渲染，但 Nuxt 專案中仍然可能有 Server API，這個屬於伺服器端的 API，總不可能一同打包至前端去做架設吧！所以使用 <code>npm run build</code> 建構出來的專案，都會使用 Nitro 引擎來啟動服務，若有 Server API 的處理邏輯，則會連帶打包進 <code>.output/server</code> 目錄之下。</p> <p>如果你確定 Nuxt 的專案內沒有自己實作的 Server API，全部是依賴非專案內的 Server API，那麼你可以直接將 <code>public</code> 目錄，視為 Vue 建構出的 <code>dist</code> 目錄來進行部署，因為選擇不再需要 Nitro 引擎來為我們提供 Web Server 的服務，且專案內的前端也都打包完在 <code>public</code> 下可以視為 SPA 網站。</p> <h3 id="整理這些排列建構參數的組合">整理這些排列建構參數的組合</h3> <p>相信看到這裡，可能對建構與產生靜態頁面有一點混亂了，這邊稍微整理了一下，大家可以再依據需求來啟用相對應的配置：</p> <h4 id="npm-run-build--ssr-true">npm run build + ssr: true</h4> <ul> <li>build + ssr: true</li> </ul> <p>Nuxt 3 預設的建構參數，使用<strong>通用渲染 (Universal Rendering) 模式</strong>。</p> <ul> <li>build + ssr: true + nitro.prerender.crawlLinks: true</li> </ul> <p>使用通用渲染模式，頁面中需要打 API 動態產生的連結而被 Nuxt 爬蟲所蒐集到的頁面將被預渲染成靜態頁面。</p> <ul> <li>build + ssr: true + nitro.prerender.routes + nitro.prerender.crawlLinks: false</li> </ul> <p>使用通用渲染模式，但指定頁面預渲染成靜態頁面。</p> <h4 id="npm-run-build--ssr-false">npm run build + ssr: false</h4> <ul> <li>build + ssr: false</li> </ul> <p><strong>僅在客戶端渲染 (Client-side Only Rendering)</strong> 的模式，部署時同樣需要使用 <code>server</code> 中的 <code>index.mjs</code> 來啟動 Nitro 伺服器，這樣才能正確的運作 Server API；除非確認專案內完全無依賴專案內的 Server API，則可以直接將 <code>.output/public</code> 視為 Vue 的 <code>dist</code> 目錄進行部署。</p> <h4 id="npm-run-generate--ssr-true">npm run generate + ssr: true</h4> <ul> <li>generate + ssr: true</li> </ul> <p>使用預渲染產生靜態頁面，預設產生全站靜態頁面，<code>generate</code> 下 <code>nitro.prerender.crawlLinks</code> 屬性預設變為 <code>true</code>，整個網站包含 Nuxt 爬蟲所蒐集到的頁面將被預渲染成靜態頁面。</p> <ul> <li>generate + ssr: true + nitro.prerender.ignore</li> </ul> <p>使用 <code>generate</code> 已經包含整個網站，如果想要忽略某些頁面進行預渲染，可以添加路由至 <code>nitro.prerender.ignore</code> 中。但是需要注意，這些被忽略的頁面如果有使用專案內的 Server API 需求，可能就無法正確的在靜態託管平台運作，而外部的倒是不受影響。</p> <ul> <li>generate + ssr: true + nitro.prerender.routes</li> </ul> <p>雖然使用 <code>generate</code> 已經包含整個網站，但 Nuxt 爬蟲所蒐集到的頁面僅為頁面中產生的，如果連結不存在這些頁面內，只能直接從瀏覽器網址列輸入進入，那麼我們可以將路由添加至 <code>nitro.prerender.routes</code> 來額外補充需要預渲染的頁面。</p> <ul> <li>generate + ssr: true + nitro.prerender.routes + nitro.prerender.crawlLinks: false</li> </ul> <p>同樣會產生全站靜態頁面，但不使用 Nuxt 爬蟲所蒐集到的連結頁面，所以這些動態匹配或需要打 API 獲取資料再渲染的頁面，將不會是靜態頁面，因此也需要注意，如果這些頁面有使用專案內的 Server API 需求，可能就無法正確的在靜態託管平台運作，而外部的倒是不受影響。</p> <blockquote> <p>其它跟建構有關的參數屬性可以再參考<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#build" target="_blank" rel="noopener" >官方文件</a>、<a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#vite" target="_blank" rel="noopener" >Vite</a> 與 <a class="link" href="https://nuxt.com/docs/api/configuration/nuxt-config/#webpack-1" target="_blank" rel="noopener" >webpack</a> 建構工具也都能額外設定參數屬性。</p></blockquote> <p>Nuxt 的建構指令 <code>build</code> 與產生靜態頁面的 <code>generate</code> 指令，讓我們可以依據不同的情境來決定渲染模式與預渲染的頁面，最終產生的 <code>.output</code> 目錄也會有不一樣的結構。預渲染的頁面與單純的 SPA 也要注意使否有使用到 Nuxt 專案建立的 Server API，再決定是否需要 Nitro 伺服器來啟動正式環境的網站服務。當一切就緒之後最後就能將輸出的目錄打包進行部署。</p> <hr> <h2 id="就剩最後一步了---部署-deployment">就剩最後一步了 - 部署 (Deployment)</h2> <p>Nuxt 3 的專案應用程式，可以部署在 Node.js 的伺服器上面，也可以將預渲染的靜態網站由靜態託管平台來服務，或這部署至無伺服器 (serverless) 或 CDN 環境上。</p> <h3 id="使用-nodejs-伺服器">使用 Node.js 伺服器</h3> <p>Nuxt 3 的專案預設使用 <a class="link" href="https://nuxt.com/docs/guide/concepts/server-engine/" target="_blank" rel="noopener" >Nitro</a> 來作為服務引擎，所以我們在任何 Node.js 伺服器環境之下，基本上都可以啟動 Nuxt 建置出來的 Nitro Server。</p> <p>當我們使用 <code>npm run build</code> 建構專案後，輸出的 <code>.output/server/index.mjs</code> 檔案，即是一個準備啟動 Node 伺服器的入口點。</p> <p>我們可以透過下列指令來啟動我們建構好的專案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">node .output/server/index.mjs </span></span></code></pre></td></tr></table> </div> </div><p>執行後如下面圖示顯示，網站將於 <strong>Prot: 3000</strong> 進行服務監聽。</p> <p><img src="https://live.staticflickr.com/65535/52629762661_a3a806890c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你可以設定下列環境變數來調整預設監聽的 <strong>Port</strong> 或 <strong>Host</strong>。</p> <ul> <li><strong>NITRO_PORT</strong> 或 <strong>PORT</strong>：監聽的 Port (預設為 <strong>3000</strong>)</li> <li><strong>NITRO_HOST</strong> 或 <strong>HOST</strong>：服務的 Host (沒有預設值，但預設監聽所有的網路介面包含 IPv4 與 IPv6 的位址 )</li> <li><strong>NITRO_SSL_CERT</strong> 與 <strong>NITRO_SSL_KEY</strong>：如果兩者皆設定，將以 HTTPS 模式下啟動伺服器，通常僅作為測試用途，因為建議將 SSL 憑證等設定於提供反向代理的服務，例如 NGINX 或 CloudFlare，Nitro 伺服器則執行在反向代理後面。</li> </ul> <p>部署時，你可以將整個 <code>.output</code> 上傳至正式環境的機器上，並使用 Node.js 做執行，但為了防止我們的服務因為異常，導致 Node.js 服務意外崩潰，我們需要一個 <strong>Process</strong> 的 <strong>Daemon</strong>，來將服務常駐，意外崩潰時能自動重啟，來維持整個網站的正常服務。</p> <p>通常我們會在正式環境使用 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 來管理 Node.js 的服務，<a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 是維持一個 Process 執行的管理器，我們可以藉由 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 來啟動我們的 Nitro Server，當服務崩潰時能自動的重新啟動，以維持服務的正常運作，除此之外 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 可以啟用叢集 (Cluster) 的功能結合請求的附載平衡，來讓多核心的機器提升資源的利用率與效能，更還有監測多項數據等功能可供正式環境做使用。</p> <h3 id="使用-pm2">使用 PM2</h3> <p>使用的方式也很簡單，首先使用 NPM 安裝 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a>，可以執行下列指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g pm2 </span></span></code></pre></td></tr></table> </div> </div><p>在 Nuxt 專案目錄下建立 <code>ecosystem.config.js</code> 檔案，內容如下：</p> <h5 id="ecosystemconfigjs">ecosystem.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apps</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;NuxtAppName&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">exec_mode</span><span class="o">:</span> <span class="s1">&#39;cluster&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">instances</span><span class="o">:</span> <span class="s1">&#39;max&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">script</span><span class="o">:</span> <span class="s1">&#39;./.output/server/index.mjs&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們就能使用 <a class="link" href="https://pm2.keymetrics.io/" target="_blank" rel="noopener" >PM2</a> 來執行我們的服務：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">pm2 start ecosystem.config.js </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630242508_e873a0929c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>你也可以在 <code>ecosystem.config.js</code> 中添加環境變數。</p> <h5 id="ecosystemconfigjs-1">ecosystem.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">apps</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;NuxtAppName&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">exec_mode</span><span class="o">:</span> <span class="s1">&#39;cluster&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">instances</span><span class="o">:</span> <span class="s1">&#39;max&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">script</span><span class="o">:</span> <span class="s1">&#39;./.output/server/index.mjs&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">env</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">NITRO_PORT</span><span class="o">:</span> <span class="mi">3001</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">NITRO_HOST</span><span class="o">:</span> <span class="s1">&#39;127.0.0.1&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="製作-docker-image">製作 Docker Image</h3> <p>目前使用 Docker 來部署服務的也不在少數，個人也是採用容器化來啟動網站服務並整合 CI/CD 自動化的流程來建構與部署 Nuxt 3 專案，以下將列出自己使用的 Dockerfile，有興趣的可以再參考看看。</p> <p>專案目錄下建立 <code>Dockerfile</code> 檔案，內容如下：</p> <h5 id="dockerfile">Dockerfile</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:16-alpine</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> mkdir -p /nuxt-app<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/nuxt-app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> npm ci <span class="o">&amp;&amp;</span> npm cache clean --force<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> npm run build<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">FROM</span><span class="w"> </span><span class="s">keymetrics/pm2:16-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">RUN</span> mkdir -p /nuxt-app/.output<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/nuxt-app/.output</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">COPY</span> --from<span class="o">=</span>builder /nuxt-app/.output .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">COPY</span> ./ecosystem.config.js /nuxt-app<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">ENV</span> <span class="nv">NUXT_HOST</span><span class="o">=</span><span class="m">0</span>.0.0.0<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">ENV</span> <span class="nv">NUXT_PORT</span><span class="o">=</span><span class="m">3000</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span> <span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="k">ENTRYPOINT</span> <span class="p">[</span><span class="s2">&#34;pm2-runtime&#34;</span><span class="p">,</span> <span class="s2">&#34;start&#34;</span><span class="p">,</span> <span class="s2">&#34;/nuxt-app/ecosystem.config.js&#34;</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></td></tr></table> </div> </div><p>打開終端機 (Terminal)，並於專案目錄下執行下列指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker build -t nuxt-app . </span></span></code></pre></td></tr></table> </div> </div><p>當開始製作 Docker Image 時，會依照 Dockerfile 來建置，主要分成兩個部分，首先我會先在 <code>node:16-alpine</code> 容器環境中執行建構 (build) 的指令，並將需要部署的目錄 <code>.output</code> 複製至 <code>keymetrics/pm2:16-alpine</code> 容器環境中，這樣最終使用 PM2 執行服務的 Image 大小就會稍微小一些。</p> <p>當 Docker Image 製作完畢後，可以再藉由 docker run 或 docker compose 甚至 k8s 來啟動服務後，再由如 NGINX 提供反向代理服務連接到內部的 Nitro Server。</p> <h3 id="部署至-cloudflare-workers">部署至 CloudFlare Workers</h3> <p>我們也可以將 Nuxt 部署到無伺服器 (Serverless) 的環境，官方提供了多種的預設部署可以做使用，我們就簡單以一個乾淨的 Nuxt 3 專案來做範例，嘗試部署到 <a class="link" href="https://workers.cloudflare.com/" target="_blank" rel="noopener" >CloudFlare Workers</a>。</p> <p>首先，我們先準備一個 Nuxt 3 專案，在此我使用下列指令建立一個乾淨的 Nuxt 3 專案，並進入專案目錄安裝套件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx nuxi init nuxt-app </span></span><span class="line"><span class="cl"><span class="nb">cd</span> nuxt-app </span></span><span class="line"><span class="cl">npm install </span></span></code></pre></td></tr></table> </div> </div><p>使用 NPM 安裝 <a class="link" href="https://www.npmjs.com/package/wrangler" target="_blank" rel="noopener" >wrangler</a>，它是用於建構 Cloudflare Workers 的命令列工具 (command line tool)。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g wrangler </span></span></code></pre></td></tr></table> </div> </div><p>你可能需要註冊一個 CloudFlare 的帳號，並使用下列指令來登入 CloudFlare 帳號並授權 Wrangler 來建立 CloudFlare Workers，我們選擇允許 (Allow) 即可。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler login </span></span></code></pre></td></tr></table> </div> </div><p>於專案目錄下建立 <code>wrangler.toml</code> 內容如下：</p> <h5 id="wranglertoml">wrangler.toml</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;nuxt-app-hello&#34;</span> </span></span><span class="line"><span class="cl"><span class="nx">main</span> <span class="p">=</span> <span class="s2">&#34;./.output/server/index.mjs&#34;</span> </span></span><span class="line"><span class="cl"><span class="nx">workers_dev</span> <span class="p">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"><span class="nx">compatibility_date</span> <span class="p">=</span> <span class="s2">&#34;2022-10-15&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">site</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="nx">bucket</span> <span class="p">=</span> <span class="s2">&#34;.output/public&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們將 <code>NITRO_PRESET</code> 環境變數，設置為 <code>cloudflare</code> 並開始建構我們的專案。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">NITRO_PRESET</span><span class="o">=</span>cloudflare npm run build </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630011164_8598f2fb8a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來，可以選擇執行終端機提示的指令來啟動伺服器進行相關測試。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx wrangler dev .output/server/index.mjs --site .output/public --local </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630011119_2100d3cd32_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>當確認專案服務運作上沒問題後，可以執行下列指令進行發布。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx wrangler publish </span></span></code></pre></td></tr></table> </div> </div><p>完成發布後，就會提示我們發布完成及服務的網址，例如 <a class="link" href="https://nuxt-app-hello.ryanchien8125.workers.dev" target="_blank" rel="noopener" >https://nuxt-app-hello.ryanchien8125.workers.dev</a>，我們就可以瀏覽我們部署好的網站囉。</p> <p><img src="https://live.staticflickr.com/65535/52630011089_34c0659438_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="靜態的網站部署至-cloudflare-pages">靜態的網站部署至 CloudFlare Pages</h3> <p>我們使用 Nuxt 3 可以預渲染全靜態的網站，因此也可以將專案部署至靜態託管平台，以 CloudFlare Pages 為例，部署的步驟如下：</p> <p>首先，先執行下列指令進行全站的預渲染：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run generate </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl"><span class="c1"># yarn run generate</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 NPM 安裝 <a class="link" href="https://www.npmjs.com/package/wrangler" target="_blank" rel="noopener" >wrangler</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g wrangler </span></span></code></pre></td></tr></table> </div> </div><p>你可能需要註冊一個 CloudFlare 的帳號，並使用下列指令來登入 CloudFlare 帳號並授權 Wrangler，我們選擇允許 (Allow) 即可。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler login </span></span></code></pre></td></tr></table> </div> </div><p>建立一個 CloudFlare Pages 名為 <code>nuxt-app-blog</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler pages project create nuxt-app-blog </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52630242568_959e7a5907_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>使用下列指令，將預渲染的網站目錄進行部署，並指定專案名稱為 <code>nuxt-app-blog</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">wrangler pages publish ./.output/public --project-name nuxt-app-blog </span></span></code></pre></td></tr></table> </div> </div><p>當部署完成後，就會得到一個連結來查看部署的靜態網頁，你也可以從 CloudFlare Pages 後台，看見網站網址的別名 Aliases 來使用自訂的網址。</p> <p><img src="https://live.staticflickr.com/65535/52629762746_a0dc3bb113_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>以上是介紹 Nuxt 3 的幾個部署方式的例子，更多雲端平台上面的部署，也可以參考 <a class="link" href="https://nuxt.com/docs/getting-started/deployment#deployment" target="_blank" rel="noopener" >Nuxt</a> 與 <a class="link" href="https://nitro.unjs.io/deploy/node" target="_blank" rel="noopener" >Nitro</a> 官方文件。</p> <hr> <h2 id="上線前的測試項目">上線前的測試項目</h2> <p>最後與大家分享一下網站專案上線前的幾個我會特別注意的幾個小細節，也歡迎大家一起來交流。</p> <h3 id="前端細節">前端細節</h3> <ul> <li>網頁的標題 (Title)</li> <li>使用之資源授權 (使用權、智財權)</li> <li>圖片替代文字</li> <li>Favicon</li> <li>HTML Meta data</li> <li>Google Analytics</li> </ul> <h3 id="瀏覽器相容性測試">瀏覽器相容性測試</h3> <ul> <li>RWD</li> <li>跨瀏覽器 <ul> <li>BrowserStack</li> <li>Comparium</li> <li>TestingBot</li> </ul> </li> </ul> <h3 id="api-測試">API 測試</h3> <ul> <li>單元測試</li> <li>不同場景測試 (測試環境、正式環境)</li> <li>效能測試 <ul> <li>JMeter</li> <li>k6</li> </ul> </li> <li>安全性測試</li> </ul> <h3 id="壓力測試">壓力測試</h3> <ul> <li>模擬使用者或連線數</li> <li>觀察機器資源使用量</li> <li>資料庫連線數觀察</li> <li>持續提高模擬數量觀察分析</li> <li>分析每個請求於併發的平均響應時間</li> <li>是否請求中夾雜非預期之狀態碼 (HTTP Status Code)</li> </ul> <h3 id="api-或網站安全性">API 或網站安全性</h3> <ul> <li>參考 OWASP Top 10</li> <li>SQL 參數化查詢</li> <li>資安公司滲透測試、紅隊演練</li> </ul> <h3 id="開發或除錯用的訊息">開發或除錯用的訊息</h3> <ul> <li>警告訊息或異常訊息移除（console.log 或警告訊息等）</li> <li>JavaScript Source Maps 記得移除</li> <li>敏感資訊記得移除 (開發用 Key、帳號密碼等)</li> </ul> <h3 id="網站相依性檢查">網站相依性檢查</h3> <ul> <li>使用到第三方網站資源及穩定性</li> <li>檢查所有網址皆能正常運作</li> <li>當第三方網站異常時應對措施</li> </ul> <h3 id="部署相關">部署相關</h3> <ul> <li>是否有高可用性 (HA)</li> <li>Docker 或 Kubernetes 整合</li> <li>網域時效</li> <li>SSL 證書日期</li> <li>防火牆或 WAF 設定</li> <li>內網或外網區隔</li> </ul> <h3 id="備份機制">備份機制</h3> <ul> <li>靜態有狀態資料 (使用者上傳的)</li> <li>資料庫資料</li> </ul> <p>這邊主要與大家分享幾種 Nuxt 的部署方式，不管是部署在自己的機房主機或雲端，大家可以在挑選合適的解決方案，Nitro 也支援無伺服器 (Serverless) 等部署方式非常的方便，只是要特別注意到 Serverless 執行一些 binary 的問題，再挑選自己適合的部署與服務方式。</p> <p>經過本篇文章，大家應該都對於 Nuxt 3 有初步的理解，接下來下一篇文章我們將會進入實戰練習，將會以 Nuxt 3 來實作一個部落格網站！</p> <hr>https://blog.wayne-project.com/2022-12-30/npm-vueuse/Fri, 30 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-30/npm-vueuse/<img src="https://live.staticflickr.com/65535/52595409644_aa1fd7bf45_o.png" alt="Featured image of post 【VueUse】一款基於 Vue Composition API 的函式工具集" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://ithelp.ithome.com.tw/articles/10278366" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7030395303433863205" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="vueuse-是什麼">VueUse 是什麼？</h2> <p><a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a> 作者為 Anthony Fu，是一款基於 Vue 組合式 API (Composition API) 的函數工具集，其中 <a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a> 主要特色可以分為以下幾點：</p> <ul> <li>Vue 2 和 Vue 3 都支援</li> <li>採取 Tree Shaking 結構，只會打包引入的程式碼</li> <li>支持各種套件</li> <li>可配置事件過濾器和目標</li> </ul> <p>以上是<a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >官方網站</a>關於它的定義。</p> <p>首先，它基於 Vue Composition API (組合式API)，只有在支持組合式 API 的環境下，才可以正常使用它。</p> <p><a class="link" href="https://cn.vuejs.org/guide/extras/composition-api-faq.html" target="_blank" rel="noopener" >什麼是組合式 API？</a></p> <p>然後，它是一款函數工具集(可類比為 <a class="link" href="https://www.lodashjs.com/" target="_blank" rel="noopener" >lodash.js</a> / <a class="link" href="https://ramda.cn/" target="_blank" rel="noopener" >ramda.js</a>)</p> <p>簡單來說，這是一個能讓你<strong>更早下班</strong>的工具庫。</p> <hr> <h2 id="vueuse-開源嗎現狀如何">VueUse 開源嗎？現狀如何？</h2> <p><strong>當然開源！</strong> <a class="link" href="https://github.com/vueuse/vueuse" target="_blank" rel="noopener" >github/vueuse</a></p> <p>社區活躍度：社區非常活躍，截止 2021 年 11 月，一直有 mr 被合入主線。</p> <p>被引用情況：截止 2021 年 11 月 13 日，npm 上可查詢到依賴它的庫就有 172 個，其中包括著名UI庫：<a class="link" href="https://element-plus.org/zh-CN/" target="_blank" rel="noopener" >Element-Plus</a></p> <p>Vue 的著名開源作者 Evan You 也是此庫的金牌贊助商。</p> <p><img src="https://live.staticflickr.com/65535/52595668748_bb0dc1189c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="安裝-vueuse">安裝 VueUse</h2> <p>NPM 或 YARN：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm i @vueuse/core </span></span><span class="line"><span class="cl"><span class="c1"># or</span> </span></span><span class="line"><span class="cl">yarn add @vueuse/core </span></span></code></pre></td></tr></table> </div> </div><p>CDN 引入：</p> <blockquote> <p>這邊注意 <strong>shared 一定要在前面</strong></p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/@vueuse/shared&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/@vueuse/core&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注：VueUse 借助 vue-demi 的強大功能，可以在一個包中同時適用於 Vue 2、3！</p></blockquote> <p>Vue 3 Demo</p> <ul> <li><a class="link" href="https://github.com/vueuse/vueuse-vite-starter" target="_blank" rel="noopener" >使用 Vite</a></li> <li><a class="link" href="https://github.com/vueuse/vueuse-vue3-example" target="_blank" rel="noopener" >使用 Webpack</a></li> </ul> <p>Vue 2 Demo (Vue CLI)</p> <ul> <li><a class="link" href="https://github.com/vueuse/vueuse-vue2-example" target="_blank" rel="noopener" >使用 Vue CLI</a></li> </ul> <p>另外，要注意庫的版本：</p> <p>從 <code>v6.0</code> 版本起，vue3 需要 <code>vue &gt;= v3.2</code>，vue2 需要依賴 <a class="link" href="https://github.com/vuejs/composition-api" target="_blank" rel="noopener" >@vue/composition-api</a>：<code>@vue/composition &gt;= v1.1</code>。</p> <hr> <h2 id="vueuse-能做什麼">VueUse 能做什麼？</h2> <p>能做的那可太多了，但總體上分為以下幾個類別提供工具函數：</p> <ul> <li>Animation 動畫</li> <li>Browser 瀏覽器</li> <li>Component 組件</li> <li>Formatters 格式化</li> <li>Sensors 傳感器</li> <li>State 狀態機</li> <li>Utility 實用方法</li> <li>Watch 監聽</li> <li>Misc 各式各樣的雜項</li> </ul> <p>這麼列了一遍，估計你還是很懵，但因為方法實在太多，也不可能一個個都列出來。</p> <p>那我就舉幾個有代表性的例子，帶你快速理解這些方法大概是做什麼的，有什麼特點。</p> <h3 id="例子一usemouse">例子(一)：useMouse</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span><span class="nx">Mouse</span><span class="o">:</span> <span class="p">{{</span><span class="nx">x</span><span class="p">}}</span> <span class="nx">x</span> <span class="p">{{</span><span class="nx">y</span><span class="p">}}&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">useMouse</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vueuse/core&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">y</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52595149366_78bc02b664_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Wooooow~~~ 這可太簡單易用了！</p> <p>經過源碼閱讀，我們可以發現，這短短的一個方法，至少做了以下這些事：</p> <ul> <li>創建了 x 和 y 這兩個響應式對象(Ref)</li> <li>給 window 添加了鼠標事件監聽，將鼠標的坐標實時賦給 x、y (並且還做了移動端兼容)</li> </ul> <p>如果這些邏輯放到頁面裡，至少需要 6 行代碼，這些代碼後期都會增加維護人員理解頁面的成本，而現在，你只需要一行代碼。</p> <p>除此之外，該方法還有組件式用法，適合更熱愛標籤的盆友</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">UseMouse</span> <span class="nt">v-slot</span><span class="o">=</span><span class="s">&#34;{ x, y }&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">x</span><span class="o">:</span> <span class="p">{{</span> <span class="na">x</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="na">y</span><span class="o">:</span> <span class="p">{{</span> <span class="na">y</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">UseMouse</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="例子二useinterval">例子(二)：useInterval</h3> <p>顧名思義，這個方法是對<strong>延时重複調用</strong>能力的封裝。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useInterval</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;.&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">counter</span><span class="p">,</span> <span class="nx">pause</span><span class="p">,</span> <span class="nx">resume</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useInterval</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="p">{</span> <span class="nx">controls</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// counter 一個 Ref 對象，它是響應式的，counter.value 等於已經計算的次數 </span></span></span><span class="line"><span class="cl"><span class="c1">// pause() 暫停 </span></span></span><span class="line"><span class="cl"><span class="c1">// resume() 恢復 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;APP&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">Interval</span> <span class="nx">fired</span><span class="o">:</span> <span class="p">{{</span> <span class="nx">counter</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52595409614_bbf967ebb4_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>是不是很好用？相比手寫 setInterval 更為便捷。</p> <p>如果徒手實現這樣一整套方法，多少行暫且不說，我們需要在業務中寫下大量的邏輯代碼。</p> <p>而眾所周知：</p> <p>寫的代碼越多，出 Bug 的可能性越大，維護和理解的難度就越高。從這個角度看，這個庫確實是一個合格的函數工具集。</p> <h3 id="例子三useclipboard">例子(三)：useClipboard</h3> <p>以複製文字為例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">useClipboard</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vueuse/core&#39;</span><span class="p">;</span> <span class="c1">// 只需要引入所使用到的 API </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;我是 Winnie&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">text</span><span class="p">,</span> <span class="c1">// 複製的值 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">isSupported</span><span class="p">,</span> <span class="c1">// 瀏覽器有無支援 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">copy</span><span class="p">,</span> <span class="c1">// 方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">copied</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="o">=</span> <span class="nx">useClipboard</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;isSupported&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span><span class="nx">useClipboard</span><span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">複製內容</span><span class="err">：</span><span class="p">{{</span> <span class="nx">input</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;input&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="nt">@click</span><span class="s">=&#34;copy(input)&#34;</span><span class="p">&gt;{{</span> <span class="na">copied</span> <span class="err">?</span> <span class="err">&#34;</span><span class="na">已複製</span><span class="err">&#34;</span> <span class="o">:</span> <span class="err">&#34;</span><span class="na">複製</span><span class="err">&#34;</span> <span class="p">}}&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="nt">v-else</span><span class="p">&gt;</span><span class="na">Your</span> <span class="na">browser</span> <span class="na">does</span> <span class="na">not</span> <span class="na">support</span> <span class="na">Clipboard</span> <span class="na">API</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52595409639_2ccc3500ea_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="例子四usevmodel">例子(四)：useVModel</h3> <p>這是一個給<strong>經常封裝組件</strong>的小伙伴們的大好利器。</p> <p>先創建一個組件：<code>Test.vue</code></p> <h5 id="testvue">Test.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;_name&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">age</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;_age&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">sex</span><span class="o">:</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;_sex&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useVModel</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vueuse/core&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">props</span> <span class="o">=</span> <span class="nx">defineProps</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sex</span><span class="o">:</span> <span class="nb">String</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">emit</span> <span class="o">=</span> <span class="nx">defineEmits</span><span class="p">([</span><span class="s1">&#39;update:name&#39;</span><span class="p">,</span> <span class="s1">&#39;update:age&#39;</span><span class="p">,</span> <span class="s1">&#39;update:sex&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_name</span> <span class="o">=</span> <span class="nx">useVModel</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="s1">&#39;name&#39;</span><span class="p">,</span> <span class="nx">emit</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_age</span> <span class="o">=</span> <span class="nx">useVModel</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="s1">&#39;age&#39;</span><span class="p">,</span> <span class="nx">emit</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">_sex</span> <span class="o">=</span> <span class="nx">useVModel</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="s1">&#39;sex&#39;</span><span class="p">,</span> <span class="nx">emit</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著，在 index.vue 中使用它</p> <h5 id="indexvue">index.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Test</span> </span></span><span class="line"><span class="cl"> <span class="na">v</span><span class="nt">-model:name</span><span class="o">=</span><span class="s">&#34;formData.name&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">v</span><span class="nt">-model:age</span><span class="o">=</span><span class="s">&#34;formData.age&#34;</span> </span></span><span class="line"><span class="cl"> <span class="na">v</span><span class="nt">-model:sex</span><span class="o">=</span><span class="s">&#34;formData.sex&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;&lt;/</span><span class="nt">Test</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">formData</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-demi&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Test</span> <span class="nx">from</span> <span class="s1">&#39;./Test.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">formData</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;lily&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="s1">&#39;8&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">sex</span><span class="o">:</span> <span class="s1">&#39;boy&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>效果：</p> <p><img src="https://live.staticflickr.com/65535/52594662992_38c1bfd956_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>對於有組件封裝需求的朋友，這個方法強烈推薦！</p> <p>不用再為了單向數據流的組件封裝，而在組件內寫冗餘的代碼了。</p> <p>直接將 <code>useVModel</code> 返回的數據作為響應式對象用即可。</p> <hr> <h2 id="最後">最後</h2> <p>例子太多，就不再一一介紹了，但大家應該已經有了一個初步的概念，知道了此庫的作用，一言以蔽之：<strong>助力摸鱼，提前下班</strong>。</p> <p>它沒辦法做到你之前做不到的事情。</p> <p>它只能做到讓你更輕鬆的完成工作！願你今天也能按時下班。</p> <hr>https://blog.wayne-project.com/2022-12-30/why-use-hooks/Fri, 30 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-30/why-use-hooks/<img src="https://live.staticflickr.com/65535/52595598278_3dc955c418_o.png" alt="Featured image of post 淺談為什麼 Vue 和 React 都選擇了 Hooks？" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://juejin.cn/post/7066951709678895141" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="一hooks什麼叫大勢所趨">一、hooks：什麼叫大勢所趨？</h2> <p>2019年年初，<code>react</code> 在 <code>16.8.x</code> 版本正式具備了 <code>hooks</code> 能力。</p> <p>2019年6月，尤雨溪在 <a class="link" href="https://github.com/vuejs/rfcs/pull/42" target="_blank" rel="noopener" >vue/github-issues</a> 裡提出了關於 <code>vue3 Composition API</code> 的提案。(vue hooks的基礎)</p> <p>在後續的 <code>react</code> 和 <code>vue3</code> 相關版本中，相關 <code>hooks</code> 能力都開始被更多人所接受。</p> <p>除此之外，<code>solid.js</code>、<code>preact</code> 等框架，也是開始選擇加入 <code>hooks</code> 大家庭。</p> <p><img src="https://live.staticflickr.com/65535/52595337539_162e880f36_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以預見，雖然目前仍然是 class Component 和 hooks api 並駕齊驅的場面，但未來幾年裡，hooks 極有可能取代 class Component 成為業內真正的主流。</p> <hr> <h2 id="二什麼是-hooks">二、什麼是 hooks？</h2> <h3 id="hooks-的定義">hooks 的定義</h3> <p>hooks 直譯是<code>&quot;鉤子&quot;</code>，它並不僅是 <code>react</code>，甚至不僅是前端界的專用術語，而是整個行業所熟知的用語。</p> <p>通常指：</p> <blockquote> <p>系統運行到某一時期時，會調用被註冊到該時機的回調函數。</p></blockquote> <p>比較常見的鉤子有：<code>windows</code> 系統的鉤子能監聽到系統的各種事件，瀏覽器提供的 <code>onload</code> 或 <code>addEventListener</code> 能註冊在瀏覽器各種時機被調用的方法。</p> <p>以上這些，都可以被稱一聲 <code>hook</code>。</p> <p>但是很顯然，在特定領域的特定話題下，<code>hooks</code> 這個詞被賦予了一些特殊的含義。</p> <p>在 <code>react@16.x</code> 之前，當我們談論 <code>hooks</code> 時，我們可能談論的是&quot;組件的生命週期&quot;。</p> <p>但是現在，<code>hooks</code> 則有了全新的含義。</p> <p>以 <code>react</code> 為例，<code>hooks</code> 是：</p> <blockquote> <p>一系列以 &ldquo;use&rdquo; 作為開頭的方法，它們提供了讓你可以完全避開 class 式寫法，在函數式組件中完成生命週期、狀態管理、邏輯複用等幾乎全部組件開發工作的能力。</p></blockquote> <p>簡化一下：</p> <blockquote> <p>一系列方法，提供了在<strong>函數式組件</strong>中完成開發工作的能力。</p></blockquote> <p>(記住這個關鍵詞：<code>函數式組件</code>)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useCallback</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 比如以上這幾個方法，就是最為典型的 Hooks </span></span></span></code></pre></td></tr></table> </div> </div><p>而在 <code>vue</code> 中，<code>hooks</code> 的定義可能更模糊，姑且總結一下：</p> <blockquote> <p>在 <code>vue</code> 組合式 API 裡，以 &ldquo;use&rdquo; 作為開頭的，一系列提供了<strong>組件複用</strong>、<strong>狀態管理</strong>&hellip;等開發能力的方法。</p></blockquote> <p>(關鍵詞：<code>組合式API</code>)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useSlots</span><span class="p">,</span> <span class="nx">useAttrs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useRouter</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue-router&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 以上這些方法，也是 vue3 中相關的 Hook！ </span></span></span></code></pre></td></tr></table> </div> </div><p>如：<code>useSlots</code>、<code>useAttrs</code>、<code>useRouter</code> 等。</p> <p>但主觀來說，我認為 vue 組合式 API 其本身就是 &ldquo;vue hooks&rdquo; 的關鍵一環，起到了 <code>react hooks</code> 裡對<strong>生命週期</strong>、<strong>狀態管理</strong>的核心作用。(如 <code>onMounted</code>、<code>ref</code> 等等)。</p> <p><img src="https://live.staticflickr.com/65535/52594591157_e812d218e1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如果按這個標準來看的話，<code>vue</code> 和 <code>react</code> 中 <code>hooks</code> 的定義，似乎都差不多。</p> <p>那麼為什麼要提到是以 <code>&quot;use&quot;</code> 作為開頭的方法呢？</p> <h3 id="命名規範和指導思想">命名規範和指導思想</h3> <p>通常來說，<code>hooks</code> 的命名都是以 <code>use</code> 作為開頭，這個規範也包括了那麼我們自定義的 <code>hooks</code>。</p> <p>為什麼？</p> <p>在 <code>react</code> <a class="link" href="https://zh-hant.reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener" >官方文檔</a>裡，對 hooks 的定義和使用提出了 <span class="focus">一個假設、兩個只在</span> 核心指導思想。</p> <p><img src="https://live.staticflickr.com/65535/52595337519_42d965b186_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><span class="focus">一個假設</span>：假設任何以「<code>use</code>」 開頭並緊跟著一個大寫字母的函數就是一個 <code>Hook</code>。</p> <p><span class="focus">第一個只在</span>：只在 <code>React</code> 函數組件中調用 <code>Hook</code>，而不在普通函數中調用 <code>Hook</code>。(<code>Eslint</code> 通過判斷一個方法是不是大坨峰命名來判斷它是否是 <code>React</code> 函數)</p> <p><span class="focus">第二個只在</span>：只在最頂層使用 <code>Hook</code>，而不要在循環、條件或嵌套函數中調用 <code>Hook</code>。</p> <p>因為約定的力量在於：我們不用細看實現，也能通過命名來了解一個它是什麼。</p> <p>以上 <span class="focus">一個假設、兩個只在</span> 總結自 react 官網：</p> <ul> <li><a class="link" href="https://zh-hant.reactjs.org/docs/hooks-rules.html" target="_blank" rel="noopener" >Hook 的規則</a></li> <li><a class="link" href="https://zh-hant.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce" target="_blank" rel="noopener" >Lint 規則究竟強制了些什麼？</a></li> </ul> <hr> <h2 id="三為什麼我們需要-hooks">三、為什麼我們需要 hooks？</h2> <h3 id="更好的狀態複用">更好的狀態複用</h3> <blockquote> <p>針對的就是你，mixin！</p></blockquote> <p>在 <code>class</code> 組件模式下，狀態邏輯的複用是一件困難的事情。</p> <p>假設有如下需求：</p> <blockquote> <p>當組件實例創建時，需要創建一個 <code>state</code> 屬性：<code>name</code>，並隨機給此 <code>name</code> 屬性附一個初始值。除此之外，還得提供一個 <code>setName</code> 方法。你可以在組件其他地方取得和修改此狀態屬性。<br> 更重要的是：這個邏輯要可以複用，在各種業務組件裡複用這個邏輯。</p></blockquote> <p>在擁有 <code>Hooks</code> 之前，我首先會想到的解決方案一定是 <code>mixin</code>。</p> <p>代碼如下：(此示例採用 vue2 mixin 寫法)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 混入文件：name-mixin.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="nx">genRandomName</span><span class="p">()</span> <span class="c1">// 假裝它能生成隨機的名字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">组件</span><span class="err">：</span><span class="nx">my</span><span class="o">-</span><span class="nx">component</span><span class="p">.</span><span class="nx">vue</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;{{</span> <span class="nx">name</span> <span class="p">}}&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">nameMixin</span> <span class="nx">from</span> <span class="s1">&#39;./name-mixin&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">nameMixin</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 mixins，你可以直接獲得 nameMixin 中所定義的狀態、方法、生命周期中的事件...等 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">setName</span><span class="p">(</span><span class="s1">&#39;Tom&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">3000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>粗略看來，<code>mixins</code> 似乎提供了非常不錯的複用能力，但是，react 官方文檔直接表明：</p> <p><img src="https://live.staticflickr.com/65535/52595501320_19a324aa37_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>為什麼呢？</p> <p>因為 <code>mixins</code> 雖然提供了這種狀態複用的能力，但它的弊端實在太多了。</p> <h4 id="弊端一難以追溯的方法與屬性">弊端一：難以追溯的方法與屬性！</h4> <p>試想一下，如果出現這種代碼，你是否會懷疑人生：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">,</span> <span class="nx">d</span><span class="p">,</span> <span class="nx">e</span><span class="p">,</span> <span class="nx">f</span><span class="p">,</span> <span class="nx">g</span> <span class="p">],</span> <span class="c1">// 當然，這只是表示它混入了很多能力 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 嗯...這個 this.name 來自於誰？我難道要一個個混入看實現？ </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>又或者：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">a</span><span class="p">.</span><span class="nx">js</span> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">b</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">js</span> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">c</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">c</span><span class="p">.</span><span class="nx">js</span> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">d</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 你猜猜看，this.name 來自於誰？ </span></span></span><span class="line"><span class="cl"><span class="c1">// 求求你别再說了，我血壓已经上来了 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="弊端二覆蓋同名貴圈真亂">弊端二：覆蓋、同名？貴圈真亂！</h4> <p>當我同時想混入 <code>mixin-a.js</code> 和 <code>mixin-b.js</code> 以同時獲得它們能力的時候，不幸的事情發生了：</p> <p>由於這兩個 <code>mixin</code> 功能的開發者惺惺相惜，它們都定義了 <code>this.name</code> 作為屬性。</p> <p>這種時候，你會深深懷疑，<code>mixins</code> 究竟是不是一種科學的複用方式。</p> <h4 id="弊端三梅開二度代價很大">弊端三：梅開二度？代價很大！</h4> <p>仍然說上面的例子，如果我的需求發生了改變，我需要的不再是一個簡單的狀態 <code>name</code>，而是分別需要 <code>firstName</code> 和 <code>lastName</code>。</p> <p>此時 <code>name-mixin.js</code> 混入的能力就會非常尷尬，因為我無法兩次 <code>mixins</code> 同一個文件。</p> <p>當然，也是有解決方案的，如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 動態生成 mixin </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">genNameMixin</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">funcKey</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">key</span><span class="p">]</span><span class="o">:</span> <span class="nx">genRandomName</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">funcKey</span><span class="p">]</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">v</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="nx">genNameMixin</span><span class="p">(</span><span class="s1">&#39;firstName&#39;</span><span class="p">,</span> <span class="s1">&#39;setFirstName&#39;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">genNameMixin</span><span class="p">(</span><span class="s1">&#39;lastName&#39;</span><span class="p">,</span> <span class="s1">&#39;setLastName&#39;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>確實通過動態生成 <code>mixin</code> 完成了能力的複用，但這樣一來，無疑更加地增大了程序的複雜性，降低了可讀性。</p> <p>因此一種新的<strong>狀態邏輯複用</strong>，就變得極為迫切了——————它就是 <code>Hooks</code>！</p> <h4 id="hook-的狀態複用寫法">Hook 的狀態複用寫法：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 單個 name 的寫法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 梅開二度的寫法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">firstName</span><span class="p">,</span> <span class="nx">setName</span><span class="o">:</span> <span class="nx">setFirstName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">secondName</span><span class="p">,</span> <span class="nx">setName</span><span class="o">:</span> <span class="nx">setSecondName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><p>相比於 <code>mixins</code>，它們簡直太棒了！</p> <ol> <li>方法和屬性好追溯嗎？這可太好了，誰產生的，哪兒來的一目了然。</li> <li>會有重名、覆蓋問題嗎？完全沒有！內部的變量在閉包內，返回的變量支持定義別名。</li> <li>多次使用，沒開 N 度？你看上面的代碼塊內不就 &ldquo;梅開三度&rdquo; 了嗎？</li> </ol> <p>就衝 <span class="focus">狀態邏輯復用</span> 這個理由，Hooks 就已經香得我口水直流了。</p> <h3 id="代碼組織">代碼組織</h3> <blockquote> <p>熵減，宇宙哲學到編碼哲學。</p></blockquote> <p>項目、模塊、頁面、功能，如何高效而清晰地組織代碼，這一個看似簡單的命題就算寫幾本書也無法完全說清楚。</p> <p>但一個頁面中，N 件事情的代碼在一個組件內互相糾纏確實是在 <code>Hooks</code> 出現之前非常常見的一種狀態。</p> <p>那麼 <code>Hooks</code> 寫法在代碼組織上究竟能帶來怎樣的提升呢？</p> <p><img src="https://live.staticflickr.com/65535/52595337489_c4ff52d48d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>(假設上圖中每一種顏色就代碼一種高度相關的業務邏輯)</p> <p>無論是 <code>vue</code> 還是 <code>react</code>，通過 <code>Hooks</code> 寫法都能做到，將&quot;分散在各種聲明周期裡的代碼塊&quot;，通過 <code>Hooks</code> 的方式將相關的內容聚合到一起。</p> <p>這樣帶來的好處是顯而易見的：<span class="focus">高度聚合，可閱讀性提升</span>。伴隨而來的便是<span class="focus">效率提升，bug變少</span>。</p> <p>按照&quot;物理學&quot;裡的理論來說，這種代碼組織方式，就算是&quot;熵減&quot;了。</p> <h3 id="比-class-組件更容易理解">比 class 組件更容易理解</h3> <blockquote> <p>尤其是 <strong>this</strong>。</p></blockquote> <p>在 <code>react</code> 的 <code>class</code> 寫法中，隨處可見各種各樣的 <code>.bind(this)</code>。(甚至官方文檔裡也有專門的章節描述了&quot;<a class="link" href="https://zh-hant.reactjs.org/docs/faq-functions.html#why-is-binding-necessary-at-all" target="_blank" rel="noopener" >為什麼綁定是必要的？</a>&ldquo;這一問題)</p> <p><code>vue</code> 玩家別笑，<code>computed: { a: () =&gt; { this } }</code> 裡的 <code>this</code> 也是 <code>undefined</code>。</p> <p>很顯然，綁定雖然&quot;必要&rdquo;，但並不是&quot;優點&quot;，反而是&quot;故障高發&quot;地段。</p> <p>但在 <code>Hooks</code> 寫法中，你就完全不必擔心 <code>this</code> 的問題了。</p> <p>因為：</p> <blockquote> <p>本來無一物，何處惹塵埃。</p></blockquote> <p><code>Hooks</code> 寫法直接告別了 <code>this</code>，從&quot;函數&quot;來，到&quot;函數&quot;去。</p> <p>媽媽再也不用擔心我忘記寫 bind 了。</p> <h3 id="友好的漸進式">友好的漸進式</h3> <blockquote> <p>隨風潛入夜，潤物細無聲。</p></blockquote> <p>漸進式的含義是：你可以一點點深入使用。</p> <p>無論是 <code>vue</code> 還是 <code>react</code>，都只是提供了 <code>Hooks</code> API，並將它們的優劣利弊擺在了那裡。並沒有通過無法接受的 <code>break change</code> 來強迫你必須使用 <code>Hooks</code> 去改寫之前的 <code>class</code> 組件。</p> <p>你依然可以在項目裡一邊寫 <code>class</code> 組件，一邊寫 <code>Hooks</code> 組件，在項目的演進和開發過程中，這是一件沒有痛感，卻悄無聲息改變著一切的事情。</p> <p>但是事情發展的趨勢卻很明顯，越來越多的人加入了 <code>Hooks</code> 和 <code>组合式 API</code> 的大軍。</p> <hr> <h2 id="如何開始玩-hooks">如何開始玩 hooks？</h2> <h3 id="環境和版本">環境和版本</h3> <p>在 <code>react</code> 項目中，<code>react</code> 的版本需要高於 <code>16.8.0</code>。</p> <p>而在 <code>vue</code> 項目中，<code>vue3.x</code> 是最好的選擇，但 <code>vue2.6+</code> 配合 <a class="link" href="https://github.com/vuejs/composition-api" target="_blank" rel="noopener" >@vue/composition-api</a>，也可以開始享受 &ldquo;組合式 API&rdquo; 的快樂。</p> <h3 id="react-的-hooks-寫法">react 的 Hooks 寫法</h3> <p>因為 <code>react</code> <code>Hooks</code> 僅支持 &ldquo;函數式&rdquo; 組件，因此需要創建一個函數式組件 <code>my-component.js</code>。</p> <h5 id="my-componentjs">my-component.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useMemo</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;React&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 useState 可以創建一個 狀態屬性 和一個 賦值方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="p">[</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 useEffect 可以對副作用進行處理 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span> <span class="nx">name</span> <span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 useMemo 能生成一個依賴 name 的變量 message </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">useMemo</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`hello, my name is </span><span class="si">${</span><span class="nx">name</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">name</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span> <span class="nx">message</span> <span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>細節可參考 <a class="link" href="https://zh-hant.reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener" >react 官方網站</a></p> <h3 id="vue-的-hooks-寫法">vue 的 Hooks 寫法</h3> <p><code>vue</code> 的 <code>Hooks</code> 寫法依賴於组合式API，因此本例採用 <code>&lt;script setup&gt;</code> 來寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">{{</span> <span class="nx">message</span> <span class="p">}}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">computed</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 定義了一個 ref 對象 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 定義了一個依賴 name.value 的計算屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`hello, my name is </span><span class="si">${</span><span class="nx">name</span><span class="p">.</span><span class="nx">value</span><span class="si">}</span><span class="sb">`</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>很明顯，vue <code>組合式API</code> 裡完成 <code>useState</code> 和 <code>useMemo</code> 相關工作的 API 並沒有通過 <code>useXxx</code> 來命名，而是遵從了 <code>Vue</code> 一脈相承而來的 <code>ref</code> 和 <code>computed</code>。</p> <p>雖然不符合 <code>react Hook</code> 定義的 <code>Hook</code> 約定，但 <code>vue</code> 的 <code>api</code> 不按照 <code>react</code> 的約定好像也並沒有什麼不妥。</p> <p><a class="link" href="https://cn.vuejs.org/api/#composition-api" target="_blank" rel="noopener" >參考網址</a></p> <hr> <h2 id="五開始第一個自定義-hook">五、開始第一個自定義 hook</h2> <p>除了官方提供的 <code>Hooks Api</code>，<code>Hooks</code> 的另外一個重要特質，就是可以自己進行 &ldquo;自定義 Hooks&rdquo; 的定義，從而完成<strong>狀態邏輯</strong>的複用。</p> <p>開源社區也都有很多不錯的基於 <code>Hooks</code> 的封裝，比如 <a class="link" href="https://ahooks.js.org/zh-CN" target="_blank" rel="noopener" >ahooks</a>，又比如 <a class="link" href="https://vueuse.org/" target="_blank" rel="noopener" >VueUse</a></p> <p><img src="https://live.staticflickr.com/65535/52595598223_119a5f0e21_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>那麼，我們應該怎麼開始撰寫 &ldquo;自定義 Hooks&rdquo; 呢？往下看吧！</p> <h3 id="react-玩家看這裡">react 玩家看這裡</h3> <p><a class="link" href="https://zh-hant.reactjs.org/" target="_blank" rel="noopener" >react 官方網站</a>就專門有一個章節講述 &ldquo;<a class="link" href="https://zh-hant.reactjs.org/docs/hooks-custom.html" target="_blank" rel="noopener" >自定義 Hook</a>&quot;。</p> <p>這裡，我們扔用文章開頭那個 <code>useName</code> 的需求為例，希望達到效果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useName</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// 隨機生成一個狀態屬性 name，它有一個隨機名作為初始值 </span></span></span><span class="line"><span class="cl"><span class="c1">// 並且提供了一個可隨時更新該值的方法 setName </span></span></span></code></pre></td></tr></table> </div> </div><p>如果我們要實現上面效果，我們該怎麼寫代碼呢？</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useName</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 這個 useMemo 很關鍵 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">randomName</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useMemo</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">genRandomName</span><span class="p">(),</span> <span class="p">[]);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">]</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useState</span><span class="p">(</span><span class="nx">randomName</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>忍不住要再次感嘆一次，和 <code>mixins</code> 相比，它不僅使用起來更棒，就連定義起來也那麼簡單。</p> <p>可能有朋友會好奇，為什麼不直接這樣寫：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">[</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">setName</span> <span class="p">]</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">useState</span><span class="p">(</span><span class="nx">genRandomName</span><span class="p">())</span> </span></span></code></pre></td></tr></table> </div> </div><p>因為這樣寫是不對的，每次使用該 <code>Hook</code> 的函數組件被渲染一次時，<code>genRandom()</code> 方法就會被執行一次，雖然不影響 <code>name</code> 的值，但存在性能消耗，甚至產生其他 bug。</p> <p>為此，我寫了一個能複現錯誤的 demo，有興趣的朋友可以驗證：</p> <iframe src="https://codesandbox.io/embed/naughty-bash-znffif?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="naughty-bash-znffif" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe> <blockquote> <p>可以通過 React.useState(() =&gt; randomName()) 傳參來避免重複執行，這樣就不需要 useMemo 了！</p></blockquote> <h3 id="vue-玩家看這裡">vue 玩家看這裡</h3> <p><a class="link" href="https://cn.vuejs.org/" target="_blank" rel="noopener" >vue3 官網</a> 沒有關於 自定義 Hook 的玩法介紹，但實踐起來也並不困難。</p> <p>目標也定位實現一個 <code>useName</code> 方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">useName</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nx">genRandomName</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">setName</span> <span class="o">=</span> <span class="p">(</span><span class="nx">v</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">v</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setName</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="vue-和-react-自定義-hook-的差異">vue 和 react 自定義 Hook 的差異</h3> <ul> <li>相似點：總體思路是一致的都遵照著 <strong>定義狀態數據</strong>、<strong>操作狀態數據</strong>、<strong>隱藏細節</strong> 作為核心思路。</li> <li>差異點：组合式 API 和 React 函数组件，有著本質差異： <ul> <li>Vue3 的組件裡，setup 是作為一個早於 &ldquo;created&rdquo; 的生命週期存在的，無論如何，在一個組件的渲染過程中只會進入一次。</li> <li>React 函数组件則完全不同，如果沒有被 memorized，它們可能會被不停地觸發，不停地進入並執行方法，因此需要開銷的心智相比於 Vue 其實是更多的。</li> </ul> </li> </ul> <hr>https://blog.wayne-project.com/2022-12-29/vitest-unit-test/Thu, 29 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-29/vitest-unit-test/<img src="https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/29079/vitest.jpg" alt="Featured image of post 闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://blog.miniasp.com/post/2019/02/18/Unit-testing-Integration-testing-e2e-testing" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10278764" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10298229" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://ithelp.ithome.com.tw/articles/10293368" target="_blank" rel="noopener" >參考網站</a></p> <p>網站建置不是件簡單的事，我們都知道網站做好之後，有好多細節需要兼顧，所以許多公司花了大量的時間與金錢，耗用人力對維護中的網站進行不斷的、重複的人工測試，想達到的目的不外乎是希望網站不要出錯，可以給客戶/使用者最好的網站使用體驗。本篇章說明使用 Vue3 開發的專案，導入 Vitest 進行極速單元測試的體驗！</p> <hr> <h2 id="測試的種類">測試的種類</h2> <p>在不同的測試類型中，所需要保護的面向不太相同，以下是不同測試類型的大致介紹：</p> <h3 id="單元測試-unit-testing">單元測試 (Unit testing)</h3> <p>以程式碼的最小單位進行測試，保護程式邏輯不會在系統維護的過程中遭到破壞，也進一步確保維護中的程式碼品質。</p> <p>這種測試類型通常由開發人員自行撰寫，自己寫的 Code 自己寫測試，有經驗的開發人員可以用非常有效率的方式撰寫單元測試，因為測試範圍小，這種類型的測試通常不需要設立測試環境，因此可以得到較高的撰寫效率，也是所有測試類型中最容易撰寫的測試類型。不過，對於一個沒有經驗的開發者來說，撰寫單元測試可能會耗用大量時間，寫測試程式的時間很有可能會遠大於實際撰寫程式碼的時間，有蠻多人會因為這樣而放棄撰寫單元測試。</p> <h3 id="整合測試-integration-testing">整合測試 (Integration testing)</h3> <p>整合多方資源進行測試，確保模組與模組之間的互動行為正確無誤，也讓不同模組在各自開發維護的過程中不會因為功能調整而遭到破壞。</p> <p>這種類型的測試通常介於單元測試與端對端測試之間，有時候會由專職的測試人員進行開發，但大部分還是由開發團隊中負責特定模組的人來撰寫。有時候單一模組即便完全通過單元測試，獨立運作也正常，但是當需要與其他模組互動時，也是有可能發生錯誤，這時就是整合測試的主要負責領域。</p> <p>以下是未通過整合測試的案例：(兩個元件在整合時發現問題)</p> <p><img src="https://live.staticflickr.com/65535/52593420093_cb58f5a813_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="端對端測試-end-to-end-testing-e2e-testing">端對端測試 (End-to-end testing) (E2E testing)</h3> <p>所謂的「端對端」(E2E) 是指從使用者的角度出發(一端)，對真實系統(另一端)進行測試。</p> <p>這種類型的測試對許多公司來說，就是「人工測試」的主要範圍，因為你可以透過人工對已經完整部屬的網站進行測試，因此可以驗證出系統是否符合客戶的實際需求。這部分也可以透過撰寫 E2E 測試程式來進行自動化，增加測試效率。</p> <p>這裡有個<a class="link" href="https://twitter.com/i/status/1078363114666627072" target="_blank" rel="noopener" >未通過 E2E 測試的案例</a>相當有趣，雖然每個整套系統每個模組都通過所有單元測試與整合測試，但最後組裝起來後，從使用者的角度無法接受！</p> <hr> <h2 id="測試案例中的-3a-模式">測試案例中的 3A 模式</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;餵食，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;拿玩具逗，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;什麼都不做，應該推倒眼前看到的所有東西&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當我們設立好測試情境與測試案例的敘述結構之後，要開始撰寫測試案例內部的實作時就可以利用所謂的 3A 模式來安排。</p> <p><strong>3A</strong> 模式主要是為(<strong>Arrange-Act-Assert</strong>)三個英文字的縮寫，而他們分別代表了：</p> <ul> <li><strong>準備(Arrange)</strong>：準備好受測目標需要的一切，包含依賴的隔離等</li> <li><strong>操作(Act)</strong>：操作受測物目標</li> <li><strong>斷言(Assert)</strong>：預期受測物的某個狀態是否為我們所預期</li> </ul> <p>以上方第一項測試案例來套用 3A 模式的話就會像是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Arrange: 準備好一隻貓 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Act: 摸摸那隻貓咪 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">target</span><span class="p">.</span><span class="nx">touch</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Assert: 觀察那隻貓是否發出呼嚕嚕叫聲 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>那如果這時候你可能會想到每個測試案例都要準備一隻貓貓，對於測試案例來說就會一直不斷地去做「<strong>準備(Arrange)</strong>」這個行為，因此你可能會很直覺的這麼處理：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">touch</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;餵食，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">feed</span><span class="p">(</span><span class="s1">&#39;乾乾&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;拿玩具逗，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">play</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>但這樣的後果就是每個測試案例之間就會有關聯了，比方貓貓其實摸太多下他也會覺得厭煩，從而導致測試失敗：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸下巴，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">touch</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;再摸一次下巴，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">touch</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;再摸一次下巴，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">touch</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> <span class="c1">// 預期呼嚕嚕，結果貓咪生氣了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>而要寫好測試案例的其中幾個概念就是要盡量讓每個測試案例之間「<strong>不受順序影響測試結果</strong>」與「<strong>保持獨立</strong>」。</p> <p>因此大多數的「測試環境」的工具都會提供類似相關的 API 來協助處理測試開始前的「<strong>Setup</strong>」與結束後的「<strong>Teardown</strong>」環節。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 每個測試案例開始前要做的事情 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">target</span><span class="p">.</span><span class="nx">init</span><span class="p">()</span> <span class="c1">// 初始化貓貓的各種狀態 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 每個測試案例結束後要做的事情 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">touch</span><span class="p">()</span> <span class="c1">// 這時候的 target 已經是經過 init() 的版本了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;餵食，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">feed</span><span class="p">(</span><span class="s1">&#39;乾乾&#39;</span><span class="p">)</span> <span class="c1">// 這時候的 target 已經是經過 init() 的版本了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;拿玩具逗，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span><span class="p">.</span><span class="nx">play</span><span class="p">()</span> <span class="c1">// 這時候的 target 已經是經過 init() 的版本了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">speaking</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;呼嚕嚕&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>綜合上述 <strong>3A</strong> 與處理 <strong>Setup</strong> &amp; <strong>Teardown</strong> 的觀念，之後再寫測試案例時，我們可以先從基礎的 <strong>3A</strong> 模式開始撰寫，而到有需要處理重複的事前準備(Setup)與後續清理時(Teardown)，就可以藉由工具來替我們統一處理。</p> <p>看到這邊讀者應該會發現，測試的基本概念其實不難懂，而在瞭解測試的概念後，剩下的就是把概念轉換為測試工具可讀懂測試程式碼就好了！</p> <hr> <h2 id="專案加入-vitest">專案加入 Vitest</h2> <h3 id="在初始化專案過程加入-vitest">在初始化專案過程加入 Vitest</h3> <p>建立專案時若要加入單元測試要注意到的是：Node.js 版本必須為 14 以上，否則 Vitest 會無法順利執行！</p> <p>確認 Node.js 版本後，在要建立專案的父層路徑底下透過終端機指令輸入 <code>npm create vite@latest</code> 來建立一個基於 Vite 所建構的專案，接著終端機會出現一些問題，視專案需求選擇：</p> <p><img src="https://live.staticflickr.com/65535/52593587230_cdfd077261_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>Project name ⇒ 輸入自訂的專案名稱後按下 Enter</li> <li>Select a framework ⇒ 選擇 <code>Vue</code> 後按下 Enter</li> <li>Select a variant ⇒ 選擇 <code>Customize with create-vue</code> 後按下 Enter</li> <li>中間可能還會有 TypeScript, ESLint⋯⋯等等問題，請視專案需要加入</li> <li>Add Vitest for Unit Testing(y/n) ⇒ 選擇 <code>Yes</code> 後按下 Enter <strong>(最重要的部分</strong></li> </ul> <p>回答完上面的問題後，建構工具就會依據剛才答覆的內容，自動生成需要的部分。</p> <p>比方在 <code>Add Vitest for Unit Testing</code> 問題回答 <code>Yes</code> 的話，這時建構工具就會在專案中生成單元測試所需要的相關內容如下：</p> <ul> <li>一個位於 <code>~專案根目錄/src/components/__test__/HelloWorld.spec.js</code> 的測試範例</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">describe</span><span class="p">,</span> <span class="nx">it</span><span class="p">,</span> <span class="nx">expect</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">mount</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vue/test-utils&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">HelloWorld</span> <span class="nx">from</span> <span class="s1">&#39;../HelloWorld.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;HelloWorld&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;renders properly&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">HelloWorld</span><span class="p">,</span> <span class="p">{</span> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;Hello Vitest&#39;</span> <span class="p">}</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;Hello Vitest&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>在 <code>~專案根目錄/package.json</code> 自動新增一個啟動單元測試的 scripts 指令</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test:unit&#34;</span><span class="p">:</span> <span class="s2">&#34;vitest --environment jsdom&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>在 <code>~專案根目錄/package.json</code> 自動新增單元測試所需要的工具們</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;devDependencies&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@vue/test-utils&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.0.2&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;jsdom&#34;</span><span class="p">:</span> <span class="s2">&#34;^20.0.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;vitest&#34;</span><span class="p">:</span> <span class="s2">&#34;^0.23.0&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著如剛剛終端機後方的提示：</p> <p><img src="https://live.staticflickr.com/65535/52593586900_2fbde224e0_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>執行 <code>cd {剛才專案名稱}</code> 切換到專案目錄底下</li> <li>執行 <code>npm install</code> 安裝專案所需要的內容</li> </ul> <p>安裝完畢後，接著就可以執行 <code>npm run dev</code> 確認環境，後續要執行測試的話，執行 <code>npm run test:unit</code> 就能立即運作了。</p> <h3 id="在既有專案中加入-vitest">在既有專案中加入 Vitest</h3> <p>在既有專案中加入 <code>Vitest</code> 來作為執行測試的環境時，需確認專案本身是由 <code>Vite</code>(<code>2.7.10</code> 版本以上)所建構的之外，其 <code>Node.js</code> 版本也必須為 <code>14</code> 以上，否則會無法順利執行測試！</p> <p>確認好必要條件後就可以開始安裝測試工具：</p> <ul> <li><code>vitest</code>：單元測試框架(提供了執行測試的環境、斷言、隔離庫⋯⋯等等功能與 API)</li> <li><code>@vue/test-utils</code>：測試 <code>Vue</code> 元件的工具</li> <li><code>jsdom</code>：讓我們可以在 <code>Node</code> 環境模擬出瀏覽器中的 <code>DOM</code> 環境(方便測試)</li> </ul> <ol> <li>在專案根目錄下執行：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -D vitest @vue/test-utils jsdom </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>新增 npm 執行單元測試的指令：</li> </ol> <h5 id="packagejson">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test:unit&#34;</span><span class="p">:</span> <span class="s2">&#34;vitest --environment jsdom&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這時若心急的執行 <code>npm run test:unit</code> 會發現終端機告訴你 <code>No test files found, exiting with code 1</code>，原因是你<strong>尚未加入任何一個測試案例</strong>。</p> <p>而一開始 <code>Vitest</code> 預設測試的比對規則是 <code>*/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}</code>，簡單來說你在專案底下使用 <code>A.test.js</code> 或是 <code>B.spec.ts</code> 的方式都會被 Vitest 認為是測試程式檔。</p> <p>這時，我們可以在 <code>~專案根目錄/src/components/__test__/</code> 底下新建 <code>HelloWorld.spec.js</code>：</p> <h5 id="srccomponentstesthelloworldspecjs">src/components/<strong>test</strong>/HelloWorld.spec.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">describe</span><span class="p">,</span> <span class="nx">it</span><span class="p">,</span> <span class="nx">expect</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;HelloWorld&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;1 + 1 should be 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>再次執行 <code>npm run test:unit</code> 終端機就會顯示：</p> <p><img src="https://live.staticflickr.com/65535/52593421644_db0c07f63f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>到這裡就算是成功安裝好囉，接下來我們會再把 <code>Vitest Config</code> 初期需要設定的部分調整好後，建置的部分就完成了。</p> <hr> <h2 id="vitest-config-設定方式">Vitest Config 設定方式</h2> <p>Vitest 測試在執行的時候預設會基於原先專案中的 <code>vite.config.js</code> 設定檔，所以沒有需要調整的話不太需要另外設置，需要調整的話 Vitest 也提供了三種方法讓你在不同開發情境下選擇調整方式：</p> <ul> <li>執行 <code>npm</code> 指令時帶參數指定設定檔案路徑</li> <li>直接在原先 <code>vite.config.js</code> 中調整</li> <li>透過 <code>vitest.config.js</code> 檔案調整測試設定</li> </ul> <h3 id="執行-npm-指令時帶參數指定設定檔案路徑">執行 npm 指令時帶參數指定設定檔案路徑</h3> <p>若想要在執行的時候去引入不同的設定檔案，則可以在 <code>package.json</code> 指令中透過 <code>--config</code> 加上設定檔案的路徑(e.g. <code>vitest --config ./src/scripts/vitest.config.js</code> )：</p> <h5 id="packagejson-1">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">//... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test:unit&#34;</span><span class="p">:</span> <span class="s2">&#34;vitest --config ./src/__test__/config/vitest.config.js&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">//... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著該檔案就如設定 <code>vitest.config.js</code> 一樣調整就可以了：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vite&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">vue</span> <span class="nx">from</span> <span class="s1">&#39;@vitejs/plugin-vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// https://vitejs.dev/config/ </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="nx">vue</span><span class="p">(),</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在這邊加入設定 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="在專案中的-viteconfigjs-中調整測試設定">在專案中的 vite.config.js 中調整測試設定</h3> <p>若想在原先的 <code>vite.config.js</code> 中調整測試設定，有兩種方式可以使用：</p> <ul> <li>第一種是直接在最上方加入 <code>/// &lt;reference types=&quot;vitest&quot; /&gt;</code> 後，在 test 屬性中加入設定：</li> </ul> <h5 id="viteconfigjs">vite.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">/// &lt;reference types=&#34;vitest&#34; /&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vite&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在這邊加入設定 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>第二種，把原先的 <code>defineConfig</code> 改由 <code>vitest/config</code> 傳入後，在 <code>test</code> 屬性中加入設定：</li> </ul> <h5 id="viteconfigjs-1">vite.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest/config&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在這邊加入設定 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="透過-vitestconfigjs-檔案調整測試設定">透過 vitest.config.js 檔案調整測試設定</h3> <p>若想區隔開發與測試用的設定時，可以在專案根目錄中新增 <code>vitest.config.js</code> 檔案，這會比原先參考的 <code>vite.config.js</code> 擁有更高的優先權。</p> <p>不想將原先在 <code>vite.config.js</code> 設定都重新全寫一次的話，也可以在 <code>vitest.config.js</code> 中，使用 <code>mergeConfig</code> 來融合 <code>vite.config.js</code> 的設定：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">mergeConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vite&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest/config&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">viteConfig</span> <span class="nx">from</span> <span class="s1">&#39;./vite.config&#39;</span> <span class="c1">// 原先的 vite 設定檔案 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">mergeConfig</span><span class="p">(</span><span class="nx">viteConfig</span><span class="p">,</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在這裡加入測試設定 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}))</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="vitest-config-option">Vitest config option</h2> <p>至於 Vitest config 能調整什麼內容呢，這裡列了幾個常見的調整選項：</p> <ul> <li>include</li> <li>exclude</li> <li>globals</li> <li>environment</li> </ul> <blockquote> <p>註：以下部分資料引用 <a class="link" href="https://cn.vitest.dev/config/" target="_blank" rel="noopener" >Vitest Config Option</a> 並翻譯與補充。</p></blockquote> <h3 id="include">include</h3> <ul> <li>Type： string[]</li> <li>預設值： [&rsquo;**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']</li> </ul> <p>藉由這個欄位我們可以提供 glob 格式讓 vitest 去比對哪些是測試檔案，也可以放入多個條件在陣列中。</p> <h5 id="vitestconfigjs">vitest.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest/config&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">include</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;**/*.spec.js&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個設定主要會影響到後續我們要如何擺放測試程式碼，因此做規劃時可以按需求考量調整。</p> <h3 id="exclude">exclude</h3> <ul> <li>Type： string[]</li> <li>預設值： [&rsquo;<strong>/node_modules/</strong>&rsquo;, &lsquo;<strong>/dist/</strong>&rsquo;, &lsquo;<strong>/cypress/</strong>&rsquo;, &lsquo;<strong>/.{idea,git,cache,output,temp}/</strong>&rsquo;]</li> </ul> <p>藉由這個欄位我們可以提供 glob 格式讓 vitest 去排除哪些不是測試檔案，也可以放入多個條件在陣列中。</p> <h5 id="vitestconfigjs-1">vitest.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest/config&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">exclude</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;**/node_modules/**&#39;</span><span class="p">,</span> <span class="s1">&#39;**/dist/**&#39;</span><span class="p">,</span> <span class="s1">&#39;**/cypress/**&#39;</span><span class="p">,</span> <span class="s1">&#39;**/.{idea,git,cache,output,temp}/**&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>與 <code>include</code> 相反，這次則是要排除哪些路徑不需要尋找是否有測試檔案，其中如果有用到 <code>cypress</code> 做 E2E 測試的話，預設規則中就已經有另外排除了，所以沒必要的話不必特別設置，但可以先記得有這個方便的欄位。</p> <h3 id="globals">Globals</h3> <ul> <li>Type： boolean</li> <li>預設值： false</li> </ul> <p>由於在撰寫測試時，Vitest 預設是需要自己按需要引入對應的方法等等，如果要類似像 Jest 以<strong>全域</strong>的方式注入到測試中，就可以透過在執行時加上 <code>--globals</code> 選項，或是在 <code>vitest config</code> 選項中加入 <code>globals: true</code>。</p> <h5 id="vitestconfigjs-2">vitest.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest/config&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">globals</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>原先設定前，測試程式碼需要如下方引入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">describe</span><span class="p">,</span> <span class="nx">it</span><span class="p">,</span> <span class="nx">expect</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;HelloWorld&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;1 + 1 should be 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>加入 <code>Globals: true</code> 後，就不需要顯示引入 vitest 測試相關的 API，讓測試看起來更乾淨：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;HelloWorld&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;1 + 1 should be 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="environment">environment</h3> <ul> <li>Type： &rsquo;node&rsquo; | &lsquo;jsdom&rsquo; | &lsquo;happy-dom&rsquo; | &rsquo;edge-runtime&rsquo; | string</li> <li>預設值： &rsquo;node&rsquo;</li> </ul> <p>由於 Vitest 本身默認環境 Node.js，因此若要在測試中仿造瀏覽器的應用程式，可以透過類似 <code>jsdom</code> 等工具來取代，而已經介紹過的 npm 指令的寫法之外 <code>-environment jsdom</code> ，還可以在測試檔案上以 docblock 或 comment 風格的方式註記。</p> <p>Docblock 風格：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/** </span></span></span><span class="line"><span class="cl"><span class="cm"> * @vitest-environment jsdom </span></span></span><span class="line"><span class="cl"><span class="cm">**/</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;use jsdom in this test file&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;&lt;p&gt;Hello, HTML!&lt;/p&gt;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;&lt;p&gt;Hello, HTML!&lt;/p&gt;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>Comment 風格：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// @vitest-environment jsdom </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;use jsdom in this test file&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;&lt;p&gt;Hello, HTML!&lt;/p&gt;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;&lt;p&gt;Hello, HTML!&lt;/p&gt;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>寫在 <code>vitest config</code> 中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest/config&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">environment</span><span class="o">:</span> <span class="s1">&#39;jsdom&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來在測試中我們就可以模擬 Web 端環境來操作了。</p> <p>以上是 Vitest 幾個比較常見的設定，其餘的設定後續也會按需求陸續提到，若對於其他設定選項有興趣的，也可以直接到官方文件中的 <a class="link" href="https://cn.vitest.dev/config/" target="_blank" rel="noopener" >config 分頁</a> 查看。</p> <hr> <h2 id="測試的本質">測試的本質</h2> <p>測試的本質究竟是什麼？測試簡單的來說主要就是藉由操控受測物(SUT, System Under Test)，觀察由受測物產生的最終狀態是否如我們所預期的樣子：</p> <p><img src="https://live.staticflickr.com/65535/52593421659_5c5cde3ea2_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>若最終狀態符合我們的預期，對於開發者的含義來說，就是受測物符合了我們的期待。</p> <p>但這點好處看似沒有做「測試」的必要，畢竟我們平時開發能驗收完成不就是符合了規格書的期待嗎？</p> <p>因此為了能夠更加體會測試背後的價值，我們接下來將實際做一個測試工具來來檢驗我們自己所寫的函式。</p> <h3 id="情境舉例">情境舉例</h3> <p>首先，情境假設在專案中有一處邏輯判斷需要檢測傳進來資料的是否為數值(Numeric)，而傳進來的資料可能有 <code>1</code>, <code>null</code>, <code>'100'</code>, <code>NaN</code> 等。</p> <p>我們希望當 <code>1</code> 和 <code>'100'</code> 時，該判斷應該要為 <code>true</code>，而 <code>null</code> 與 <code>NaN</code> 則是要為 <code>false</code>。</p> <p>接下來的目標我們要做的就是：</p> <ol> <li>製作一個簡易的測試工具</li> <li>寫測試案例</li> <li>寫受測程式碼的實作</li> </ol> <h3 id="簡易的測試工具">簡易的測試工具</h3> <p>首先規劃一下工具我最後希望用起來像是這個樣子：</p> <p><code>expect(受測物).toBe(預期狀態)</code></p> <ul> <li>回傳 <code>true</code> 表示測試成功 (即為最終狀態與預期狀態相同)</li> <li>回傳 <code>false</code> 表示測試失敗 (即為最終狀態與預期狀態不同)，然後加上 error 提示預期狀態應該要是什麼，最終狀態目前是什麼。</li> </ul> <p>接著按照上面的設想，先定義了一個宣告函式 <code>expect</code>，參數則是預計輸入受測物(<code>input</code>)與：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">expect</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>再來工具本身呼叫時需回傳了一個叫做 <code>toBe</code> 的驗證方法，該驗證方法的參數為預期目標(<code>expected</code>)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">expect</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">toBe</span> <span class="o">=</span> <span class="p">(</span><span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">toBe</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著設計該驗證的方法，使其能夠回應測試的結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">expect</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">toBe</span> <span class="o">=</span> <span class="p">(</span><span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">input</span> <span class="o">===</span> <span class="nx">expected</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">toBe</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>現在我們透過網頁瀏覽器的 devtool console 控制台，就可以透過該測試工具做簡易的測試案例了：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">expect</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">toBe</span> <span class="o">=</span> <span class="p">(</span><span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">input</span> <span class="o">===</span> <span class="nx">expected</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">toBe</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mi">1</span> <span class="o">===</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mi">2</span> <span class="o">!==</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>但我們希望他能夠在測試案例失敗的時候回應一下當下預期與結果的狀況，後續我們才能針對紀錄的結果做修正。因此我們再修改一下測試方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">expect</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleOnError</span> <span class="o">=</span> <span class="p">(</span><span class="nx">result</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="sb">`測試失敗：預期應該為 </span><span class="si">${</span><span class="nx">expected</span><span class="si">}</span><span class="sb">，結果現在為 </span><span class="si">${</span><span class="nx">result</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">toBe</span> <span class="o">=</span> <span class="p">(</span><span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">input</span> <span class="o">===</span> <span class="nx">expected</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="nx">handleOnError</span><span class="p">(</span><span class="nx">input</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">toBe</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>再執行一個故意寫錯的測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mi">2</span> <span class="o">===</span> <span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52593679828_d73a14781b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在可以看到當測試案例發生錯誤的時候，除了會回傳測試結果之外，還會多個錯誤提醒目前錯誤的原因了！</p> <h3 id="寫測試案例">寫測試案例</h3> <p>在完成測試工具後，現在我們要來寫測試案例，首先我們先寫一個還沒有寫實作部分的判斷函式(<code>isNumeric</code>)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">isNumeric</span> <span class="o">=</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著按照題目所設定的條件，來撰寫測試案例：</p> <blockquote> <p>題目設定：<br> 當 <code>1</code> 和 <code>'100'</code> 時，該判斷應該要為 <code>true</code>，<br> 而 <code>null</code> 與 <code>NaN</code> 則是要為 <code>false</code>。</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">isNumeric</span> <span class="o">=</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="s1">&#39;100&#39;</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">null</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">NaN</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>此時執行後會發現會發現四個案例都報錯，因為目前我們還沒撰寫 <code>isNumeric</code> 的判斷實作，但到這一步測試案例就已經算是寫好了，因為我們的目的是要寫對的測試案例，讓實作去符合。</p> <h3 id="寫受測程式碼的實作">寫受測程式碼的實作</h3> <p>完成測試案例後，我們將要來寫測試程式碼的實作部分：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">isNumeric</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">value</span> <span class="o">-</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> </span></span></code></pre></td></tr></table> </div> </div><p>最後，將整個測試與實作合併起來就會像這樣子：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 測試工具程式碼部分 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">expect</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleOnError</span> <span class="o">=</span> <span class="p">(</span><span class="nx">result</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="sb">`測試失敗：預期應該為 </span><span class="si">${</span><span class="nx">expected</span><span class="si">}</span><span class="sb">，結果現在為 </span><span class="si">${</span><span class="nx">result</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">toBe</span> <span class="o">=</span> <span class="p">(</span><span class="nx">expected</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">input</span> <span class="o">===</span> <span class="nx">expected</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="nx">handleOnError</span><span class="p">(</span><span class="nx">input</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">toBe</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="c1">// 實作程式碼部分 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">isNumeric</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">value</span> <span class="o">-</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 測試案例部分 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="c1">// true，即為通過測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="s1">&#39;100&#39;</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="c1">// true，即為通過測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">null</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> <span class="c1">// true，即為通過測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">NaN</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> <span class="c1">// true，即為通過測試 </span></span></span></code></pre></td></tr></table> </div> </div><p>完成！現在已經不會顯示測試失敗的訊息了，也就表示 <code>isNumeric</code> 方法符合我們的預期囉。</p> <p>而現在假使我想使實作程式碼的部分更加的完善，只要增加合適的測試案例進去就可以增添受測物本身的信賴與穩定度：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="mf">1.123</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="mh">0xFFF</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="s1">&#39;100&#39;</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">undefined</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">null</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">isNumeric</span><span class="p">(</span><span class="kc">NaN</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>甚至將來改寫實作(<code>isNumeric</code>)的時候，既有的測試內容就會提醒你是否違反了之前所寫的測試案例。</p> <hr> <h2 id="測試工具的選擇">測試工具的選擇</h2> <p>上面有提到簡易的測試工具是如何手刻出來的，也稍微談到了手刻測試工具的困難，因此選擇一個適當的測試工具來輔助我們進行測試是有必要性的。</p> <p>但測試工具百百種，許多工具在提供的功能上又重疊，那麼我們該如何選擇工具呢？</p> <p>若是以「<strong>單元測試</strong>」來說的話，我們在撰寫測試程式碼時可能至少就會有以下的需求：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 引入相關檔案 */</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;Hello, World&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;另一個測試案例描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Unit-test!&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;Unit-test!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>測試環境(test runner)：提供上方測試程式碼執行的環境。</li> <li>測試情境(test suite)：如上方的 <code>describe</code>，用來包裹多個測試案例，以及描述測試情境⋯⋯等功能。</li> <li>測試案例(test case)：如上方的 <code>it</code>，用來包裹該測試案例的實際情況，若有錯誤時需讓我們能夠輕易找到是哪個案例發生的⋯⋯等等功能。</li> <li>斷言(Assertion)：如上方的 expect，主要是用來判斷受測物與預期結果是否一致的方法，甚至依據不同判斷方式內部也提供了多種判斷方式，如 .toBe 可用來判斷選取的目標與預期結果是否相等。</li> </ul> <p>除此之外，在必要的情況下甚至會需要：</p> <ul> <li>測試替身(test double)：用來模仿依賴工具或函式原先的功能狀況</li> <li>解析或模擬元件容器</li> <li>模擬瀏覽器中 DOM 的環境</li> </ul> <p>而根據上述需求，就能夠列出一個需求表，來評估各個測試工具是否符合我們測試需要的部分：</p> <blockquote> <p>測試工具列表可參考個框架中的測試建議指南，比方 <a class="link" href="https://cn.vuejs.org/guide/scaling-up/testing.html#component-testing" target="_blank" rel="noopener" >Vue 的測試建議指南</a></p></blockquote> <table> <thead> <tr> <th>需求</th> <th>Vitest</th> <th>Jest</th> <th>Mocha</th> <th>Chai.js</th> <th>Sinon.js</th> <th>Vue-test-utils</th> <th>jsdom</th> </tr> </thead> <tbody> <tr> <td>測試環境(test runner)</td> <td>✔(註1)</td> <td>✔</td> <td>✔</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>測試情境(test suite)</td> <td>✔</td> <td>✔</td> <td>✔</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>測試案例(test case)</td> <td>✔</td> <td>✔</td> <td>✔</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>斷言(Assertion)</td> <td>✔</td> <td>✔</td> <td></td> <td>✔</td> <td></td> <td></td> <td></td> </tr> <tr> <td>測試替身(test double)</td> <td>✔</td> <td>✔</td> <td></td> <td></td> <td>✔</td> <td></td> <td></td> </tr> <tr> <td>解析或模擬元件容器</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>✔</td> <td></td> </tr> <tr> <td>提供模擬 DOM 環境</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>✔</td> </tr> </tbody> </table> <blockquote> <p>註1：Vitest 本身基於 Vite 環境，因此專案若非透過 Vite 所構建的話就無法使用。</p></blockquote> <p>現在透過這個表我們可以很清楚的看見，假設專案是基於 <code>Vite</code> 所建立的那麼我可以選擇下列這個組合：</p> <ul> <li><code>Vitest</code> + <code>Vue-test-utils</code> + <code>jsdom</code></li> </ul> <p>如果專案是基於 <code>Vue-cli</code> 所建立的，那麼就無法使用了 <code>Vitest</code> 作為測試運行的環境了，此時根據表中我們就可以替換為：</p> <ul> <li>方案一：<code>Jest</code> + <code>Vue-test-utils</code> + <code>jsdom</code></li> <li>方案二：<code>Mocha</code> + <code>Chai.js</code> + <code>Sinon.js</code> + <code>Vue-test-utils</code> + <code>jsdom</code></li> </ul> <p>而在做工具替換時，需要注意到的是，不同的測試環境(test runner)可能會對於引入(<code>import</code>)檔案時發生解析上的問題，比方若用到 Vue 中的 <code>SFC</code> 類型檔案作為開發，那在 <code>Jest</code> 做為測試環境時我們就需要另外安裝 <code>vue-jest</code> 來做轉換 <code>SFC</code> 上的處理。</p> <p>當然，上述的需求表只是一個簡單的範例，而隨著撰寫測試的經驗越多，後續慢慢就會瞭解到專案中會需要哪些測試工具來協助我們進行測試，甚至比較各種測試工具的優缺點從而選出最適合團隊的測試工具！</p> <p>現在我們已經了解要如何挑選測試工具了，接下來要開始聊聊撰寫測試案例時應該要如何思考！</p> <hr> <h2 id="決定測試情境與測試案例">決定測試情境與測試案例</h2> <p>再來談談在選擇這些工具後，我們要如何來思考針對「單元測試」的部分，測試情境與測試案例要怎麼撰寫以及需要注意的地方。</p> <h3 id="測試情境test-suite測試案例test-case">測試情境(test suite)測試案例(test case)</h3> <p>提供測試環境的工具一般會給予測試情境與測試案例的相關 API，而測試情境與案例最主要的用意是用來幫助我們規劃與整理整個測試邏輯，並且在我們測試案例錯誤的時候同時提供相對應的資訊。</p> <p>接下來我們以「<strong>貓咪作為元件</strong>」為故事主軸來談談單元測試的思路會是怎麼撰寫。</p> <p>首先我們假設「<strong>貓咪</strong>」元件會提供下列功能：</p> <ul> <li>發出呼嚕嚕叫聲</li> <li>推倒眼前看到的所有東西</li> </ul> <p>而以使用者角度上來看，我們會對「<strong>貓咪</strong>」做出這些事情：</p> <ul> <li>摸摸</li> <li>餵食</li> <li>拿玩具逗</li> </ul> <p>接著我們就可以以元件作為情境來定義出各種使用上的測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;餵食，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;拿玩具逗，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;什麼都不做，應該推倒眼前看到的所有東西&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>但真實的測試案例不會這麼簡單，總會有一些例外狀況，那麼測試案例應該要包含哪些要素比較好？</p> <h3 id="案例路徑happy-pathsad-pathbad-path">案例路徑(happy path、sad path、bad path)</h3> <p>在設定測試案例時，總會有百百種情況，但是我們不可能每個都寫出來，而根據測試案例的類型主要可以分為三種路徑：</p> <ul> <li>Happy Path：在我們定義所謂「<strong>正常的使用狀況</strong>」下，針對「<strong>正確的內容</strong>」，我們預期應該要做出的反應。</li> <li>Sad Path：在我們定義所謂「<strong>正常的使用狀況</strong>」下，針對「<strong>錯誤的內容</strong>」，我們預期應該要做出的反應。</li> <li>Bad Path：在我們定義所謂「<strong>錯誤</strong>」的使用狀況下，我們預期應該要做出的反應。</li> </ul> <p>同樣以貓被摸摸作為例子來看，假設對於貓來說能夠接受摸摸的情況只限於「<strong>頭與下巴</strong>」，而喜歡被摸的部分只有「<strong>下巴</strong>」，那麼測試案例路徑就可以這麼定義：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Happy Path </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸下巴，應該會發出「呼嚕嚕」聲&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Sad Path </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸頭，應該沒反應&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Bad Path </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸肚子，應該拋出錯誤&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="路徑優先度">路徑優先度</h3> <p>而以各個路徑優先度來說，我們應當盡可能的先完善 Happy Path 與 Sad Path 的各種案例，因為對於實際專案上來說，這些內容是我們預期元件或函式本身應提供的內容。</p> <p>然而 Bad Path 通常是建立已知哪些情況會是「不正確的使用」，我們只能就已知的狀況來預防。然而，這一部分其實再怎麼縝密，都還是會有極其例外的事情發生：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;貓咪&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Bad Path </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸肚子，應該拋出錯誤&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸尾巴，應該拋出錯誤&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸手，應該拋出錯誤&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;摸摸腳，應該拋出錯誤&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 舉不完 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>因此透過測試來作防禦所有不合理的行為是不治本的行為，我應該從受測物本身提供的操作或是產品規劃上來去考量相對治本的方式；比方在「<strong>貓咪</strong>」元件上透過程式設計的部分，規劃「<strong>摸摸</strong>」行為只開放「**頭」**與「<strong>下巴</strong>」的部位，從開發階段就阻止其他開發者誤用「<strong>摸摸</strong>」方法，到最後真的有其必要特別拋出時才針對這一部分寫 Bad Path 案例。</p> <p>最後，再用一個實際一點的例子說明，假設今天有個登入的表單元件，那麼最簡單預期會有的案例就會是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;登入元件&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Happy Path </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;輸入正確帳號密碼，應登入到ＯＯ頁面&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Sad Path </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;只輸入帳號，應該顯示請輸入密碼&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;只輸入密碼，應該顯示請輸入帳號&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;輸入錯誤帳號密碼，應該顯示登入資訊錯誤&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>以上就是測試情境與測試案例最基本需要瞭解的部分，接著我們來關注於測試案例中內部應該要如何來撰寫。</p> <hr> <h2 id="撰寫測試程式碼的前言">撰寫測試程式碼的前言</h2> <h3 id="撰寫測試程式碼需保持的心境">撰寫測試程式碼需保持的心境</h3> <p>談到撰寫測試，不得不提到 Robert Cecil Martin 有本經典的《無瑕的程式碼：敏捷軟體開發技巧守則》，作者在其中針對了程式碼的部分提了很多優良的建議，不論是撰寫程式碼中的命名、函式參數等等做探討，也在實際的案例中做一些討論與重構，最後回顧那些程式碼中的氣味、清理程式碼，一氣呵成。</p> <p>而其中有一個章節最主要就是在講有關「單元測試」的部分，也就是系列文前言提到「被推坑」的部分，我把裡面的概念結合我的經驗來重新闡述一次：</p> <p>若帶著單純學習的心態來看待測試程式碼，其實很容易把它當作一項輔助工具在處理，覺得沒有也沒什麼關係，甚至礙手礙腳的，甚至可能覺得還要特地花了不少心力來瞭解它，但這是一體兩面的。</p> <p>若你把它當作產品中的一部分就會發現，雖然開發時會受到測試程式碼的「限制」，但同時他其實也是在做「守護」產品程式碼這件事情；甚至因為有了「可信賴的測試」，所以當我們在進行「重構」等等調整時也才能更有信心地去處理。</p> <p>因此只要確保我們在適當的時機加入它，那麼它就能夠帶來可觀的後續效益，而既然他能夠替我們帶來效益，那我們對待測試程式碼的態度其實也應該要同理產品程式碼，可是除了讓測試程式碼如同產品程式碼一樣保持「整潔」與「可讀性」之外，我們還有什麼辦法呢？</p> <p>對於這個問題 Martin 給了一個撰寫測試碼的優良準則，那就是 F.I.R.S.T 法則。</p> <h3 id="first-法則">F.I.R.S.T 法則</h3> <p>F.I.R.S.T 法則顧名思義其實就是五個英文單字的縮寫，他們分別是：</p> <ul> <li>Fast</li> <li>Independent</li> <li>Repeatable</li> <li>Self-Validating</li> <li>Timely</li> </ul> <h4 id="fast快">Fast(快)</h4> <p>簡單來說就是快，因為快才能讓我們快速重複大量地檢驗產品程式碼；這意味著我們在測試程式碼中有可能會遇到要 call API 的情況，那麼我們可以將其隔離並立刻回傳我們預定好的資料來減少等待回應的時間。</p> <h4 id="independent獨立">Independent(獨立)</h4> <p>如我們上一篇文章所提到的，每個測試案例應該要互相獨立，彼此不受干擾之外，甚至連執行順序上都不會影響到最終結果。</p> <h4 id="repeatable可重複">Repeatable(可重複)</h4> <p>可重複性主要提的就是不論在什麼設備狀況下，應該都要保持著一致的結果，這樣我們才能排除掉其他不必要的原因，專注在發生問題的程式碼上。</p> <h4 id="self-validating能自我驗證">Self-Validating(能自我驗證)</h4> <p>測試的最終狀態應該要能夠顯示「通過與否」，而這一部分測試工具或框架都會幫我們處理好，甚至都還有提供額外的 diff 差異讓我們快速查看錯誤的地方。</p> <h4 id="timely即時">Timely(即時)</h4> <p>測試程式碼要盡可能的與產品程式碼同進退，如果測試程式碼落後產品程式碼太多，測試程式碼會越來越難跟上產品程式碼的步調。</p> <p>而根據對待測試程式碼心態的優良法則，在撰寫測試程式碼時就能更容易體會到他的魅力。</p> <hr> <h2 id="describe--it-與-輔助-api">describe &amp; it 與 輔助 API</h2> <h3 id="describe--it-基礎用法">describe &amp; it 基礎用法</h3> <p>稍早有提到的測試情境與測試案例在 <code>Vitest</code> 工具中主要便是透過 <code>describe</code> 與 <code>it</code>(或 <code>test</code>) 來撰寫，而他們的用意除了規劃測試的脈絡之外，最主要是用來包裝斷言結果的資訊：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span><span class="nx">describe</span><span class="p">,</span> <span class="nx">it</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vitest&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境的描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;第一個測試案例的描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>假設在終端機執行上方的測試程式碼時，依據工具預設設定會在終端機顯示「錯誤的相關資訊」與「綜合結果」。</p> <p>錯誤的相關資訊：</p> <p><img src="https://live.staticflickr.com/65535/52593161161_6eaf044f61_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>FAIL：發生斷言錯誤檔案路徑 + 情境描述 + 案例描述(視當下錯誤所屬的情境與案例)。</li> <li>AssertionError：發生斷言錯誤的原因，與發生錯誤的段落。</li> <li>Expected：預期結果。</li> <li>Received：實際結果。</li> </ul> <p>綜合結果：</p> <p><img src="https://live.staticflickr.com/65535/52593421709_7ab116b4c3_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>Test Files：總共測試了幾隻測試檔案，並顯示成功、失敗與跳過的數量。</li> <li>Tests：總共測了幾個測試案例，並顯示成功、失敗與跳過的數量。</li> <li>Start：測試開始時間。</li> <li>Duration：測試過程總共耗費時間。</li> </ul> <p>而除了上述基本用法之外，在同一個測試情境中也能容納數個測試案例。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境的描述&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;第一個測試案例的描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;第二個測試案例的描述&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>甚至測試情境較為複雜的情況，測試情境(<code>describe</code>)也允許巢狀的方式來建構測試：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;父層情境&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;基於父層情境的情境一&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;基於父層情境的情境二&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;出現提示寄件者姓名與電話將直接註冊成會員&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>相反地，若在簡單的情境的之下，只有測試案例也是允許的方式之一：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="describe--it-輔助-api">describe &amp; it 輔助 API</h3> <p>除了上述的基本用法之外，透過 <code>describe</code> 與 <code>it</code> 撰寫測試的過程中也能透過<code>輔助的 API</code> 來整理測試程式碼：</p> <ul> <li><code>.only</code>：測試情境、測試案例皆可使用</li> <li><code>.skip</code>：測試情境、測試案例皆可使用</li> <li><code>.todo</code>：測試情境、測試案例皆可使用</li> <li><code>.fails</code>：測試案例才能使用</li> </ul> <h4 id="only">only</h4> <p>若在<strong>測試情境</strong>用了此指令，則在同個測試檔案中只會執行帶有 <code>.only</code> 的測試情境，而其餘測試情境底下所有的測試案例將會被跳過(<code>skipped</code>)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="s1">&#39;測試情境 1&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境 3&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span></code></pre></td></tr></table> </div> </div><p>若在<strong>測試案例</strong>中使用，則除了帶有 <code>.only</code> 之外的測試案例都將會被跳過：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境 1&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境 3&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="skip">skip</h4> <p>測試情境或測試案例被標注時，將自動跳過該範疇內的測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">.</span><span class="nx">skip</span><span class="p">(</span><span class="s1">&#39;測試情境 1&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;測試情境 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">.</span><span class="nx">skip</span><span class="p">(</span><span class="s1">&#39;測試案例&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="cm">/* */</span> <span class="p">})</span> <span class="c1">// skipped </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="todo">todo</h4> <p>測試情境或測試案例被標注時，同樣將自動跳過該範疇內的測試案例，但 <code>todo</code> 含義比較接近待加入測試的區塊，並且將來若產出報告時也會特別整理出還有哪些地方需要補上測試。</p> <h4 id="fails">fails</h4> <p>最後一個介紹的是測試案例才能使用的輔助 API，還記得列測試案例時的 <code>sad path</code> 嗎？當測試案例應該要失敗的時候就可以透過 <code>fails</code> 顯性標註他們：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">.</span><span class="nx">fails</span><span class="p">(</span><span class="sb">`&#39;1&#39; + &#39;1&#39; should not to be &#39;11&#39;`</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="o">+</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">,</span> <span class="s1">&#39;1&#39;</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;11&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然你也可以單純藉由斷言中的 <code>.not</code> 達到同樣的效果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="sb">`&#39;1&#39; + &#39;1&#39; should not to be &#39;11&#39;`</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="o">+</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">,</span> <span class="s1">&#39;1&#39;</span><span class="p">)).</span><span class="nx">not</span><span class="p">.</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;11&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>以上便是測試程式碼中測試情境與測試案例的部分，有關於輔助 API 的部分有些內容不一定會使用的到，若想更加瞭解所有可用的部分可以參考 Vitest <a class="link" href="https://cn.vitest.dev/api/#describe" target="_blank" rel="noopener" >測試情境</a> 與 <a class="link" href="https://cn.vitest.dev/api/#test" target="_blank" rel="noopener" >測試案例</a> 的文件囉。</p> <hr> <h2 id="準備setup與清理teardown">準備(Setup)與清理(Teardown)</h2> <p>經過了基本的測試情境與測試案例語法，加上簡單的斷言語法 <code>expect().toBe()</code> 就能夠測試許多簡單的東西了，然而在測試過程中有時會遇到大量重複的「<strong>前置操作</strong>」或是每次測試後「<strong>需要清理測試中的環境</strong>」，這時我們可以透過 <code>Vitest</code> 提供的 <code>Setup</code> &amp; <code>Teardown</code> API 來處理：</p> <ul> <li>beforeEach：在每個測試案例執行前呼叫一次。</li> <li>beforeAll：在所有測試案例執行前呼叫一次。</li> <li>afterEach：在每個測試案例執行後呼叫一次。</li> <li>afterAll：在所有測試案例執行後呼叫一次。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 針對測試案例重新初始化 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">initTestEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="setup--teardown-api-的範疇">Setup &amp; Teardown API 的範疇</h3> <p><code>Setup</code> &amp; <code>Teardown</code> API 「<strong>所有</strong>」的定義是根據當下的範疇(<code>context</code>)來決定，除了測試檔案本身之外，使用 <code>describe</code> 來定義測試情境也會形成一個 <code>context</code>，因此假如測試情境有巢狀的情況如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">history</span> <span class="o">=</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;父層情境&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeAll</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;beforeAll - 父層情境&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;beforeEach - 父層情境&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterAll</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;afterAll - 父層情境&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;afterEach - 父層情境&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;子層情境 A&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeAll</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;beforeAll - 子層情境 A&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;beforeEach - 子層情境 A&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterAll</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;afterAll - 子層情境 A&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;afterEach - 子層情境 A&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;案例 1&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;子層情境 A 案例 1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;案例 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;子層情境 A 案例 2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;子層情境 B&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeAll</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;beforeAll - 子層情境 B&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;beforeEach - 子層情境 B&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterAll</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;afterAll - 子層情境 B&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;afterEach - 子層情境 B&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;案例 1&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;子層情境 B 案例 1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;案例 2&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">history</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;子層情境 B 案例 2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>此時將透過 <code>console.log(history)</code> 查看並歸納整理就能得到以下結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">--- 進入測試程式碼本身的 Context </span></span><span class="line"><span class="cl">--- 進入父層情境的 Context </span></span><span class="line"><span class="cl">beforeAll - 父層情境 </span></span><span class="line"><span class="cl">--- 進入子層情境 A 的 Context </span></span><span class="line"><span class="cl">beforeAll - 子層情境 A </span></span><span class="line"><span class="cl">beforeEach - 父層情境 </span></span><span class="line"><span class="cl">beforeEach - 子層情境 A </span></span><span class="line"><span class="cl">子層情境 A 案例 <span class="m">1</span> // 執行 情境 A 案例 <span class="m">1</span> 的時間點 </span></span><span class="line"><span class="cl">afterEach - 子層情境 A </span></span><span class="line"><span class="cl">afterEach - 父層情境 </span></span><span class="line"><span class="cl">beforeEach - 父層情境 </span></span><span class="line"><span class="cl">beforeEach - 子層情境 A </span></span><span class="line"><span class="cl">子層情境 A 案例 <span class="m">2</span> // 執行 情境 A 案例 <span class="m">2</span> 的時間點 </span></span><span class="line"><span class="cl">afterEach - 子層情境 A </span></span><span class="line"><span class="cl">afterEach - 父層情境 </span></span><span class="line"><span class="cl">afterAll - 子層情境 A </span></span><span class="line"><span class="cl">--- 離開子層情境 A 的 Context </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">--- 進入子層情境 B 的 Context </span></span><span class="line"><span class="cl">beforeAll - 子層情境 B </span></span><span class="line"><span class="cl">beforeEach - 父層情境 </span></span><span class="line"><span class="cl">beforeEach - 子層情境 B </span></span><span class="line"><span class="cl">子層情境 B 案例 <span class="m">1</span> // 執行 情境 B 案例 <span class="m">1</span> 的時間點 </span></span><span class="line"><span class="cl">afterEach - 子層情境 B </span></span><span class="line"><span class="cl">afterEach - 父層情境 </span></span><span class="line"><span class="cl">beforeEach - 父層情境 </span></span><span class="line"><span class="cl">beforeEach - 子層情境 B </span></span><span class="line"><span class="cl">子層情境 B 案例 <span class="m">2</span> // 執行 情境 B 案例 <span class="m">2</span> 的時間點 </span></span><span class="line"><span class="cl">afterEach - 子層情境 B </span></span><span class="line"><span class="cl">afterEach - 父層情境 </span></span><span class="line"><span class="cl">afterAll - 子層情境 B </span></span><span class="line"><span class="cl">--- 離開子層情境 B 的 Context </span></span><span class="line"><span class="cl">afterAll - 父層情境 </span></span><span class="line"><span class="cl">--- 離開父層情境的 Context </span></span><span class="line"><span class="cl">--- 離開測試程式碼本身的 Context </span></span></code></pre></td></tr></table> </div> </div><p>因此我們在使用這類 API 時要注意當下 <code>context</code> 所包含的範圍。</p> <h3 id="避免誤區在-expect-後做清掃處理">避免誤區：在 expect 後做清掃處理</h3> <p>除了上面的用法，有時候你可能會認為既然要清掃，那我何不在斷言後處理就好呢：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">().</span><span class="nx">toBe</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在這裡做清除 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">resetTestingEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>這麼做當你在測試案例都是通過的情況下都沒有問題，但是一但某個測試案例發生了錯誤，由於測試案例就會在斷言時拋出 <code>AssertionError</code> 後停止，因此很有可能因為一個測試案例壞了導致接下來所有測試都受到影響：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">().</span><span class="nx">toBe</span><span class="p">()</span> <span class="c1">// AssertionError，這個測試案例就停在這了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">resetTestingEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在沒有經過 `resetTestingEnv()` 下進行測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在沒有經過 `resetTestingEnv()` 下進行測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在沒有經過 `resetTestingEnv()` 下進行測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 在沒有經過 `resetTestingEnv()` 下進行測試 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>因此較佳的作法還是使用 <code>Setup</code> &amp; <code>Teardown</code> API 來處理會比較好：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setupTestingEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">afterEach</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resetTestingEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="避免過度使用-setup--teardown-api">避免過度使用 Setup &amp; Teardown API</h3> <p>一名對於測試領域頗有研究的 Kent C. Dodds 在 twitter 上發表：</p> <p><img src="https://live.staticflickr.com/65535/52593679893_c0af1b393a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>許多人一看了紛紛表示中槍，心想這不就是我在寫的東西嗎？因此發文一出不少人就好奇那麼到底為什麼上方的用法會比較好呢？且讓我們從抽象光譜介紹起。</p> <h3 id="抽象光譜the-spectrum-of-abstraction">抽象光譜(The Spectrum of Abstraction)</h3> <p>Kent C. Dodds <a class="link" href="https://kentcdodds.com/blog/aha-testing" target="_blank" rel="noopener" >提出</a>在抽象光譜中主要分成了三種概念：</p> <ul> <li>ANA：Absolutely No Abstraction</li> <li>AHA：Avoid Hasty Abstraction</li> <li>DRY：Don&rsquo;t Repeat Yourself</li> </ul> <p>而後並將此概念應用在 Testing 身上並分別解說了三種抽象型態下的測試的優劣分析。</p> <p>其中我們往往一開始學習可能因為對語法不熟稔，因此可能會寫出 ANA Testing 形式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 準備 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 操作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 斷言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 準備：重複的準備類似的內容 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 操作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 斷言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 準備：重複的準備類似的內容 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 操作 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 斷言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>而隨著測試經驗越來越熟稔之後，我們可能會想盡各種方法來「節省」撰寫測試上的時間，甚至參考 DRY 心法寫出這樣的測試：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 統一的事前準備 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">testEnv</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TestEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">testEnv</span><span class="p">.</span><span class="nx">init</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 直接操作事先準備好的內容 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 斷言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 直接操作事先準備好的內容 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 斷言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>而這樣的下場將會在複雜的巢狀測試情境下越來越難以閱讀與調整：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">testEnv</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TestEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">testEnv</span><span class="p">.</span><span class="nx">init</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">testEnv</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TestEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">testEnv</span><span class="p">.</span><span class="nx">init</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">testEnv</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TestEnv</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">testEnv</span><span class="p">.</span><span class="nx">init</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... 等等 這裡的初始準備有什麼 ？？？ </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>而除了巢狀情境本身是個議題之外，Kent C. Dodds 認為我們應該兼容的方式去看待他，也就是說他不排斥我們去做抽象這件事情，但是首先要做的應該是先保持單純，直到我們看到足夠多共同的案例來分析能抽取出的部分，如果不夠多那甚至原先 <code>inline</code> 的測試案例版本也比過多抽象的版本要好得多。</p> <blockquote> <p><a class="link" href="https://kentcdodds.com/blog/avoid-nesting-when-youre-testing" target="_blank" rel="noopener" >避免過度巢狀情境</a></p></blockquote> <p>最後，共用的部分除非真的有必要透過 <code>setup</code> &amp; <code>teardown</code> 實作處理，否則共用的部分大多也可以透過諸如<code>工廠模式</code>(<code>factory pattern</code>)的形式產生。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 擷取自我某個專案內的元件測試 */</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">factory</span> <span class="o">=</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">createSpy</span><span class="o">:</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span><span class="nx">createTestingPinia</span><span class="p">(</span><span class="nx">options</span><span class="p">)],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nx">useMainStore</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">wrapper</span><span class="p">,</span> <span class="nx">store</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>所以往後若有使用到這類 API 時不仿先思考一下我們真的需要嗎，還是有更加優雅的方式能夠解決重複的問題呢？</p> <hr> <h2 id="斷言語法與-matchers">斷言語法與 Matchers</h2> <p>斷言(Assertion)在程式設計領域中主要指的是「針對一個結果指出為真(<code>true</code>)或假(<code>false</code>)」的邏輯判斷式。</p> <p>而在測試中斷言主要指的部分如先前提到的 3A 模式中的(Assert)步驟：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 準備：Arrange </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Hello, Unit-test!&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 操作：Act </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;button&#34;]&#39;</span><span class="p">).</span><span class="nx">click</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 斷言：Assert </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;content&#34;]&#39;</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;Hello, Unit-test!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>其中斷言(Assert)階段中在語法的部分則會使用到所謂的「Matchers」，以上方程式碼為例的話就會是 <code>expect()</code> 後方的 <code>toBe()</code> 這個語法，而不同的「Matchers」能比對的東西也不太一樣，瞭解什麼時候該選什麼 Matchers 基本上寫斷言的時候就能信手捻來。</p> <h3 id="斷言語法">斷言語法</h3> <p>依據不同工具或框架所提供的斷言語法(Assertion)，對於 Matchers 來說就會有不同的寫法，所以首先我們要先來簡單認識一下不同工具之間的斷言語法風格上的差異，挑選能接受的斷言風格後再來看該風格的 Matcher 用法，而風格的部分以下將依序介紹：</p> <ul> <li>Chai 斷言庫</li> <li>Jest 框架中的斷言語法</li> <li>Vitest 中所能用的部分</li> </ul> <h4 id="chai-assertion">Chai Assertion</h4> <p><a class="link" href="https://www.chaijs.com/" target="_blank" rel="noopener" >Chai.js</a> 本身是一個專注在提供斷言語法的工具庫，它提供了<a class="link" href="https://www.chaijs.com/guide/styles/" target="_blank" rel="noopener" >三種寫法</a>：</p> <ul> <li><code>Assert</code>(TDD style)</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;Chai/Assert&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="s1">&#39;Orange tabby cat&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="s1">&#39;fat&#39;</span> </span></span><span class="line"><span class="cl"> <span class="nx">assert</span><span class="p">(</span><span class="nx">x</span> <span class="o">!==</span> <span class="nx">y</span><span class="p">,</span> <span class="s1">&#39;Orange tabby cat is not fat&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><code>Expect</code>(BDD style)</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;Chai/Expect&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">]).</span><span class="nx">to</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">an</span><span class="p">(</span><span class="s1">&#39;array&#39;</span><span class="p">).</span><span class="nx">that</span><span class="p">.</span><span class="nx">does</span><span class="p">.</span><span class="nx">not</span><span class="p">.</span><span class="nx">include</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><code>Should</code>(BDD style)：透過擴充物件 <code>prototype</code> 給予 <code>should</code> 屬性的方式使我們可以直接鏈式加入 Matchers 在定義好的變數後。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 選擇一：在斷言前需要呼叫 `chai.should` 方法， </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">chai</span> <span class="nx">from</span> <span class="s1">&#39;chai&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">chai</span><span class="p">.</span><span class="nx">should</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 選擇二：直接引入下方 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="s1">&#39;chai/register-should&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 底下的測試案例就能直接鏈式加上 Matchers </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;Chai/Assert&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">foo</span> <span class="o">=</span> <span class="s1">&#39;bar&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">beverages</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">tea</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;chai&#39;</span><span class="p">,</span> <span class="s1">&#39;matcha&#39;</span><span class="p">,</span> <span class="s1">&#39;oolong&#39;</span><span class="p">]</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">.</span><span class="nx">should</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">a</span><span class="p">(</span><span class="s1">&#39;string&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">.</span><span class="nx">should</span><span class="p">.</span><span class="nx">equal</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">.</span><span class="nx">should</span><span class="p">.</span><span class="nx">have</span><span class="p">.</span><span class="nx">lengthOf</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">beverages</span><span class="p">.</span><span class="nx">should</span><span class="p">.</span><span class="nx">have</span><span class="p">.</span><span class="nx">property</span><span class="p">(</span><span class="s1">&#39;tea&#39;</span><span class="p">).</span><span class="kd">with</span><span class="p">.</span><span class="nx">lengthOf</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="jest-assertion">Jest Assertion</h4> <p>以 <a class="link" href="https://jestjs.io/" target="_blank" rel="noopener" >Jest</a> 測試框架中所提供的斷言方法則只有：</p> <ul> <li><code>Expect</code>(BDD style)：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;expect/ BDD style&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>需特別注意的是 Jest 中的 <code>expect</code> 與 Chai 的 <code>expect</code> 所提供的 Matchers 是不一樣的。</p></blockquote> <h4 id="vitest">Vitest</h4> <p>以 <a class="link" href="https://cn.vitest.dev/" target="_blank" rel="noopener" >Vitest</a> 測試工具來說，斷言(Assertion)語法的部分他內建了 Chai 斷言庫與兼容了 Jest 中的斷言語法，因此主要就是在以上介紹的四種寫法中選擇一種使用！</p> <p>而接下來主要著重介紹 Jest Assertion 中的 <code>expect</code> 語法的 Matchers 要如何使用！</p> <h3 id="vitestjest-expect-matchers">Vitest(Jest expect Matchers)</h3> <p>要學習這類 Matchers 除了把 API doc 翻一輪之外，最快的方式之一就是針對不同的測試結果目標類型去歸納，而依照經驗常見種類有：</p> <ul> <li>常用：toBe, not</li> <li>純值比對(Primitive)類型：String, Number, Boolean&hellip;, etc.</li> <li>陣列比對與檢查</li> <li>物件比對與檢查</li> <li>監聽函式</li> <li>快照</li> <li>Error</li> </ul> <p>由於 Matchers 繁多，所以從常用跟概念容易搞混的幾個開始先介紹起：</p> <h4 id="常用">常用</h4> <ul> <li>toBe：對資料類型為純值(Primitive Value)來說就是比對值相等</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// failed </span></span></span></code></pre></td></tr></table> </div> </div><p>對非純值(Non-Primitive Value)來說就是比記憶體位置(reference)是否相等</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj2</span> <span class="o">=</span> <span class="nx">obj</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="nx">obj2</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">({}).</span><span class="nx">toBe</span><span class="p">({})</span> <span class="c1">// failed </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// `not`：用於反轉斷言的邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">not</span><span class="p">.</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// failed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">not</span><span class="p">.</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="純值資料類型比對">純值資料類型比對</h4> <ul> <li>toBeCloseTo：處理浮點數運算時</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mf">0.1</span> <span class="o">+</span> <span class="mf">0.2</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mf">0.3</span><span class="p">)</span> <span class="c1">// failed 符點溢出，結果應該會為 0.30000000000000004 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mf">0.1</span> <span class="o">+</span> <span class="mf">0.2</span><span class="p">).</span><span class="nx">toBeCloseTo</span><span class="p">(</span><span class="mf">0.3</span><span class="p">)</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toBeGreaterThan、toBeGreaterThanOrEqual、toBeLessThan、toBeLessThanOrEqual</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">toBeGreaterThan</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">5</span><span class="p">).</span><span class="nx">toBeGreaterThanOrEqual</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">6</span><span class="p">).</span><span class="nx">toBeLessThan</span><span class="p">(</span><span class="mi">7</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">6</span><span class="p">).</span><span class="nx">toBeLessThanOrEqual</span><span class="p">(</span><span class="mi">6</span><span class="p">)</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toBeDefined、toBeUndefined</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">a</span><span class="p">).</span><span class="nx">toBeDefined</span><span class="p">()</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">b</span><span class="p">).</span><span class="nx">toBeUndefined</span><span class="p">()</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toBeTruthy、toBeFalsy</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">()</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">toBeFalsy</span><span class="p">()</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toBeNull、toBeNaN</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="kc">null</span><span class="p">).</span><span class="nx">toBeNull</span><span class="p">()</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toMatch：字串或正則比對</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="s1">&#39;0912345678&#39;</span><span class="p">).</span><span class="nx">toMatch</span><span class="p">(</span><span class="sr">/^09[0-9]{8}$/</span><span class="p">)</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="陣列比對與檢查">陣列比對與檢查</h4> <ul> <li>toContain：陣列是否含有目標值</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">([</span><span class="s1">&#39;1&#39;</span><span class="p">,</span> <span class="s1">&#39;2&#39;</span><span class="p">]).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">([</span><span class="s1">&#39;1&#39;</span><span class="p">,</span> <span class="s1">&#39;2&#39;</span><span class="p">]).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;4&#39;</span><span class="p">)</span> <span class="c1">// failed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toContainEqual： 陣列是否含有該值(類型為純值時檢驗是否相等，類型為物件時檢驗結構是否全等)</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">([</span><span class="s1">&#39;1&#39;</span><span class="p">,</span> <span class="s1">&#39;2&#39;</span><span class="p">]).</span><span class="nx">toContainEqual</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">([{</span> <span class="nx">val</span><span class="o">:</span> <span class="s1">&#39;1&#39;</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">val</span><span class="o">:</span> <span class="s1">&#39;2&#39;</span> <span class="p">}]).</span><span class="nx">toContainEqual</span><span class="p">({</span> <span class="nx">val</span><span class="o">:</span> <span class="s1">&#39;1&#39;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// failed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">([{</span> <span class="nx">val</span><span class="o">:</span> <span class="s1">&#39;1&#39;</span><span class="p">,</span> <span class="nx">something</span><span class="o">:</span> <span class="s1">&#39;other&#39;</span> <span class="p">}]).</span><span class="nx">toContainEqual</span><span class="p">({</span> <span class="nx">val</span><span class="o">:</span> <span class="s1">&#39;1&#39;</span> <span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveLength：確認其屬性的長度是否相等</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="s1">&#39;12&#39;</span><span class="p">).</span><span class="nx">toHaveLength</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">]).</span><span class="nx">toHaveLength</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">({</span> <span class="nx">length</span><span class="o">:</span> <span class="mi">2</span> <span class="p">}).</span><span class="nx">toHaveLength</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="物件比對與檢查">物件比對與檢查</h4> <ul> <li>toEqual：比對物件結構是否相同，而非比對參照來源(reference)，而結構中若值為 undefined 會忽略</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">A</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">B</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="nx">secret</span><span class="o">:</span> <span class="kc">undefined</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">A</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">B</span><span class="p">)</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toStrictEqual：與 toEqual 類似，但 undefined 不會被忽略</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">A</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">B</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">C</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="nx">secret</span><span class="o">:</span> <span class="kc">undefined</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">A</span><span class="p">).</span><span class="nx">toStrictEqual</span><span class="p">(</span><span class="nx">B</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">A</span><span class="p">).</span><span class="nx">toStrictEqual</span><span class="p">(</span><span class="nx">C</span><span class="p">)</span> <span class="c1">// failed </span></span></span></code></pre></td></tr></table> </div> </div><p>甚至 Class 所創造的物件與物件實字(Object Literals)相比也視為不同。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">MockClass</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">(</span><span class="nx">num</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">num</span> <span class="o">=</span> <span class="nx">num</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">({</span><span class="nx">num</span><span class="o">:</span> <span class="mi">1</span><span class="p">}).</span><span class="nx">toStrictEqual</span><span class="p">({</span><span class="nx">num</span><span class="o">:</span> <span class="mi">1</span><span class="p">})</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="k">new</span> <span class="nx">MockClass</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">toStrictEqual</span><span class="p">({</span><span class="nx">num</span><span class="o">:</span> <span class="mi">1</span><span class="p">})</span> <span class="c1">// failed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveProperty：檢查物件含有屬性與其屬性值</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">&#39;num&#39;</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">&#39;num&#39;</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">&#39;num&#39;</span><span class="p">,</span> <span class="mi">200</span><span class="p">)</span> <span class="c1">// failed </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>toMatchObject： 檢查物件的子層</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">nested</span><span class="o">:</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">200</span> <span class="p">},</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toMatchObject</span><span class="p">({</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">})</span> <span class="c1">// passed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toMatchObject</span><span class="p">({</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">200</span> <span class="p">})</span> <span class="c1">// failed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toMatchObject</span><span class="p">({</span> <span class="nx">nested</span><span class="o">:</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">100</span> <span class="p">}</span> <span class="p">})</span> <span class="c1">// failed </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">expect</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">toMatchObject</span><span class="p">({</span> <span class="nx">nested</span><span class="o">:</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="mi">200</span> <span class="p">}</span> <span class="p">})</span> <span class="c1">// passed </span></span></span></code></pre></td></tr></table> </div> </div><p>繼續講解下列幾個比較特別的 Matcher</p> <h4 id="監聽函式">監聽函式</h4> <p>在測試的過程中，有時候我們不僅只是斷言受測物(SUT, System Under Test)的狀態，有時候可能會對受測目標的「依賴物」(DOC, Depended-on Component)狀態有興趣，而這時我們就無法單純以 Matchers 來斷言，因為我們需要監聽依賴物前後的變化。</p> <p>而在程式測試領域中，測試替身(<code>test double</code>)主要就是負責處理這一類非受測物本身所做的事情，並且在需要時還能幫我們紀錄必要的資訊。</p> <p>假若我們今天測試案例受測物本身會去呼叫到的依賴目標是個「函式」時，這時我們可以透過 <code>Vitest</code> 所提供的 <code>vi.fn()</code> 來模仿(spy)函式。</p> <p><code>vi.fn()</code> 本身會回傳一個實體(<code>CallableMockInstance</code>)，在這個實體中會記錄著有關測試函式時會需要的資料與方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* </span></span></span><span class="line"><span class="cl"><span class="cm"> called: false, </span></span></span><span class="line"><span class="cl"><span class="cm"> callCount: 0, </span></span></span><span class="line"><span class="cl"><span class="cm"> results: [], </span></span></span><span class="line"><span class="cl"><span class="cm"> calls: [], </span></span></span><span class="line"><span class="cl"><span class="cm"> impl: [Function (anonymous)], </span></span></span><span class="line"><span class="cl"><span class="cm"> reset: [Function: i], </span></span></span><span class="line"><span class="cl"><span class="cm"> nextError: [Function (anonymous)], </span></span></span><span class="line"><span class="cl"><span class="cm"> nextResult: [Function (anonymous)], </span></span></span><span class="line"><span class="cl"><span class="cm"> restore: [Function: w], </span></span></span><span class="line"><span class="cl"><span class="cm"> ... </span></span></span><span class="line"><span class="cl"><span class="cm">*/</span> </span></span></code></pre></td></tr></table> </div> </div><p>因此將受測的目標函式放入 <code>vi.fn</code> 中，後續只要測試過程中如果測試目標去調用了已被 Spy 過的函式時，<code>CallableMockInstance</code> 就會幫我們紀錄相關的資訊，接著我們就可以使用斷言語法相關的 Matcher 去比對我們預期的結果，比方說：</p> <ul> <li>toHaveBeenCalled：斷言函式有被呼叫過</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">(</span><span class="nx">sayHi</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveBeenCalledTimes：斷言函式被呼叫過幾次</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">(</span><span class="nx">sayHi</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveBeenCalledTimes</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveBeenCalledWith：斷言函式被呼叫時所帶的參數</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">(</span><span class="nx">sayHi</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;Hello, Unit-Test!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="s1">&#39;Hello, Unit-Test!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveReturned：斷言函式呼叫後應該至少要返回值一次</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> <span class="o">+</span> <span class="s1">&#39; Hello, Spy!&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">sayHi</span><span class="p">(</span><span class="nx">val</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;Hello, Unit-Test!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveReturned</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveReturnedTimes：斷言函式經過操作後應該要返回值幾次</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">sayHi</span><span class="p">(</span><span class="nx">val</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;Nice to meet you!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;See you again!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveReturnedTimes</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveLastReturnedWith：斷言函式經過操作後最後應該要返回的值</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">sayHi</span><span class="p">(</span><span class="nx">val</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;Nice to meet you!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;See you again!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveLastReturnedWith</span><span class="p">(</span><span class="s1">&#39;See you again!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveNthReturnedWith：斷言函式經過操作後第 N 次應該要返回的值</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">sayHi</span><span class="p">(</span><span class="nx">val</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;Nice to meet you!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;See you again!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveNthReturnedWith</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;Nice to meet you!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>toHaveReturnedWith：斷言函式呼叫後返回的值</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sayHi</span> <span class="o">=</span> <span class="p">(</span><span class="nx">something</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">something</span> <span class="o">+</span> <span class="s1">&#39; Hello, Spy!&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">spyOnSayHi</span> <span class="o">=</span> <span class="nx">vi</span><span class="p">.</span><span class="nx">fn</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">sayHi</span><span class="p">(</span><span class="nx">val</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">spyOnSayHi</span><span class="p">(</span><span class="s1">&#39;Hello, Unit-Test!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">spyOnSayHi</span><span class="p">).</span><span class="nx">toHaveReturnedWith</span><span class="p">(</span><span class="s1">&#39;Hello, Unit-Test! Hello, Spy!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>而測試替身(test double)除了像是 vi.fn() 這類間諜類型(Spy)之外，還有許多不同的測試替身，它們在測試中都有各自的用途來協助我們更好的測試。</p> <h3 id="快照測試snapshot-testing與快照-matchers">快照測試(Snapshot Testing)與快照 matchers</h3> <h4 id="jest-snapshot">Jest Snapshot</h4> <p>在 Jest 的 <a class="link" href="https://jestjs.io/docs/snapshot-testing" target="_blank" rel="noopener" >Snapshot Testing</a> 說明文件的定義中主要指的是用來防止 UI 出現尚未預期的變化：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">data-test</span><span class="o">=</span><span class="s">&#34;link&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;http://ithelp.ithome.com.tw&#34;</span><span class="p">&gt;</span> Ithelp <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">mount</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vue/test-utils&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;渲染連結&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">([</span><span class="nx">data</span><span class="o">-</span><span class="nx">test</span><span class="o">=</span><span class="s2">&#34;link&#34;</span><span class="p">])).</span><span class="nx">toMatchSnapshot</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>然而這邊的變化，並非你所想像的把視覺畫面給照相下來比對像素或比例的那種視覺回歸測試(Visual Regression Testing)，而是藉由將目標元件透過渲染(Render)元件產生了一個 DOM 結構的文字，並在測試程式檔路徑底下的 <code>__snapshots__</code> 資料夾生成一個 <code>.snap</code> 檔案來做紀錄：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">exports</span><span class="p">[</span><span class="sb">`渲染連結`</span><span class="p">]</span> <span class="o">=</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb">&lt;a </span></span></span><span class="line"><span class="cl"><span class="sb"> data-test=&#34;link&#34; </span></span></span><span class="line"><span class="cl"><span class="sb"> href=&#34;http://ithelp.ithome.com.tw&#34; </span></span></span><span class="line"><span class="cl"><span class="sb">&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> Ithelp </span></span></span><span class="line"><span class="cl"><span class="sb">&lt;/a&gt; </span></span></span><span class="line"><span class="cl"><span class="sb">`</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>截至 Jest Snapshot 頁面中的<a class="link" href="https://jestjs.io/docs/snapshot-testing" target="_blank" rel="noopener" >程式碼</a></p></blockquote> <p>在第二次執行測試的時候，就會再次做一次同樣的流程，而這次所產生的結果會與先前的 <code>.snap</code> 紀錄做比對。</p> <p>假設比對上有落差就會拋出錯誤：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">- Snapshot - 1 </span></span><span class="line"><span class="cl">+ Received + 1 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span> </span></span><span class="line"><span class="cl"><span class="na">-</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;http://ithelp.ithome.com.tw&#34;</span> </span></span><span class="line"><span class="cl"><span class="err">+</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://ithelp.ithome.com.tw&#34;</span> </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> Ithelp </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>藉由這個比對機制從而實現「<strong>防止 UI 出現尚未預期的變化</strong>」的功能。</p> <h4 id="vitest-snapshot">Vitest Snapshot</h4> <p>而前面有提到 <code>Vitest</code> 本身兼容了 <code>Jest</code> 的斷言(assertion)語法，所以快照(Snapshot)的 matcher 自然也是不能放過。</p> <p>在 <code>Vitest</code> 中主要兼容的 matcher 部分有：</p> <ul> <li>toMatchSnapshot</li> <li>toMatchInlineSnapshot</li> </ul> <p>基本上概念與 Jest Snapshot 相似，都是在做結構快照這件事情，然而 <code>Vitest</code> 文件部分則是沒有特地強調 UI 的部分，而是關注在值(<code>value</code>)的比對。</p> <p>因此我們單純放入一個陣列物件</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;cat snapshot&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Orange&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Blank&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">toMatchSnapshot</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>.snap</code> 的結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">exports</span><span class="p">[</span><span class="sb">`component &gt; cat snapshot 1`</span><span class="p">]</span> <span class="o">=</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> [ </span></span></span><span class="line"><span class="cl"><span class="sb"> { </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;age&#34;: 4, </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;name&#34;: &#34;Orange&#34;, </span></span></span><span class="line"><span class="cl"><span class="sb"> }, </span></span></span><span class="line"><span class="cl"><span class="sb"> { </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;age&#34;: 6, </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;name&#34;: &#34;Blank&#34;, </span></span></span><span class="line"><span class="cl"><span class="sb"> }, </span></span></span><span class="line"><span class="cl"><span class="sb"> ] </span></span></span><span class="line"><span class="cl"><span class="sb">`</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><p>甚至也可以引入 JSON 檔案來做快照：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Area</span> <span class="nx">from</span> <span class="s1">&#39;./area.json&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;static json snapshot&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">Area</span><span class="p">).</span><span class="nx">toMatchSnapshot</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然元件快照也是能做的：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">mount</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@vue/test-utils&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;snapshot&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;content&#34;]&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">toMatchSnapshot</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>而以上快照部分如果你覺得要生成一個檔案來管理有點囉唆，那麼你可以透過 <code>toMatchInlineSnapshot</code> 來處理這類的需求，其差別在於生成的位置會是在 <code>toMatchInlineSnapshot()</code> 函式本身裡面：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;cat snapshot&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Orange&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Blank&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 原先 toMatchInlineSnapshot 內沒有任何東西 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 在執行測試後就會將快照內容自動生成在 toMatchInlineSnapshot 裡 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">toMatchInlineSnapshot</span><span class="p">(</span><span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> [ </span></span></span><span class="line"><span class="cl"><span class="sb"> { </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;age&#34;: 4, </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;name&#34;: &#34;Orange&#34;, </span></span></span><span class="line"><span class="cl"><span class="sb"> }, </span></span></span><span class="line"><span class="cl"><span class="sb"> { </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;age&#34;: 6, </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;name&#34;: &#34;Blank&#34;, </span></span></span><span class="line"><span class="cl"><span class="sb"> }, </span></span></span><span class="line"><span class="cl"><span class="sb"> ] </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>最後，如果遇到變更的部分是我們所預期的時候，此時就需要更新快照的部分，可以在執行測試的 <code>watch</code> 模式時按下 <code>u</code> 鍵，就將新的快照保存起來，或是透過新增 <code>npm scripts</code> 指令來執行命令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test:update&#34;</span><span class="p">:</span> <span class="s2">&#34;vitest -u&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="error">Error</h3> <p>最後介紹到的則是<strong>錯誤類型</strong>的 Matcher：</p> <ul> <li>toThrowError</li> <li>toThrowErrorMatchingSnapshot</li> <li>toThrowErrorMatchingInlineSnapshot</li> </ul> <p>先前我們有提到測試案例預想的三個路徑(Happy path、sad Path、Bad Path)，<code>Bad Path</code> 從產品角度上來說 End-User 使用上的錯誤，應該考慮從產品使用角度上去思考要怎麼協助他們去使用，所以不應該為了拋出錯誤而拋出。</p> <p>但假設今天拋出錯誤的情境是較為合理的部分，比方是針對開發人員在開發時期誤用導致的錯誤⋯⋯等等情況，這時我們就可以透過這一類 Matcher 來處理。</p> <p>而使用上要比較小心的是，受測目標若會拋出錯誤則要透過 wrap function 的形式來處理，否則拋出的錯誤會造成測試案例的斷言錯誤：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">food</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span><span class="p">(</span><span class="nx">name</span> <span class="o">===</span> <span class="s1">&#39;小黃瓜&#39;</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">&#39;我不吃小黃瓜&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">food</span><span class="p">(</span><span class="s1">&#39;小黃瓜&#39;</span><span class="p">)).</span><span class="nx">toThrowError</span><span class="p">(</span><span class="s1">&#39;我不吃小黃瓜&#39;</span><span class="p">)</span> <span class="c1">// 若這樣寫的話裡頭的 Error 會導致測試案例失敗 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">food</span><span class="p">(</span><span class="s1">&#39;小黃瓜&#39;</span><span class="p">)).</span><span class="nx">toThrowError</span><span class="p">(</span><span class="s1">&#39;我不吃小黃瓜&#39;</span><span class="p">)</span> <span class="c1">// 需要透過這種方式才能正確斷言 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="元件測試">元件測試</h2> <h3 id="vue-test-utils-與元件測試">Vue Test Utils 與元件測試</h3> <p>接著，若我們想進一步在專案中測試 Vue 元件的話，我們除了基於前面的概念與語法之外，還得依靠能夠幫助能夠解析 Vue 元件並與其模擬互動的工具：</p> <ul> <li>Vue Test Utils</li> <li>Cypress</li> <li>Vue Testing Library</li> </ul> <p>而本篇將著重在介紹要怎麼透過 <a class="link" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils</a> 來進行與 Vue 元件有關的「<strong>元件測試</strong>」，因此本文要來介紹一下 Vue Test Utils 與元件測試是在做什麼，又這又跟單元測試有什麼關係呢。</p> <h3 id="vue-test-utils">Vue-Test-Utils</h3> <p>首先區辨一下他與我們目前用到的測試工具的各自用處，才能更瞭解接下學的內容是由哪個工具負責的，將來有必要查閱資料時就能更清楚的區別他們。</p> <p><a class="link" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils</a> 主要是作為提供測試 Vue 元件的相關工具集，讓我們能更輕易的模擬操作元件來進行測試，但本身並沒有運行測試環境(test runner)的功能，因此我們會需要藉由 Vitest 來作為測試環境以及相關的測試情境案例與斷言 Matcher；除此之外我們還需要用來在 Node 環境中模擬瀏覽器環境的 <code>jsdom</code> 來協助處理有關 DOM 上的操作，如此一來才能順利地使用 <a class="link" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils</a>。</p> <p>而版本的部分要特別注意到，由於 <a class="link" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils</a> 為了相容 Vue 不同版本之間的 API 因此我們要安裝對應的版本未來才不會出錯：</p> <ul> <li>Vue 2：安裝 <a class="link" href="https://v1.test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils 1</a></li> <li>Vue 3：安裝 <a class="link" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils 2</a></li> </ul> <p>確認版本沒問題後，模擬元件的部分交給 <a class="link" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener" >Vue Test Utils</a> 基本上就沒問題了，但關於「元件測試」目標主要是要測試什麼東西呢？</p> <h3 id="元件測試的目標">元件測試的目標</h3> <p>測試本質主要是在預期結果與實際是否相等，而在元件測試中作為受測物的元件，其本身主要是負責 UI 上的一切內容，因此我們測試目標在著重於它的「<strong>畫面</strong>」與「<strong>行為</strong>」上是否如我們所預期。</p> <p>因此，在測試案例的操作過程中(也就是 3A 中的 Action 階段)，我們主要是藉由操作對元件介面中的：</p> <ul> <li>data</li> <li>props</li> <li>slot</li> <li>provide</li> <li>directive</li> <li>Event(瀏覽器中的互動行為)</li> <li>API response(模擬回應)</li> </ul> <p>來判斷下列是否如我們所預期：</p> <ul> <li>DOM 渲染結果</li> <li>emit 行為</li> </ul> <h3 id="好的元件測試">好的元件測試</h3> <p>當然，做到上面的事項基本上已經可以算是個元件測試了，若我們想讓元件測試寫得更好，除了先前在單元測試提過的一些概念之外，還有一些值得注意的事項：</p> <p>首先，在撰寫元件測試時的角度，我們並沒有要當個全能全知的神，而是作為「<strong>使用者的角度</strong>」關注元件介面上來預期結果，所以在測試的過程中我們要「<strong>避免又寫了一次實作</strong>」。</p> <p>另外，如果內部邏輯過於複雜時，我們則應該先抽取(extract)其邏輯，透過 composables 的寫法來引入，如此一來我們就能「<strong>專注於在元件本身的行為上</strong>」，另外也能「<strong>針對 composable 的邏輯單獨做測試</strong>」。</p> <p>最後，若元件中有使用到 API 的部分，同樣的我們應該把它當作成是他提供給元件去使用，而元件主要是「<strong>接收回應</strong>」後就能自行處理後續的內容了，所以在測試上我們應該專注在 API 提供了什麼給元件，透過模擬資料的部分來達成先前提過的 FIRST 原則中的 Fast，最後斷言元件最終的行為是否如預期即可。</p> <p>現在我們知道 Vue Test Utils 在做什麼了，也知道「元件測試」在做什麼了，但這跟單元測試又有什麼關係呢？</p> <h3 id="元件測試與單元測試的關係">元件測試與單元測試的關係</h3> <p>在官方文件中<a class="link" href="https://cn.vuejs.org/guide/scaling-up/testing.html#component-testing" target="_blank" rel="noopener" >測試章節</a>有提到，元件測試(component testing)在顆粒度上其實是高於單元測試(unit testing)的，甚至可以被視為是整合測試(integration testing)的一種形式。</p> <p>而坊間有不少文章習慣以單元測試來統稱這一類測試，最主要原因是單元測試的定義為「軟體設計」中最小單位的程式或行為，在 Vue 專案中，若以 Vue SFC 類型檔案(.vue)來看其實測試元件也算是最小單位沒錯。</p> <p>所以從意義上來劃分單元測試與元件測試，某方面來說很容易出現歧異(甚至單元測試本身就已經有分為獨立型與社交型寫法了)。</p> <p>然而為了接下來在本系列文中方便區分指的測試對象是哪部分，我將名稱含義分為：</p> <ul> <li>元件測試：針對 Vue 元件所進行的測試</li> <li>單元測試：針對元件引入函式、類別等 utils、helper 與 composable 的測試。</li> <li>工具本身：Pinia 測試、Vue Router 測試。</li> </ul> <hr> <h2 id="元件測試容器wrapper">元件測試：容器(Wrapper)</h2> <h3 id="mount">mount</h3> <p>當我們需要在測試案例中引入元件時，我們可以透過 Vue Test Utils 提供的方法 <code>mount</code> 來包裹 Vue 元件。而 <code>mount</code> 所返回的內容除了 Vue 實體之外，還包含了一些方法（Wrapper methods）可以讓我們操作元件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">component</span> <span class="nx">from</span> <span class="s1">&#39;@/component/BaseButton.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should emit clicked event after clicking button&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Arrange </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Act </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Assert </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">export</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">emitted</span><span class="p">()).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">&#39;clicked&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>假若我們希望在渲染元件的時候同時帶著預設參數與狀態時（如 <code>props</code>、<code>slots</code>&hellip;等），就能夠透過 <code>mount</code> 方法的第二個參數傳入設定：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Hello, Props!&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mounted</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;Hello, Props!&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>而關於方法（Wrapper methods）與選項（Wrapper options）的部分，會根據元件使用 <strong>Options API</strong> / <strong>Composition API</strong> / <strong>setup script</strong> 語法糖 而有不同的用法與限制，因此使用方法與差異的部分將在後續測試各種元件時陸續會提到。</p></blockquote> <h3 id="shallowmount">shallowMount</h3> <p>在正常的專案開發下，元件時常會嵌入了另一個元件：</p> <h5 id="rootcomponentvue">RootComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ParentComponent</span><span class="p">&gt;&lt;/</span><span class="nt">ParentComponent</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="parentcomponentvue">ParentComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ChildComponent</span><span class="p">&gt;&lt;/</span><span class="nt">ChildComponent</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ChildComponent</span><span class="p">&gt;&lt;/</span><span class="nt">ChildComponent</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ChildComponent</span><span class="p">&gt;&lt;/</span><span class="nt">ChildComponent</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childcomponentvue">ChildComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">baby</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>RootComponent 的元件測試：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">component</span> <span class="nx">from</span> <span class="s1">&#39;./RootComponent.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should render corrent content&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;baby&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;baby&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;baby&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>但如此一來若我們在測試 RootComponent 元件的時候，就有可能因為底下的 ChildComponent 元件更改了內容導致 RootComponent 測試案例也跟著失敗：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">baby</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若「有意」想要避免這種情況發生，此時就可以將 <code>mount</code> 替換掉，改使用 <code>shallowMount</code> 來作為容器使用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">component</span> <span class="nx">from</span> <span class="s1">&#39;./RootComponent.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should render corrent content&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">shallowMount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>shallowMount</code> 與 <code>mount</code> 在使用上幾乎大同小異，而唯一有差別在於他會將原先內部有用到元件的部分以替換為一個模擬元件（stub component），並且命名改以烤肉串命名法（<code>Kebab case</code>）並且在最末端加上 <code>-stub</code> 供辨識：</p> <h5 id="rootcomponentvue-1">RootComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ParentComponent</span><span class="p">&gt;&lt;/</span><span class="nt">ParentComponent</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>經 shallowMount 渲染結果變成：</p> <h5 id="rootcomponentvue-2">RootComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">parent-component-stub</span><span class="p">&gt;&lt;/</span><span class="nt">parent-component-stub</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來在撰寫測試案例時，就可以關注在當下「<strong>父層元件</strong>」與「<strong>子層元件</strong>」的之間的內容，而不管「<strong>子層元件</strong>」底下所發生的事情：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">component</span> <span class="nx">from</span> <span class="s1">&#39;./RootComponent.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should render corrent content&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">shallowMount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="sb">`&lt;parent-component-stub&gt;&lt;/parent-component-stub&gt;`</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="容器的方法wrapper-methods---選擇器">容器的方法（Wrapper methods） - 選擇器</h2> <p>在進行測試時，前面章節有提到我們會使用 <code>mount</code> 或 <code>shallowMount</code> 來包裹元件，從而得到一個 <code>VueWrapper</code>，而在這個 <code>VueWrapper</code> 裡頭有許多實用的容器方法（Wrapper methods），雖然官方文件中並沒有特意分類，但大意上可分為幾種方法：</p> <ul> <li>查詢、選擇指定的元素、元件等選擇器</li> <li>取得目標屬性或內容（class, attribute）</li> <li>觸發 DOM 事件（如滑鼠點擊、鍵盤輸入與按鍵⋯⋯等）</li> <li>取得 emit 事件、設置 data 或 prop、甚至觸發元件 <code>unmmount</code> 等 Vue API 相關的方法</li> </ul> <p>這邊著重在於介紹選擇器的方法使用與測試應用，最後補上相關的討論：</p> <ul> <li>元素、元件選擇器</li> <li>判斷目標是否存在：<code>exists</code> 與 <code>isVisible</code></li> <li>使用 <code>data-* attribute</code></li> </ul> <h3 id="選擇器">選擇器</h3> <p>在進行元件測試（component testing）的過程中，有時我們可能只想關注在某個特定 DOM 或元件的相關資訊時，這時我們就可以透過容器中的選擇器方法來尋找，而選擇器根據選取對象的不同，主要分為：</p> <ul> <li>元素（element）選擇器</li> <li>元件（component）選擇器</li> </ul> <h4 id="元素選擇器">元素選擇器</h4> <p>元素選擇器語法基本上有兩種寫法，一種是基於元素的 <code>refs</code>，另一種則是 <code>querySelector</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;dogcat&#34;</span><span class="p">&gt;</span><span class="o">???</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;dog&#34;</span><span class="p">&gt;</span><span class="nx">科基</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;cat&#34;</span><span class="p">&gt;</span><span class="nx">橘貓</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;cat&#34;</span><span class="p">&gt;</span><span class="nx">黑黑</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* ref */</span> </span></span><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">({</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">&#39;span&#39;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* querySelector */</span> </span></span><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;#dog&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.cat&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>而容器方法有關選取元素的選擇器一共分為三種：</p> <ul> <li>find</li> <li>findAll</li> <li>get</li> </ul> <p>這三種選擇器在選取到目標後主要都是返回 <code>DOMWrapper</code>，此時我們就可以在串連其他容器方法（Wrapper methods）如 <code>classes</code> 或 <code>text</code> 等等來取得屬性或內容資訊，只是返回的結果內容會有些差異。</p> <p>比方 <code>find</code>、<code>findAll</code> 的部分主要差別在於 <code>findAll</code> 返回的內容會被放置於陣列當中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;dog&#34;</span><span class="p">&gt;</span><span class="nx">科基</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;cat&#34;</span><span class="p">&gt;</span><span class="nx">橘貓</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;cat&#34;</span><span class="p">&gt;</span><span class="nx">黑黑</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>而我們可以透過像這樣的方式取得陣列內的資訊：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should be display correct content&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span><span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;#dog&#39;</span><span class="p">)</span> <span class="c1">// &lt;DOMWrapper&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;科基&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should be display correct content&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span><span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">findAll</span><span class="p">(</span><span class="s1">&#39;.cat&#39;</span><span class="p">)</span> <span class="c1">// &lt;DOMWrapper&gt;[] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;橘貓&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;黑黑&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注意：透過 findAll 斷言時是「<strong>有序</strong>」的，很容易受到順序改變而導致測試案例失敗，除非撰寫測試案例目標之一就是要確保順序不會調動，否則改用 find 斷言會比較不容易受影響。</p></blockquote> <p>而 <code>find</code> 與 <code>get</code> 的差別在於 <code>find</code> 找不到目標時返回的是 <code>{}</code> 後續若仍繼續操作、斷言時才會由拋出錯誤（由 <code>ErrorWrapper</code> 提供）；然而 <code>get</code> 一開始若找不到目標時就直接拋出錯誤（<code>throw Error</code>）了。</p> <p>根據 <a class="link" href="https://github.com/vuejs/test-utils/blob/f61b8aeb84352b29e29666326939531cd81c3bd6/src/errorWrapper.ts" target="_blank" rel="noopener" >ErrorWrapper 原始碼</a>，可以看見他主要是針對容器方法中的 <code>exists()</code> 會返回 <code>false</code>。</p> <p>因此在針對找不到元素的測試案例合法的寫法可以這麼做：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;.something-that-does-not-exist&#39;</span><span class="p">)).</span><span class="nx">toThrowError</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.something-that-does-not-exist&#39;</span><span class="p">).</span><span class="nx">exists</span><span class="p">()).</span><span class="nx">toBeFalsy</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="find-判斷元素陷阱">find 判斷元素陷阱</h4> <p>魔鬼藏在細節裡，或許你可能會想說為什麼不直接用 <code>find</code> 還要再另外透過 <code>exists</code> 判斷呢，讓我們看看一個案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">無關緊要的東西</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果這時你這麼寫了：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.something-that-does-not-exist&#39;</span><span class="p">)).</span><span class="nx">toBeTruthy</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="c1">// 通過 ！？ </span></span></span></code></pre></td></tr></table> </div> </div><p>原因在於 <code>find</code> 在找不到的情況下目標的情況所返回的值會是 <code>ErrorWrapper</code> 物件，所以透過 <code>toBeTruthy</code> 斷言就會通過。</p> <blockquote> <p>而為了避免這種情況發生，官方文件其實只有輕描淡述地說道：</p> <blockquote> <p><strong>As a rule of thumb</strong>, always use get except when you are asserting something doesn&rsquo;t exist. In that case use find.<br> 但上方經驗考量在哪，只有在追了他們相關的 <a class="link" href="https://github.com/vuejs/test-utils/issues/138" target="_blank" rel="noopener" >issue</a> 才會逐漸明白考量的根據，而關於這部分，甚至開發團隊未來可能也會考慮將 find 方法給拔掉，剩下 exists 本身，但礙於這會是個 breaking change 的做法，所以在 vue-test-utils 跳大版本號之前應該都會暫時維持原樣。</p></blockquote></blockquote> <h4 id="元件component選擇器">元件（component）選擇器</h4> <ul> <li>findComponent</li> <li>findAllfindComponents (注意有個 s）</li> <li>getComponent</li> </ul> <p>原則上使用方式與元素選擇器差不多，只是選取語法上除了 <code>refs</code> 與 <code>querySelector</code> 語法之外，還多了：</p> <ul> <li>Component name： <code>findComponent({name: '元件名稱'})</code></li> <li>將 import SFC 直接放入方法中： <code>findComponent(Component)</code></li> </ul> <p>但由於使用 <code>querySelector</code> 上也有一些<a class="link" href="https://test-utils.vuejs.org/api/#findcomponent" target="_blank" rel="noopener" >小陷阱</a>，所以個人建議以 SFC 方式引入或是乾脆透過 <code>shallowMount</code> 將子層元件 stub 掉也是一種方式。</p> <h3 id="判斷目標存在">判斷目標存在</h3> <p>經由剛剛陷阱的部分大家應該都很清楚 <code>exists()</code> 的存在了，而判斷選取目標其實他還有個好朋友就是 <code>isVisible()</code>，但他們判斷存在的定義上有一些差別：</p> <ul> <li>exists()：主要判斷的是該目標存不存在 DOM 上：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">Hello</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="nx">exist</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">exists</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">).</span><span class="nx">exists</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>isVisable()：主要判斷的是該目標存在 DOM 上之外，視覺上有無顯示在畫面中：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="nt">v-if</span><span class="o">=</span><span class="s">&#34;false&#34; class=&#34;dog&#34;</span><span class="p">&gt;</span><span class="na">科基</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="nt">v-show</span><span class="o">=</span><span class="s">&#34;true&#34; class=&#34;orange-cat&#34;</span><span class="p">&gt;</span><span class="na">橘貓</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="nt">v-show</span><span class="o">=</span><span class="s">&#34;false&#34; class=&#34;black-cat&#34;</span><span class="p">&gt;</span><span class="na">黑黑</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;v-if false&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.dog&#39;</span><span class="p">).</span><span class="nx">isVisible</span><span class="p">()).</span><span class="nx">toBeFalsy</span><span class="p">()</span> <span class="c1">// Error： 直接噴錯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;v-show true&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.orange-cat&#39;</span><span class="p">).</span><span class="nx">isVisible</span><span class="p">()).</span><span class="nx">toBeTruthy</span><span class="p">()</span> <span class="c1">// 測試通過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;v-show false&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.black-cat&#39;</span><span class="p">).</span><span class="nx">isVisible</span><span class="p">()).</span><span class="nx">toBeFalsy</span><span class="p">()</span> <span class="c1">// 測試通過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>關於 <code>isVibile</code> 更為詳細的判斷如下：</p> <ul> <li>CSS style 中 含有 display: none =&gt; <code>false</code></li> <li>CSS style 中 含有 visibility: hidden =&gt; <code>false</code></li> <li>CSS style 中 含有 opacity :0 =&gt; <code>false</code></li> <li>元素中 hidden 屬性為 true =&gt; <code>false</code></li> </ul> <p>綜合結論上方陷阱與判斷方法：</p> <ul> <li>若要判斷元素是否存在 或 <code>v-if</code>：使用 <code>get</code> 方法是最保險的，真的要用 <code>find</code> 則一定要搭配 <code>exists</code></li> <li>若要判斷 <code>v-show</code>：使用 <code>find().isVisible()</code></li> </ul> <h3 id="使用-data--attribute">使用 data-* attribute</h3> <p>在撰寫測試情境時，若依照上面的 <code>querySelector</code> 選了元素、id 或 class 時，初期一定會很開心，因為不會遇到太多困難，但往後在開發的過程執行測試時就很容易有機會遇到各種問題。</p> <p>原先：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;content&#34;</span><span class="p">&gt;</span><span class="nx">content</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>改成：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;content&#34;</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">content</span><span class="err">&#34;</span><span class="p">&gt;</span><span class="nx">content</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>data-*</code> 作為選擇目標好處最主要在於顯著標記測試內容，而這影響到的範圍有：</p> <ul> <li>開發期，過程不用擔心會影響到測試，如上方所見，我只要變更 data-test 以外的內容，預期應該不會影響到測試選擇的目標，使測試案例錯誤能更專注在斷言的目標上，而非選擇目標被替換導致的錯誤。</li> <li>重構（refactor）過程，能清楚比較範圍，若將來調整結構，只要將屬性轉移到對應的位置即可。</li> <li>生產期，能夠針對特定的屬性移除，避免留下各種測試痕跡，對於像是輔助閱讀裝置等技術來說就不會被影響到。</li> </ul> <h4 id="在生產環境刪除-data--attribute">在生產環境刪除 data-* attribute</h4> <p>若想在 <code>vitest</code> 中移除 <code>data-*</code> 也非常的簡單，我們只需要在 <code>vite.config.js</code> 設定中，針對 Vue 底下的編譯選項做一些調整即可（底下示範的版本為移除 <code>data-test</code>，若使用其他命名請自行調整囉）：</p> <h5 id="viteconfigjs-2">vite.config.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">isProd</span> <span class="o">=</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">NODE_ENV</span> <span class="o">===</span> <span class="s1">&#39;production&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">removeDataTestAttrs</span> <span class="o">=</span> <span class="p">(</span><span class="nx">node</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">NodeTypes</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">freeze</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">ELEMENT</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">ATTRIBUTE</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">NodeTypes</span><span class="p">[</span><span class="s1">&#39;ELEMENT&#39;</span><span class="p">])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">node</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">filter</span><span class="p">((</span><span class="nx">prop</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">(</span><span class="nx">prop</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">NodeTypes</span><span class="p">[</span><span class="s1">&#39;ATTRIBUTE&#39;</span><span class="p">]</span> <span class="o">?</span> <span class="nx">prop</span><span class="p">.</span><span class="nx">name</span> <span class="o">!==</span> <span class="s1">&#39;data-test&#39;</span> <span class="o">:</span> <span class="kc">true</span><span class="p">))</span> <span class="c1">// 請自行替換命名 data-test </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="nx">vue</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">compilerOptions</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">nodeTransforms</span><span class="o">:</span> <span class="nx">isProd</span> <span class="o">?</span> <span class="p">[</span><span class="nx">removeDataTestAttrs</span><span class="p">]</span> <span class="o">:</span> <span class="p">[],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">}),</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="容器的方法wrapper-methods---取得目標資訊">容器的方法(Wrapper methods) - 取得目標資訊</h2> <h3 id="判斷屬性">判斷屬性</h3> <h4 id="attributes">attributes</h4> <p>當你想要確認 <code>&lt;a&gt;</code> 中的 <code>href</code> 是否帶有指定的連結或是檢查 <code>&lt;img&gt;</code> 上的屬性時，這時就可以透過 <code>attributes</code> 取得屬性。</p> <p>而 <code>attributes</code> 用法主要有兩種，直接使用時會獲取目標：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">link</span><span class="err">&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://ithelp.ithome.com.tw/&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span><span class="p">&gt;</span><span class="nx">ithelp</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;link&#34;]&#39;</span><span class="p">).</span><span class="nx">attributes</span><span class="p">()</span> <span class="c1">// { href: &#39;https://ithelp.ithome.com.tw/&#39;, &#39;target&#39;: &#39;_blank&#39; } </span></span></span></code></pre></td></tr></table> </div> </div><p>當想要直接取得特定屬性值時也可以直接將屬性名稱帶入參數中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">).</span><span class="nx">attributes</span><span class="p">(</span><span class="s1">&#39;target&#39;</span><span class="p">)</span> <span class="c1">// &#39;_blank&#39; </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="classes">classes</h4> <p>同樣的，若想要尋找 <code>class</code> 屬性的話可以透過 <code>classes</code> 語法取得資訊。你可能會直覺地想到 <code>class</code> 也是屬性的一種那應該用 <code>attributes('class')</code> 查詢，然而這兩者的差別最主要在於產出的結果會有所不同。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">section</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">wrap</span><span class="err">&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;container w-full h-full&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">Title</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若使用 <code>attributes('class')</code> 查詢結果將會是字串形式的資料，後續要處理比對上的問題會稍微麻煩一點：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;wrap&#34;]&#39;</span><span class="p">).</span><span class="nx">attributes</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">)</span> <span class="c1">// &#34;container w-full h-full&#34; </span></span></span></code></pre></td></tr></table> </div> </div><p>若是使用 <code>classes</code> 語法查詢的話將得到一個陣列的結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;wrap&#34;]&#39;</span><span class="p">).</span><span class="nx">classes</span><span class="p">()</span> <span class="c1">// [&#34;container&#34;, &#34;w-full&#34;, &#34;h-full&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><p>此時就可以配合 <code>toContain</code> 等陣列的斷言 Matcher 快速處理測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;wrap&#34;]&#39;</span><span class="p">).</span><span class="nx">classes</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;container&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>這對於測試樣式採用原子化設計的工具（Tailwind CSS、Windi CSS 等）有奇效，我們可以將視覺層的邏輯透過 <code>classes</code> 的結果斷言。</p> <p>因為這類原子化設計工具往往依賴 <code>class</code> 屬性來做樣式上的調整與擴充，通常為了美觀與管理方便會順便在使用這類工具時加裝自動排序（sorting） <code>class</code> 屬性等擴充工具，因此 <code>class</code> 的順序將變成不穩定的狀態。</p> <p>因此元素若從：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">content</span><span class="err">&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;A B C&#34;</span><span class="p">&gt;</span><span class="nx">content</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>變成：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">content</span><span class="err">&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;A C B&#34;</span><span class="p">&gt;</span><span class="nx">content</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>對於快照測試等 Matcher (<code>toMatchSnapshot</code>、<code>toMatchInlineSnapshot</code>)來說將會顯示測試失敗：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.content&#39;</span><span class="p">)).</span><span class="nx">toMatchSnapshot</span><span class="p">()</span> </span></span></code></pre></td></tr></table> </div> </div><p>快照比對結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">- <span class="nv">class</span><span class="o">=</span><span class="s2">&#34;A B C&#34;</span> </span></span><span class="line"><span class="cl">+ <span class="nv">class</span><span class="o">=</span><span class="s2">&#34;A C B&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><p>而以陣列比對是否「包含」的方式，將不受影響：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.content&#39;</span><span class="p">).</span><span class="nx">classes</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;A&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.content&#39;</span><span class="p">).</span><span class="nx">classes</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;B&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.content&#39;</span><span class="p">).</span><span class="nx">classes</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;C&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="判斷內容物">判斷內容物</h3> <h4 id="text">text</h4> <p><code>text</code> 主要是取得目標元素節點後代的所有文字：</p> <h5 id="rootcomponentvue-3">RootComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">Root</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child-component</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child-component</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child-component</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childcomponentvue-1">ChildComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">child</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>mount</code> 包裝元件時 <code>wrapper.find('[data-test=&quot;target&quot;]').text()</code> 的結果將會是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">Rootchildchildchild </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>shallowMount</code> 包裝元件時 <code>wrapper.find('[data-test=&quot;target&quot;]').text()</code> 的結果將會是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">Root </span></span></code></pre></td></tr></table> </div> </div><h4 id="html">html</h4> <p>與 <code>text</code> 類似，但 <code>html</code> 會將目標元素後代所有元素都記錄下來：</p> <h5 id="rootcomponentvue-4">RootComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">Root</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child-component</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child-component</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child-component</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childcomponentvue-2">ChildComponent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">child</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>mount</code> 包裝元件時 <code>wrapper.find('[data-test=&quot;target&quot;]').html()</code> 的結果將會是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Root </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>child<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>child<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>child<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>使用 <code>shallowMount</code> 包裝元件時 <code>wrapper.find('[data-test=&quot;target&quot;]').html()</code> 的結果將會是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Root </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">child-component-stub</span><span class="p">&gt;&lt;/</span><span class="nt">child-component-stub</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">child-component-stub</span><span class="p">&gt;&lt;/</span><span class="nt">child-component-stub</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">child-component-stub</span><span class="p">&gt;&lt;/</span><span class="nt">child-component-stub</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>因此在使用 <code>text</code> 與 <code>html</code> 來進行斷言時，要注意到「<strong>測試所需包含的範圍</strong>」以及「<strong>元件容器</strong>」應採用 <code>mount</code> 還是 <code>shallowMount</code> 等議題，才能讓測試更加強韌且不會讓後續開發無相關的內容時一直被測試攔住。</p> <hr> <h2 id="容器的方法wrapper-methods---模擬事件">容器的方法(Wrapper methods) - 模擬事件</h2> <h3 id="滑鼠事件">滑鼠事件</h3> <p>常見的 DOM 事件有下列幾種：</p> <ul> <li>滑鼠事件：點擊（click）</li> <li>鍵盤事件：按下某鍵（keydown）、鬆開某鍵（keyup）</li> <li>表單事件：針對 <code>&lt;input&gt;</code> 輸入內容、<code>checkbox</code> 與 <code>radio</code> 勾選或 <code>&lt;select&gt;</code> 中的選擇內容</li> </ul> <p>首先，語法方面除了表單事件之外，要模擬大部分的事件我們可以透過容器方法中的 <code>trigger</code> 方法即可觸發事件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">wrapper</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>用法是在第一個參數中傳入要觸發的 <code>DOM</code> 事件名稱（e.g. <code>click</code>、<code>drag</code>），如果有需要補充觸發事件的條件，比方像是按下哪個鍵盤，就可以透過第二個參數帶入資訊（e.g. <code>{ keyCode: 65 }</code>）。</p> <p>而要注意到的是由於這些事件基本上都會是<strong>非同步</strong>的用法，所以在撰寫測試案例時可以使用 <code>async/await</code> 來讓斷言（Assertion）保持正確的結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Arrange </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Act </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Assert </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="cm">/* ... */</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="cm">/* ... */</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>有了這個概念之後，接下來便可以快速來看看實際上各個事件觸發的實際案例與事件名稱，並且著重關注要特別注意的地方。</p> <h3 id="滑鼠事件-1">滑鼠事件</h3> <ul> <li>點擊： <code>click</code></li> <li>雙擊： <code>dblclick</code></li> <li>指定點擊： <code>click.left</code>、<code>click.middle</code>、<code>click.right</code></li> </ul> <h4 id="點擊與雙擊">點擊與雙擊</h4> <p>點擊與雙擊的部分最主要需要注意的部分是，以事件來說的概念「<strong>雙擊（dblclick）</strong>」是一個事件，並非「兩個」「<strong>點擊（click）</strong>」事件：</p> <h5 id="元件">元件</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">content</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">button</span><span class="err">&#34;</span> <span class="nt">@click</span><span class="s">=&#34;count++&#34;</span><span class="p">&gt;</span><span class="na">Add</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="測試程式碼">測試程式碼</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;after click button should display correct content&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;button&#34;]&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;content&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;button&#34;]&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;content&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;button&#34;]&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;dblclick&#39;</span><span class="p">)</span> <span class="c1">// 觸發不到 @click 事件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;content&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;4&#39;</span><span class="p">)</span> <span class="c1">// AssertionError </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="指定按鍵點擊">指定按鍵點擊</h4> <p>有時候你可以會想要指定滑鼠的按鍵來觸發事件，這時就可以使用類似修飾符（modifier）一樣的方式來觸發事件：</p> <ul> <li><code>click.left</code></li> <li><code>click.middle</code></li> <li><code>click.right</code></li> </ul> <h5 id="元件-1">元件</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">button</span><span class="err">&#34;</span> <span class="nt">@click.right</span><span class="s">=&#34;result = &#39;here we go!&#39;&#34;</span><span class="p">&gt;</span><span class="na">Are</span> <span class="na">You</span> <span class="na">ready</span><span class="err">?</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">result</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="測試程式碼-1">測試程式碼</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should be display correct text&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;button&#34;]&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click.right&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;here we go!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>除此之外，鍵盤與滑鼠的操作也可以融合再一起：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click.ctrl.left&#39;</span><span class="p">)</span> <span class="c1">// 左鍵點擊時同時按著 ctrl 鍵 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click.alt.right&#39;</span><span class="p">)</span> <span class="c1">// 右鍵點擊時同時按著 alt 鍵 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="鍵盤事件">鍵盤事件</h3> <p>鍵盤最常見的核心事件主要為：</p> <ul> <li>按下某個按鈕 <code>keydown</code></li> <li>鬆開某個按鈕 <code>keyup</code></li> </ul> <p>上述事件如同指定滑鼠按鍵的寫法，一樣擁有修飾符的相關語法，而後方帶的修飾符主要為按鍵的名稱：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;keydown.enter&#39;</span><span class="p">)</span> <span class="c1">// 按下 enter 鍵 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;keyup.up&#39;</span><span class="p">)</span> <span class="c1">// 鬆開 上方向鍵 </span></span></span></code></pre></td></tr></table> </div> </div><p>同樣地，鍵盤事件也支援多重的組合修飾符寫法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;keydown.ctrl.tab&#39;</span><span class="p">)</span> <span class="c1">// 按下 ctrl 鍵 + tab 鍵 </span></span></span></code></pre></td></tr></table> </div> </div><p>若你想要更靈活的使用鍵盤事件，也可以用 <code>trigger</code> 方法的第二個參數帶入鍵盤的名稱，而目前有支援的寫法主要有下列三種：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;事件名稱&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">code?</span>: <span class="kt">event.code</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">key?</span>: <span class="kt">event.key</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">keyCode?</span>: <span class="kt">event.keycode</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>若不清楚鍵盤對應的代號也沒有關係，有不少網站專門提供類似的服務供查詢，比方像這個 <a class="link" href="https://www.toptal.com/developers/keycode/for/enter" target="_blank" rel="noopener" >網站</a> 只要按下任一按鍵就會即時顯示鍵盤對應的代號、名稱等等相關資訊。</p> <p>在查到代號後我們就可以將其帶入剛才的方法中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">keyCode</span><span class="o">:</span> <span class="mi">13</span> <span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>至於要選擇哪種寫法就看場景本身的需求來做決定囉！</p> <h3 id="表單事件">表單事件</h3> <ul> <li><code>input</code> 輸入</li> <li><code>checkbox</code> / <code>radio</code> 勾選</li> <li><code>&lt;select&gt;</code> 中的選擇內容</li> </ul> <blockquote> <p>原先為了針對不同表單類型，Vue Test Utils 1 版（for Vue2）工具提供了一個專屬的 <code>setChecked</code> 的來對應 <code>checkbox</code> / <code>radio</code> 勾選狀態（checked）；除此之外替 <code>&lt;select&gt;</code> 元素的選擇提供了 <code>setSelected</code> 方法來模擬選擇行為。</p></blockquote> <p>而在 Vue Test utils 2 版時，我們將只要統一使用 <code>setValue</code> 即可自動對應所有表單的行為！</p> <h4 id="模擬-input-輸入">模擬 input 輸入</h4> <p>輸入表單或是操作日期選擇器：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;textResult&#34; type=&#34;text&#34; data-test=&#34;text&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">result_text</span><span class="err">&#34;</span><span class="p">&gt;{{</span><span class="nx">textResult</span><span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;dateResult&#34; type=&#34;date&#34; data-test=&#34;date&#34;</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">result_date</span><span class="err">&#34;</span><span class="p">&gt;{{</span><span class="nx">dateResult</span><span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>文字輸入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;模擬 input 輸入&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">([</span><span class="nx">data</span><span class="o">-</span><span class="nx">test</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="p">]).</span><span class="nx">setValue</span><span class="p">(</span><span class="s1">&#39;Hello, World!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">([</span><span class="nx">data</span><span class="o">-</span><span class="nx">test</span><span class="o">=</span><span class="s2">&#34;result_text&#34;</span><span class="p">]).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;Hello, World!&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>選擇日期：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;模擬 日期 輸入&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">([</span><span class="nx">data</span><span class="o">-</span><span class="nx">test</span><span class="o">=</span><span class="s2">&#34;date&#34;</span><span class="p">]).</span><span class="nx">setValue</span><span class="p">(</span><span class="s1">&#39;2022/10/06&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">([</span><span class="nx">data</span><span class="o">-</span><span class="nx">test</span><span class="o">=</span><span class="s2">&#34;result_date&#34;</span><span class="p">]).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;2022/10/06&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="模擬-radio-勾選">模擬 radio 勾選</h4> <h5 id="元件-2">元件</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">radio_1</span><span class="err">&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;radioResult&#34; value=&#34;1&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">radio_2</span><span class="err">&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;radioResult&#34; value=&#34;2&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">result</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">radioResult</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="測試程式碼-2">測試程式碼</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;模擬 radio 勾選行為&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;radio_1&#34;]&#39;</span><span class="p">).</span><span class="nx">setValue</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;result&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;radio_2&#34;]&#39;</span><span class="p">).</span><span class="nx">setValue</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;result&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="模擬-checkbox-勾選">模擬 checkbox 勾選</h4> <h5 id="元件-3">元件</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">checkbox_1</span><span class="err">&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;checkboxResult&#34; value=&#34;1&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">checkbox_2</span><span class="err">&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;checkboxResult&#34; value=&#34;2&#34;</span><span class="p"> /&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">result</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">checkboxResult</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;,&#39;</span><span class="p">)</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="測試程式碼-3">測試程式碼</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;模擬 checkbox 勾選行為&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;checkbox_1&#34;]&#39;</span><span class="p">).</span><span class="nx">setValue</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;result&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;checkbox_2&#34;]&#39;</span><span class="p">).</span><span class="nx">setValue</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;result&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;1,2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;checkbox_1&#34;]&#39;</span><span class="p">).</span><span class="nx">setValue</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;result&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="模擬-select-選擇">模擬 select 選擇</h4> <h5 id="元件-4">元件</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">select</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span> <span class="nt">v-model</span><span class="o">=</span><span class="s">&#34;result&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;orange&#34;</span><span class="p">&gt;</span><span class="nx">Orange</span><span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;black&#34;</span><span class="p">&gt;</span><span class="nx">Black</span><span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">result</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">result</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="測試程式碼-4">測試程式碼</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;模擬 select 選擇&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">setValue</span><span class="p">(</span><span class="s1">&#39;orange&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;result&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;orange&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="模擬-vue-apis">模擬 Vue APIs</h2> <h3 id="data">data</h3> <p>注意：在模擬 data 之前需要注意的是，在大部分的測試時我們通常不必特意去模擬 data，應該讓其與元件本身的私有方法（private method）自然互動即可，若會需要透過模擬 data 來操作元件則要觀察是否資料與元件本身耦合了，這種情況下可能造成元件本身無法高度重複利用。</p> <h4 id="私有方法private-method">私有方法（private method）</h4> <p>封閉在元件、物件&hellip;等等中的函式，在外部無法存取得到，e.g：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">add5</span><span class="p">(</span><span class="nx">x</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="nx">y</span><span class="p">,)</span> <span class="p">=&gt;</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">add5</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="nx">x</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 裡頭的 add 函式即為私有方法。 </span></span></span></code></pre></td></tr></table> </div> </div><p>若是真的有需要用到模擬 <code>data</code> 屬性時，首先要注意元件是用何種方式（<strong>options API</strong> /<strong>composition API</strong> 與 <strong><code>&lt;script setup&gt;</code></strong>）來使用 <code>data</code>，因為寫法上將會有所不同；且依照設定的時機還可分為「<strong>初始狀態</strong>」與「<strong>後續操作</strong>」。</p> <h3 id="dataoptions-api">data（options API）</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">content</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>data（option API）初始狀態模擬，可透過容器（wrapper）的第二個參數帶入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 測試程式碼 */</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>若要模擬後續才設定 data（option API），則可以透過容器方法中的 <code>setData()</code> 設置，此外由於是非同步的方法，要記得 <code>async/await</code> 才能確保斷言正確：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">setData</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;test&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="datacomposition-api-script-setup-語法糖">data（composition API, <code>&lt;script setup&gt;</code> 語法糖）</h3> <h4 id="composition-api">composition API：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="script-setup-語法糖"><code>&lt;script setup&gt;</code> 語法糖：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>這一類透過 <code>setup()</code> 所處理的資料，若要模擬會遇到不少問題。</p> <p>在容器方法中的第二個參數所提供的方式，原先是供應給 <code>options</code> API 中的 <code>data</code> 屬性所使用，所以我們必須改以注入的方式嵌入 <code>setup()</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 測試程式碼 */</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">monut</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span><span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>但如此一來，元件中原先其他寫在 <code>setup()</code> 內的狀態等就必須一起模擬，還記得好的元件測試守則之一嗎？沒錯，就是不要重複實踐實作。</p> <p>那比較好的方式之一就是透過容器方法中（wrapper）取得實體來設置變數，並且透過 <code>nextTick</code> 方法確保渲染結果：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span> <span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="cm">/* 測試程式碼 */</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">monut</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">vm</span><span class="p">.</span><span class="nx">content</span> <span class="o">=</span> <span class="s1">&#39;text&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 版本1: 直接使用 vm 內的 $nextTick </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">vm</span><span class="p">.</span><span class="nx">$nextTick</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 版本2: 使用 vue 的 nextTick </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// import { nextTick } from &#39;vue&#39; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// await nextTick() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>而關於私有方法或變數的模擬，或許將來 Vue Test Utils 開發團隊會對此有些改觀提供一些逃生艙的方法，不過目前比較一致的角度是盡量別對這一類的私有環境才有的變數與方法去做模擬，即時的相關討論可見於<a class="link" href="https://github.com/vuejs/test-utils/pulls?q=composition" target="_blank" rel="noopener" >這裡</a>。</p> <h3 id="props">props</h3> <p>在不模擬私有情境的前提之下，prop 相較起來單純多了，而關於測試 props 的部分主要有：</p> <ul> <li>模擬 props 傳入後，斷言「後續的狀態」。</li> <li>斷言「是否傳入對的參數給子元件」。</li> </ul> <h4 id="模擬-props-傳入">模擬 props 傳入</h4> <p>要模擬 props 傳入的方法依照時機可分為「<strong>初始狀態</strong>」與「<strong>後續操作</strong>」：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">content</span> <span class="p">}}&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>初始狀態同樣是藉由容器（Wrapper）中的第二個參數傳入：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Hello&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;Hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>若想要後續才傳入 <code>props</code> 則可以透過容器方法 <code>setProps</code> 模擬，並且一樣要小心非同步的問題，記得補上 <code>async / await</code> ：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Hello&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;Hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">setProps</span><span class="p">({</span> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Good bye&#39;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;Good bye&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="斷言是否傳入對-props-參數給子元件">斷言是否傳入對 props 參數給子元件</h3> <p>既然有接收的一方，那就至少會有給予的一方。</p> <p>在 <code>props</code> 驗證中的另一種方式就是驗證給予其他元件的參數是否正確：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">BaseLightbox</span> <span class="na">content</span><span class="err">&#34;</span><span class="na">Hello</span><span class="err">&#34;</span> <span class="na">enableMask</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>首先我們要做的是透過之前學的選擇器方法選到特定的元件，接著透過容器方法底下的 <code>props()</code> 來取的傳送資訊，接著就可以透過斷言 Matcher 來比對 props 給元件的資訊是否正確：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">BaseLightbox</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;./BaseLightbox.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">BaseLightbox</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">props</span><span class="p">(</span><span class="nx">content</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;Hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">props</span><span class="p">(</span><span class="nx">enableMask</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">props</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">content</span><span class="o">:</span> <span class="s1">&#39;Hello&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">enableMask</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="emit">emit</h3> <p>在斷言中我們要測試 <code>emit</code> 主要是試圖捕獲元件所發生的事件，並斷言事件與值是否如我們所預期，而這時可以透過容器方法中的 <code>emitted()</code> 來取得事件發送所有的紀錄。</p> <p>而 <code>emitted</code> 中所紀錄的格式如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">&#39;事件名稱&#39;:</span> <span class="err">[</span> </span></span><span class="line"><span class="cl"> <span class="err">[/*</span> <span class="err">第一次發送的值</span> <span class="err">*/],</span> </span></span><span class="line"><span class="cl"> <span class="err">[/*</span> <span class="err">第二次發送的值</span> <span class="err">*/],</span> </span></span><span class="line"><span class="cl"> <span class="err">[/*</span> <span class="err">第</span> <span class="err">n</span> <span class="err">次發送的值</span> <span class="err">*/]</span> </span></span><span class="line"><span class="cl"> <span class="err">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>因此假設我們有一個 <code>pagination</code> 元件如下所示：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">first</span><span class="err">&#34;</span> <span class="nt">@click</span><span class="s">=&#34;$emit(&#39;changePage&#39;, &#39;first&#39;)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">第一頁</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">prev</span><span class="err">&#34;</span> <span class="nt">@click</span><span class="s">=&#34;$emit(&#39;changePage&#39;, &#39;prev&#39;)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">上一頁</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">next</span><span class="err">&#34;</span> <span class="nt">@click</span><span class="s">=&#34;$emit(&#39;changePage&#39;, &#39;next&#39;)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">下一頁</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">last</span><span class="err">&#34;</span> <span class="nt">@click</span><span class="s">=&#34;$emit(&#39;changePage&#39;, &#39;last&#39;)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="na">最後一頁</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在斷言的時候我們可以透過下列方式檢查是否發送對應的 emit 事件：</p> <ul> <li>透過 <code>toHaveProperty</code> 確認 <code>emitted</code> 屬性確認是否發送「<strong>預期事件名稱</strong>」</li> <li>透過 <code>emitted().事件名稱</code> 確認該事件名稱「<strong>發生次數</strong>」</li> <li>透過 <code>emitted().事件名稱[index]</code> 確認該事件名稱，第幾次送出的「<strong>值</strong>」</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;first&#34;]&#39;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">emitted</span><span class="p">()).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">&#39;changePage&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">emitted</span><span class="p">().</span><span class="nx">changePage</span><span class="p">).</span><span class="nx">toHaveLength</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">emitted</span><span class="p">().</span><span class="nx">changePage</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">toEqual</span><span class="p">([</span><span class="s1">&#39;first&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="provide">provide</h3> <p>對於有使用到 <code>provide</code> 的元件來說，我們需要確保他提供預期的 <code>inject</code> 內容，因此我們要建立一個用來接收 <code>provide</code> 的元件，接著才能透過斷言來測試傳遞的內容是否如預期。</p> <p>接下來我們以這個元件為例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ChildComponent</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">provide</span><span class="p">,</span> <span class="nx">readonly</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">,</span> <span class="nx">readonly</span><span class="p">(</span><span class="nx">count</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>然而我們為了讓測試案例保持獨立性，因此我們要透過造假的元件來測試 <code>inject</code> 所接收到的是否如預期。</p> <h4 id="透過元件容器中的-globalstubs-模擬假元件">透過元件容器中的 global.stubs 模擬假元件</h4> <p>透過元件容器（Wrapper）中的第二個參數 <code>global.stubs</code> 我們可以將子元件渲染成我們想要的樣子，而模擬的方式一共分為兩種：</p> <ul> <li>渲染成 <code>&lt;-stub&gt;</code> 元件</li> </ul> <p>當 <code>global.stub[目標元件名稱]</code> 為 <code>true</code> 時：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">TargetComponent</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">stubs</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ChildComponent</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們的目標元件將會被渲染為帶有 <code>-stub</code> 後綴的元素：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ChildComponent</span> <span class="p">/&gt;</span> <span class="c">&lt;!--</span> <span class="nx">會變成</span> <span class="p">&lt;</span><span class="nt">child-component-stub</span><span class="p">&gt;&lt;/</span><span class="nt">child-component-stub</span><span class="p">&gt;</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>然而這對於我們要測試 <code>provide</code> 來說沒有幫助，因為他沒有辦法接收 <code>inject</code> 資訊，因此我們要採用下面第二種方法。</p> <ul> <li>渲染成特定元件</li> </ul> <p>要渲染成特定元件的方式，就是先製作一個假元件，接著再提供給 <code>global.stubs</code> 來當作原先應該要渲染的元件。</p> <p>首先，我們可以透過 Vue 提供的 <code>defineComponent</code> 建造元件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">TestComponent</span> <span class="o">=</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;p data-test=&#34;target&#34;&gt;{{ count }}&lt;/p&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">value</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著在測試案例就可以透過 <code>global.stubs</code> 中直接使用這個測試元件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">TestComponent</span> <span class="o">=</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;p data-test=&#34;target&#34;&gt;{{ count }}&lt;/p&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">value</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span> <span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">TargetComponent</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">stubs</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ChildComponent</span><span class="o">:</span> <span class="nx">TestComponent</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來元件 <code>ChildComponent</code> 在測試案例中的渲染結果將變成我們指定的樣子。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">data-test</span><span class="o">=</span><span class="s">&#34;target&#34;</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>因此我們現在就可以斷言 <code>provide</code> 提供的內容是否正確了：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">TestComponent</span> <span class="o">=</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;p data-test=&#34;target&#34;&gt;{{ count }}&lt;/p&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">count</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;...&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">TargetComponent</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">stubs</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ChildComponent</span><span class="o">:</span> <span class="nx">TestComponent</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="inject">inject</h3> <p>對於有使用到 <code>inject</code> 的元件來說，我們在意的是提供 <code>provide</code> 特定的值之後，畫面上渲染的結果是否正確。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">data</span><span class="nt">-test</span><span class="err">=&#34;</span><span class="na">target</span><span class="err">&#34;</span><span class="p">&gt;{{</span> <span class="nx">count</span> <span class="p">}}&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">inject</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s1">&#39;count&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">count</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>此時我們可以透過元件容器（Wrapper）中的第二個參數 <code>global</code> 來指定要提供的 <code>provide</code> 值：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">TargetComponent</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>最後我們就可以直接斷言渲染的結果是否如預期：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should be render correct content after providing count&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">TargetComponent</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="slots">slots</h3> <p>而在針對 <code>slots</code> 撰寫測試時，要注意的地方有：</p> <ul> <li><code>slots</code> 至少會有預設未傳入的狀態與傳入資料後的狀態兩種，斷言時應該至少包含這兩種狀態。</li> <li>以 <code>slots</code> 行為作為案例斷言時，斷言內容要專注在 <code>slots</code> 所影響範圍內，否則可能會受其他因素干擾。</li> </ul> <h4 id="預設插槽default-slots">預設插槽（Default slots）</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>要針對最基本的預設插槽做斷言時，我們可以透過容器中第二個參數帶入 <code>slots</code> 欄位來模擬帶入內容並透過 <code>default</code> 屬性傳入指定的範圍內。</p> <p>未傳入測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;default slot&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toMatchInlineSnapshot</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>傳入時測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;default slot&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">slots</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">:</span> <span class="s1">&#39;Slot Content&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;Slot Content&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="具名插槽named-slots">具名插槽（Named slots）</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;header&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;footer&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>若在插槽的型態為具名插槽，在撰寫測試案例時的容器選項 <code>slots</code> 就可以依據插槽名稱 <code>name</code> 指定要傳入的內容。</p> <p>未傳入測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;named slot&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toMatchInlineSnapshot</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>傳入時測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;named slot&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">slots</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">header</span><span class="o">:</span> <span class="s1">&#39;ithelp 2022 鐵人賽&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span><span class="o">:</span> <span class="s1">&#39;vue3 單元測試&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">footer</span><span class="o">:</span> <span class="s1">&#39;by Shawn&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toMatchInlineSnapshot</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="作用域插槽scoped-slots">作用域插槽（Scoped slots）</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-vue" data-lang="vue"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">貓咪咖啡廳</span><span class="err">：</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span><span class="nx">店長</span><span class="err">：</span><span class="nx">Shawn</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">slot</span> <span class="nt">:staffInfo</span><span class="o">=</span><span class="s">&#34;staffInfo&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">slot</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">staffInfo</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;black-cat&#39;</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;黑黑&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;signature-dish&#39;</span><span class="o">:</span> <span class="s1">&#39;拿鐵&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;orange-cat&#39;</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;阿橘&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;signature-dish&#39;</span><span class="o">:</span> <span class="s1">&#39;焦糖瑪奇朵&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>有時候我們可能想要給予更高度的彈性，使元件透過 <code>&lt;slot&gt;</code> 傳遞資料給父層時，這時候就會用到作用域插槽。</p> <p>未傳入測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;scoped slots&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toMatchInlineSnapshot</span><span class="p">(</span><span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;&lt;div&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;貓咪咖啡廳：&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;店長：Shawn&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;/div&gt;&#34; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>傳入時測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;scoped slots&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">slots</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">:</span> <span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;template #staffInfo&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;店員：{{ staffInfo[&#39;orange-cat&#39;][&#39;name&#39;] }}&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;限定項目：{{ staffInfo[&#39;black-cat&#39;][&#39;signature-dish&#39;] }}&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;/template&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toMatchInlineSnapshot</span><span class="p">(</span><span class="sb">` </span></span></span><span class="line"><span class="cl"><span class="sb"> &#34;&lt;div&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;貓咪咖啡廳：&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;店長：Shawn&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;店員：阿橘&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;p&gt;限定項目：拿鐵&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="sb"> &lt;/div&gt;&#34; </span></span></span><span class="line"><span class="cl"><span class="sb"> `</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="插槽載入選項mounting-options">插槽載入選項（Mounting options）</h4> <p>若想在測試案例中用不同的方式來模擬 slots，可以透過下面四種語法：</p> <ul> <li>傳入 SFC 檔案</li> <li><code>render function</code></li> <li>包含 <code>template</code> 屬性的物件</li> <li>直接傳入一個字串</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should render same layout&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Layout</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">slots</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">default</span><span class="o">:</span> <span class="nx">Component</span> </span></span><span class="line"><span class="cl"> <span class="c1">// default: h(&#39;div&#39;, &#39;相同內容&#39;), </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// default: { template: &#39;&lt;div&gt;相同內容&lt;/div&gt;&#39; }, </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// default: &#39;&lt;div&gt;相同內容&lt;/div&gt;&#39;, </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">html</span><span class="p">()).</span><span class="nx">toContain</span><span class="p">(</span><span class="s1">&#39;&lt;div&gt;相同內容&lt;/div&gt;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="custom-directives">custom directives</h3> <p>客製化指令本身搭配了類似元件生命週期的 Hooks，而我們可以在那些 Hook 中任意對我們所綁定的元素做開發，讓繁複的邏輯透過簡單的指令就能夠重複利用，使我們在開發過程中的開發者體驗（Developer experience, DX）有非常良好的體驗。</p> <p>但相對的來說，要測試客製化指令就有機會運用到各種我們至今學過的許多技巧來斷言，從而使難度大大提升，但我們只要熟悉之前的模擬技巧後，最後只需要關注的一個地方就是，預期指令放入後應達成什麼目標，接著再去尋找要從什麼角度或可取得的資訊去比對來作為我們斷言的內容即可。</p> <p>而接下來我們以一個 <code>v-foucs</code> 的客製化指令來介紹如何斷言客製化指令與尋找比對資訊：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">vFocus</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="o">:</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">focus</span><span class="p">(),</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ol> <li>註冊指令</li> </ol> <p>首先，要進行斷言我們可以透過容器中第二個參數的 <code>global.directives</code> 來註冊我們的客製化指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(...,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">directives</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Focus</span><span class="o">:</span> <span class="nx">vFocus</span><span class="p">,</span> <span class="c1">// 屬性匹配的名稱規則 Abc 會 match 到 v-abc </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>仿造元件並放入指令</li> </ol> <p>接著我們要使用到仿造元件的技巧，讓容器一開始就載入一個假的元件，並且放入指令與 <code>data-test</code> 屬性供捕獲：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">Component</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;input v-focus data-test=&#34;target&#34; type=&#34;text&#34;/&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(...,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">directives</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Focus</span><span class="o">:</span> <span class="nx">vFocus</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>尋找比對目標</li> </ol> <p>再來，由於目標是為了驗證是否該元素為瀏覽器中的 <code>focus</code> 元素，因此要利用到瀏覽器物件 <code>Document</code> 中的 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement" target="_blank" rel="noopener" >activeElement</a> 屬性，若有被聚焦的情況下那應該要能夠比對到同個元素。（由 <code>jsdom</code> 提供模擬的瀏覽器環境）</p> <ol start="4"> <li>斷言</li> </ol> <p>最後在斷言的部分，為了取得目標元素，我們可以透過 <code>wrapper.find().element</code> 取得目標的元素實體，最後就可以拿他與 <code>document.activeElement</code> 做比對：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;v-focus&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Component</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;input v-focus data-test=&#34;target&#34; type=&#34;text&#34;/&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">mount</span><span class="p">(</span><span class="nx">Component</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">attachTo</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">global</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">directives</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Focus</span><span class="o">:</span> <span class="nx">vFocus</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[data-test=&#34;target&#34;]&#39;</span><span class="p">).</span><span class="nx">element</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">activeElement</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來我們就可以確保將來在使用 <code>v-focus</code> 指令時，該元素在 <code>mounted</code> 後會是聚焦的元素。</p> <hr> <h2 id="vitest-ui">Vitest UI</h2> <p><a class="link" href="https://cn.vitest.dev/guide/ui.html" target="_blank" rel="noopener" >Vitest UI</a></p> <p><img src="https://live.staticflickr.com/65535/52593161206_9aa54df3c4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://cn.vitest.dev/guide/ui.html" target="_blank" rel="noopener" >Vitest UI</a> 簡單來說，是另一種供我們查看測試與編寫測試的方式，它的特色在於基於 Vite 的 dev server 環境，讓我們可以直接在瀏覽器上直接觀看測試案例的測試結果，甚至支援直接在瀏覽器中編寫測試案例後同步更新測試檔案。</p> <p>而在使用這項酷酷的功能之前，我們需要另外安裝 <code>@vitest/ui</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm i -D @vitest/ui </span></span></code></pre></td></tr></table> </div> </div><p>接著就可以在 <code>package.json</code> 中新增一個 <code>vitest</code> 指令，並帶上參數 <code>--ui</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;vitest:ui&#34;</span><span class="p">:</span> <span class="s2">&#34;vitest --ui&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此一來後們只要執行 <code>npm run vitest:ui</code>，就可以在啟動這項功能，並看到下列畫面：</p> <p><img src="https://live.staticflickr.com/65535/52593421744_551a7db867_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="介面">介面</h3> <p>在 Vitest UI 中，左側是所有測試案例的測試結果（Pass / Fail / Skip），我們可以透過上方的搜尋欄輸入檔名或路徑找到我們要觀察的測試。</p> <p><img src="https://live.staticflickr.com/65535/52593587045_97da336a0d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>點擊左側的測試路徑後，右側會出現測試情境與測試案例的描述讓我們更好觀察當下檔案中的所有案例</p> <p><img src="https://live.staticflickr.com/65535/52593161251_c8b36c5b5e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>除此之外，再往右側會看到四項資訊，分別為：</p> <p><img src="https://live.staticflickr.com/65535/52593421784_8bdb3d761f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>Report（預設顯示項目）</li> <li>Module Graph</li> <li>Console</li> <li>Code</li> </ul> <h3 id="report">Report</h3> <p>點擊 Report 頁籤時，會在右側顯示該測試檔案中的所有測試案例結果。</p> <p>若為全通過的情況會顯示 <code>All tests passed in this file</code>：</p> <p><img src="https://live.staticflickr.com/65535/52593161276_9256c5cd61_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>若有錯誤會顯示是哪一條測試案例發生錯誤：</p> <p><img src="https://live.staticflickr.com/65535/52592678942_4d1f1140cd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們甚至能點擊錯誤訊息右方的開啟視窗 Icon，Vitest UI 將會直接啟動系統預設的程式碼編輯器，開啟測試檔案後將輸入游標聚焦在錯誤的行數與位置。（e.g. 圖中的 <code>toEqual</code> Assertion Matcher）</p> <p><img src="https://live.staticflickr.com/65535/52593161331_e16935173c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="module-graph">Module Graph</h3> <p>接著是第二個頁籤的 <code>Module Graph</code>，這頁的內容主要是透過檢測行內引入模組，呈現檔案之間依賴關係。</p> <p><img src="https://live.staticflickr.com/65535/52593421854_0fbbe57891_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>點擊圖中的節點可以看到該模組的 Source 檔與經由 Transformed 後的程式碼。</p> <p><img src="https://live.staticflickr.com/65535/52593587155_3ee1de6d49_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>而這個圖表最大的用處在於，透過可視化的方式呈現出測試程式碼中受測物（SUT）與依賴物（DOC）的依賴狀況。</p> <h3 id="console">Console</h3> <p>Console 頁籤主要是顯示在測試程式碼中的 <code>console.log</code> 資訊，由於與測試結果分離的情況下，相較於在終端機中觀察 Console，這裡會顯示得更加清楚。</p> <p><img src="https://live.staticflickr.com/65535/52593421919_3ea6a5b14f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="code">Code</h3> <p>最後壓軸介紹的部分，則是 Code 頁籤，你可能會覺得這有什麼特別的，不就是顯示測試檔案程式碼嗎？</p> <p><img src="https://live.staticflickr.com/65535/52593161396_0a9ca152a2_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然而，這裡的測試程式碼除了預覽之外，還能夠直接在瀏覽器中直接編寫並執行測試查看結果，更重要的是寫完的當下按下儲存它還能夠同步調整到實際的程式碼中！</p> <p>比方在瀏覽器中的測試程式碼中加個註解，並儲存：</p> <p><img src="https://live.staticflickr.com/65535/52593421979_128985ea34_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>實際測試程式碼檔案也加上了註解！</p> <p><img src="https://live.staticflickr.com/65535/52593680043_347cf27fd6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>如此一來，我們就可以直接在這個視窗內撰寫我們的測試案例，並且在瀏覽器中即時看到測試結果。</p> <p>不過這裡有個小小缺點是，若在專案中有設定 eslint + prettier 的話，在程式編輯器撰寫測試時可以設定儲存當下的自動做格式化，但是瀏覽器中的編輯器環境不同，所以寫測試時會收到格式錯誤的警告，但在不考慮這點的情況下，這個工具是個用來檢視測試結果與依賴關係的好工具。</p> <p><img src="https://live.staticflickr.com/65535/52592679007_e8b05c17bd_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="程式碼覆蓋率code-coverage">程式碼覆蓋率（Code Coverage）</h2> <p>在測試領域中，覆蓋率（Coverage）一詞泛指的是以百分比表示測試程式碼能夠涵蓋多少產品程式碼的範圍，而依據不同的覆蓋率種類，其細微的定義也會有所不同。</p> <p>接下來我們以覆蓋率工具庫 <a class="link" href="https://cn.vitest.dev/guide/coverage.html" target="_blank" rel="noopener" >c8</a> 來說明覆蓋率的概念與如何透過 <a class="link" href="https://cn.vitest.dev/guide/coverage.html" target="_blank" rel="noopener" >c8</a> 在 Vitest 測試環境中檢視當下的測試覆蓋率，最後再來談談有關於覆蓋率的相關議題。</p> <h3 id="c8">c8</h3> <p>要在 Vitest 測試環境中使用 c8 產生覆蓋率報告，我們首先需要安裝 <code>@vitest/coverage-c8</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm i -D @vitest/coverage-c8 </span></span></code></pre></td></tr></table> </div> </div><p>接著就可以在 <code>package.json</code> 中新增指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test:coverage&#34;</span><span class="p">:</span> <span class="s2">&#34;vitest --environment jsdom --coverage&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>執行 <code>npm run test:coverage</code> 後，預設會在終端機產生出覆蓋率報告：</p> <p><img src="https://live.staticflickr.com/65535/52593680098_635ca46745_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>而 c8 覆蓋率報告總共有四種類型：</p> <ul> <li>行數覆蓋率（line coverage）：以行數為單位來計算。</li> <li>函式覆蓋率（function coverage）：以內部的函式為單位來計算。</li> <li>分枝覆蓋率（branch coverage）：以每個判斷式為單位來計算。</li> <li>語句覆蓋率（statement coverage）：以每個語句（statement）為單位計算。</li> </ul> <p>測試程式碼涵蓋多少範圍的產品程式碼，甚至於每行程式碼個被執行了幾次</p> <p>並且若有未覆蓋行數的情況， c8 則會在 Uncovered Line 中顯示未涵蓋的行數範圍，如下圖中的 <code>13-17</code>、<code>19-28</code></p> <p><img src="https://live.staticflickr.com/65535/52593587235_4ceba72a25_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>倘若你覺得這種報告形式不方便觀看，或是希望將它製作成文件，則可以在 config.js 檔中設定 <code>coverage.reporter</code> 的形式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// vite.config.js or vitest.config.js </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">coverage</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">reporter</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;text&#39;</span><span class="p">,</span> <span class="s1">&#39;json&#39;</span><span class="p">,</span> <span class="s1">&#39;html&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>其中 c8 提供的報告（reporter）選項有以下三種：</p> <ul> <li>text： 在終端機中呈現覆蓋率報告。</li> </ul> <p><img src="https://live.staticflickr.com/65535/52593587245_730913e23b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>json： 以 JSON 格式產生覆蓋率報告。</li> </ul> <p><img src="https://live.staticflickr.com/65535/52593161446_55167b6751_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>html： 產生一個可互動的 HTML 覆蓋率報告。</li> </ul> <p><img src="https://live.staticflickr.com/65535/52593161441_82a1a13832_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>其中 HTML 的版本中，我們還可以點擊測試檔案來查看未覆蓋的行數有哪些，相較終端機的版本，我們就不必再拿著行數去對程式碼了：</p> <p><img src="https://live.staticflickr.com/65535/52593422039_9e7c2cf245_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="覆蓋率目標">覆蓋率目標</h3> <p>而在瞭解怎麼查看覆蓋率報告後，那麼究竟覆蓋率目標要達到多少才是合理呢？</p> <p>以 《可測試的 JavaScript》一書作者 Mark Ethan Trostler 提供的答案是單元測試大約要介於 80 % 左右。</p> <p>以 Martin Fowler 於 <a class="link" href="https://martinfowler.com/bliki/TestCoverage.html" target="_blank" rel="noopener" >Test Coverage</a> 一文中，則是指出大約會在於 80 至 90 % 附近。</p> <p>至於為什麼不是達到百分之百呢？接下來我們來探討有關於覆蓋率相關的議題。</p> <h3 id="覆蓋率議題">覆蓋率議題</h3> <h4 id="覆蓋率與付出的心力">覆蓋率與付出的心力</h4> <p>雖然以理論上來說盡可能得達到高覆蓋率，測試程式碼將涵蓋的越完全，然而為了追求 100 % 的覆蓋率所要付出的心理將會截然不同。</p> <p>Jeroen Mols 在 <a class="link" href="https://jeroenmols.com/blog/2017/11/28/coveragproblem/" target="_blank" rel="noopener" >The 100% code coverage problem</a> 一文中的提到了心力付出與覆蓋率的關係表。</p> <p><img src="https://live.staticflickr.com/65535/52593422044_6d565f4119_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>引用自 Jeroen Mols 《The 100% code coverage problem》一文中的圖</p></blockquote> <p>從上圖中可以看見，在覆蓋率從 0 提升至 80% 我們僅需要付出一些心力就可以輕易達成，然而要將 90% 提升至接近 100% 我們則幾乎要投入兩到三倍以上的心力才能完成。</p> <p>因此，有些人雖然會認為 100% 的覆蓋率是一個不錯的目標，但是在實際上，我們可能會因為追求 100% 的覆蓋率而付出過多的心力，而導致測試程式碼的品質反而變差。</p> <h4 id="覆蓋率-100-的誤區">覆蓋率 100% 的誤區</h4> <p>在費盡千辛萬苦後，我們終於達到了 100% 覆蓋率的情況了。</p> <p>然而，100 % 的覆蓋率僅能代表測試程式碼完整（Complete）的覆蓋了產品程式碼，並非代表測試程式碼的品質達到完美（Perfect），接下來我們用個簡單的例子來說明：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">max</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="k">return</span> <span class="nx">x</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;max&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">max</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>在上方案例中，我們可以看見 max 測試案例基本上已經完全覆蓋了 max 函式的實作情況，而我們可以從這個案例中看出兩個問題：</p> <ul> <li>產品程式碼本身有問題，即便測試程式碼覆蓋了 100% 的情況下，產品程式碼本身仍然是有問題的。</li> <li>測試程式碼案例與路徑不足，導致覆蓋率為 100% 的情況下，並沒有測出產品程式碼中的問題與邊際案例（edge case）。</li> </ul> <p>因此覆蓋率 100% 充其量只是一個指標，用來告訴我們測試程式碼是否完整的覆蓋了產品程式碼，而非「完全沒有問題」。</p> <p>倘若我們想要盡可能避免這種情況的發生，這時我們就可以透過突變測試（Mutation Testing）來協助我們。</p> <h4 id="突變測試mutation-testing">突變測試（mutation testing）</h4> <p>突變測試（Mutation Testing）是一種驗證與改善測試程式碼的測試方法，概念上來說，他會盡可能的抽換產品程式碼中的每個角落，接著依照抽換規則來預期測試程式碼的檢測結果。</p> <p>假設我們有個比較函式如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">greaterThan</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">x</span> <span class="o">&gt;</span> <span class="nx">y</span> </span></span></code></pre></td></tr></table> </div> </div><p>而這時我們測試程式碼可能會這麼處理：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return true if x is greater than y&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">0</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return false if x is less than y&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著突變測試可能會將 <code>greaterThan</code> 函式中的 <code>&gt;</code> 符號替換成 <code>&gt;=</code> 符號，此時理論上來說應該會有測試案例失敗，但是實際上測試程式碼卻沒有檢測到這個問題，那就表示我們的測試程式碼並沒有覆蓋到這個案例。</p> <p>此時我們就可以針對這種情況，再補上對應的測試案例：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return true if x is greater than y&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">0</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return false if x is less than y&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">0</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="c1">// 新增案例 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return false if x is equal y&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">greaterThan</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著突變測試再度將 <code>&gt;</code> 符號替換成各種符號（e.g. <code>&lt;=</code>），甚至是將 <code>{}</code> 語句（statement）清空，而諸如此類的手法，就是突變測試的核心概念。</p> <blockquote> <p>若想手動置換產品程式碼中的符號，可以從這些方法下手</p> <ul> <li>operator: +, -, *, /</li> <li>condition: &lt;, &gt;, &lt;=, &gt;=, ==, ===, !=, !==</li> <li>statement: {}, if, else, for, return, throw, try, catch</li> <li>expression: &amp;&amp;, ||, !</li> </ul></blockquote> <h4 id="突變測試的工具">突變測試的工具</h4> <p>雖然說我們可以手動置換產品程式碼中的各種符號，但是這樣的作法會讓我們的工作量變得非常龐大，因此我們可以透過工具來協助我們完成這些工作。</p> <p>以前端領域來說，我們可以透過 <a class="link" href="https://stryker-mutator.io/" target="_blank" rel="noopener" >Stryker Mutator</a> 底下的 <code>stryker-js</code> 工具來完成這些工作。</p> <p><img src="https://live.staticflickr.com/65535/52593422049_ccee2eefd4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Stryker Mutator 的概念就是透過替換不同的符號產生出突變的內容，而我們的測試程式碼應該要捕捉到那些不合理的情況，藉此來保證我們的測試案例有一定的穩固性。</p> <p>然而，可惜的是 <code>stryker-js</code> 目前僅支援到 Jest 環境，尚未支援 Vitest 的環境，因此我這邊就暫不做介紹了，有興趣者可以追蹤該 <a class="link" href="https://github.com/stryker-mutator/stryker-js/issues/3465" target="_blank" rel="noopener" >issue</a> 目前的最新進度。</p> <hr>https://blog.wayne-project.com/2022-12-26/js-rebuild-common-function/Mon, 26 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-26/js-rebuild-common-function/<img src="https://live.staticflickr.com/65535/52586703288_92fa0363b4_o.jpg" alt="Featured image of post 前端面試常考的 JavaScript 手寫題彙整" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/javascript-whiteboard/javascript-utility-functions" target="_blank" rel="noopener" >參考網站</a></p> <p>前端手寫題是許多面試會考的題型，從最基本上的各類效用函式 (例如 <code>debounce</code>、<code>curry</code>、<code>deepClone</code> 等等)，到常見的 JavaScript 方法 (例如 <code>Promise.all</code>)，都不能只會用，還要會自己手寫出來。</p> <p>本篇文章將會節錄常見的手寫題目，並附上解答。除此之外，每一題都有詳細解說，供讀者們參考。</p> <hr> <h2 id="promiseall">Promise.all</h2> <h3 id="promiseall-是什麼">Promise.all() 是什麼？</h3> <p>要實現這個方法前，我們要先知道它在做什麼。根據 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" target="_blank" rel="noopener" >MDN 的定義</a>，<code>Promise.all()</code> 會：</p> <ul> <li>接收一個內有多個 promises 的 <code>Iterable</code> ，例如 Array、Map、Set。</li> <li>如果 <code>Iterable</code> 是空的，例如空 Array，則 fulfilled 值會是空的 Array。</li> <li>如果 <code>Iterable</code> 不是空的，則如果所有的 promises 都 fulfilled，則依序回傳 fulfilled 的值；如果其中有一個 promise 被 rejected，則會馬上 reject。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">promise1</span> <span class="o">=</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">promise2</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">promise3</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="s1">&#39;foo&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">promise1</span><span class="p">,</span> <span class="nx">promise2</span><span class="p">,</span> <span class="nx">promise3</span><span class="p">]).</span><span class="nx">then</span><span class="p">((</span><span class="nx">values</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">values</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="c1">// expected output: Array [3, 42, &#34;foo&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="如何實現簡單版的-promiseall">如何實現簡單版的 Promise.all()</h3> <p>在實現完整版之前，我們先以一個僅處理 Array 的 <code>Promise.all</code> 為例子，了解如何實現核心概念，往下再進一步探討如何處理 <code>Iterable</code>。我們先直接看程式碼，看看你能了解多少。有不懂的地方也不擔心，下面會透過註解，一行行解釋：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">promiseAll</span><span class="p">(</span><span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">Array</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">promises</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nx">TypeError</span><span class="p">(</span><span class="s1">&#39;Arguments must be an array&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">promises</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">([]);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">outputs</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">resolveCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">promises</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">promise</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">promise</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">outputs</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolveCounter</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">resolveCounter</span> <span class="o">===</span> <span class="nx">promises</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">outputs</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">reject</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>讓我們透過以下程式碼與註解來看如何實現吧：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">promiseAll</span><span class="p">(</span><span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 先檢查輸入是不是 array，如果不是的話就回傳錯誤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">Array</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">promises</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nx">TypeError</span><span class="p">(</span><span class="s1">&#39;Arguments must be an array&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 定義中有提到，如果輸入是空的，例如空 array，就 resolve 一個空 array </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">promises</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">([]);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 先宣告一個最終要 resolve 的 outputs，之後每個 promise 被 fulfilled 時，就放到 outputs 裡面 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">outputs</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 我們需要這個 counter 讓我們知道有多少個 promise 已經 fulfilled </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">resolveCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Promise.all() 最終要回傳一個 promise </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">promises</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">promise</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">promise</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 當輸入的每個 promise 成功 fulfilled 時，就放到 outputs </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 透過 index，我們可以確保順序正確 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">outputs</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 每次成功放入時，counter 要加一 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">resolveCounter</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 當 counter 等於 promises 的長度時，代表所有的 promise 都 fulfilled </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 這時最外面的 promise 就可以 resolve </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">resolveCounter</span> <span class="o">===</span> <span class="nx">promises</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">outputs</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">reject</span><span class="p">);</span> <span class="c1">// 如果有任何一個 reject，就直接 reject </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="實現完整版的-promiseall">實現完整版的 Promise.all()</h3> <p>上面這個版本的 <code>Promise.all()</code> 只有處理 Array 這種輸入，但實際上的 <code>Promise.all()</code> 是能接收所有的 <code>Iterable</code>，因此我們可以進一步優化上面的版本(備註：在面試中能寫出上面的版本，基本上要過關是沒問題，當然如果想在面試中展現自己的細心度，那麼進一步優化是更好的選擇)。</p> <p>先想想，如果要處理任意的 <code>Iterable</code> 可以怎麼做？我們可以先判斷丟進來的輸入是不是可以迭代的，如果不是的話，就提早回傳錯誤。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">isIterable</span> <span class="o">=</span> </span></span><span class="line"><span class="cl"> <span class="p">((</span><span class="k">typeof</span> <span class="nx">promises</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">promises</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">promises</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> </span></span><span class="line"><span class="cl"> <span class="k">typeof</span> <span class="nx">promises</span><span class="p">[</span><span class="nx">Symbol</span><span class="p">.</span><span class="nx">iterator</span><span class="p">]</span> <span class="o">===</span> <span class="s1">&#39;function&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isIterable</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nx">TypeError</span><span class="p">(</span><span class="s1">&#39;Arguments must be iterable&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>基本上多了上述步驟的處理，剩下的邏輯就跟 Array 版本的差不多，程式碼如下(不同之處會有註解)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">promiseAll</span><span class="p">(</span><span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 判斷輸入是否為 Iterable </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">isIterable</span> <span class="o">=</span> </span></span><span class="line"><span class="cl"> <span class="p">((</span><span class="k">typeof</span> <span class="nx">promises</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">promises</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">promises</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> </span></span><span class="line"><span class="cl"> <span class="k">typeof</span> <span class="nx">promises</span><span class="p">[</span><span class="nx">Symbol</span><span class="p">.</span><span class="nx">iterator</span><span class="p">]</span> <span class="o">===</span> <span class="s1">&#39;function&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 不是的話就回傳錯誤訊息 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isIterable</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nx">TypeError</span><span class="p">(</span><span class="s1">&#39;Arguments must be iterable&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 把 Iterable 轉成 Array，就可以重複用 Array 版的邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">promises</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">from</span><span class="p">(</span><span class="nx">promises</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">promises</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">([]);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">outputs</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">resolveCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">promises</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">promise</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">promise</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">outputs</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolveCounter</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">resolveCounter</span> <span class="o">===</span> <span class="nx">promises</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">outputs</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">e</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 或是只要有 reject 的，就馬上 reject </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">reject</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="promiserace">Promise.race()</h2> <h3 id="promiserace-是什麼">Promise.race() 是什麼？</h3> <p>要實現這個方法前，我們要先知道它在做什麼。根據 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race" target="_blank" rel="noopener" >MDN 的定義</a>，<code>Promise.race()</code> 會</p> <ul> <li>接收一個內有多個 promises 的 <code>Iterable</code>，例如 Array、Map、Set</li> <li>回傳最先 fulfill 或最先被 reject 的那一個</li> </ul> <h3 id="如何實現-promiserace">如何實現 Promise.race()</h3> <p>我們先直接看程式碼，看看你能了解多少。有不懂的地方也不擔心，下面會透過註解，一行行解釋：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">promiseRace</span><span class="p">(</span><span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">p</span> <span class="k">of</span> <span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="k">catch</span><span class="p">((</span><span class="nx">e</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">reject</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>讓我們透過以下程式碼與註解來看如何實現吧：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">promiseRace</span><span class="p">(</span><span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 迭代過 promises </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">p</span> <span class="k">of</span> <span class="nx">promises</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 只要有 fulfill 的，就馬上 resolve </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">resolve</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="k">catch</span><span class="p">((</span><span class="nx">e</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 或是只要有 reject 的，就馬上 reject </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">reject</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="lodash-的-get">Lodash 的 .get()</h2> <h3 id="lodash-的-get-在做什麼">Lodash 的 .get() 在做什麼？</h3> <p><code>.get()</code> 是很常被用到的一個效用函式，他做的事情是給定一個物件，以及某個路徑，要回傳此路徑的值；如果該路徑不存在於給定的物件，則返回預設值。透過例子會比較好理解 (以下例子來自 <a class="link" href="https://github.com/lodash/lodash/blob/es/get.js" target="_blank" rel="noopener" >Lodash 原始碼</a>)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">object</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">a</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">}</span> <span class="p">}]</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//=&gt; 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">get</span><span class="p">(</span><span class="nx">object</span><span class="p">,</span> <span class="s1">&#39;a[0].b.c&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//=&gt; 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">get</span><span class="p">(</span><span class="nx">object</span><span class="p">,</span> <span class="s1">&#39;a[0][&#34;b&#34;][&#34;c&#34;]&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">//=&gt; &#39;default </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">get</span><span class="p">(</span><span class="nx">object</span><span class="p">,</span> <span class="s1">&#39;a[100].b.c&#39;</span><span class="p">,</span> <span class="s1">&#39;default&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>從上面的例子可以看到 Lodash 這個函式庫，可以接收各種類型的路徑，主要是原始碼當中有 <a class="link" href="https://github.com/lodash/lodash/blob/es/_castPath.js" target="_blank" rel="noopener" >castPath</a> 這個 helper function。<code>castPath</code> 會把上面的 <code>&quot;a[0].b.c&quot;</code>、<code>'a[0][&quot;b&quot;][&quot;c&quot;]'</code> 以及 <code>&quot;a[100].b.c&quot;</code> 都轉成好處理的 <code>['a', '0', 'b', 'c']</code>。</p> <p>因此，如果給定有內建的 <code>castPath</code>，<code>.get()</code> 實際在做的事情是：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 給定一個物件，例如 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">object</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">a</span><span class="o">:</span> <span class="p">[{</span> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">}</span> <span class="p">}]</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 給一個路徑，透過 .get() 找到該路徑的值，例如 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">get</span><span class="p">(</span><span class="nx">object</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="s1">&#39;0&#39;</span><span class="p">,</span> <span class="s1">&#39;b&#39;</span><span class="p">,</span> <span class="s1">&#39;c&#39;</span><span class="p">]);</span> <span class="c1">// 回傳 3 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="如何實現-get">如何實現 .get()</h3> <p>一起來看看如何實現 <code>.get()</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">lodashGet</span><span class="p">(</span><span class="nx">object</span><span class="p">,</span> <span class="nx">path</span><span class="p">,</span> <span class="nx">defaultValue</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 先確認傳進來的 object 不是 null，如果是則直接回傳 defaultValue </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">object</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">defaultValue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">length</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 依循路徑一層層走過該物件，以上面的例子來說，會是 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// path[0] 為 &#39;a&#39;，所以第一次迴圈 object 會變成 object[&#39;a&#39;] 也就是 [{ b: { c: 3 } }] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 第一次迴圈後，count 加 1，所以變成 object[path[1]] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 也就是 [object[&#39;0&#39;]]，意即 { b: { c: 3 } } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 接著 count 再加一，所以 object 會成為 object[path[2]] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 也就是 object[&#39;b&#39;]，意即 { c: 3 } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 接著 count 再加一，所以 object 會成為 object[path[3]] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 也就是 object[&#39;c&#39;]，意即 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 這時 count 為 4，由於 length 也是 4，因為 4 不小於 4，所以跳出迴圈 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">while</span> <span class="p">(</span><span class="nx">object</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">&amp;&amp;</span> <span class="nx">count</span> <span class="o">&lt;</span> <span class="nx">length</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">object</span> <span class="o">=</span> <span class="nx">object</span><span class="p">[</span><span class="nx">path</span><span class="p">[</span><span class="nx">count</span><span class="o">++</span><span class="p">]];</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 因為上面如果 object 是 null 的話，在走完 length 長度前，就會跳出 while 迴圈 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 這種情況下，就代表依循該路徑，會找不到值，所以會是 undefined </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 舉例來說，如果 path 是 [&#39;a&#39;, &#39;1&#39;, &#39;b&#39;, &#39;c&#39;] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 因為 object[&#39;1&#39;] 會是 undefined，所以這時 while 迴圈會在 count 為 2 時終止 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 這種情況下就會是 count &lt; length，所以當 count &lt; length，result 會是 undefined </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">count</span> <span class="o">&amp;&amp;</span> <span class="nx">count</span> <span class="o">==</span> <span class="nx">length</span> <span class="err">？</span> <span class="nx">object</span> <span class="o">:</span> <span class="kc">undefined</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 如果 result 是 undefined，代表依循該路徑，會找不到值，所以回傳預設值 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 如果依循路徑有找到值，就回傳 result </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">result</span> <span class="o">===</span> <span class="kc">undefined</span> <span class="err">？</span> <span class="nx">defaultValue</span> <span class="o">:</span> <span class="nx">result</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="防抖函式debounce">防抖函式(debounce)</h2> <p><strong>防抖(debounce)</strong> 和節流(throttle) 絕對是在考手寫題時最常出現的前幾名，這兩者都能做到優化，但使用情境不太相同。</p> <h3 id="防抖debounce在做什麼">防抖(debounce)在做什麼？</h3> <p>防抖函式(debounce)是指，<strong>將多次操作優化為：只在最後一次執行</strong>。</p> <p>具體來說，當一定時間內沒有持續觸發事件時，事件處理函式才會被執行一次，但如果在設定的時間內又一次觸發了事件，就會重新開始計時。</p> <p>在手寫**防抖(debounce)**函式前，我們先來了解防抖的使用情境。</p> <p>我們以 Google 搜尋框和搜尋建議列表為例子。畫面如下，有一個搜尋框，和一個搜尋建議列表，使用者在此搜尋框輸入文字後，搜尋建議列表會即時呈現結果; 搜尋框的文字只要一改變，搜尋建議列表也會即時更新結果。</p> <p><img src="https://live.staticflickr.com/65535/52585711817_1f8977d9ef_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這樣看起來是很理想的設計吧？但首先要去解決一個問題：如果使用者一直在搜尋框內書寫文字，這樣會一直觸發 API 去更新搜尋建議列表，例如使用者想搜尋 javascript，這時 API 也及時觸發，所以此 API 會被觸發 10 次，而且前 9 次不會是使用這想要的結果。</p> <p>為了提升使用者體驗以及優化程式嗎，這一段功能我們就可以透過**防抖(debounce)**來優化。</p> <p>防抖函式會接受兩個參數：</p> <ul> <li>延遲的時間(ms)</li> <li>要執行的函式</li> </ul> <p>以上面搜尋框的例子來說，我們透過防抖就可以完成：當使用者停止在搜尋框內打入文字超過一定的時間，此時才會去執行觸發 API 的函式。</p> <h3 id="如何實現防抖函式debounce">如何實現防抖函式(debounce)</h3> <p>我們先直接看程式碼，看看你能了解多少。有不懂的地方也不擔心，下面會透過註解，一行行解釋：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">delay</span> <span class="o">=</span> <span class="mi">500</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="nx">delay</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>程式碼註解版本和實際應用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// debounce function 接受兩個參數 </span></span></span><span class="line"><span class="cl"><span class="c1">// 一是：要執行的 function </span></span></span><span class="line"><span class="cl"><span class="c1">// 二是：要延遲的豪秒數，這邊預設 500 毫秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">debounce</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">delay</span> <span class="o">=</span> <span class="mi">500</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// debounce function 最終會回傳一個 function </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 每一次 debounce function 被觸發時，會先清除之前的 timer，避免觸發先前的 fn 函式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 因此只要在 delay 時間內觸發 debounce function，就會一直清除先前的 timer，避免 fn 一直被執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 清除之後，再重新計時 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 當 delay 時間到時，執行 fn </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="nx">delay</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// updateDebounceText 會在延遲 500 ms 後執行 console.log(&#39;call api get search result&#39;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">updateDebounceText</span> <span class="o">=</span> <span class="nx">debounce</span><span class="p">((</span><span class="nx">text</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;call api get search result&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">500</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 搜尋框監聽 input 事件，當 input 改變時 </span></span></span><span class="line"><span class="cl"><span class="c1">// 觸發 updateDebounceText 函式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateDebounceText</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="節流函式throttle">節流函式(throttle)</h2> <h3 id="節流throttle在做什麼">節流(throttle)在做什麼？</h3> <p>**節流(throttle)**指的是，在一段時間內只會執行一次觸發事件的回調函式(callback)，若在這之中又有新事件觸發，則不執行此回調函式。</p> <p>在手寫**節流函式(throttle)**前，我們先來了解節流的使用情境。</p> <p>監聽滾動事件，是搭配節流的使用場景之一。舉例來說：要判斷使用者是否已經滑動到頁面的 30% 處，當到達時會觸發一些動畫效果，因此會透過監聽滾動事件時，計算是否已到達該位置，但如果只要一滾動就計算會非常消耗性能，透過**節流(throttle)**可以將計算的這個回調函式在固定時間內合併一次被執行。</p> <p><strong>這裡不適合使用防抖的原因是，防抖只會在事件停止被觸發後的一段時間內被執行一次。因此如果用防抖，當使用者一直滑動頁面，函式就永遠不會被觸發。這邊我們仍想要函式在滑動過程中被觸發，只是不想那麼頻繁被觸發，這種情境下，節流就可以派上用場。</strong></p> <p>**節流函式(throttle)**會接受兩個參數：</p> <ul> <li>延遲的時間(ms)</li> <li>要執行的回調函式(callback)</li> </ul> <h3 id="如何實現節流函式throttle">如何實現節流函式(throttle)</h3> <p>我們先直接看程式碼，看看你能了解多少。有不懂的地方也不擔心，下面會透過註解，一行行解釋：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">delay</span> <span class="o">=</span> <span class="mi">500</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">timer</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">timer</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="nx">delay</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>程式碼註解版本和實際應用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">fn</span><span class="p">,</span> <span class="nx">delay</span> <span class="o">=</span> <span class="mi">500</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// throttle 本身會回傳一個函式，透過 ...args 拿到該函式的引數 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 如果有計時器，表示還在 delay 的秒數內 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 直接 return，不往下執行程式碼 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">timer</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 如果計時器不等於 null，會進到以下邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// 設定計時器，在 delay 秒數之後，會執行回調函式 fn，並將計時器值為改為 null </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 如果還不到 delay 的秒數，則 timer 的值不為 null，不會進到這段邏輯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 可以達到 throttle 的目的，將一段時間內的操作，集合成一次執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">timer</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="nx">delay</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">updateThrottleText</span> <span class="o">=</span> <span class="nx">throttle</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;throttle&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">500</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 如果一直滑動畫面，會固定 500ms console.log(&#39;throttle&#39;) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;scroll&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateThrottleText</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="淺拷貝shallow-copy與深拷貝deep-copy">淺拷貝(shallow copy)與深拷貝(deep copy)</h2> <p>在 JavaScript 複製值時，當複製的是非**原始型別(primitive type)**的資料型別時，例如：<strong>物件(object)</strong>、**數組(array)**等，會遇到<code>淺拷貝(shallow copy)</code>和<code>深拷貝(deep copy)</code>的差異。在面試時被問到這兩者的差異，你會怎麼回答？如果要你當場手寫深拷貝，你會怎麼寫？</p> <h3 id="比較淺拷貝shallow-copy-和深拷貝deep-copy">比較淺拷貝(shallow copy) 和深拷貝(deep copy)</h3> <p>淺拷貝是指複製值時，原本的變數和新的變數會指向<strong>同一個址(reference)</strong>，換句話說，如果拷貝的物件內容有改變，原本的物件也會被改變。</p> <p>以下程式碼是一個簡單的例子。</p> <p>定義一個新變數 <code>objB</code>，並將其值賦予為 <code>objA</code>，此時改變 <code>objB</code> 也會同時改變 <code>objA</code>，因為這兩個變數是<strong>共享同一個址(reference)</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objA</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objB</span> <span class="o">=</span> <span class="nx">objA</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">objB</span><span class="p">.</span><span class="nx">a</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span> <span class="c1">// 因為是淺拷貝，objA 的 a 也會被改變 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span><span class="p">);</span> <span class="c1">//{a:3, b:2} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objB</span><span class="p">);</span> <span class="c1">//{a:3, b:2} </span></span></span></code></pre></td></tr></table> </div> </div><p>相反地，深拷貝是指在拷貝時<strong>不共享相同的址(reference)</strong>。</p> <p>以上面的例子，如果 <code>objB</code> 是透過<strong>深拷貝</strong>創建出來，當我們在更改 <code>objB</code> 的值時，並不用擔心 <code>objA</code> 的值會同樣被更動到。</p> <p>補充說明，在拷貝值時，有可能會遇到變數是多層的情境，例如是一個物件裡還有物件，深拷貝的定義會是每一層的值都<strong>不會共享址(reference)</strong>。以 lodash 這個套件提供的效用函式舉例，也是分成 <code>clone</code> 和 <code>cloneDeep</code> 兩種不同效用函式，<code>clone</code> 只用於淺拷貝(第一層拷貝)，但 <code>cloneDeep</code> 可用於深拷貝。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// lodash 的淺拷貝 clone </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">objects</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">2</span> <span class="p">}];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">shallow</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="nx">objects</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objects</span> <span class="o">===</span> <span class="nx">shallow</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">shallow</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="nx">objects</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// lodash 的深拷貝 cloneDeep </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">objects</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">2</span> <span class="p">}];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">deep</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">cloneDeep</span><span class="p">(</span><span class="nx">objects</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objects</span> <span class="o">===</span> <span class="nx">deep</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">deep</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="nx">objects</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// false </span></span></span></code></pre></td></tr></table> </div> </div><p>在說明完淺拷貝與深拷貝的差別後，常見的接續問題是「手寫」淺拷貝與深拷貝。</p> <p>假如你不確定怎麼手寫這兩種拷貝方式，可以繼續往下看。</p> <h3 id="如何實現淺拷貝shallow-copy">如何實現淺拷貝(shallow copy)</h3> <h4 id="方法一手動複製值">方法一：手動複製值</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objA</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objB</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">objA</span><span class="p">.</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">objA</span><span class="p">.</span><span class="nx">b</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span><span class="p">.</span><span class="nx">b</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// true, 第二層的物件還是指向相同位置 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="方法二使用-spread-syntax">方法二：使用 spread syntax</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objA</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objB</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">objA</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span><span class="p">.</span><span class="nx">b</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// true, 第二層的物件還是指向相同位置 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="方法三使用-objectassign">方法三：使用 <code>Object.assign</code></h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objA</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objB</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">({},</span> <span class="nx">objA</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span><span class="p">.</span><span class="nx">b</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// true, 第二層的物件還是指向相同位置 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="如何實現深拷貝deep-copy">如何實現深拷貝(deep copy)</h3> <h4 id="方法一使用-jsonparsejsonstringify">方法一：使用 <code>JSON.parse(JSON.stringify(...))</code></h4> <p>這個作法是先將物件用 <code>JSON.stringify</code> 序列化為 string，再透過 <code>JSON.parse</code> 反序列化轉換回物件。</p> <blockquote> <p>要特別注意，這做法只能用於<strong>可序列化的物件</strong>，有些無法序列化的物件例如：<strong>function</strong>、<strong>HTML 的元素</strong>，這些是無法序列化的！所以執行前，需要先確認是否可以序列化，否則在執行 <code>JSON.stringify</code> 時會失敗。</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objA</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">deepCopy</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">item</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objB</span> <span class="o">=</span> <span class="nx">deepCopy</span><span class="p">(</span><span class="nx">objA</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span><span class="p">.</span><span class="nx">b</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// false </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="方法二使用-structuredclonevalue">方法二：使用 <code>structuredClone(value)</code></h4> <p>針對<strong>可序列化的物件</strong>，有另外一種透過 JavaScript 內建的方法達成深拷貝。這種方法是 <code>structuredClone(value)</code>，用法如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objA</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="p">{</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">objB</span> <span class="o">=</span> <span class="nx">structuredClone</span><span class="p">(</span><span class="nx">objA</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">objA</span><span class="p">.</span><span class="nx">b</span> <span class="o">===</span> <span class="nx">objB</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// false </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="方法三考慮多重情況的遞迴式深拷貝">方法三：考慮多重情況的遞迴式深拷貝</h4> <p>通常在面試中，用上述兩種方式，可能會被面試官追問說，如果不用這種現成的方法，要如何手寫？</p> <p>以下的寫法是透過<strong>遞迴</strong>的方式，來進行深拷貝：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">deepClone</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 確認是不是原始型態，如果是的話就直接回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">obj</span> <span class="o">===</span> <span class="kc">null</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">obj</span> <span class="o">!==</span> <span class="s1">&#39;object&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">obj</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 確認是不是 Date 或 RegExp 這種特殊型態，是的話就透過建構式複製一個相同的值，然後回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">obj</span> <span class="k">instanceof</span> <span class="nb">Date</span> <span class="o">||</span> <span class="nx">obj</span> <span class="k">instanceof</span> <span class="nb">RegExp</span><span class="p">)</span> <span class="k">return</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">constructor</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 看 obj 是物件還是陣列，然後先建一個新的空物件 (或空陣列) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="o">?</span> <span class="p">[]</span> <span class="o">:</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 透過 Ojbect.entries 來迭代，然後遞迴地對每個值深拷貝 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 因為 Object.entries 不會列舉整個原型鍊 (prototype chain) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 所以不用透過 obj.hasOwnProperty(key) 額外檢查是不是非原型鏈上的屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">obj</span><span class="p">))</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">result</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">deepClone</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 最後回傳結果 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">result</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="陣列去除重複remove-duplicates方法">陣列去除重複(remove duplicates)方法</h2> <p>在陣列中把重複的項目去除掉，是很常在實際工作中需要執行的操作。因此在 JavaScript 面試時，也很常會被問。這種題目通常會要當場手寫，所以假如你不太確定要怎麼手寫去除重複，一定要在面試前多練習幾次。</p> <h3 id="陣列去除重複題目長什麼樣">陣列去除重複題目長什麼樣？</h3> <p>陣列去除重複的面試題，通常會像下面這樣，給一個陣列，裡面有重複的數字，並要求寫一個 <code>removeDuplicate</code> 函式，輸入是原始陣列，輸出是去除重複數字的陣列。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">originalArr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">9</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">9</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">array</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ans</span> <span class="o">=</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">originalArr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ans</span><span class="p">)</span> <span class="c1">// [9, 1, 2, 3, 4, 8] </span></span></span></code></pre></td></tr></table> </div> </div><p>陣列去重複其實有很多種做法，以下會列出 4 種常見做法。在面試考手寫題時，陣列去重複有可能是單獨一種題型，或者是在解手寫題時一開始需要將陣列進行去重複的操作。</p> <p>建議詢問面試官題目的需求、主動跟面試官討論期望的解法，再選擇要使用哪一種解法。</p> <h3 id="四種解法">四種解法</h3> <h4 id="解法一使用-set-去重複">解法一：使用 <code>Set</code> 去重複</h4> <p><code>Set</code> 的資料格式與用法類似於 <code>Array</code>，但有一特色是 <code>Set</code> 中只能儲存任何資料的唯一值，因此可以先將 <code>Array</code> 轉為 <code>Set</code>，此時重複的值會被移除，再將 <code>Set</code> 轉為 <code>Array</code>。程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">from</span><span class="p">(</span><span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">arr</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 也可以利用 spread syntax 更簡化程式碼 </span></span></span><span class="line"><span class="cl"><span class="c1">// function removeDuplicate(arr) { </span></span></span><span class="line"><span class="cl"><span class="c1">// return [...new Set(arr)]; </span></span></span><span class="line"><span class="cl"><span class="c1">// } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">8</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arrAfter</span> <span class="o">=</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr1After</span><span class="p">);</span> <span class="c1">// [1, 2, 3, 8] </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="解法二-filter-搭配-indexof">解法二： <code>filter</code> 搭配 <code>indexOf</code></h4> <p>此解法先用 array 的 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" target="_blank" rel="noopener" >filter</a> 方法，搭配 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" target="_blank" rel="noopener" >indexOf</a> 方法，只保留第一次出現的值，所以只要是第二次出現的，就會被篩掉，這能確保結果不會有重複的。程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// indexOf 會回傳在這個 array 等同於此值第一個 item 的 index， </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 所以如果 indexOf 回傳的 index 相等於目前 filter 到的值， </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 則代表該值是第一次出現，我們保留起來， </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 反之，如果 index 不等於，則代表此 array 中前面位置已經出現過，所以就 filter 掉。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">filter</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">array</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">array</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="o">===</span> <span class="nx">index</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">8</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arrAfter</span> <span class="o">=</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arrAfter</span><span class="p">);</span> <span class="c1">// [1, 2, 3, 8] </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="解法三-雙層-for-loop">解法三： 雙層 for loop</h4> <p>雙層 for loop 是一種暴力解。依序遍歷整個 array，再透過第二層 for loop 找出重複的值將其移除。程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 第一層 for loop，i 從 index 0 開始，到 arr 最後 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 第二層 for loop，j 從 i + 1 開始，要檢查值是否重複 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">j</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 如果值重複，則透過 splice 方法將 j 位置的值從 arr 去除 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">==</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">j</span><span class="p">])</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">arr</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">j</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 移除重複的值之後，arr length 長度會需要減 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">len</span><span class="o">--</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// j 位置的值被移除，因此 j index 也要減 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">j</span><span class="o">--</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">arr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">8</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arrAfter</span> <span class="o">=</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arrAfter</span><span class="p">);</span> <span class="c1">// [1, 2, 3, 8] </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="解法四-透過-object-或-map-儲存以遍歷過的項目">解法四： 透過 object 或 Map 儲存以遍歷過的項目</h4> <p>我們可以透過 object 或 Map 來儲存已經遍歷過的項目，來找出是否已存在陣列當中，如果還不在，那就放進要輸出的陣列；如果已經在了，就不再放入，這樣一來能確保陣列中沒有重複的值。程式碼如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">seen</span> <span class="o">=</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">newArray</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 遍歷過原本的陣列 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">item</span> <span class="k">of</span> <span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 判斷當前被遍歷到的項目是否已經放入過 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">seen</span><span class="p">[</span><span class="nx">item</span><span class="p">]</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">newArray</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span> <span class="c1">// 如果還沒，則放入要被輸出的新陣列 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">seen</span><span class="p">[</span><span class="nx">item</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// 這時紀錄一下這個項目已經被放入，下次就不會再被放入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">newArray</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">8</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">arrAfter</span> <span class="o">=</span> <span class="nx">removeDuplicate</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arrAfter</span><span class="p">);</span> <span class="c1">// [1, 2, 3, 8] </span></span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-12-21/js-map-set-difference/Wed, 21 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-21/js-map-set-difference/<img src="https://live.staticflickr.com/65535/52576483407_0c40603733_o.jpg" alt="Featured image of post Javascript 中，Map、Set、WeakMap 和 WeakSet 的區別？" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.zhenghao.io/posts/object-vs-map" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/javascript/set-map-weakset-weakmap" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/javascript/map-vs-object" target="_blank" rel="noopener" >參考網站</a></p> <p>ES6 推出了 Map 物件，讓開發者可以透過這個特製資料結構進行鍵值對(key-value pairs)的操作。然而 JavaScript 原始物件(plain object)就可以用來做鍵值對的操作，為什麼還需要 Map 物件呢？ Map 物件解決了什麼問題？那與 Set 又有什麼不同呢？本篇來詳細說明一下。</p> <hr> <h2 id="map-與-object-的差別">Map 與 object 的差別</h2> <h3 id="原始物件的鍵key只可以是字串但-map-的鍵可以是任何東西">原始物件的鍵(key)只可以是字串，但 Map 的鍵可以是任何東西</h3> <p>在用鍵值對處理資料時，很常開發者會用各類東西做為<strong>鍵(key)</strong>，但是在 JavaScript，如果用原始物件，不管用什麼當做鍵，都會被轉換成<strong>字串</strong>，這往往會造成一切錯誤，例如被轉成字串時，原本兩格不同的鍵被轉成同樣的字串，這就導致撞鍵問題。而 Map 物件解決了這個問題，開發者想用什麼當鍵都可以。</p> <h3 id="原始物件不支援迭代iteration但-map-物件有">原始物件不支援迭代(iteration)，但 Map 物件有</h3> <p>過去我們沒辦法直接對一個原始物件用 <code>for...of</code>、<code>forEach</code> 來迭代，而是需要用額外的方法，例如 <code>Object.entries</code>、<code>Object.keys</code> 來協助。但是 Map 物件是<strong>可迭代的(iterable)</strong>，所以我們可以直接對 Map 物件用 <code>for...of</code>、<code>forEach</code>。</p> <h3 id="原始物件的元素沒有順序性map-物件則有順序">原始物件的元素沒有順序性，Map 物件則有順序</h3> <p>上面提到 Map 物件是<strong>可迭代的</strong>，它有一個相關的優點是在迭代時是<strong>有順序性的</strong>。過去用原始物件，即使用用物件方法 (例如 <code>Object.entries</code>、<code>Object.keys</code> 來協助迭代)，迭代出的結果順序不一定會是我們放入鍵值對的順序。</p> <p>但有時候在寫演算法時，我們需要保留順序，這時 Map 物件就會好用很多。</p> <h3 id="map-提供許多鍵值對常用的方法但原始物件沒有">Map 提供許多鍵值對常用的方法，但原始物件沒有</h3> <p>舉例來說，如果要知道一個鍵值對的大小，Map 有 <code>size</code> 方法，簡單又好用；但如果用原始物件，我們可能需要使用 <code>Object.keys</code> 然後搭配 <code>.length</code> 去自己找該物件有多少個鍵，這就麻煩很多。</p> <p>另外 Map 也有提供 <code>clear</code> 方法，可以一次把所有鍵值對刪掉；如果是原始物件就需要一個一個刪。</p> <hr> <h2 id="map">Map</h2> <p>類似於 Object 的資料結構，都是用鍵與值(key-value pair)的形式儲存資料格式，但還是有許多差異。</p> <p>Map 本身是一種<strong>構造函式</strong>，用來生成 <code>Map</code> 這種數據結構，具體做法是 <code>new Map()</code> 來生成實例。</p> <h3 id="常見操作方法">常見操作方法</h3> <p>Map 常見操作方法有</p> <ul> <li><code>set(key, value)</code>： Map 新增元素。</li> <li><code>get(key)</code>： 透過鍵(Key)查詢特定元素，並返回。</li> <li><code>has(key)</code>： 判斷 Map 中是否存在某鍵(key)。</li> <li><code>delete(key)</code>： 透過鍵(Key)從 Map 中移除特定元素。</li> <li><code>size</code>： 方法得到元素的數量。</li> </ul> <h3 id="常見遍歷方法">常見遍歷方法</h3> <p>Map 常見遍歷方法(遍歷順序會是插入順序)</p> <ul> <li><code>values()</code>： 返回 Map 中所有元素的值。</li> <li><code>keys()</code>： 方法等同於 <code>values()</code>。</li> <li><code>entries()</code>： 返回 Set 中所有的元素，因在 Set 中沒有鍵值(Key)，返回的元素會是 <code>[value, value]</code> 的形式。</li> </ul> <hr> <h2 id="map-和-weakmap-的區別">Map 和 WeakMap 的區別</h2> <p>WeakMap 的方法和使用部分與 Map 資料結構相近，本區塊會專注在這兩者不同之處。</p> <ul> <li>WeakMap 只允許物件(Object) 作為鍵名(key)，但是 <strong>null</strong> 除外。而 Map 則是可接受各種資料類型作為<strong>鍵名(key)</strong>。</li> <li>WeakMap 中的鍵名是**「弱引用」(weak reference)**，鍵名(key)所指向的對象可以被垃圾回收，此時的鍵名(key)是無效的。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 如果放入的物件在外面沒有其他引用，在 WeakMap 中會被垃圾回收掉 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">food</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WeakMap</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">fruit</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;apple&#39;</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">food</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">fruit</span><span class="p">,</span> <span class="s1">&#39;good&#39;</span><span class="p">);</span> <span class="c1">// 將 apple 物件置入 WeakMap 中 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">fruit</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// 移除 apple 的引用 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">food</span><span class="p">);</span> <span class="c1">// WeakMap(0) fruit 已經被垃圾回收，因此 WeakMap 中沒有項目 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 一般的 Map，即使放入的物件在外面沒有其他引用，仍在 Map 當中存放 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">food</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Map</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">fruit</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;apple&#39;</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">food</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">fruit</span><span class="p">,</span> <span class="s1">&#39;good&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">food</span><span class="p">);</span> <span class="c1">// WeakMap(1) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">fruit</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">food</span><span class="p">);</span> <span class="c1">// WeakMap(1) fruit 不會被垃圾回收 </span></span></span></code></pre></td></tr></table> </div> </div><p>在上方的強引用程式碼中，雖然 <code>fruit</code> 物件最後被重新賦值為 <code>null</code> (意思等同於無法再透過 <code>fruit</code> 變數獲取該對象值，因為其中的引用被斷開)，但由於 <code>food</code> 與此物件間存在強引用，所以被保留在記憶體中，這就是前面提到的，<strong>強引用會防止物件被垃圾回收，並將物件保留在記憶體當中</strong>； 弱引用則相反，並<strong>不能防止物件被垃圾回收</strong>，當 JavaScript 執行環境執行垃圾回收時，上述弱引用例子中的 <code>fruit</code> 物件會被從記憶體和 WeakMap 中刪除。</p> <p>弱引用的適用情境在於，如果引用的物件在未來可能會被刪除的情況、且不想防止被垃圾回收時，就適合用 WeakMap 或 WeakSet。例如，如果我們想要記錄一些與 DOM 節點相關的數據，有一種方法是使用 <a class="link" href="https://developer.mozilla.org/en-US/docs/Glossary/Expando" target="_blank" rel="noopener" >Expando</a> 擴充節點上的資訊，但壞處是會直接修改到這個 DOM 節點、且如果未來這個節點被移除時，相關資訊不會被垃圾回收掉，這時如果是使用 WeakMap 就會是很好的替代方案。</p> <blockquote> <p>備註： 如果直接將弱引用程式碼的例子在 JavaScript 執行環境中執行，可能還是會看到 WeakMap 中有值，這是因為 JavaScript 執行環境會在特定的時間點執行垃圾回收。</p></blockquote> <hr> <h2 id="set">Set</h2> <p>Set 這個數據結構類似陣列，但是裡面的元素值都是<strong>唯一</strong>，不會有重複的值，無論此值是原始型別(primitive values)或引用型別(object references)。在 JavaScript 當中，Set 本身是一種<strong>構造函式</strong>，用來生成 Set 這種數據結構，具體的做法是透過 <code>new Set()</code> 來生成實例。</p> <h3 id="常見操作方法-1">常見操作方法</h3> <p>Set 常見操作方法有</p> <ul> <li><code>add(value)</code>： 用來新增值。</li> <li><code>delete(value)</code>：用來刪除每個 Set 中的值。</li> <li><code>has(value)</code>：判斷 Set 中是否存在每個值。</li> <li><code>size</code>： 方法得到元素的數量，與陣列使用 <code>arr.length</code> 方法不一樣。</li> </ul> <p>Set 中<strong>沒有鍵值(Key)</strong>，如果使用 <code>entries()</code> 遍歷，返回的元素會是 <code>[value, value]</code> 的形式。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">set1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Set</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="nx">set1</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">42</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">set1</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">&#39;forty two&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">iterator1</span> <span class="o">=</span> <span class="nx">set1</span><span class="p">.</span><span class="nx">entries</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="nx">entry</span> <span class="k">of</span> <span class="nx">iterator1</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">entry</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="c1">// expected output: [42, 42] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// expected output: [&#34;forty two&#34;, &#34;forty two&#34;] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="set-和-weakset-的區別">Set 和 WeakSet 的區別</h2> <p>WeakSet 的方法和使用部分與 Set 資料結構相近，本區塊會專注在這兩者不同之處。</p> <ul> <li>WeakSet 內的元素值只允許是<strong>物件(Object)</strong>，但 Set 可接受<strong>各種資料類型</strong>的值。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">wSet</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WeakSet</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;explainthis&#39;</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">wSet</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// WeakSet {Array(3)} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">wSet</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// WeakSet {{...}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">wSet</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// Uncaught TypeError: Invalid value used in weak set </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>WeakSet 內的元素都是**「弱引用」(weak reference)**，可以被垃圾回收機制回收。假如使用 Set ，即使某個被存入的值，在其他地方已經沒有被引用，該值仍會存在於 Set 當中，不會被垃圾回收。但如果是 WeakSet，則會被垃圾回收。如果要更有意識地做記憶體管理，WeakSet 在許多時候能派上用場。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">disableElements</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WeakSet</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">loginButton</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#login&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">disableElements</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">loginButton</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 使用的時候通過查詢元素是否在集合中，就可以知道它是否被禁用。而一旦元素从DOM樹中删除， </span></span></span><span class="line"><span class="cl"><span class="c1">// WeakMap也會釋放其内存（為了嚴謹，假設没有其它地方引用這個對象）。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">disableElements</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">loginButton</span><span class="p">);</span> <span class="c1">// true </span></span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-12-15/tampermonkey-userscript-tutorial/Thu, 15 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-15/tampermonkey-userscript-tutorial/<img src="https://live.staticflickr.com/65535/52564977913_09952966be_o.jpg" alt="Featured image of post 【Tampermonkey】輕鬆上手 - 油猴腳本開發" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://juejin.cn/post/7138346293042085924" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7022654292880424991" target="_blank" rel="noopener" >參考網站</a></p> <p>油猴腳本運行於<a class="link" href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh-TW" target="_blank" rel="noopener" >油猴插件</a>之上，<a class="link" href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh-TW" target="_blank" rel="noopener" >油猴插件</a>本質上對瀏覽器能力的再封裝。既然如此，我們先來簡單了解一下瀏覽器插件。</p> <hr> <h2 id="瀏覽器插件browser-extension瀏覽器的擴展應用">瀏覽器插件(Browser Extension)：瀏覽器的擴展應用</h2> <p>說的直白一點，就是拿著瀏覽器開放的能力(插件API)，去實現一些小型應用。</p> <p>瀏覽器插件主要由四部分構成：background scripts、content scripts、全局 UI 元素、options page。</p> <ul> <li><strong>background scrips</strong>: 後台腳本，一個後台腳本是一個獨立線程，是游離於各個頁面之外的&quot;上帝之眼&quot;。具有訪問各類插件 API 的能力，但同時也喪失了直接操作頁面的能力。</li> <li><strong>content scripts</strong>：內容腳本，具有直接操作頁面的能力。其實就是在頁面中運行 js 腳本，可以使用 DOM API。<code>content script</code> 只能直接訪問少量插件 API，但能和 <code>background script</code> 進行雙向通信完成數據交換。</li> <li><strong>全局 UI 元素</strong>：瀏覽器層的UI 交互，包括： <ul> <li>在 Toolbar 顯示 icon，定義點擊 icon 後顯示的 Popup 或其他效果</li> <li>增加右鍵選項</li> <li>增加全局快捷鍵</li> <li>改造新Tab 頁、歷史記錄頁、書籤頁</li> </ul> </li> <li><strong>options page</strong>：插件配置頁。</li> </ul> <p>瀏覽器插件的核心機制可以用下圖簡單概括：</p> <p><img src="https://live.staticflickr.com/65535/52564900330_0ebd02f71f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>想必，大家最好奇的還是有哪些 API 以及能用這些 API 做什麼，這裡例舉幾個：</p> <ul> <li><strong>contextMenus</strong>：增加右鍵選項。 <ul> <li>使用選中文本，例如：劃詞翻譯、文本收集</li> <li>快速調用插件功能，例如：打開 DevTool，頁面剪藏</li> </ul> </li> <li><strong>cookies</strong>：增刪改查 cookie(任意域名)，直接拿著本地 cookie 發送請求，不必再做授權。同時由於後台腳本不是 Web 頁面，在發送請求時沒有跨域限制。 <ul> <li>多平台信息聚合</li> <li>多平台信息分發</li> </ul> </li> <li><strong>devtools.panels</strong>：增加 Devtool 面板，這個對前端開發者來說應該很熟悉，React Developer Tools、Vue.js devtools。</li> <li><strong>notifications</strong>：瀏覽器通知，未打開頁面的情況下進行通知，可以輔助一些工具類應用。</li> <li><strong>storage</strong>：全局保存數據，可跟隨瀏覽器帳戶同步。</li> </ul> <p>這裡例舉的只是我常用的一些，只是滄海一粟，更多 API 可以查閱：</p> <ul> <li><a class="link" href="https://developer.chrome.com/docs/extensions/reference/" target="_blank" rel="noopener" >Chrome Extension API Reference</a></li> <li><a class="link" href="https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/developer-guide/api-support" target="_blank" rel="noopener" >支持用於擴展Microsoft Edge API</a></li> <li><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API" target="_blank" rel="noopener" >Mozilla WebExtensions API</a></li> </ul> <p>瀏覽器插件就簡單介紹到這裡，如果有興趣繼續了解，推薦：<a class="link" href="https://developer.chrome.com/docs/extensions/mv3/getstarted/" target="_blank" rel="noopener" >Chrome</a>、<a class="link" href="https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/getting-started/" target="_blank" rel="noopener" >Edge</a>、<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions" target="_blank" rel="noopener" >Mozilla</a>三家的文檔。</p> <hr> <h2 id="油猴插件tampermonkey">油猴插件(Tampermonkey)</h2> <p>瀏覽器插件可以實現各式各樣的功能，但有時候開發者只是想對某一個站點加一點點小功能，如果這也要構建環境打包上架分發，未免就太麻煩了一些；從應用市場角度來看，充斥著顆粒化的應用，市場也會擁擠繁雜不堪。</p> <p>油猴插件為輕量化腳本提供了一個平台，在線編輯器中編寫油猴腳本即時生效，通過 Github、GreasyFork 快速分發。</p> <p>在油猴插件中，<code>content script</code> 起到非常重要的角色，它將用戶編寫的代碼運行在頁面中，同時提供 <code>GM_xxxx</code> 函數封裝瀏覽器的部分能力。封裝的內部實現是和 <code>background script</code> 通信，驅動 <code>background script</code> 調用插件API。</p> <p>對油猴插件簡單了解之後，來看看如何編寫油猴腳本。</p> <hr> <h2 id="tampermonkey-api">Tampermonkey API</h2> <p>油猴腳本由<strong>頭部</strong>和<strong>核心邏輯</strong>兩部分組成。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ==UserScript== </span></span></span><span class="line"><span class="cl"><span class="c1">// @name New Userscript </span></span></span><span class="line"><span class="cl"><span class="c1">// @namespace http://tampermonkey.net/ </span></span></span><span class="line"><span class="cl"><span class="c1">// @version 0.1 </span></span></span><span class="line"><span class="cl"><span class="c1">// @description try to take over the world! </span></span></span><span class="line"><span class="cl"><span class="c1">// @author You </span></span></span><span class="line"><span class="cl"><span class="c1">// @match https://www.tampermonkey.net/documentation.php?ext=dhdg </span></span></span><span class="line"><span class="cl"><span class="c1">// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net </span></span></span><span class="line"><span class="cl"><span class="c1">// @grant none </span></span></span><span class="line"><span class="cl"><span class="c1">// ==/UserScript== </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;use strict&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Your code here... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})();</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="頭部">頭部</h3> <p><strong>頭部</strong>是腳本的一些元信息、更新方式、指定運行頁面、權限聲明，逐一解釋一下：</p> <table> <thead> <tr> <th>配置名</th> <th>作用</th> <th>使用技巧</th> </tr> </thead> <tbody> <tr> <td><strong>@name</strong></td> <td>腳本顯示的名稱</td> <td>加後綴實現國際化，例如：<br/><strong>@name:zh-CN</strong> 指定在瀏覽器語言為中文時顯示的名稱</td> </tr> <tr> <td><strong>@namespace</strong></td> <td>腳本的命名空間，可以理解為腳本的標識</td> <td>為了避免衝突一般使用 Github 倉庫地址</td> </tr> <tr> <td><strong>@version</strong></td> <td>與更新相關，當前版本</td> <td></td> </tr> <tr> <td><strong>@updateURL</strong></td> <td>檢查腳本是否更新地址</td> <td>配合 <strong>@version</strong> 和自動更新使用</td> </tr> <tr> <td><strong>@downloadURL</strong></td> <td>檢測到更新時，去哪下載腳本</td> <td></td> </tr> <tr> <td><strong>@supportURL</strong></td> <td>遇到問題時，用戶去哪反饋</td> <td></td> </tr> <tr> <td><strong>@include</strong></td> <td>腳本在哪些頁面運行</td> <td>可使用正則，不支持 hashtag，多個頁面的地址聲明多個 <strong>@include</strong> 即可</td> </tr> <tr> <td><strong>@match</strong></td> <td>與 <strong>@include</strong> 類似</td> <td></td> </tr> <tr> <td><strong>@exclude</strong></td> <td>腳本禁止在哪些頁面運行，優先於 <strong>@include</strong></td> <td></td> </tr> <tr> <td><strong>@require</strong></td> <td>在腳本運行前引入外部 JavaScript 文件</td> <td>例如：引入 jQuery</td> </tr> <tr> <td><strong>@resource</strong></td> <td>聲明外部資源文件，搭配 <strong>GM_getResourceText</strong> 使用</td> <td>例如：引入 html、icon</td> </tr> <tr> <td><strong>@connect</strong></td> <td>聲明 <strong>GM_xmlhttpRequest</strong> 可訪問的域</td> <td>必須指定才能正常請求</td> </tr> <tr> <td><strong>@grant</strong></td> <td>聲明 <strong>GM_xxx</strong> 函數的使用列表</td> <td>必須先指定權限才能正常使用</td> </tr> <tr> <td><strong>@run-at</strong></td> <td>指定腳本運行時機</td> <td>document-start：盡快執行<br/>document-body：當 body 掛載時執行<br/>document-end：DOMContentLoaded 觸發時執行<br/>document-idle：DOMContentLoaded 觸發後執行，也是默認設置項<br/>context-menu: 右鍵菜單項被點擊時執行</td> </tr> <tr> <td><strong>@author</strong></td> <td>作者名</td> <td></td> </tr> <tr> <td><strong>@description</strong></td> <td>簡短介紹</td> <td>同樣可以加後綴實現國際化，例如：<br/><strong>@description:zh-CN</strong></td> </tr> <tr> <td><strong>@homepage</strong></td> <td>主頁地址</td> <td>如果未設置並且 <strong>@namespace</strong> 是倉庫地址，默認導向倉庫地址</td> </tr> <tr> <td><strong>@icon</strong></td> <td>腳本 icon</td> <td></td> </tr> <tr> <td><strong>@icon64</strong></td> <td>64x64 像素的腳本 icon</td> <td></td> </tr> <tr> <td><strong>@antifeature</strong></td> <td>腳本是否有廣告、挖礦、數據收集等商業行為</td> <td></td> </tr> <tr> <td><strong>@noframes</strong></td> <td>聲明腳本不在 iframe 中運行</td> <td></td> </tr> </tbody> </table> <h3 id="核心邏輯">核心邏輯</h3> <p><strong>核心邏輯</strong>通過一個立即執行函數包裹，避免和全局作用域相互干擾。Tampermonkey 將瀏覽器的部分能力封裝為 <code>GM_XXX</code> 函數以供調用：</p> <table> <thead> <tr> <th>API</th> <th>作用</th> <th>使用技巧</th> </tr> </thead> <tbody> <tr> <td><strong>unsafeWindow</strong></td> <td>訪問頁面的 Window 對象</td> <td></td> </tr> <tr> <td><strong>GM_addStyle(css)</strong></td> <td>創建全局樣式的快捷方式，向頁面插入 style 元素</td> <td>也可以用 DOM 操作手動創建</td> </tr> <tr> <td><strong>GM_addElement(tag_name, attributes)</strong><br/><strong>GM_addElement(parent_node, tag_name, attributes)</strong></td> <td>向 DOM 新建元素的快捷方式</td> <td>也可以用 DOM 操作手動創建</td> </tr> <tr> <td><strong>GM_log(message)</strong></td> <td>在 Console 中打印信息</td> <td>console.log 的快捷方式</td> </tr> <tr> <td><strong>GM_getValue(name, defaultValue)</strong></td> <td>從存儲體中獲取數據</td> <td></td> </tr> <tr> <td><strong>GM_deleteValue(name)</strong></td> <td>從存儲體中刪除數據</td> <td></td> </tr> <tr> <td><strong>GM_listValues()</strong></td> <td>列舉存儲體中所有數據項</td> <td></td> </tr> <tr> <td><strong>GM_addValueChangeListener</strong></td> <td>監聽數據更新</td> <td>例如要使 Tab 間數據同步，可以用監聽 value 達成同步</td> </tr> <tr> <td><strong>GM_removeValueChangeListener</strong></td> <td>移除監聽</td> <td></td> </tr> <tr> <td><strong>GM_getResourceText(name)</strong></td> <td>獲取 <strong>@resource</strong> 中已聲明的資源</td> <td></td> </tr> <tr> <td><strong>GM_getResourceURL(name)</strong></td> <td>獲取 <strong>@resource</strong> 中已聲明的資源(base64 URI 形式)</td> <td></td> </tr> <tr> <td><strong>GM_registerMenuCommand(name, fn, accessKey)</strong></td> <td>在 Tampermonkey 的 popup 中增加選項</td> <td></td> </tr> <tr> <td><strong>GM_unregisterMenuCommand(menuCmdId)</strong></td> <td>移除選項</td> <td></td> </tr> <tr> <td><strong>GM_openInTab(url, options)</strong></td> <td>新開一個 tab 頁</td> <td></td> </tr> <tr> <td><strong>GM_xmlhttpRequest(details)</strong></td> <td>使用後台腳本進行請求，自動帶上 cookie，無跨域問題，目標域需要在 <strong>@connect</strong> 中提前聲明</td> <td></td> </tr> <tr> <td><strong>GM_download(details)</strong></td> <td>下載資源到本地</td> <td></td> </tr> <tr> <td><strong>GM_getTab(callback)</strong></td> <td>獲取當前 tab 的 object 對象</td> <td></td> </tr> <tr> <td><strong>GM_saveTab(tab)</strong></td> <td>通過 tab 的 object 對象重新打開一個 tab</td> <td></td> </tr> <tr> <td><strong>GM_getTabs(callback)</strong></td> <td>獲取當前存活的所有 tab 的對象，以便和其他腳本實例溝通</td> <td></td> </tr> <tr> <td><strong>GM_notification</strong></td> <td>使用插件 notification API 彈出桌面通知</td> <td></td> </tr> <tr> <td><strong>GM_setClipboard</strong></td> <td>複製內容到剪貼板</td> <td></td> </tr> <tr> <td><strong>GM_info</strong></td> <td>獲取腳本的油猴插件的信息</td> <td></td> </tr> </tbody> </table> <p>完整的說明文檔：<a class="link" href="https://www.tampermonkey.net/documentation.php" target="_blank" rel="noopener" >Tampermonkey documentation</a></p> <h2 id="實踐打印-hello-world">實踐：打印 &ldquo;Hello, World&rdquo;</h2> <p>做一個非常簡單的小練習：創建一個名為 &ldquo;Hello&rdquo; 的腳本，當進入掘金和知乎頁面時，在 Console 中打印 &ldquo;Hello, World&rdquo;。</p> <p><img src="https://live.staticflickr.com/65535/52564900350_360ca23caf_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ol> <li>新建腳本</li> <li>修改腳本名稱</li> <li>指定運行地址 <code>@match</code> 或 <code>@include</code></li> <li>直接使用 <code>console.log</code> 或者聲明權限調用 <code>GM_log</code></li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// ==UserScript== </span></span></span><span class="line"><span class="cl"><span class="c1">// @name Hello </span></span></span><span class="line"><span class="cl"><span class="c1">// @namespace http://tampermonkey.net/hello </span></span></span><span class="line"><span class="cl"><span class="c1">// @version 0.1 </span></span></span><span class="line"><span class="cl"><span class="c1">// @description try to take over the world! </span></span></span><span class="line"><span class="cl"><span class="c1">// @author You Name </span></span></span><span class="line"><span class="cl"><span class="c1">// @match https://zhihu.com/* </span></span></span><span class="line"><span class="cl"><span class="c1">// @match https://juejin.cn/* </span></span></span><span class="line"><span class="cl"><span class="c1">// @grant GM_log </span></span></span><span class="line"><span class="cl"><span class="c1">// ==/UserScript== </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;use strict&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">GM_log</span><span class="p">(</span><span class="s2">&#34;Hello World&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">})();</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="搭建舒適的開發環境">搭建舒適的開發環境</h2> <p>使用在線編輯器小試牛刀之後，或許你也發現在線編輯器：</p> <ul> <li>缺少語法補全和自動提示</li> <li>難以格式化代碼</li> </ul> <p>不免懷念起 VSCode。</p> <p>或許你還會有更深遠的考慮，在線編輯器編輯完成後：</p> <ul> <li>怎麼同步到遠程倉庫，怎麼做代碼分發</li> <li>如果要用到新語法，怎麼保證跨瀏覽器兼容性</li> <li>如果代碼越寫越多，沒有模塊化怎麼管理</li> <li>沒有 TS，很難保證長期維護</li> </ul> <p>這些坑我已經踩過了，並且抽出一個腳手架工具 <a class="link" href="https://www.npmjs.com/package/create-tampermonkey" target="_blank" rel="noopener" >create-tampermonkey - npm (npmjs.com)</a>，一鍵搭建舒適的油猴腳本開發環境。</p> <p><img src="https://live.staticflickr.com/65535/52564900355_5c5dab79e3_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>腳手架集成 rollup + babel + eslint + typescript，支持：</p> <ul> <li>自動生成 UserScript Header</li> <li>語法和類型系統：ESNext、ES Module、TypeScript</li> <li>樣式系統：CSS Modules，以及 scss、sass、less、stylus (需安裝對應依賴)</li> <li>靜態資源：導入圖片、SVG 轉換為 Base64，同時支持 SVG Sprite 多語言</li> <li>擴展：基於 Rollup，可以按需安裝插件進行擴展</li> </ul> <h3 id="create-tampermonkey-啟動項目"><strong>create-tampermonkey</strong> 啟動項目</h3> <h4 id="初始化項目">初始化項目</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npx create-tampermonkey demo-userscript </span></span><span class="line"><span class="cl"><span class="c1"># 或者</span> </span></span><span class="line"><span class="cl">npm init tampermonkey demo-userscript </span></span><span class="line"><span class="cl"><span class="c1"># 或者</span> </span></span><span class="line"><span class="cl">yarn create tampermonkey demo-userscript </span></span></code></pre></td></tr></table> </div> </div><h4 id="初始化完畢後進入目錄安裝依賴">初始化完畢後，進入目錄安裝依賴。</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm run dev <span class="c1"># 跑起開發模式</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52563988282_f3f5fd5df6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="到瀏覽器中打開-devuserjs自動進入-tampermonkey-腳本安裝界面">到瀏覽器中打開 <code>dev.user.js</code>，自動進入 Tampermonkey 腳本安裝界面。</h4> <p><img src="https://live.staticflickr.com/65535/52563988297_351ae5b113_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h4 id="最後一步配置油猴插件">最後一步：配置油猴插件</h4> <p>訪問 <a class="link" href="chrome://extension" ><code>chrome://extension</code></a>，找到油猴插件的卡片，點擊 <strong>Details</strong> 進入配置界面。</p> <p><img src="https://live.staticflickr.com/65535/52564447881_bf4223c421_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>勾選 <strong>Allow acess to file URLs</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52564447906_3a3c7d450d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>刷新頁面，出現彈窗，一切就緒。</p> <p><img src="https://live.staticflickr.com/65535/52564726624_5f584154d4_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>用 VSCode 打開項目，這時右下角會推薦一些輔助插件，建議安裝。</p> <p>代碼中使用到的 <code>GM_xxx</code> 會自動提取到 UserScript Header 中，當然也可以在 <code>src/meta.json</code> 中自定義。</p> <p>代碼的默認入口是 <code>src/main.js</code> 文件。</p> <hr> <h2 id="實踐掘金簽到功能">實踐：掘金簽到功能</h2> <p>基於上面初始化的項目 <code>demo-userscript</code> 做一個小功能：掘金簽到功能。</p> <h3 id="定位請求">定位請求</h3> <p>&ldquo;掘金簽到&quot;本質是調用接口，我們的實現思路是追踪點擊&quot;立即簽到&quot;按鈕時請求發送情況，定位到</p> <p><img src="https://live.staticflickr.com/65535/52564978003_bab32df628_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="調試接口">調試接口</h3> <p>打開 Postman 做一下調試，這裡有一個導入小技巧：右鍵拷貝 <strong>cURL</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52564447981_d70749ea73_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>到 Postman 中通過 curl 導入整個請求：點擊左側面板中的 import 按鈕，選擇 Raw text 貼上上一步複製的內容即可。</p> <p><img src="https://live.staticflickr.com/65535/52564726689_b0091f3b75_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="獲取參數">獲取參數</h3> <p><img src="https://live.staticflickr.com/65535/52564978043_fe3c0edc6f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 Postman 中發現請求需要 <code>aid</code>、<code>uuid</code>、<code>_signature</code> 三個參數，試試看不帶參數能否請求成功，先確定好必不可少的參數和請求頭。</p> <p>簡單嘗試後，發現這裡並不需要帶 <code>aid</code>、<code>uuid</code>、<code>_signature</code> 三個參數，主要是依賴 <code>cookie</code>，使用 <code>GM_xmlhttpRequest</code> 會自動帶上對應的 <code>cookie</code>，事情變得簡單。</p> <p>修改 <code>src/main.js</code> 的代碼：</p> <h5 id="srcmainjs">src/main.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">GM_xmlhttpRequest</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s2">&#34;https://api.juejin.cn/growth_api/v1/check_in&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">method</span><span class="o">:</span> <span class="s2">&#34;POST&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;content-type&#34;</span><span class="o">:</span> <span class="s2">&#34;application/json&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;user-agent&#34;</span><span class="o">:</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">responseType</span><span class="o">:</span> <span class="s2">&#34;json&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">onload</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">response</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">data</span> <span class="o">===</span> <span class="s2">&#34;success&#34;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="s2">&#34;簽到成功&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">err_msg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>刷新頁面測試一下。在其他站點刷新一下居然也可以發送請求，這就是插件沒有跨域限制的優勢了。</p> <p>再做一下節流優化。利用 <code>GM_setValue</code> 和 <code>GM_getValue</code> 做持續存儲。</p> <h5 id="srcmainjs-1">src/main.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">storageKey</span> <span class="o">=</span> <span class="s2">&#34;last_sign_timestamp&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 取得上一次簽到的日子 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">lastSignNumberOfDays</span> <span class="o">=</span> <span class="nx">GM_getValue</span><span class="p">(</span><span class="nx">storageKey</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// 計算現在所在的日子 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">currentNumberOfDays</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">valueOf</span><span class="p">()</span> <span class="o">/</span> <span class="mi">1000</span> <span class="o">/</span> <span class="mi">60</span> <span class="o">/</span> <span class="mi">60</span> <span class="o">/</span> <span class="mi">24</span> </span></span><span class="line"><span class="cl"><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 如果今天已经請求過，不再請求 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">if</span> <span class="p">(</span><span class="nx">currentNumberOfDays</span> <span class="o">!==</span> <span class="nx">lastSignNumberOfDays</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">GM_xmlhttpRequest</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s2">&#34;https://api.juejin.cn/growth_api/v1/check_in&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">method</span><span class="o">:</span> <span class="s2">&#34;POST&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;content-type&#34;</span><span class="o">:</span> <span class="s2">&#34;application/json&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;user-agent&#34;</span><span class="o">:</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">responseType</span><span class="o">:</span> <span class="s2">&#34;json&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">onload</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">response</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">data</span> <span class="o">===</span> <span class="s2">&#34;success&#34;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="s2">&#34;簽到成功&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">err_msg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 更新最近一次簽到的日子 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">GM_setValue</span><span class="p">(</span><span class="nx">storageKey</span><span class="p">,</span> <span class="nx">currentNumberOfDays</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>難免會遇到需要獲取數據的情況，可訪問的數據一般有三種：</p> <ol> <li>頁面中包含數據，通過DOM 獲取</li> <li>通過接口請求得到</li> <li>存儲在本地存儲中，localStorage 或 cookie 之類</li> </ol> <p>確定方式很粗暴：</p> <ol> <li>複製參數或參數值到Element 中搜索</li> <li>查看前面幾個請求，看看是否有跡可循</li> <li>到 localStorage 或 cookie 中搜索</li> </ol> <hr> <h2 id="發布腳本">發布腳本</h2> <p>在本地開發完腳本之後，<code>npm run build</code> 構建生產版本並上傳代碼到 Github 或 Gitee。</p> <p>用 Github/Gitee 上文件的 <strong>Raw URL</strong> 就能直接實現分發。如果在 package.json 中設置好 <code>repository</code>，<code>create-tampermonkey</code> 會自動生成 <strong>Raw URL</strong> 並賦給 <code>downloadURL</code>、<code>updateURL</code>。</p> <p>但這樣分發存在的問題是無法統計下載量、從網絡訪問的角度考慮同時維護 Github 和 Gitee 兩個倉庫。</p> <p>另一種分發方式是上傳到腳本平台 <a class="link" href="https://greasyfork.org/zh-CN" target="_blank" rel="noopener" >greasyfork.org/</a>，登錄後即可發布新腳本，如果代碼託管在 Github 或 GitLab 還可以使用 <strong>Webhooks</strong> 實現自動更新。</p> <hr> <h2 id="開發技巧">開發技巧</h2> <h3 id="調試油猴腳本">調試油猴腳本</h3> <p>油猴腳本的運行依託於 <code>background script</code> 和 <code>content script</code>，在調試前需要對運行環境有所區分，例如 <code>GM_xmlhttpRequest</code> 請求是 <code>background script</code> 發出的，DOM 處理和腳本邏輯是 <code>content script</code> 執行的。</p> <p>確定環境之後，就可以使用對應的調試方式進行調試了。</p> <h4 id="調試-background-script">調試 <code>background script</code></h4> <p>還是訪問 <a class="link" href="chrome://extension" >chrome://extension</a>，找到油猴插件的卡片：</p> <p><img src="https://live.staticflickr.com/65535/52564726704_a5c5a856d5_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><code>inspect views</code> 後面有個 <code>background.html</code>，點擊一下彈出 <code>background script</code> 的調試彈窗。</p> <h4 id="調試-content-script">調試 <code>content script</code></h4> <p>在網頁inspect -&gt; Sources -&gt; Page 下找到 <code>Tampermonkey</code> 目錄，頁面中運行的油猴腳本代碼都在這了，選擇目標，斷點調試即可。</p> <p><img src="https://live.staticflickr.com/65535/52564726729_292f203646_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="獲取-userid-等信息">獲取 <code>userId</code> 等信息</h3> <p>有時候需要拿一些額外信息做請求，一般有三種方式：</p> <ol> <li>看看能不能在頁面中搜索到，通過 DOM 獲取</li> <li>看看有沒有接口可以調用獲取</li> <li>看看本地存儲裡有沒有</li> </ol> <h3 id="目標-dom-節點未掛載怎麼辦">目標 DOM 節點未掛載怎麼辦？</h3> <p>如果節點是在首屏加載的，粗暴的方法是使用 <code>setTimeout</code> 做一下延時。</p> <p>但如果是在交互過程中有DOM 更新，就只能引入監聽機制了，使用 <code>MutationObserver</code> 來實現。</p> <p>具體的實例可以看<a class="link" href="https://juejin.cn/post/7012565266827739150" target="_blank" rel="noopener" >【開發記錄】掘金&quot;破圈行動&rdquo; 輔助腳本- 掘金(juejin.cn)</a></p> <h3 id="查看插件源碼">查看插件源碼</h3> <p>瀏覽器插件安裝之後，插件包被下載到本地目錄中，可通過下述方法訪問。</p> <p>訪問 <a class="link" href="chrome://version" >chrome://version</a>，找到 Profile path(存放用戶數據的路徑)</p> <p><img src="https://live.staticflickr.com/65535/52563988382_afd8393105_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>訪問 <a class="link" href="chrome://extensions/" >chrome://extensions/</a>，找到目標插件的ID</p> <p><img src="https://live.staticflickr.com/65535/52564900305_7278510b37_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>將 Profile Path 和插件 ID 拼裝在一起 <code>${Prifile Path}/Extensions/${Extension Id}</code>，便是插件包的路徑了。友情提示，通過命令行訪問時需要在空格前加個 <code>\</code> 轉義一下。</p> <hr> <h2 id="總結">總結</h2> <p>瀏覽器插件利用瀏覽器能力進行功能擴展，具有跨域請求、讀取 cookie、管理歷史記錄、註冊右鍵項等能力。</p> <p>瀏覽器插件的能力很豐富，能夠實現複雜的功能。但如果只是做一些針對頁面的操作，只需要依賴基礎能力，完全可以使用油猴腳本實現，開發更便捷分發更迅速。</p> <p>開發油猴腳本，主要是使用 Tampermonkey API 和 JavaScript。</p> <p><a class="link" href="https://www.npmjs.com/package/create-tampermonkey" target="_blank" rel="noopener" >create-tampermonkey</a> 腳手架提供一個全面的油猴腳本開發環境，依托這個環境，可以使用最新的 ES 語法、TypeScript、CSS Modules，在 VSCode 中進行模塊化開發，大大提高開發效率。</p> <p>開發完畢的油猴腳本可通過 Github/Gitee Raw URL 或 <a class="link" href="https://greasyfork.org/zh-CN" target="_blank" rel="noopener" >Greasy Fork</a> 平台分發。</p> <p>瀏覽器插件的主要分工為 <code>background script</code> 和 <code>content script</code> 兩部分，在調試油猴腳本時需要思考清楚是哪一部分出現的問題，再採用對應的調試方式。</p> <p>實現了兩個小實踐，走出第一步，接下來盡情發揮創造力吧，玩得開心～</p> <blockquote> <p>最後分享一下<a class="link" href="https://github.com/wjdesign/TampermonkeyScripts" target="_blank" rel="noopener" >我的 Tampermonkey UserScripts 清單</a>，持續更新，需要的歡迎下載來使用！</p></blockquote> <hr>https://blog.wayne-project.com/2022-12-05/js-13-useful-array-tricks/Mon, 05 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-05/js-13-useful-array-tricks/<img src="https://live.staticflickr.com/65535/52544052174_68e62fb7f8_o.png" alt="Featured image of post JavaScript 中關於 Array 的 13 個入門小技巧！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://codelove.tw/@tony/post/lqOvap" target="_blank" rel="noopener" >參考網站</a></p> <p>陣列是 JavaScript 中最常用到的概念之一。處理資料時很常用到這種資料結構。這篇文章介紹一些陣列操作的基本方法，希望對你有幫助！</p> <hr> <h2 id="從陣列中移除重複項目">從陣列中移除重複項目</h2> <p>很經典的面試問題，需要從陣列中找出獨立值。使用 <strong>Set</strong> 資料型態，可以輕易完成這任務。這邊介紹兩種方法，一個使用 <strong>.from()</strong> 一個使用 <strong>&hellip; 展開運算子</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;banana&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;watermelon&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;grape&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// First method </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">uniqueFruits</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">from</span><span class="p">(</span><span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">fruits</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">uniqueFruits</span><span class="p">);</span> <span class="c1">// returns [&#34;banana&#34;, &#34;apple&#34;, &#34;orange&#34;, &#34;watermelon&#34;, &#34;grape&#34;] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// Second method </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">uniqueFruits2</span> <span class="o">=</span> <span class="p">[...</span><span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">fruits</span><span class="p">)];</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">uniqueFruits2</span><span class="p">);</span> <span class="c1">// returns [&#34;banana&#34;, &#34;apple&#34;, &#34;orange&#34;, &#34;watermelon&#34;, &#34;grape&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="從陣列中抽換掉某個元素">從陣列中抽換掉某個元素</h2> <p>這個情境也很常見。有一個簡單的好方法，就是使用 <strong>.splice</strong> ，參數分別是開始修改的位置、修改幾個元素、要更改成哪些值。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;banana&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;watermelon&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;grape&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="nx">fruits</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="s2">&#34;potato&#34;</span><span class="p">,</span> <span class="s2">&#34;tomato&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fruits</span><span class="p">);</span> <span class="c1">// returns [&#34;potato&#34;, &#34;tomato&#34;, &#34;orange&#34;, &#34;watermelon&#34;, &#34;apple&#34;, &#34;orange&#34;, &#34;grape&#34;, &#34;apple&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="不用-map-的-map-功能">不用 <strong>.map()</strong> 的 map 功能</h2> <p><strong>.map()</strong> 很常用、大家都會用，但有一個方法也很不錯，也很簡潔，就是 <strong>.from()</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">friends</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;John&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">22</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Peter&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">23</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Mark&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">24</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Maria&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">22</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Monica&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">21</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Martha&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">19</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">friendsNames</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">from</span><span class="p">(</span><span class="nx">friends</span><span class="p">,</span> <span class="p">({</span><span class="nx">name</span><span class="p">})</span> <span class="p">=&gt;</span> <span class="nx">name</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">friendsNames</span><span class="p">);</span> <span class="c1">// returns [&#34;John&#34;, &#34;Peter&#34;, &#34;Mark&#34;, &#34;Maria&#34;, &#34;Monica&#34;, &#34;Martha&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="清空陣列">清空陣列</h2> <p>有時候你會需要清空一個陣列。一個一個把元素刪掉太慢了，下面這個方法快多了：直接把長度設為 0 吧！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;banana&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;watermelon&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;grape&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">fruits</span><span class="p">.</span><span class="nx">length</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fruits</span><span class="p">);</span> <span class="c1">// returns [] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="把陣列轉換為物件">把陣列轉換為物件</h2> <p>有時需要把陣列轉成物件。使用 <strong>&hellip; 展開運算子</strong>可以很快完成這任務。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;banana&#34;</span><span class="p">,</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;watermelon&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fruitsObj</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">fruits</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fruitsObj</span><span class="p">);</span> <span class="c1">// returns {0: &#34;banana&#34;, 1: &#34;apple&#34;, 2: &#34;orange&#34;, 3: &#34;watermelon&#34;, 4: &#34;apple&#34;, 5: &#34;orange&#34;, 6: &#34;grape&#34;, 7: &#34;apple&#34;} </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="陣列塞滿資料">陣列塞滿資料</h2> <p>有時需要把一個陣列塞滿某些資料。使用 <strong>.fill()</strong> 可以快速完成這任務：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">newArray</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="mi">10</span><span class="p">).</span><span class="nx">fill</span><span class="p">(</span><span class="s2">&#34;1&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newArray</span><span class="p">);</span> <span class="c1">// returns [&#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;, &#34;1&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="合併陣列">合併陣列</h2> <p>老方法是使用 <strong>.concat()</strong> 來合併。但有個新方法，就是用 <strong>&hellip; 展開運算子</strong>，非常簡單俐落：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">fruits</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;banana&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">meat</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;poultry&#34;</span><span class="p">,</span> <span class="s2">&#34;beef&#34;</span><span class="p">,</span> <span class="s2">&#34;fish&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">vegetables</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;potato&#34;</span><span class="p">,</span> <span class="s2">&#34;tomato&#34;</span><span class="p">,</span> <span class="s2">&#34;cucumber&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">food</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">fruits</span><span class="p">,</span> <span class="p">...</span><span class="nx">meat</span><span class="p">,</span> <span class="p">...</span><span class="nx">vegetables</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">food</span><span class="p">);</span> <span class="c1">// [&#34;apple&#34;, &#34;banana&#34;, &#34;orange&#34;, &#34;poultry&#34;, &#34;beef&#34;, &#34;fish&#34;, &#34;potato&#34;, &#34;tomato&#34;, &#34;cucumber&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="找出陣列交集">找出陣列交集</h2> <p>這也是 JavaScript 面試最常見的問題。這邊使用 <strong>filter</strong> 跟 <strong>.includes()</strong> 來完成這任務。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">numOne</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">8</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">numTwo</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">duplicatedValues</span> <span class="o">=</span> <span class="p">[...</span><span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">numOne</span><span class="p">)].</span><span class="nx">filter</span><span class="p">(</span><span class="nx">item</span> <span class="p">=&gt;</span> <span class="nx">numTwo</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">item</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">duplicatedValues</span><span class="p">);</span> <span class="c1">// returns [2, 4, 6] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="把-false-相關的值從陣列移除">把 <strong>false</strong> 相關的值從陣列移除</h2> <p><strong>false</strong> 相關值包含 <strong>false</strong>、<strong>0</strong>、<strong>&quot;&quot;</strong>、<strong>null</strong>、<strong>NaN</strong>、<strong>undefined</strong>。</p> <p>使用 <strong>.filter()</strong> 可以俐落地過濾陣列。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">mixedArr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="s2">&#34;blue&#34;</span><span class="p">,</span> <span class="s2">&#34;&#34;</span><span class="p">,</span> <span class="kc">NaN</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">,</span> <span class="s2">&#34;white&#34;</span><span class="p">,</span> <span class="kc">false</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">trueArr</span> <span class="o">=</span> <span class="nx">mixedArr</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nb">Boolean</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">trueArr</span><span class="p">);</span> <span class="c1">// returns [&#34;blue&#34;, 9, true, &#34;white&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="從陣列撈出隨機元素">從陣列撈出隨機元素</h2> <p>有時需要隨機撈元素出來。根據陣列長度，隨機撈一個索引出來，就可以囉。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;blue&#34;</span><span class="p">,</span> <span class="s2">&#34;white&#34;</span><span class="p">,</span> <span class="s2">&#34;green&#34;</span><span class="p">,</span> <span class="s2">&#34;navy&#34;</span><span class="p">,</span> <span class="s2">&#34;pink&#34;</span><span class="p">,</span> <span class="s2">&#34;purple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;yellow&#34;</span><span class="p">,</span> <span class="s2">&#34;black&#34;</span><span class="p">,</span> <span class="s2">&#34;brown&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">randomColor</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">[(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="p">(</span><span class="nx">colors</span><span class="p">.</span><span class="nx">length</span><span class="p">)))]</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="逆轉陣列">逆轉陣列</h2> <p>不需要複雜的迴圈跟函數，也能逆轉一個陣列。這樣一行就可以：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">colors</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;blue&#34;</span><span class="p">,</span> <span class="s2">&#34;white&#34;</span><span class="p">,</span> <span class="s2">&#34;green&#34;</span><span class="p">,</span> <span class="s2">&#34;navy&#34;</span><span class="p">,</span> <span class="s2">&#34;pink&#34;</span><span class="p">,</span> <span class="s2">&#34;purple&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">,</span> <span class="s2">&#34;yellow&#34;</span><span class="p">,</span> <span class="s2">&#34;black&#34;</span><span class="p">,</span> <span class="s2">&#34;brown&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">reversedColors</span> <span class="o">=</span> <span class="nx">colors</span><span class="p">.</span><span class="nx">reverse</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">reversedColors</span><span class="p">);</span> <span class="c1">// returns [&#34;brown&#34;, &#34;black&#34;, &#34;yellow&#34;, &#34;orange&#34;, &#34;purple&#34;, &#34;pink&#34;, &#34;navy&#34;, &#34;green&#34;, &#34;white&#34;, &#34;blue&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="lastindexof-方法"><strong>.lastIndexOf()</strong> 方法</h2> <p>這個有趣的方法，可以找到特定元素<strong>最後一次</strong>出現的索引。如果陣列中有重複值，就可用上這方法。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">lastIndex</span> <span class="o">=</span> <span class="nx">nums</span><span class="p">.</span><span class="nx">lastIndexOf</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">lastIndex</span><span class="p">);</span> <span class="c1">// returns 9 </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="陣列中全部數值加總">陣列中全部數值加總</h2> <p>這也是面試常見考題。使用 <strong>.reduce</strong> 可以快速解決這問題。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">6</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">nums</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">);</span> <span class="c1">// returns 14 </span></span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-12-05/js-7-killer-one-liners/Mon, 05 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-05/js-7-killer-one-liners/<img src="https://live.staticflickr.com/65535/52544218553_b60d2ccdec_o.jpg" alt="Featured image of post 一行 JavaScript 就能完成的 7 個小任務！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://dev.to/ruppysuppy/7-killer-one-liners-in-javascript-one" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://codelove.tw/@tony/post/2anPxn" target="_blank" rel="noopener" >參考網站</a></p> <p>一行程式碼有時可以做到很多事。這邊有七個小任務都用一行就可以完成，給您參考！</p> <hr> <h2 id="洗亂陣列">洗亂陣列</h2> <p>在需要將陣列隨機打亂的時候，這行會很好用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">shuffleArray</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">sort</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">-</span> <span class="mf">0.5</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Testing </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">10</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">shuffleArray</span><span class="p">(</span><span class="nx">arr</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="複製到剪貼板">複製到剪貼板</h2> <p>在寫網站功能的時候，有時會需要這個功能。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">copyToClipboard</span> <span class="o">=</span> <span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">=&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">navigator</span><span class="p">.</span><span class="nx">clipboard</span><span class="o">?</span><span class="p">.</span><span class="nx">writeText</span> <span class="o">&amp;&amp;</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">clipboard</span><span class="p">.</span><span class="nx">writeText</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Testing </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">copyToClipboard</span><span class="p">(</span><span class="s2">&#34;Hello World!&#34;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="不重複元素">不重複元素</h2> <p>每種語言都有實作自己的 <strong>Hash List</strong>，在 JavaScript 中，叫做 <strong>Set</strong>。可以使用 <strong>Set Data Structure</strong> 輕鬆地找出不重複元素。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">getUnique</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">[...</span><span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">arr</span><span class="p">)];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Testing </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getUnique</span><span class="p">(</span><span class="nx">arr</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="檢測深色模式">檢測深色模式</h2> <p>深色模式日益流行，如果用戶在他們的設備中啟用了深色模式，最好將您的應用程序也切換到深色模式。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">isDarkMode</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span> <span class="o">&amp;&amp;</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s2">&#34;(prefers-color-scheme: dark)&#34;</span><span class="p">).</span><span class="nx">matches</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Testing </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">isDarkMode</span><span class="p">());</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="滑到頂部">滑到頂部</h2> <p>新手常常發現滑動元素很難做。最簡單的方法是使用 <strong>scrollIntoView</strong>。</p> <p>加上 <strong>behavior</strong> 可以讓動畫更流暢。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">scrollToTop</span> <span class="o">=</span> <span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">=&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollIntoView</span><span class="p">({</span> <span class="nx">behavior</span><span class="o">:</span> <span class="s2">&#34;smooth&#34;</span><span class="p">,</span> <span class="nx">block</span><span class="o">:</span> <span class="s2">&#34;start&#34;</span> <span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="滑到底部">滑到底部</h2> <p>一樣使用 <strong>scrollIntoView</strong> 就可以，只需要將 <strong>block</strong> 值改成 <strong>end</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">scrollToBottom</span> <span class="o">=</span> <span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">=&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollIntoView</span><span class="p">({</span> <span class="nx">behavior</span><span class="o">:</span> <span class="s2">&#34;smooth&#34;</span><span class="p">,</span> <span class="nx">block</span><span class="o">:</span> <span class="s2">&#34;end&#34;</span> <span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="產生隨機顏色">產生隨機顏色</h2> <p>如果您需要隨機色碼，可以參考這段：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">generateRandomHexColor</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> </span></span><span class="line"><span class="cl"> <span class="sb">`#</span><span class="si">${</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mh">0xffffff</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-11-28/ts-string-type-vs-class/Mon, 28 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-28/ts-string-type-vs-class/<img src="https://live.staticflickr.com/65535/52549840532_0ea4bef6e7_o.png" alt="Featured image of post TypeScript 裡 string 和 String，還真不僅僅是大小寫的區別！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.geeksforgeeks.org/what-is-the-difference-between-string-and-string-in-typescript/?ref=lbp" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.geeksforgeeks.org/variables-datatypes-javascript/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.tutorialspoint.com/typescript/typescript_strings.htm" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.gushiciku.cn/pl/aSb4/zh-tw" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="背景">背景</h2> <p>與 JavaScript 語言不同的是，TypeScript 使用的是<strong>靜態型別</strong>(<strong>強型別</strong>)，比如說它指定了變數可以儲存的資料型別。</p> <p>如下圖所示，如果在 JS 中，指定變數可以儲存的資料型別，會報錯：“<strong>型別註釋只可以在TS檔案中被使用</strong>”：</p> <p><img src="https://blog.wayne-project.com/" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>TypeScript 是 JavaScript 的超集(superset)，TypeScript 需要編譯(語法轉換)生成 JavaScript 才能被瀏覽器執行，它也區分了 string 和 String 這兩個資料型別。通常來說，string 表示原生型別，而 String 表示物件。</p> <hr> <h2 id="原生-string">原生 string</h2> <p>JavaScript 在 ES6 標準裡支援<code>6種</code>原生型別，<code>string</code> 是其中之一。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testVar1</span>: <span class="kt">number</span> <span class="o">=</span> <span class="mi">19</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testVar2</span>: <span class="kt">boolean</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testVar3</span>: <span class="kt">string</span> <span class="o">=</span><span class="s2">&#34;Hi Wayne!&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testVar4</span>: <span class="kt">null</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testVar5</span>: <span class="kt">undefined</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testVar6</span>: <span class="kt">object</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s2">&#34;Wayne Cloud!&#34;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>原生的 string 是<strong>不包含屬性</strong>的值(即沒有properties)，包括字面上沒有定義型別、字面上定義了 string、字面上定義了 String和一些從 string 函式呼叫返回的 strings 也都可以被歸為原生型別：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg1</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s2">&#34;Hello world!&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg2</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s2">&#34;Hello world!&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg22</span> <span class="o">=</span> <span class="nx">returnStr</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><p>以上三個變數的型別(<code>typeof()</code>)是 <code>string</code>。</p> <hr> <h2 id="物件-string">物件 String</h2> <p>物件是不同屬性的累積，一個物件可以呼叫許多相應的方法。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg3</span>: <span class="kt">String</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s1">&#39;Hello world!&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>這個變數 msg3 的型別就是 <code>object</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">msg3</span><span class="p">));</span> <span class="c1">// object </span></span></span></code></pre></td></tr></table> </div> </div><p><code>String</code> 物件支援的方法：</p> <table> <thead> <tr> <th>No.</th> <th>Method</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/charAt" target="_blank" rel="noopener" >charAt()</a></td> <td>charAt() 方法從一個字符串中返回指定的字符</td> </tr> <tr> <td>2.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt" target="_blank" rel="noopener" >charCodeAt()</a></td> <td>charCodeAt() 方法返回 0 到 65535 之間的整數，表示給定索引處的 UTF-16 代碼單元</td> </tr> <tr> <td>3.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/concat" target="_blank" rel="noopener" >concat()</a></td> <td>concat() 方法將一個或多個字符串與原字符串連接合併，形成一個新的字符串並返回</td> </tr> <tr> <td>4.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf" target="_blank" rel="noopener" >indexOf()</a></td> <td>indexOf() 方法，給定一個參數：要搜索的子字符串，搜索整個調用字符串，並返回指定子字符串第一次出現的索引。給定第二個參數：一個數字，該方法將返回指定子字符串在大於或等於指定數字的索引處的第一次出現</td> </tr> <tr> <td>5.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf" target="_blank" rel="noopener" >lastIndexOf()</a></td> <td>lastIndexOf() 方法返回調用 String 對象的指定值最後一次出現的索引，在一個字符串中的指定位置 fromIndex 處從後向前搜索。如果沒找到這個特定值則返回 -1。<br/><br/>該方法將從尾到頭地檢索字符串 str，看它是否含有子串 searchValue。開始檢索的位置在字符串的 fromIndex 處或字符串的結尾(沒有指定 fromIndex 時)。如果找到一個 searchValue，則返回 searchValue 的第一個字符在 str 中的位置。 str 中的字符位置是從 0 開始的</td> </tr> <tr> <td>6.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" target="_blank" rel="noopener" >localeCompare()</a></td> <td>localeCompare() 方法返回一個數字來指示一個參考字符串是否在排序順序前面或之後或與給定字符串相同。<br/><br/>新的 locales 和 options 參數能讓應用程序定制函數的行為，即指定用來排序的語言。 locales 和 options 參數完全取決於實現，在舊的實現中忽略這兩個參數</td> </tr> <tr> <td>7.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match" target="_blank" rel="noopener" >match()</a></td> <td>match() 方法檢索返回一個字符串匹配正則表達式的結果</td> </tr> <tr> <td>8.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace" target="_blank" rel="noopener" >replace()</a></td> <td>replace() 方法返回一個由替換值(replacement)替換部分或所有的模式(pattern)匹配項後的新字符串。模式可以是一個字符串或者一個<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank" rel="noopener" >正則表達式</a>，替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。如果 pattern 是字符串，則僅替換第一個匹配項</td> </tr> <tr> <td>9.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/search" target="_blank" rel="noopener" >search()</a></td> <td>search() 方法執行正則表達式和 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener" >String</a> 對象之間的一個搜索匹配</td> </tr> <tr> <td>10.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice" target="_blank" rel="noopener" >slice()</a></td> <td>slice() 方法提取某個字符串的一部分，並返回一個新的字符串，且不會改動原字符串</td> </tr> <tr> <td>11.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank" rel="noopener" >split()</a></td> <td>split() 方法使用指定的分隔符字符串將一個 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener" >String</a> 對象分割成子字符串數組，以一個指定的分割字串來決定每個拆分的位置</td> </tr> <tr> <td>12.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr" target="_blank" rel="noopener" >substr()</a></td> <td>substr() 方法返回一個字符串中從指定位置開始到指定字符數的字符</td> </tr> <tr> <td>13.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring" target="_blank" rel="noopener" >substring()</a></td> <td>substring() 方法返回一個字符串在開始索引到結束索引之間的一個子集，或從開始索引直到字符串的末尾的一個子集</td> </tr> <tr> <td>14.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase" target="_blank" rel="noopener" >toLocaleLowerCase()</a></td> <td>toLocaleLowerCase() 方法根據任何指定區域語言環境設置的大小寫映射，返回調用字符串被轉換為小寫的格式</td> </tr> <tr> <td>15.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase" target="_blank" rel="noopener" >toLocaleUpperCase()</a></td> <td>toLocaleUpperCase() 方法根據本地主機語言環境把字符串轉換為大寫格式，並返迴轉換後的字符串</td> </tr> <tr> <td>16.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase" target="_blank" rel="noopener" >toLowerCase()</a></td> <td>toLowerCase() 會將調用該方法的字符串值轉為小寫形式，並返回</td> </tr> <tr> <td>17.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toString" target="_blank" rel="noopener" >toString()</a></td> <td>字符串對象的 toString() 方法返回一個字符串，表示指定的字符串</td> </tr> <tr> <td>18.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase" target="_blank" rel="noopener" >toUpperCase()</a></td> <td>toUpperCase() 方法將調用該方法的字符串轉為大寫形式並返回(如果調用該方法的值不是字符串類型會被強制轉換)</td> </tr> <tr> <td>19.</td> <td><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf" target="_blank" rel="noopener" >valueOf()</a></td> <td>valueOf() 方法返回 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener" >String</a> 對象的原始值</td> </tr> </tbody> </table> <hr> <h2 id="程式碼對比">程式碼對比</h2> <p>我們對下面4個變數進行型別的探索與比較：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">&#39;Hello world!&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg2</span>: <span class="kt">String</span> <span class="o">=</span> <span class="s1">&#39;Hello world!&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">msg22</span> <span class="o">=</span> <span class="s1">&#39;Hello world!&#39;</span><span class="p">;</span> <span class="c1">// 字面上沒有定義型別 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">msg3</span>: <span class="kt">String</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s1">&#39;Hello world!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">msg</span><span class="p">));</span> <span class="c1">// string </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">msg2</span><span class="p">));</span> <span class="c1">// string </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">msg22</span><span class="p">));</span> <span class="c1">// string </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">msg3</span><span class="p">));</span> <span class="c1">// object </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span> <span class="o">===</span> <span class="nx">msg2</span><span class="p">);</span> <span class="c1">// true </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span> <span class="o">===</span> <span class="nx">msg3</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg2</span> <span class="o">===</span> <span class="nx">msg3</span><span class="p">);</span> <span class="c1">// false </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="為什麼需要-string-物件">為什麼需要 String 物件</h2> <p>首先，當我們使用關鍵字 <code>new</code> 新建一個 <code>String</code> 物件的時候，Typescript 會建立一個<strong>新的物件</strong>；</p> <p>即我們用 <code>new</code> 新建了兩個 <code>String</code> 物件，即使內容相同，它們也是指向<code>不同</code>的記憶體。</p> <p>舉下面兩個例子：</p> <ol> <li>當用 a1、b1 代表相同值的兩個變數的時候，它們是相同的；而當用 <strong>new</strong> 新建兩個物件的時候，即使值相同，它們也是不同的：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a1</span> <span class="o">=</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">b2</span> <span class="o">=</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a1</span> <span class="o">===</span> <span class="nx">b1</span><span class="p">);</span> <span class="c1">// true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a2</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s2">&#34;Hello World&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">b2</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s2">&#34;Hello World&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a2</span> <span class="o">===</span> <span class="nx">b2</span><span class="p">);</span> <span class="c1">// false </span></span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li><strong>eval()</strong> 函式的作用：用來計算表示式的值。如果我們把 <strong>eval()</strong> 直接賦給 string，而 string 裡面是計算式的字串，那麼它會返回計算後的值；而如果我們把 <strong>eval()</strong> 賦給 String，因為它<strong>不是</strong>原生型別，它只會返回 <strong>String</strong> 這個物件：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">a3</span> <span class="o">=</span> <span class="s2">&#34;3 * 9&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">eval</span><span class="p">(</span><span class="nx">a3</span><span class="p">));</span> <span class="c1">// 27 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">b3</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s2">&#34;8 + 20&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">eval</span><span class="p">(</span><span class="nx">b3</span><span class="p">));</span> <span class="c1">// Warning：Argument of type &#39;String&#39; is not assignable to parameter of type &#39;string&#39;. &#39;string&#39; is a primitive, but &#39;String&#39; is a wrapper object. Prefer using &#39;string&#39; when possible.ts(2345) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">eval</span><span class="p">(</span><span class="nx">b3</span><span class="p">.</span><span class="nx">toSTring</span><span class="p">()));</span> <span class="c1">// 28 </span></span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>其次，因為 String 物件<strong>可以有屬性</strong>。我們可以用 String 物件在屬性裡保留一個額外的值。即使這個用法並不常見，但是仍然是 TS 的一個特性：</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">prim</span> <span class="o">=</span> <span class="s1">&#39;hello Wayne&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">obj</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">String</span><span class="p">(</span><span class="s1">&#39;hello Wayne Cloud&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">prim</span><span class="p">.</span><span class="nx">property</span> <span class="o">=</span> <span class="s1">&#39;PaaS&#39;</span><span class="p">;</span> <span class="c1">// Invalid </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj</span><span class="p">.</span><span class="nx">property</span> <span class="o">=</span> <span class="s1">&#39;PaaS&#39;</span><span class="p">;</span> <span class="c1">// Valid </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">property</span><span class="p">);</span> <span class="c1">// 輸出為 PaaS </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="兩者區別總結">兩者區別總結</h2> <table> <thead> <tr> <th>string 原生型別</th> <th>String 物件</th> </tr> </thead> <tbody> <tr> <td>廣泛被使用</td> <td>幾乎很少被使用</td> </tr> <tr> <td>只會保留值</td> <td>有能力除了值之外，還可以保留屬性</td> </tr> <tr> <td>值是不可變的，因此執行緒安全</td> <td>String物件是可變的</td> </tr> <tr> <td>沒有任何方法</td> <td>String物件有各種方法</td> </tr> <tr> <td>不能建立兩個獨立的字面上值相同的 string</td> <td>可以用 <strong>new</strong> 建立兩個物件</td> </tr> <tr> <td>是原生的資料型別</td> <td>包裝原生資料型別來建立一個物件</td> </tr> <tr> <td>傳遞的值是原生資料本身的拷貝</td> <td>傳遞的值是實際資料的引用</td> </tr> <tr> <td>當使用 eval() 函式時，將<strong>直接作為原始碼</strong>進行處理</td> <td>當使用 eval() 函式時，將被<strong>轉換為字串</strong></td> </tr> </tbody> </table> <hr>https://blog.wayne-project.com/2022-11-22/create-own-vscode-extension/Tue, 22 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-22/create-own-vscode-extension/<img src="https://live.staticflickr.com/65535/52516420035_bc4b9df19c_o.png" alt="Featured image of post 今天來搞一個屬於自己的 VScode Extension 吧！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://ithelp.ithome.com.tw/articles/10240741" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://juejin.cn/post/7076649162653040647" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://wowissu.medium.com/%E4%BE%86%E9%BB%9E-vscode-extension-ac57d67514d" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="前言">前言</h2> <p>VScode 使用者一定會安裝各種 Extension 來建立一個適合自己的開發環境，而這些強大的 Extension 大部分都由世界各地的愛用者開發並發布(publish) ，一切都是為了要讓 VSCode 更加實用上手甚至美觀。</p> <p>這篇就是要分享如何建立並發佈一個 Extension，英文程度不錯的建議直接閱讀<a class="link" href="https://code.visualstudio.com/api/get-started/your-first-extension" target="_blank" rel="noopener" >官方文件</a>，會有更加詳細的解說</p> <hr> <h2 id="開發環境配置">開發環境配置</h2> <p>在開始前，請照下方指示正確設置自己的環境。</p> <h3 id="確認已安裝-nodejs-與-npm">確認已安裝 nodejs 與 npm</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">node -v <span class="o">&amp;&amp;</span> npm -v </span></span></code></pre></td></tr></table> </div> </div><p>如未安裝兩者，請先至 <a class="link" href="https://yeoman.io/codelab/setup.html" target="_blank" rel="noopener" >Nodejs 官方網站</a> 下載。npm 會隨著 nodejs 下載一併被安裝，有時候您可能使用過舊的 npm，這時您可以使用以下指令更新它到最新版。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g npm@latest </span></span></code></pre></td></tr></table> </div> </div><p>如果正確安裝了以上兩者，會跳出兩行版本號資訊。</p> <h5 id="export">export：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">v16.15.0 </span></span><span class="line"><span class="cl">8.15.1 </span></span></code></pre></td></tr></table> </div> </div><h3 id="安裝-yoman">安裝 yoman</h3> <p><img src="https://live.staticflickr.com/65535/52516668268_b231312990_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><a class="link" href="https://yeoman.io/" target="_blank" rel="noopener" >Yoman</a> 是一款流行已久的code generator，可以允許我們使用yoman設置專案的樣板， 並讓我們使用 <code>yo</code> 指令快速產生樣板專案。</p> <p><img src="https://live.staticflickr.com/65535/52515645617_10a85c7f0f_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>VSCode 官方已經發布了 <strong>VSCode Yoman</strong> 專案，並且定期更新，因此我們可以直接使用 <code>yo</code> 指令產生 VSCode Extension，無需手動開發 yoman 樣板。</p> <p>請使用以下指令安裝yoman與VSCode Extension Generator：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g yo generator-code </span></span></code></pre></td></tr></table> </div> </div><p>安裝 yoman 後，再次使用版本號指令確認有無正確安裝：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">yo --version </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="使用-yo-快速產生第一個-extension-專案">使用 yo 快速產生第一個 Extension 專案</h2> <p>首先，於 terminal 進入一個要<strong>放置專案</strong>的資料夾後，使用指令：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">yo code </span></span></code></pre></td></tr></table> </div> </div><p>generator 會跳出提示，讓我們選擇要產生的 extension 種類：</p> <p><img src="https://live.staticflickr.com/65535/52516668248_1f28068fe5_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這些 Extension 選項的描述與說明如下：</p> <table> <thead> <tr> <th>Extension 選項</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>New Extension(Typescript)</td> <td>產生使用typescript開發的extension專案</td> </tr> <tr> <td>New Extension(Javascript)</td> <td>產生使用javascript開發的extension專案</td> </tr> <tr> <td>New Color Theme</td> <td>配置VSCode介面顏色的擴充套件專案(詳見: Color Theme)</td> </tr> <tr> <td>New Language Support</td> <td>程式語言(Programming Languages)擴充套件</td> </tr> <tr> <td>New Code Snippets</td> <td>程式碼片段擴充套件</td> </tr> <tr> <td>New Keymap</td> <td>快捷鍵擴充套件，keymap讓使用者得以在vscode中使用vim、sublime等等不同編輯器的快捷鍵開發。</td> </tr> <tr> <td>New Extension Pack</td> <td>打包多個已發佈的extension，讓使用者一鍵快速安裝。</td> </tr> <tr> <td>New Language Pack (Localization)</td> <td>配置VSCode編輯器多國語氣的擴充套件。</td> </tr> </tbody> </table> <p>我們依序輸入如下：</p> <ul> <li> <p>What type of extension do you want to create?<br> 選擇你要建立的專案類型<br> 這邊我選擇第一個 <code>New Extension(Typescript)</code> 選項</p> </li> <li> <p>What’s the name of your extension?<br> Extension 名稱: 對應到 package.json &ldquo;displayName&rdquo;<br> 這裡我輸入： <code>wconvert</code></p> </li> <li> <p>What’s the identifier of your extension?<br> 識別碼：對應到 package.json &ldquo;name&rdquo;<br> 這裡我輸入： <code>wconvert</code></p> </li> <li> <p>What’s the description of your extension?<br> 描述: 對應到 package.json &ldquo;description&rdquo;<br> 這裡我輸入： <code>my first vscode extension practice.</code></p> </li> <li> <p>Initialize a git repository?<br> 是否要使用 git</p> </li> <li> <p>Bundle the source code with webpack?<br> 是否要使用 webpack 做原始碼的 bundle</p> </li> <li> <p>Which package manager to use?<br> 要使用哪個套件管理工具</p> </li> </ul> <p><img src="https://live.staticflickr.com/65535/52516598905_e15e8f8c7d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>讓子彈飛一會兒，最後 generator 會詢問是否使用 vscode 打開，這邊選擇打開。</p> <p><img src="https://live.staticflickr.com/65535/52516388099_78c5b73838_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="extension-專案重點相關檔案介紹">Extension 專案重點相關檔案介紹</h2> <p>打開後，我們會看到一個 nodejs 的 typescript 專案，結構如下：</p> <p><img src="https://live.staticflickr.com/65535/52516668243_abf1262288_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"> ├── .vscode </span></span><span class="line"><span class="cl"> │ ├── extensions.json </span></span><span class="line"><span class="cl"> │ ├── launch.json </span></span><span class="line"><span class="cl"> │ ├── settings.json </span></span><span class="line"><span class="cl"> │ └── tasks.json </span></span><span class="line"><span class="cl"> ├── node_modules </span></span><span class="line"><span class="cl"> ├── src </span></span><span class="line"><span class="cl"> │ ├── extension.ts </span></span><span class="line"><span class="cl"> │ └── <span class="nb">test</span> </span></span><span class="line"><span class="cl"> │ ├── runTest.ts </span></span><span class="line"><span class="cl"> │ └── suite </span></span><span class="line"><span class="cl"> │ ├── extension.test.ts </span></span><span class="line"><span class="cl"> │ └── index.ts </span></span><span class="line"><span class="cl"> ├── .eslintrc.json </span></span><span class="line"><span class="cl"> ├── .gitignore </span></span><span class="line"><span class="cl"> ├── .vscodeignore </span></span><span class="line"><span class="cl"> ├── CHANGELOG.md </span></span><span class="line"><span class="cl"> ├── README.md </span></span><span class="line"><span class="cl"> ├── package-lock.json </span></span><span class="line"><span class="cl"> ├── package.json </span></span><span class="line"><span class="cl"> ├── tsconfig.json </span></span><span class="line"><span class="cl"> └── vsc-extension-quickstart.md </span></span></code></pre></td></tr></table> </div> </div><ul> <li>.vscode/*： <strong>workspace</strong> 設定</li> </ul> <table> <thead> <tr> <th>檔案名稱</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>task.json</td> <td>設定 defaultBuild Task，用於 compile extension 專案的 typescript 程式。</td> </tr> <tr> <td>launch.json</td> <td>配置 debug mode 的兩個選項：<strong>Run extension</strong> 與 <strong>Test extension</strong>，用於執行 extension 主程式與相關測試程式，程式執行前，會先執行 <strong>defulat buildTask</strong>。</td> </tr> <tr> <td>settings.json</td> <td>extension 專案的設定檔，此處的設定會覆蓋 <strong>user settings</strong> 跟 <strong>default settings</strong>。</td> </tr> <tr> <td>extensions.json</td> <td>設定用於輔助 extension 專案安裝的 <strong>extension recommendations list</strong>，此處推薦安裝 <strong>eslint extension</strong>。</td> </tr> </tbody> </table> <ul> <li>src/extensions.ts： <strong>主程式</strong>檔案</li> <li>src/test.ts： <strong>測試程式</strong>檔案</li> <li>.eslintrc.json： 用於 extension 專案的 <strong>eslint 設置</strong></li> <li>.vscodeignore： 用於忽略<strong>不打包</strong>進發布套件的專案檔案</li> <li>tsconfig.json： 用於專案 <strong>ts compiler</strong> 的設定選項</li> <li>package.json： 用於配置 node 相關依賴與相關 npm script，在 extension 專案裡，package.json 亦用於配置 extension 重要相關設定 (詳見: <a class="link" href="https://code.visualstudio.com/api/references/extension-manifest" target="_blank" rel="noopener" >Extension Manifest</a>)</li> <li>vsc-extension-quickstart.md： 產生的 extension 專案的 <strong>markdown 說明文件</strong></li> </ul> <hr> <h2 id="extension-專案程式簡介">Extension 專案程式簡介</h2> <p>讓我們打開 <code>extension.ts</code> 吧，打開後可以看見 <code>extension.ts</code> 裡面有個 <code>active function</code> 跟 <code>deactive function</code>。</p> <p><img src="https://live.staticflickr.com/65535/52516668223_68bd8009b0_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><code>active function</code> 為 extension 程式的<code>進入點</code>。當 extension 被 active 事件啟動時，即會執行 extension 程式。</p> <p>因此我們可以查看 <code>pakcage.json</code>，package.json 配置了 <code>activeEvents</code> 清單，可以看到清單裡列出跟active 有關的設定 <code>activationEvents</code>。</p> <h5 id="packagejson">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;activationEvents&#34;</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;onCommand:wconvert.helloWorld&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>activationEvents</code> 指定了一個 <code>hello world</code> command，此即是說，當使用者執行 <code>hello world</code> command 時，extension 即會活躍並執行 <code>active function</code>。</p> <p>此處的 <code>onCommand</code> 語法為：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">onCommand: <span class="si">${</span><span class="nv">commandId</span><span class="si">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>那麼，command 的 id 是在哪裡配置的呢？</p> <p>一樣是在 <code>package.json</code> 裡，我們可以到 <code>contributes</code> 屬性 (<code>Contribution Point</code>: 詳見 <a class="link" href="https://code.visualstudio.com/api/references/contribution-points#contributes.configurationDefaults" target="_blank" rel="noopener" >Contribution Point</a>) 下面查看：</p> <h5 id="packagejson-1">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;contributes&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;commands&#34;</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;command&#34;</span><span class="p">:</span> <span class="s2">&#34;wconvert.helloWorld&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Hello World&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到在 <code>contrubutes</code> 屬性下面已經配置了 <code>commands</code> 清單，裡面條列著一個 <code>command</code> 設定，此處 <code>command</code> 設定的語法為：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="err">/**</span> </span></span><span class="line"><span class="cl"> <span class="err">*</span> <span class="err">被產生的Command會預設使用extension的id作為namespace，亦可自訂其他Namespace名稱</span> </span></span><span class="line"><span class="cl"> <span class="err">*/</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;command&#34;</span><span class="p">:</span> <span class="err">$</span><span class="p">{</span><span class="err">自定義的command-id</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="err">$</span><span class="p">{</span><span class="err">Command的標題內容</span><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>當我們使用 Command Palette (<strong>Cmd/Ctrl + Shift + P</strong>) 搜尋 Command 並執行時，是使用 Command 的 <strong>Title</strong> 搜尋。</p></blockquote> <p>好，現在我們已經了解如何在 <code>Contribution Point</code> 設定簡單的 Command id 跟 title，以及設定它為活躍 extension 的 event。現在回到 <code>extension.ts</code> 的 active function 吧！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">activate</span><span class="p">(</span><span class="nx">context</span>: <span class="kt">vscode.ExtensionContext</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Use the console to output diagnostic information (console.log) and errors (console.error) </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// This line of code will only be executed once when your extension is activated </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Congratulations, your extension &#34;wconvert&#34; is now active!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// The command has been defined in the package.json file </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Now provide the implementation of the command with registerCommand </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// The commandId parameter must match the command field in package.json </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">disposable</span> <span class="o">=</span> <span class="nx">vscode</span><span class="p">.</span><span class="nx">commands</span><span class="p">.</span><span class="nx">registerCommand</span><span class="p">(</span><span class="s1">&#39;wconvert.helloWorld&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// The code you place here will be executed every time your command is executed </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Display a message box to the user </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showInformationMessage</span><span class="p">(</span><span class="s1">&#39;Hello World from wconvert!&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">context</span><span class="p">.</span><span class="nx">subscriptions</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">disposable</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們可以看到，<code>active function</code> 裡面在 extenions 活躍後將註冊我們在 <code>Contribution Point</code> 那邊設定的 command id，並且有一個 callback 函式，當我們配置的 command 執行之後，即會在 vscode 裡跳出顯示「<strong>Hello World from day05-first-command!</strong>」的訊息。</p> <p>這個註冊過後的 command 函式 (disposable) 會再 push 進 extension context 裡面，如此當 extension 被關閉後，VSCode 就可以自動釋放 listen 這個 command 的相關資源。</p> <hr> <h2 id="執行-extension-專案應用程式">執行 extension 專案應用程式</h2> <p>讓我們來執行 extension 吧，vscode 專案已經幫我們配置好了 <code>lanunch.json</code>，因此我們可以在 <strong>debug mode</strong> 裡執行 extension。讓我們點開「<strong>Run and Debug</strong>」，再點擊 sidebar 上方的 <code>Run Extension</code> 旁的<strong>執行按鈕</strong>開始 extension 吧！(此處的快捷鍵為 <code>F5</code>)</p> <p>執行後，vscode 會開啟一個<strong>新的 vscode 的 window 視窗</strong>，window 視窗上的 title 會註明這個視窗為 <code>[Extension Development Host]</code> 並預設載入 extension 了，我們可以在這個視窗操作我們開發中的 extension，並且使用中斷點偵錯。</p> <h3 id="檢查已被註冊的-command">檢查已被註冊的 command</h3> <p>先來檢查一下剛才註冊的 command，在 <code>Contribution Point</code> 裡宣告的 Command，一樣在 <code>Keyboard Shortcuts</code> 下方可以搜尋的到。從 <strong>Manager &gt; Keyboard Shortcuts</strong> 進入 <code>Keyboard Shortcuts</code> 頁中，並在搜尋條上輸入 <strong>wconvert</strong>，使用 extension id 來列出剛才註冊的 command。</p> <p><img src="https://live.staticflickr.com/65535/52516668213_5061107e60_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52515645567_5d83d2fff0_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>輸入後我們可以看到，Command 已正確被註冊。</p> <h3 id="執行註冊後的-command">執行註冊後的 Command</h3> <p>現在，我們打開 <strong>Command Palette (快捷鍵：Cmd/Ctrl + Shift + P)</strong>，輸入 <code>hello world</code>，使用註冊的 <strong>Command Title</strong> 查找到 command。</p> <p><img src="https://live.staticflickr.com/65535/52516598845_15b1b64528_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然後，點擊下去，我們可以看到 vscode 的 window 正確跳出「<strong>Hello World from day05-first-command!</strong>」訊息。</p> <p><img src="https://live.staticflickr.com/65535/52516668188_bc100ba36a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然後，我們回到<strong>原本專案</strong>的 Vscode Window，我們可以在專案的 <strong>debug console</strong> 檢視 active function 下面的 console.log 訊息。</p> <p><img src="https://live.staticflickr.com/65535/52516388004_f7b61f5236_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="加入套件邏輯">加入套件邏輯</h2> <blockquote> <p>這邊可以依照你的需求進行套件邏輯的開發，我只是寫來玩而已，此處參考即可！</p></blockquote> <h3 id="註冊自己想要使用的-command">註冊自己想要使用的 Command</h3> <p>我打算製作以下幾個功能：</p> <ol> <li>輸入指定的時間格式，會在<strong>當前檔案指標位置插入產生的時間戳</strong></li> <li>輸入指定的時間格式，僅會在<strong>vscode 的 window 顯示</strong></li> <li>將選取起來的時間戳，轉換為指定時區的時間格式(這邊以 <strong>YYYY-MM-DD hh:mm:ss.milsecond</strong> 格式為主)</li> </ol> <p>附上完成後的程式碼：</p> <h5 id="extensionts">extension.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span><span class="lnt">64 </span><span class="lnt">65 </span><span class="lnt">66 </span><span class="lnt">67 </span><span class="lnt">68 </span><span class="lnt">69 </span><span class="lnt">70 </span><span class="lnt">71 </span><span class="lnt">72 </span><span class="lnt">73 </span><span class="lnt">74 </span><span class="lnt">75 </span><span class="lnt">76 </span><span class="lnt">77 </span><span class="lnt">78 </span><span class="lnt">79 </span><span class="lnt">80 </span><span class="lnt">81 </span><span class="lnt">82 </span><span class="lnt">83 </span><span class="lnt">84 </span><span class="lnt">85 </span><span class="lnt">86 </span><span class="lnt">87 </span><span class="lnt">88 </span><span class="lnt">89 </span><span class="lnt">90 </span><span class="lnt">91 </span><span class="lnt">92 </span><span class="lnt">93 </span><span class="lnt">94 </span><span class="lnt">95 </span><span class="lnt">96 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">vscode</span> <span class="kr">from</span> <span class="s1">&#39;vscode&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">activate</span><span class="p">(</span><span class="nx">context</span>: <span class="kt">vscode.ExtensionContext</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">placeHolder</span>: <span class="kt">string</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="k">await</span> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showInputBox</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">placeHolder</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> <span class="o">||</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">pad</span><span class="p">(</span><span class="nx">num</span>: <span class="kt">string</span> <span class="o">|</span> <span class="kt">number</span><span class="p">,</span> <span class="nx">size</span>: <span class="kt">number</span><span class="p">)</span><span class="o">:</span> <span class="kt">string</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">num</span> <span class="o">=</span> <span class="nx">num</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">while</span> <span class="p">(</span><span class="nx">num</span><span class="p">.</span><span class="nx">length</span> <span class="o">&lt;</span> <span class="nx">size</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">num</span> <span class="o">=</span> <span class="s2">&#34;0&#34;</span> <span class="o">+</span> <span class="nx">num</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">num</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// show timestamp at vscode Information Window </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">function</span> <span class="nx">showTimestamp</span><span class="p">(</span><span class="nx">datetime</span>: <span class="kt">string</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timestamp</span>: <span class="kt">number</span> <span class="o">|</span> <span class="kc">undefined</span> <span class="o">=</span> <span class="kc">NaN</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">timestamp</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">datetime</span><span class="p">).</span><span class="nx">getTime</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">timestamp</span> <span class="o">!==</span> <span class="s2">&#34;number&#34;</span> <span class="o">||</span> <span class="nb">isNaN</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">)</span> <span class="o">||</span> <span class="nx">timestamp</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="o">===</span> <span class="s2">&#34;NaN&#34;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">askDateTime</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showInformationMessage</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showErrorMessage</span><span class="p">(</span><span class="s2">&#34;Invalid Date.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">askDateTime</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// create input with asking DateTime </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">async</span> <span class="kd">function</span> <span class="nx">askDateTime() {</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">fullDateTime</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">input</span><span class="p">(</span><span class="s2">&#34;DateTime (format: YYYY-MM-DD hh:mm:ss.ms) (example: 2022-12-31 23:59:59.999)：&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">fullDateTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">showTimestamp</span><span class="p">(</span><span class="nx">fullDateTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Insert timestamp at cursor position </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">vscode</span><span class="p">.</span><span class="nx">commands</span><span class="p">.</span><span class="nx">registerTextEditorCommand</span><span class="p">(</span><span class="s2">&#34;wconvert.genTimestamp&#34;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">editor</span><span class="p">,</span> <span class="nx">edit</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">fullDateTime</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">input</span><span class="p">(</span><span class="s2">&#34;DateTime (format: YYYY-MM-DD hh:mm:ss.ms) (example: 2022-12-31 23:59:59.999)：&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">fullDateTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timestamp</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">fullDateTime</span><span class="p">).</span><span class="nx">getTime</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">timestamp</span> <span class="o">===</span> <span class="s2">&#34;number&#34;</span> <span class="o">&amp;&amp;</span> <span class="nx">timestamp</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="o">!==</span> <span class="s2">&#34;NaN&#34;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">editor</span><span class="p">.</span><span class="nx">edit</span><span class="p">((</span><span class="nx">editBuilder</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">editor</span><span class="p">.</span><span class="nx">selections</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">selectionItem</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">editBuilder</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">selectionItem</span><span class="p">.</span><span class="nx">active</span><span class="p">,</span> <span class="nx">timestamp</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showErrorMessage</span><span class="p">(</span><span class="s2">&#34;Datetime convert failed.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showErrorMessage</span><span class="p">(</span><span class="s2">&#34;Invalid Date.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// only show generated timestamp </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">generateTimestamp</span> <span class="o">=</span> <span class="nx">vscode</span><span class="p">.</span><span class="nx">commands</span><span class="p">.</span><span class="nx">registerCommand</span><span class="p">(</span><span class="s2">&#34;wconvert.genTimestampJustShow&#34;</span><span class="p">,</span> <span class="nx">askDateTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// format timestamp to YYYY-MM-DD HH:mm:ss that selections </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">timestamp2DateTime</span> <span class="o">=</span> <span class="nx">vscode</span><span class="p">.</span><span class="nx">commands</span><span class="p">.</span><span class="nx">registerTextEditorCommand</span><span class="p">(</span><span class="s2">&#34;wconvert.timestamp2dateTime&#34;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">editor</span><span class="p">,</span> <span class="nx">edit</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">offsetStr</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">input</span><span class="p">(</span><span class="s2">&#34;Time zone (example: +8)：&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">offset</span> <span class="o">=</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">offsetStr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">editor</span><span class="p">.</span><span class="nx">edit</span><span class="p">((</span><span class="nx">editBuilder</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">editor</span><span class="p">.</span><span class="nx">selections</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">selectionItem</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">selection</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">getText</span><span class="p">(</span><span class="nx">selectionItem</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">dateArr</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">selection</span><span class="p">)</span> <span class="o">-</span> <span class="p">(</span><span class="o">-</span><span class="nx">offset</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">)).</span><span class="nx">toISOString</span><span class="p">().</span><span class="nx">split</span><span class="p">(</span><span class="s2">&#34;T&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">YYYYMMDD</span><span class="p">,</span> <span class="nx">hhmmss</span><span class="p">]</span> <span class="o">=</span> <span class="nx">dateArr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">year</span><span class="p">,</span> <span class="nx">month</span><span class="p">,</span> <span class="nx">day</span><span class="p">]</span> <span class="o">=</span> <span class="nx">YYYYMMDD</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&#34;-&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">hour</span><span class="p">,</span> <span class="nx">minute</span><span class="p">,</span> <span class="nx">fullSecond</span><span class="p">]</span> <span class="o">=</span> <span class="nx">hhmmss</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&#34;:&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">second</span><span class="p">,</span> <span class="nx">millionSecondZ</span><span class="p">]</span> <span class="o">=</span> <span class="nx">fullSecond</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&#34;.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">millionSecond</span> <span class="o">=</span> <span class="nx">millionSecondZ</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;Z&#34;</span><span class="p">,</span> <span class="s2">&#34;&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">fullDateTime</span> <span class="o">=</span> <span class="sb">`&#34;</span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb">-</span><span class="si">${</span><span class="nx">pad</span><span class="p">(</span><span class="nx">month</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="si">}</span><span class="sb">-</span><span class="si">${</span><span class="nx">pad</span><span class="p">(</span><span class="nx">day</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">pad</span><span class="p">(</span><span class="nx">hour</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="si">}</span><span class="sb">:</span><span class="si">${</span><span class="nx">pad</span><span class="p">(</span><span class="nx">minute</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="si">}</span><span class="sb">:</span><span class="si">${</span><span class="nx">pad</span><span class="p">(</span><span class="nx">second</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="si">}</span><span class="sb">.</span><span class="si">${</span><span class="nx">pad</span><span class="p">(</span><span class="nx">millionSecond</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span><span class="si">}</span><span class="sb">&#34;`</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">editBuilder</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">selectionItem</span><span class="p">,</span> <span class="nx">fullDateTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">vscode</span><span class="p">.</span><span class="nb">window</span><span class="p">.</span><span class="nx">showErrorMessage</span><span class="p">(</span><span class="s2">&#34;Invalid Date.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">context</span><span class="p">.</span><span class="nx">subscriptions</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">timestamp2DateTime</span><span class="p">,</span> <span class="nx">generateTimestamp</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">deactivate() {</span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>package.json</strong> 的 <strong>activationEvents</strong> 記得加上欲註冊使用的 command，也可直接使用 <code>&quot;*&quot;</code>，將全部的 command 暴露出去！</p> <h5 id="packagejson-2">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;wconvert&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;displayName&#34;</span><span class="p">:</span> <span class="s2">&#34;wconvert&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;description&#34;</span><span class="p">:</span> <span class="s2">&#34;help you convert datetime value&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;version&#34;</span><span class="p">:</span> <span class="s2">&#34;1.0.3&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;icon&#34;</span><span class="p">:</span> <span class="s2">&#34;photo.jpeg&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;publisher&#34;</span><span class="p">:</span> <span class="s2">&#34;4006wayne&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;repository&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;git&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;https://github.com/wjdesign/vscode-extension-wconvert.git&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;homepage&#34;</span><span class="p">:</span> <span class="s2">&#34;https://github.com/wjdesign/vscode-extension-wconvert/blob/master/README.md&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;pricing&#34;</span><span class="p">:</span> <span class="s2">&#34;Free&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;engines&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;vscode&#34;</span><span class="p">:</span> <span class="s2">&#34;^1.73.0&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;categories&#34;</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;Other&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;activationEvents&#34;</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;onCommand:wconvert.timestamp2dateTime&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;onCommand:wconvert.genTimestamp&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;onCommand:wconvert.genTimestampJustShow&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;main&#34;</span><span class="p">:</span> <span class="s2">&#34;./out/extension.js&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;contributes&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;commands&#34;</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;command&#34;</span><span class="p">:</span> <span class="s2">&#34;wconvert.timestamp2dateTime&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;WConvert: DateTime to timestamp&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;command&#34;</span><span class="p">:</span> <span class="s2">&#34;wconvert.genTimestamp&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;WConvert: Generate Timestamp&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;command&#34;</span><span class="p">:</span> <span class="s2">&#34;wconvert.genTimestampJustShow&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;WConvert: Generate Timestamp Only Show&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;vscode:prepublish&#34;</span><span class="p">:</span> <span class="s2">&#34;npm run compile&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;compile&#34;</span><span class="p">:</span> <span class="s2">&#34;tsc -p ./&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;watch&#34;</span><span class="p">:</span> <span class="s2">&#34;tsc -watch -p ./&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;pretest&#34;</span><span class="p">:</span> <span class="s2">&#34;npm run compile &amp;&amp; npm run lint&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;lint&#34;</span><span class="p">:</span> <span class="s2">&#34;eslint src --ext ts&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;test&#34;</span><span class="p">:</span> <span class="s2">&#34;node ./out/test/runTest.js&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;devDependencies&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@types/vscode&#34;</span><span class="p">:</span> <span class="s2">&#34;^1.73.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@types/glob&#34;</span><span class="p">:</span> <span class="s2">&#34;^8.0.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@types/mocha&#34;</span><span class="p">:</span> <span class="s2">&#34;^10.0.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@types/node&#34;</span><span class="p">:</span> <span class="s2">&#34;16.x&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@typescript-eslint/eslint-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;^5.42.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@typescript-eslint/parser&#34;</span><span class="p">:</span> <span class="s2">&#34;^5.42.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;eslint&#34;</span><span class="p">:</span> <span class="s2">&#34;^8.26.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;glob&#34;</span><span class="p">:</span> <span class="s2">&#34;^8.0.3&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;mocha&#34;</span><span class="p">:</span> <span class="s2">&#34;^10.1.0&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;typescript&#34;</span><span class="p">:</span> <span class="s2">&#34;^4.8.4&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;@vscode/test-electron&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.2.0&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p><a class="link" href="https://github.com/wjdesign/vscode-extension-wconvert.git" target="_blank" rel="noopener" >範例 repo</a></p></blockquote> <hr> <h2 id="vsce">vsce</h2> <p>打包並發布 Extension，<a class="link" href="https://code.visualstudio.com/api/working-with-extensions/publishing-extension" target="_blank" rel="noopener" >官方文件</a></p> <p>使用 <strong>vsce</strong> 來<strong>打包</strong>與<strong>發布</strong>我的 Extension</p> <p>首先全局安裝 vsce：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm i -g vsce </span></span></code></pre></td></tr></table> </div> </div><h3 id="打包">打包</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">vsce package </span></span></code></pre></td></tr></table> </div> </div><p>下完指令後，會因為沒有 LICENSE 檔案而詢問是否繼續，這邊選擇 <strong>Y</strong> 直接下一步即可。</p> <p><img src="https://live.staticflickr.com/65535/52516387984_83999b3838_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>完成後會在指定位置產生一個 <strong>.vsix</strong> 檔案，此即為我的 <strong>Extensions</strong>。</p> <h3 id="本地安裝我的-extension">本地安裝我的 Extension</h3> <p>若只是要製作一個自己用的 extension，沒有打算發布到網上，到此步驟即可。</p> <p>於 VScode 的 Extensions 頁籤，選擇 <code>Install from VSIX</code>，選擇剛剛產生的 <strong>.vsix</strong> 檔，即可完成安裝，在 Extensions 的 <strong>INSTALLED</strong> 內即可看到自己的 extension。</p> <p><img src="https://live.staticflickr.com/65535/52516120346_6d5ba5a634_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52516668143_944d432b0b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="發布到-marketplace-前的準備">發布到 Marketplace 前的準備</h2> <blockquote> <p>記住！每次發佈都要幫版本號加一下！</p></blockquote> <h5 id="packagejson-3">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;version&#34;</span><span class="p">:</span> <span class="s2">&#34;0.0.1&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>vsce 要求 <strong>Personal Access Token</strong> 個人訪問金鑰，以下的步驟圖片來源為<a class="link" href="https://code.visualstudio.com/api/working-with-extensions/publishing-extension#get-a-personal-access-token" target="_blank" rel="noopener" >官方說明文件</a></p> <p>首先請到 <a class="link" href="https://dev.azure.com/" target="_blank" rel="noopener" >https://dev.azure.com/</a> 申請帳號並登入，在右上角打開 <strong>Personal access tokens</strong> 頁面。</p> <p><img src="https://live.staticflickr.com/65535/52516120321_319034d250_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>點選 <strong>New Token</strong> 按鈕。</p> <p><img src="https://live.staticflickr.com/65535/52516120311_3b05a19de2_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>給這個新 Token一個名字、過期時間，重點是 Organization 請選擇 <code>All accessiable organization</code>，點選 <code>Custom defined</code> 並點選 <code>Show all scopes</code> 打開所有選項。</p> <p><img src="https://live.staticflickr.com/65535/52516598710_1a7bbd760b_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>找到 <code>Marketplace</code> 項目勾選 <code>Acquire</code> 與 <code>Manage</code> 後點選 <strong>Create</strong>。</p> <p><img src="https://live.staticflickr.com/65535/52516120281_7c0a59106d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然後你會得到一個 <strong>Token</strong> 請複製下來。</p> <h3 id="建立發佈器---publisher">建立發佈器 - Publisher</h3> <p>建立一個 <strong>Publisher</strong> 用來儲存發佈的 Token ，請在 <code>package.json</code> 中指定要使用的發佈器&quot;publisher&quot;: (publisher name)</p> <h5 id="packagejson-4">package.json</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nt">&#34;publisher&#34;</span><span class="p">:</span> <span class="s2">&#34;{your publisher name}&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="使用-marketplace-後台建立-publisher">使用 Marketplace 後台建立 Publisher</h4> <p>請到 <a class="link" href="https://marketplace.visualstudio.com/manage/publishers/" target="_blank" rel="noopener" >https://marketplace.visualstudio.com/manage/publishers/</a> 建立一個 Publisher。</p> <h4 id="使用-vsce-指令建立-publisher">使用 vsce 指令建立 Publisher</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">vsce create-publisher <span class="o">(</span>publisher name<span class="o">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>輸入剛剛的 <strong>Personal access token</strong>，vsce 將會記得這個 publisher 與 token 以方便快速發佈。</p> <h4 id="token-更新">Token 更新</h4> <p>在我們建立 token 時，token 是有效期的，當 token 過期時我們就需要以下這個指來更新 token：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">vsce login <span class="o">(</span>publisher name<span class="o">)</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="發布方式一使用-vsce-發布-extension">發布方式(一)：使用 vsce 發布 extension</h3> <p>下指令發布到 Marketplace：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">vsce publish </span></span></code></pre></td></tr></table> </div> </div><p>使用 vsce show 確認 extension 的資訊：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># vsce show {publisher name}.{extension id}</span> </span></span><span class="line"><span class="cl">vsce show 4006wayne.wconvert </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52516598715_eb7f3669d6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>也可以在 vsce publish 時<strong>直接指定</strong> token：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">vsce publish -p &lt;token&gt; </span></span></code></pre></td></tr></table> </div> </div><h3 id="發布方式二使用-marketplace-後台上傳發布-extension">發布方式(二)：使用 Marketplace 後台上傳，發布 extension</h3> <p>前往網址 <a class="link" href="https://marketplace.visualstudio.com/manage/publishers/" target="_blank" rel="noopener" >https://marketplace.visualstudio.com/manage/publishers/</a>，選擇剛剛創建的 Publisher。</p> <p>點選 <code>New extension</code> &gt; <code>Visual Studio Code</code>，選擇剛剛 package 出來的 <strong>.vsix</strong> 檔案後上傳。</p> <p>上傳後等待驗證，驗證完畢後即可看到我的 extension：</p> <p><img src="https://live.staticflickr.com/65535/52516120256_c2c653269d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="結語">結語</h2> <p>到這裡我已經成功發佈我的第一個 Extension 了！</p> <p>這是我寫的第一個 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=4006wayne.wconvert" target="_blank" rel="noopener" >Extension</a>，功能很陽春，用途是產生指定時間的時間戳與時間戳轉回指定時區的時間格式。</p> <p>非常推薦使用 <strong>Typescript</strong> 會比較容易開發，不然要查<a class="link" href="https://code.visualstudio.com/api/references/vscode-api" target="_blank" rel="noopener" >官方API</a>會看得很痛苦，畢竟範例不多或者都要下載才能看。</p> <p>實際撰寫時會遇到 VScode API 到底有哪些功能可以使用的問題，甚至要去了解 VScode 的設計結構！</p> <hr> <h2 id="常見問題">常見問題</h2> <h3 id="extension-validation-error">Extension validation error</h3> <p><img src="https://live.staticflickr.com/65535/52515645457_6ccdbc151e_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>出現如圖的問題，自行排查 extension 程式碼後發現非程式碼邏輯的問題，可以上 <a class="link" href="https://github.com/microsoft/vsmarketplace/issues" target="_blank" rel="noopener" >issues</a> 將資訊反應給 vsmarketplace，此可能為 marketplace 驗證 extension 時偵測到特定字元組合而阻擋掉，會專人協助處理。</p> <p>附上本人遇到此問題的 <a class="link" href="https://github.com/microsoft/vsmarketplace/issues/522" target="_blank" rel="noopener" >Issues</a></p> <hr>https://blog.wayne-project.com/2022-11-15/localforage-and-idb-keyval/Tue, 15 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-15/localforage-and-idb-keyval/<img src="https://live.staticflickr.com/65535/52501465120_8e19a1cda3_o.png" alt="Featured image of post localStorage 容量太小？試試 localforage、idb-keyval" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.gushiciku.cn/pl/an9o/zh-tw" target="_blank" rel="noopener" >參考網站</a></p> <p><code>localStorage</code> 是前端本地儲存的一種，其容量一般在 <code>5M-10M</code> 左右，用來快取一些簡單的資料基本夠用，畢竟定位也不是大資料量的儲存。</p> <p>在某些場景下 <code>localStorage</code> 的容量就會有點捉襟見肘，其實瀏覽器是有提供大資料量的本地儲存的如 <code>IndexedDB</code> 儲存資料大小一般在 <code>250M</code> 以上。</p> <p>彌補了 <code>localStorage</code> 容量的缺陷，但是使用要比 <code>localStorage</code> 複雜一些 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener" >mdn IndexedDB</a></p> <p>不過已經有大佬造了輪子封裝了一些呼叫過程使其使用相對簡單，下面我們一起來看一下～</p> <hr> <h2 id="localforage">localforage</h2> <p><a class="link" href="https://localforage.docschina.org/" target="_blank" rel="noopener" >localforage</a>，擁有類似 <code>localStorage</code> API，它能儲存多種型別的資料如 <code>Array</code>、<code>ArrayBuffer</code>、<code>Blob</code>、<code>Number</code>、<code>Object</code>、<code>String</code>，而不僅僅是字串。</p> <p>這意味著我們可以直接存 物件、陣列型別的資料避免了 <code>JSON.stringify</code> 轉換資料的一些問題。</p> <p>儲存其他資料型別時需要轉換成上邊對應的型別，比如 vue3 中使用 <code>reactive</code> 定義的資料需要使用 <code>toRaw</code> <strong>轉換成原始資料</strong>進行儲存， <code>ref</code> 則直接儲存 <code>xxx.value</code> 資料即可。</p> <h3 id="安裝">安裝</h3> <p><a class="link" href="https://github.com/localForage/localForage/releases" target="_blank" rel="noopener" >下載最新版本</a> 或使用 <code>npm</code>、<code>bower</code> 進行安裝，引入下載的 localforage 即可使用。</p> <ul> <li>通過 npm 安裝：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install localforage </span></span></code></pre></td></tr></table> </div> </div><ul> <li>通過 bower 安裝：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">bower install localforage </span></span></code></pre></td></tr></table> </div> </div><h3 id="使用">使用</h3> <p>提供了與 <code>localStorage</code> 相同的api，不同的是它是非同步的呼叫返回一個 <code>Promise</code> 物件</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">localforage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;somekey&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 當離線倉庫中的值被載入時，此處程式碼執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 當出錯時，此處程式碼執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// callback 版本 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">localforage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;somekey&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 當離線倉庫中的值被載入時，此處程式碼執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="提供的方法">提供的方法</h3> <ul> <li><code>getItem</code>： 根據資料的 <code>key</code> 獲取資料 不存在則返回 <code>null</code>。</li> <li><code>setItem</code>： 根據資料的 <code>key</code> 設定資料(儲存 <code>undefined</code> 時 <code>getItem</code> 獲取會返回 <code>null</code>)。</li> <li><code>removeItem</code>： 根據 <code>key</code> 刪除資料。</li> <li><code>length</code>： 獲取 <code>key</code> 的數量。</li> <li><code>key</code>： 根據 <code>key</code> 的索引獲取其名。</li> <li><code>keys</code>： 獲取資料倉庫中所有的 <code>key</code>。</li> <li><code>iterate</code>： 迭代資料倉庫中的所有 <code>value</code>/<code>key</code> 鍵值對。</li> </ul> <h3 id="配置">配置</h3> <p><a class="link" href="https://localforage.docschina.org/#api-config" target="_blank" rel="noopener" >完整配置可檢視文件</a></p> <p>這裡說個我覺得很有用的：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">localforage</span><span class="p">.</span><span class="nx">config</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;My-localStorage&#39;</span> <span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>設定倉庫的<strong>名字</strong>，不同的名字代表不同的倉庫，當一個應用需要多個本地倉庫隔離資料的時候就很有用。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nx">localforage</span><span class="p">.</span><span class="nx">createInstance</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;nameHere&#34;</span> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">otherStore</span> <span class="o">=</span> <span class="nx">localforage</span><span class="p">.</span><span class="nx">createInstance</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;otherName&#34;</span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 設定某個資料倉庫 key 的值不會影響到另一個數據倉庫 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">store</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s2">&#34;key&#34;</span><span class="p">,</span> <span class="s2">&#34;value&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">otherStore</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s2">&#34;key&#34;</span><span class="p">,</span> <span class="s2">&#34;value2&#34;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>同時也支援<strong>刪除倉庫</strong>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 呼叫時，若不傳參，將刪除當前例項的 “資料倉庫”。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">localforage</span><span class="p">.</span><span class="nx">dropInstance</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Dropped the store of the current instance&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 呼叫時，若引數為一個指定了 name 和 storeName 屬性的物件，會刪除指定的 “資料倉庫”。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">localforage</span><span class="p">.</span><span class="nx">dropInstance</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;otherName&#34;</span><span class="p">,</span> <span class="nx">storeName</span><span class="o">:</span> <span class="s2">&#34;otherStore&#34;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Dropped otherStore&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 呼叫時，若引數為一個僅指定了 name 屬性的物件，將刪除指定的 “資料庫” (及其所有資料倉庫)。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">localforage</span><span class="p">.</span><span class="nx">dropInstance</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;otherName&#34;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Dropped otherName database&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="idb-keyval">idb-keyval</h2> <p><a class="link" href="https://www.npmjs.com/package/idb-keyval" target="_blank" rel="noopener" >idb-keyval</a> 是用 <code>IndexedDB</code> 實現的一個超級簡單的基於 <code>promise</code> 的鍵值儲存。</p> <h3 id="安裝-1">安裝</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install idb-keyval </span></span></code></pre></td></tr></table> </div> </div><h3 id="使用-1">使用</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 全部引入 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">idbKeyval</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">idbKeyval</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">,</span> <span class="s1">&#39;world&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 按需引入會 treeshake </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">get</span><span class="p">,</span> <span class="nx">set</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">,</span> <span class="s1">&#39;world&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">val</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>瀏覽器直接引入：</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="提供的方法-1">提供的方法</h3> <p>由於其沒有中文的官網，會把例子及自己的理解附上：</p> <h4 id="set">set</h4> <p><code>set</code>： 設定資料</p> <p>key 可以是 <code>Number</code>、<code>String</code>、<code>Date</code>(IDB 也允許這些值的陣列，但 IE 不支援)。 value 可以是 <code>Number</code>、<code>Array</code>、<code>Object</code>、<code>Date</code>、<code>Blobs</code> 等，儘管老 Edge 不支援 <code>null</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">set</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">,</span> <span class="s1">&#39;world&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="setmany">setMany</h4> <p><code>setMany</code>： 設定多個數據</p> <p>一次設定多個值，比一個一個的設定更快</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">set</span><span class="p">,</span> <span class="nx">setMany</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 不應該: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">set</span><span class="p">(</span><span class="mi">123</span><span class="p">,</span> <span class="mi">456</span><span class="p">),</span> <span class="nx">set</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">,</span> <span class="s1">&#39;world&#39;</span><span class="p">)])</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 這樣做更快: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setMany</span><span class="p">([</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="mi">123</span><span class="p">,</span> <span class="mi">456</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="s1">&#39;hello&#39;</span><span class="p">,</span> <span class="s1">&#39;world&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"><span class="p">])</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="get">get</h4> <p><code>get</code>： 獲取資料</p> <p>如果沒有 key，那麼 value 將返回 <code>undefined</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">get</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// logs: &#34;world&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">val</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="getmany">getMany</h4> <p><code>getMany</code>： 獲取多個數據</p> <p>一次獲取多個數據，比一個一個的獲取資料更快</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">get</span><span class="p">,</span> <span class="nx">getMany</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 不應該: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">get</span><span class="p">(</span><span class="mi">123</span><span class="p">),</span> <span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)])</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(([</span><span class="nx">firstVal</span><span class="p">,</span> <span class="nx">secondVal</span><span class="p">])</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">firstVal</span><span class="p">,</span> <span class="nx">secondVal</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 這樣做更快: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">getMany</span><span class="p">([</span><span class="mi">123</span><span class="p">,</span> <span class="s1">&#39;hello&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(([</span><span class="nx">firstVal</span><span class="p">,</span> <span class="nx">secondVal</span><span class="p">])</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">firstVal</span><span class="p">,</span> <span class="nx">secondVal</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="del">del</h4> <p><code>del</code>： 刪除資料</p> <p>根據 key 刪除資料</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">del</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">del</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="delmany">delMany</h4> <p><code>delMany</code>： 刪除多個數據</p> <p>一次刪除多個鍵，比一個一個的刪除更快</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">del</span><span class="p">,</span> <span class="nx">delMany</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 不應該: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nb">Promise</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">del</span><span class="p">(</span><span class="mi">123</span><span class="p">),</span> <span class="nx">del</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)])</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 這樣做更快: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">delMany</span><span class="p">([</span><span class="mi">123</span><span class="p">,</span> <span class="s1">&#39;hello&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It worked!&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;It failed!&#39;</span><span class="p">,</span> <span class="nx">err</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="update">update</h4> <p><code>update</code>： 排隊更新資料，防止由於非同步導致資料更新問題</p> <p>因為 <code>get</code> 與 <code>set</code> 都是非同步的使用他們來更新資料可能會存在問題如：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Don&#39;t do this: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">get</span><span class="p">,</span> <span class="nx">set</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">set</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span> <span class="o">||</span> <span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> <span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">((</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">set</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span> <span class="o">||</span> <span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> <span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// 上述程式碼我們期望的是 2 但實際結果是 1，我們可以在第一個 callback 執行第二次操作。 </span></span></span></code></pre></td></tr></table> </div> </div><p>更好的方法是使用 <code>update</code> 來更新資料：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// Instead: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">update</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">update</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">(</span><span class="nx">val</span> <span class="o">||</span> <span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">update</span><span class="p">(</span><span class="s1">&#39;counter&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">(</span><span class="nx">val</span> <span class="o">||</span> <span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// 將自動排隊更新，所以第一次更新將計數器設定為 1，第二次更新將其設定為 2。 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="clear">clear</h4> <p><code>clear</code>： 清除所有資料</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">clear</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">clear</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="entries">entries</h4> <p><code>entries</code>： 返回 <code>[key, value]</code> 形式的資料</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">entries</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// logs: [[123, 456], [&#39;hello&#39;, &#39;world&#39;]] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">entries</span><span class="p">().</span><span class="nx">then</span><span class="p">((</span><span class="nx">entries</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">entries</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="keys">keys</h4> <p><code>keys</code>： 獲取所有資料的 <code>key</code></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">keys</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// logs: [123, &#39;hello&#39;] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">keys</span><span class="p">().</span><span class="nx">then</span><span class="p">((</span><span class="nx">keys</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">keys</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="values">values</h4> <p><code>values</code>： 獲取所有資料的 <code>value</code></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">values</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;idb-keyval&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// logs: [456, &#39;world&#39;] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">values</span><span class="p">().</span><span class="nx">then</span><span class="p">((</span><span class="nx">values</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">values</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h4 id="createstore">createStore</h4> <p><code>createStore</code>： 自定義倉庫</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 自定義資料庫名稱及表名稱 </span></span></span><span class="line"><span class="cl"><span class="c1">// 建立一個數據庫: </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 資料庫名稱為 tang_shi，表名為 table1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">tang_shi_table1</span> <span class="o">=</span> <span class="nx">idbKeyval</span><span class="p">.</span><span class="nx">createStore</span><span class="p">(</span><span class="s1">&#39;tang_shi&#39;</span><span class="p">,</span> <span class="s1">&#39;table1&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 向對應倉庫新增資料 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">idbKeyval</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">,</span> <span class="s1">&#39;table1 的資料&#39;</span><span class="p">,</span> <span class="nx">tang_shi_table1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 預設建立的倉庫名稱為 keyval-store，表名為 keyval </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">idbKeyval</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">,</span> <span class="s1">&#39;預設的資料&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52501465125_f37c4dec49_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>使用 <code>createStore</code> 建立的資料庫一個庫只會建立一個表：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 同一個庫有不可以有兩個表，custom-store-2 不會建立成功: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">customStore</span> <span class="o">=</span> <span class="nx">createStore</span><span class="p">(</span><span class="s1">&#39;custom-db-name&#39;</span><span class="p">,</span> <span class="s1">&#39;custom-store-name&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">customStore2</span> <span class="o">=</span> <span class="nx">createStore</span><span class="p">(</span><span class="s1">&#39;custom-db-name&#39;</span><span class="p">,</span> <span class="s1">&#39;custom-store-2&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 不同的庫有相同的表名，這是可以的: </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">customStore3</span> <span class="o">=</span> <span class="nx">createStore</span><span class="p">(</span><span class="s1">&#39;db3&#39;</span><span class="p">,</span> <span class="s1">&#39;keyval&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">customStore4</span> <span class="o">=</span> <span class="nx">createStore</span><span class="p">(</span><span class="s1">&#39;db4&#39;</span><span class="p">,</span> <span class="s1">&#39;keyval&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="總結">總結</h2> <p>本文介紹了兩個 <code>IndexedDB</code> 的庫，用來解決 <code>localStorage</code> 儲存容量太小的問題。</p> <p><code>localforage</code> 與 <code>idb-keyval</code> 之間我更喜歡 <code>localforage</code> 因為其與 <code>localStorage</code> 相似的 api 幾乎沒有上手成本。</p> <p>如果需要更加靈活的庫可以看一下 <a class="link" href="https://dexie.org/" target="_blank" rel="noopener" >dexie.js</a>、<a class="link" href="https://pouchdb.com/" target="_blank" rel="noopener" >PouchDB</a>、<a class="link" href="https://www.npmjs.com/package/idb" target="_blank" rel="noopener" >idb</a>、<a class="link" href="https://jsstore.net/" target="_blank" rel="noopener" >JsStore</a> 或者 <a class="link" href="https://github.com/google/lovefield" target="_blank" rel="noopener" >lovefield</a> 之類的庫。</p> <hr>https://blog.wayne-project.com/2022-11-14/try-runkit/Mon, 14 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-14/try-runkit/<img src="https://live.staticflickr.com/65535/52498373077_445fbf68b7_o.jpg" alt="Featured image of post 試用 RunKit" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://medium.com/@aafenguk/%e8%af%95%e7%94%a8runkit-1a175869b588" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="試用runkit">試用RunKit</h2> <p>先來說說 RunKit 是什麼。</p> <p>首先，Runkit 可以讓你在瀏覽器中運行 Node.js 的代碼。在 Runkit 中，可以很方便的調用眾多的 <strong>npm 模塊</strong>。這就有點像 Node.js 版的 Jupyter Notebook。同時，Runkit 還可以提供一個<strong>免費的 HTTP 服務器</strong>而無需任何的服務器安裝和配置。這在開發手機 APP 的服務器端，以及微服務的時候尤其有用。當然，實現無服務器的選擇很多，比如 AWS 的 Lambda + API Gateway，但 RunKit 的最大優勢就是<strong>完全免費</strong>的，這在開發軟件原型的時候就更為方便了。</p> <p>下面分別來看看這兩項功能。</p> <p>打開頁面： <a class="link" href="https://runkit.com/home" target="_blank" rel="noopener" >https://runkit.com/home</a></p> <p>可以通過 Github 授權登錄：</p> <p><img src="https://live.staticflickr.com/65535/52499339005_5846e4c91c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>登錄成功後可以看到：</p> <p><img src="https://live.staticflickr.com/65535/52499417688_b22fc7e975_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>點擊運行按鈕後就可以在頁面中看到執行結果：</p> <p><img src="https://live.staticflickr.com/65535/52499338965_f2e405dd7a_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 Runkit 的頁面中可以像正常的 Node.js 環境一樣運行各種 JS 語句。比如，運行如下的簡單代碼獲取 Hive 中文區的最新文章：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">hive</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;@hiveio/hive-js&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Read posts from Hive </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">hive</span><span class="p">.</span><span class="nx">api</span><span class="p">.</span><span class="nx">getDiscussionsByCreated</span><span class="p">({</span> <span class="nx">tag</span><span class="o">:</span> <span class="s1">&#39;hive-105017&#39;</span><span class="p">,</span> <span class="nx">limit</span><span class="o">:</span> <span class="mi">10</span> <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">discussions</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">discussions</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">post</span> <span class="o">=</span> <span class="nx">discussions</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">post</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到返回的结果：</p> <p><img src="https://live.staticflickr.com/65535/52499143664_3c8b028d58_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="api-endpoint">API Endpoint</h2> <p>再來看看我最喜歡的 Runkit 功能：提供簡單的 API endpoint。</p> <p>非常簡單的源碼：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">exports</span><span class="p">.</span><span class="nx">endpoint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">)</span> <span class="p">{</span> <span class="nx">response</span><span class="p">.</span><span class="nx">end</span><span class="p">(</span><span class="s2">&#34;API endpoint test&#34;</span><span class="p">);</span> <span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>單擊 <code>publish</code> 進行發布：</p> <p><img src="https://live.staticflickr.com/65535/52499143649_3418c86d23_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>發布後單擊 <code>endpoint</code> 就會打開對應的 API URL：</p> <p><img src="https://live.staticflickr.com/65535/52498856886_942c86a5ed_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>比如說，我這裡的就是：</p> <p><a class="link" href="https://api-jdcmj9qsmxmb.runkit.sh/" target="_blank" rel="noopener" >https://api-jdcmj9qsmxmb.runkit.sh/</a></p> <p>可以看到，無需配置/運行服務器，就可以有自己的 API 可用，又是 serverless，同時還免費，是不是很爽？</p> <hr>https://blog.wayne-project.com/2022-11-10/vue-2to3-global-component/Thu, 10 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-10/vue-2to3-global-component/<img src="https://live.staticflickr.com/65535/52489820266_b81b766288_o.png" alt="Featured image of post Vue 2 升級 Vue 3 之全域元件註冊問題" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://blog.darkthread.net/blog/vue3-reg-com/" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="前情提要">前情提要</h2> <p>在小專案裡我主要用 Vue.js 來處理 <strong>MVVM</strong>，用 <code>&lt;script&gt;</code> 載入 vue.js，寫幾行 JavaScript 搞定，走不寫模組，不用 TypeScript，免編譯打包的「<strong>輕前端</strong>」模式，但常用邏輯還是會寫成元件(Component)方便共用。</p> <p>在 Vue 2 時代，我習慣在網頁共用的 <code>.js</code> 裡使用 <code>Vue.component(&quot;my-component&quot;, ...)</code> 註冊元件，註冊一次，各網頁不需宣告就能使用元件。</p> <p>正式擺脫 IE 後，終於不用再死守 Vue 2，試著將一個小專案升級到 Vue 3，遇到小麻煩。</p> <p>Vue 3 改變了元件<strong>註冊</strong>方式，<strong>不再提供全域註冊</strong>，必須先 <code>Vue.createApp()</code> 建立實體，<code>app.component(&quot;my-component&quot;, ...)</code> 註冊或用 components 屬性引用才能使用元件。參考：<a class="link" href="https://book.vue.tw/CH2/2-1-components.html#%E5%85%83%E4%BB%B6%E7%9A%84%E5%AE%A3%E5%91%8A%E8%88%87%E8%A8%BB%E5%86%8A" target="_blank" rel="noopener" >重新認識 Vue.js - 元件的宣告與註冊</a></p> <p>全域元件改成區域元件可減少程式間互相干擾，在軟體架構來說是正確的方向，但對簡單應用來說(例如：程式很單純，全域元件打架機率趨於零的場合)，這番調整讓元件註冊變得繁瑣。</p> <p>用個範例來說明。</p> <hr> <h2 id="vue-2-註冊多個元件">Vue 2 註冊多個元件</h2> <p>原本 Vue 2 做法是在 <strong>my-components-vue2.js</strong> 中註冊多個元件：</p> <h5 id="my-components-vue2js">my-components-vue2.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;date-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{date}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;time-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{time}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">time</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">19</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;host-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{host}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此，數十支 HTML 只需載入 my-components-vue2.js 便能在網頁使用 <code>&lt;date-tag&gt;</code>、<code>&lt;time-tag&gt;</code> 插入元件。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;my-components-vue2.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">date-tag</span><span class="p">&gt;&lt;/</span><span class="nt">date-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">time-tag</span><span class="p">&gt;&lt;/</span><span class="nt">time-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">host-tag</span><span class="p">&gt;&lt;/</span><span class="nt">host-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="升級-vue-3-之後">升級 Vue 3 之後</h2> <p>升級 Vue 3 之後，元件的 js 跟網頁都要做一些修改：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">dateTag</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{date}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">timeTag</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{time}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">time</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">19</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">hostTag</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{host}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><p>建立 app 寫法改為 <code>Vue.createApp</code>，並在宣告中透過 <code>components</code> 列舉要註冊的物件：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/vue@3&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;my-components-vue3-upgrade.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">date-tag</span><span class="p">&gt;&lt;/</span><span class="nt">date-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">time-tag</span><span class="p">&gt;&lt;/</span><span class="nt">time-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">host-tag</span><span class="p">&gt;&lt;/</span><span class="nt">host-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Vue</span><span class="p">.</span><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;date-tag&#39;</span><span class="o">:</span> <span class="nx">dateTag</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;time-tag&#39;</span><span class="o">:</span> <span class="nx">timeTag</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;host-tag&#39;</span><span class="o">:</span> <span class="nx">hostTag</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 若元件物件名稱與標籤相符，可簡寫成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// components: { dateTag, timeTag, hostTag } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>假設我有 30 個網頁，30 個 app 都要加 <code>components: { dateTag, timeTag, hostTag }</code>，未來若新增其他元件，所有 <code>components</code> 列舉都要改，這是標準的「<strong>Copy &amp; Paste 負面教材</strong>」呀，一想就覺得很不 OK 呀。</p> <p>這種情境，就是<code>套件</code>(<code>Plugin</code>，也有人翻成<strong>插件、外掛</strong>)上場的時刻。最簡單的套件寫法是寫一個 function，接收 app 及 options 參數，內部呼叫 <code>app.component(...)</code> 逐一註冊元件，options 則是自訂參數，可用來決定要註冊哪些元件或變更元件設定值，提高運用彈性。以下是簡單示範：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">myComponentsPlugin</span><span class="p">(</span><span class="nx">app</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;date-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{date}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">date</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;time-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{time}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">time</span><span class="o">:</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toJSON</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">11</span><span class="p">,</span> <span class="mi">19</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">app</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="s1">&#39;host-tag&#39;</span><span class="p">,</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39;&lt;div&gt;{{host}}&lt;/div&gt;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>如此，呼叫端可簡化為 <code>.use(myComponentsPlugin)</code>，不需把所有元件列出來，未來要新增元件，修改 <code>my-components-vue3.js</code> 即可，保留原先全域元件的簡單方便：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://unpkg.com/vue@3&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;my-components-vue3.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">date-tag</span><span class="p">&gt;&lt;/</span><span class="nt">date-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">time-tag</span><span class="p">&gt;&lt;/</span><span class="nt">time-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">host-tag</span><span class="p">&gt;&lt;/</span><span class="nt">host-tag</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Vue</span><span class="p">.</span><span class="nx">createApp</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">//... </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}).</span><span class="nx">use</span><span class="p">(</span><span class="nx">myComponentsPlugin</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52489336212_2bd7bccc6c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr>https://blog.wayne-project.com/2022-11-09/js-call-apply-bind/Wed, 09 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-09/js-call-apply-bind/<img src="https://live.staticflickr.com/65535/52487952181_5991519a08_o.jpg" alt="Featured image of post 使用 bind、call、apply 改變 this 指向的對象" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://newsn.net/say/js-call.html" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://newsn.net/say/js-apply.html" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://newsn.net/say/js-bind.html" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.udemy.com/course/javascriptjs/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://b-l-u-e-b-e-r-r-y.github.io/post/BindCallApply/" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="使用-bindcallapply-改變-this-指向的對象">使用 bind、call、apply 改變 this 指向的對象</h2> <p>如果想要改變 <code>this</code> 指向的對象，可以透過 <code>bind</code>、<code>call</code>、<code>apply</code> 這三個 method 辦到。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userName</span><span class="o">:</span> <span class="s1">&#39;Blueberry&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 接著 create 一個函式來呼叫 person 的 userName： </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">callName</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">userName</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 呼叫 callName： </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">callName</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello undefined </span></span></code></pre></td></tr></table> </div> </div><p>因為 callName() 函式中的 <code>this</code> 指向的是 <code>global object</code>（也就是 <code>Window</code> 物件），所以這時候我們希望把 callName() 的 <code>this</code> 指向 <strong><code>person</code></strong> 這個對象，可以使用以下方法：</p> <hr> <h2 id="bind">bind</h2> <p><a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" target="_blank" rel="noopener" >MDN web docs</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">thisArg</span><span class="p">[,</span> <span class="nx">arg1</span><span class="p">[,</span> <span class="nx">arg2</span><span class="p">[,</span> <span class="p">...]]])</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>bind</strong> 和其他兩個方法（<strong>call</strong>、<strong>apply</strong>）的<strong>不同</strong>有兩點：</p> <ul> <li><strong>bind</strong> 是<strong>創造</strong>一個函式物件的<strong>拷貝</strong>，<strong>不會</strong>執行函式，因此 <strong>bind</strong> 之後<strong>還要再另外寫</strong>執行函式的動作；而 <strong>call</strong>、<strong>apply</strong> 是<strong>直接執行</strong>函式。</li> <li><strong>bind</strong> 後面傳入的參數值會設定為拷貝函式的<strong>永久參數值</strong>，之後執行拷貝函式時，無論怎麼給予參數都沒有用；而 <strong>call</strong>、<strong>apply</strong> 則是單純<strong>給予參數</strong>，像一般呼叫函式那樣。</li> </ul> <p>我們先單純就第一點來說明，示範最基本的 <strong>bind</strong> 怎麼寫。</p> <h3 id="第一種寫法">第一種寫法</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">callName</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">person</span><span class="p">)();</span> </span></span></code></pre></td></tr></table> </div> </div><p>也等於：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">callFunction</span> <span class="o">=</span> <span class="nx">callName</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">person</span><span class="p">);</span> <span class="c1">// 創造函式物件的拷貝 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">callFunction</span><span class="p">();</span> <span class="c1">// 執行函式 </span></span></span></code></pre></td></tr></table> </div> </div><h5 id="output-1">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello Blueberry </span></span></code></pre></td></tr></table> </div> </div><h3 id="第二種寫法直接寫在函式表示式後面也可以">第二種寫法，直接寫在函式表示式後面也可以</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">callName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">userName</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">person</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">callName</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-2">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello Blueberry </span></span></code></pre></td></tr></table> </div> </div><p>接下來針對第二點來說明，先來改寫一下 callName 函式，加入兩個 arguments：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">callName</span><span class="p">(</span><span class="nx">age</span><span class="p">,</span> <span class="nx">interest</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">userName</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Your age is &#39;</span> <span class="o">+</span> <span class="nx">age</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Your interest is &#39;</span> <span class="o">+</span> <span class="nx">interest</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>接著我們除了要用 <strong>bind</strong> 將 <code>this</code> 指向 <strong>person</strong> 之外，還要給予 <strong>age</strong> 和 <strong>interest</strong> 這兩個參數。</p> <p>這邊有兩種做法：<strong>單純給定參數</strong>，或<strong>綁定永久參數值</strong>。</p> <h4 id="單純給定參數">單純給定參數</h4> <p>要單純給定參數的話，像一般執行函式那樣，在執行函式時再給予參數就可以了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">callFunction</span> <span class="o">=</span> <span class="nx">callName</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">person</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">callFunction</span><span class="p">(</span><span class="mi">24</span><span class="p">,</span> <span class="s1">&#39;Reading books&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-3">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello Blueberry </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your age is <span class="m">24</span> </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your interest is Reading books </span></span></code></pre></td></tr></table> </div> </div><h4 id="綁定永久參數值">綁定永久參數值</h4> <p>如果將參數放在 bind 中，這個函式拷貝物件的參數值就會永遠被固定住。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">callFunction</span> <span class="o">=</span> <span class="nx">callName</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="s1">&#39;Reading books&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">callFunction</span><span class="p">(</span><span class="mi">30</span><span class="p">,</span> <span class="s1">&#39;Playing games&#39;</span><span class="p">);</span> <span class="c1">// 這邊無論再怎麼給參數都沒用 </span></span></span></code></pre></td></tr></table> </div> </div><h5 id="output-4">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello Blueberry </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your age is <span class="m">24</span> </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your interest is Reading books </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="call">call</h2> <p><a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call" target="_blank" rel="noopener" >MDN web docs</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">...,</span> <span class="nx">argn</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong><code>call</code></strong> 和 <strong><code>bind</code></strong> 不同，它會<strong>直接執行</strong>函式，後面給的參數也<strong>不會</strong>被固定住。</p> <p><code>.call()</code> 存在於任何一個<strong>函數</strong>或者<strong>方法</strong>上，是個 function 就<strong>可以調用 <code>.call()</code></strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">callName</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="s1">&#39;Reading books&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-5">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello Blueberry </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your age is <span class="m">24</span> </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your interest is Reading books </span></span></code></pre></td></tr></table> </div> </div><h3 id="修改-this-指向">修改 this 指向</h3> <ul> <li>對於沒有定義在任何對像上的 function，實際上也有 <strong>this</strong> 指向，指向的是個<strong>全局對象</strong>。</li> <li>對於定義在某個 object 上面的方法，<strong>this</strong> 指向，很好理解。</li> </ul> <p>下面拿一個對象變數做例子，來說明問題：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">sunan</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">c</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sunan</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 6 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sunan</span><span class="p">.</span><span class="nx">test</span><span class="p">.</span><span class="nx">call</span><span class="p">({</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">4</span> <span class="p">},</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">));</span> <span class="c1">// 7 </span></span></span></code></pre></td></tr></table> </div> </div><p>在這個例子裡面，<code>.call()</code> 的第一個參數傳入了一個新的對象，它覆蓋了原有的數據。c 屬性由 3 變成了 4，而 test 方法依然存在。</p> <h5 id="output-6">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> <span class="m">6</span> </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="apply">apply</h2> <p><a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" target="_blank" rel="noopener" >MDN web docs</a></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="p">[</span><span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">...,</span> <span class="nx">argn</span><span class="p">])</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong><code>apply</code></strong> 的寫法跟 <strong><code>call</code></strong> 很相近，與 <strong><code>call</code></strong> 不同的是，後面的參數需要使用<code>陣列</code>傳遞，適合搭配 arguments 運用在算數的函式。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">callName</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="p">[</span><span class="mi">24</span><span class="p">,</span> <span class="s1">&#39;Reading books&#39;</span><span class="p">]);</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-7">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Hello Blueberry </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your age is <span class="m">24</span> </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Your interest is Reading books </span></span></code></pre></td></tr></table> </div> </div><h3 id="同一個例子的-call-與-apply-寫法比較">同一個例子的 call 與 apply 寫法比較</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">callName</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="s1">&#39;Reading books&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">callName</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">person</span><span class="p">,</span> <span class="p">[</span><span class="mi">24</span><span class="p">,</span> <span class="s1">&#39;Reading books&#39;</span><span class="p">]);</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="修改-this-指向-1">修改 this 指向</h3> <ul> <li>和 <strong>.call()</strong> 一樣，<strong>.apply()</strong> 的第一個參數也是修改 <strong>this</strong> 指向的。</li> </ul> <h3 id="可能的錯誤">可能的錯誤</h3> <p>也許會碰到下面的錯誤提示信息：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="go">TypeError: CreateListFromArrayLike called on non-object </span></span></span></code></pre></td></tr></table> </div> </div><p>解決方案就是把參數打包成<code>數組[]</code>，進行傳遞。</p> <hr> <h2 id="使用情境">使用情境</h2> <h3 id="function-borrowing-借用-function">function borrowing： 借用 function</h3> <p><strong>function borrowing</strong> 就是<strong>借</strong>別人函式中的方法來用的意思，下面示範 somebody 借用 person 的 getUserName 方法。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userName</span><span class="o">:</span> <span class="s1">&#39;Blueberry&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">getUserName</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">userName</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">somebody</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userName</span><span class="o">:</span> <span class="s1">&#39;Fan&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// with bind() </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">newUser</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">getUserName</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">somebody</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">newUser</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// with call() </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">person</span><span class="p">.</span><span class="nx">getUserName</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">somebody</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// with apply() </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">person</span><span class="p">.</span><span class="nx">getUserName</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">somebody</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-8">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> Fan </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Fan </span></span><span class="line"><span class="cl"><span class="gp">&gt;</span> Fan </span></span></code></pre></td></tr></table> </div> </div><h3 id="function-currying-拷貝-function">function currying： 拷貝 function</h3> <p><strong>function currying</strong> 的定義為<strong>建立一個函式的拷貝，並設定預設的參數</strong>，這在數學運算下很有用。下面我們就利用 bind 的特性來完成 function currying。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">mutiply</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">mutiplyByTwo</span> <span class="o">=</span> <span class="nx">mutiply</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mutiplyByTwo</span><span class="p">(</span><span class="mi">4</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-9">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> <span class="m">8</span> </span></span></code></pre></td></tr></table> </div> </div><p>上面我們建立了一個函式 <strong><code>mutiply(a, b)</code></strong>，並用 <strong><code>bind</code></strong> 建立函式物件拷貝 <strong><code>mutiplyByTwo()</code></strong>。</p> <p><strong><code>mutiply.bind(this, 2)</code></strong> 這邊的 <strong>this</strong> 並不重要，因為函式裡沒有使用到 <strong>this</strong>。</p> <p>而後面的 2 則是<code>永久</code>綁定了<strong>參數 a</strong>。</p> <p>為了讓程式碼比較好理解，這邊將上面那段程式碼拆解，它也等於：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">mutiply</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">mutiplyByTwo</span> <span class="o">=</span> <span class="nx">mutiply</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mutiplyByTwo</span><span class="p">(</span><span class="mi">4</span><span class="p">));</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="output-10">output：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-console" data-lang="console"><span class="line"><span class="cl"><span class="gp">&gt;</span> <span class="m">8</span> </span></span></code></pre></td></tr></table> </div> </div>https://blog.wayne-project.com/2022-11-03/js-8-console-tricks/Thu, 03 Nov 2022 00:00:00 +0000https://blog.wayne-project.com/2022-11-03/js-8-console-tricks/<img src="https://live.staticflickr.com/65535/52473860621_0ede00e99a_o.jpg" alt="Featured image of post 8 招 JavaScript Console 運用技巧，讓你除錯更高效" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.casper.tw/development/2021/09/14/js-console/" target="_blank" rel="noopener" >參考網站</a></p> <p>寫 JavaScript 需要檢視運作是否正確時候，都會使用 <code>console.log</code> 來檢視輸出或運算的值，而 <code>console</code> 的運用技巧不僅僅只有將值呈現在開發的 <code>Console 介面</code>中。本篇就來介紹許多 <code>console</code> 語法的實戰運用方法吧！</p> <hr> <p>首先，在此先準備一份等等會用到的物件及陣列作為以下範例使用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">Ming</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;小明&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">15</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">favorite</span><span class="o">:</span> <span class="s1">&#39;鍋燒意麵&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">Jay</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;杰倫&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">16</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">favorite</span><span class="o">:</span> <span class="s1">&#39;炒麵&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">Auntie</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;漂亮阿姨&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">21</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">favorite</span><span class="o">:</span> <span class="s1">&#39;蘿蔔糕&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">people</span> <span class="o">=</span> <span class="p">[</span><span class="nx">Ming</span><span class="p">,</span> <span class="nx">Jay</span><span class="p">,</span> <span class="nx">Auntie</span><span class="p">];</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="為-consolelog-的程式碼上色">為 console.log 的程式碼上色</h2> <p>有在 Facebook 頁面中開啟過開發者工具嗎？如果有，相信你對於以下這張圖並不陌生。</p> <p><img src="https://live.staticflickr.com/65535/52474405673_77d2312f81_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>Console 中的文字並非只有固定的色彩，它與網頁中的文字一樣，都可以透過 CSS 的語法來調整其色彩，只要在 <code>log</code> 的文字前方先加入 <code>%c</code> 後，在 , 後方的參數就能夠傳入 CSS 語法做為參數，並且調整 Console 中呈現的文字樣式。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`%c </span><span class="si">${</span><span class="nx">Ming</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb"> 有瑟瑟的顏色`</span><span class="p">,</span> <span class="s1">&#39;color: orange; font-size: 24px&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52473860556_0c3cbc749d_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="consoletable使用表格的方式陳列陣列的資訊">console.table()：使用表格的方式陳列陣列的資訊</h2> <p>當要呈現資料於 Console 介面中，做常見的方式就是使用 <code>log</code> 的方法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 基本用法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">Ming</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">Jay</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">Auntie</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">people</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>當然，這樣的用法絕對沒有問題，透過此方法可以將值一一陳列出來，不過當這些數值是 <code>具有關聯性</code> 時，一般的 <code>log</code> 就無法比較兩者之間的關係。</p> <p><img src="https://live.staticflickr.com/65535/52473361772_d4457e0674_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><code>console.table()</code> 針對物件之間有相同的屬性名稱時，就能夠輕易的比較相同屬性之間的關係。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">([</span><span class="nx">Ming</span><span class="p">,</span> <span class="nx">Jay</span><span class="p">,</span> <span class="nx">Auntie</span><span class="p">]);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">table</span><span class="p">(</span><span class="nx">people</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52474405618_0534bf4a54_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>除此之外，表格上方的標頭還可以點選作為排序使用，如果拿到一個 JSON 想比對其中的值，還要轉貼到 Excel 或是 <code>sort()</code> 語法安排，不如直接改用 <code>table()</code> 進行比較吧。</p> <p><img src="https://live.staticflickr.com/65535/52473377947_62186d5eab_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="consolegroup群組化大量的-log-資訊">console.group()：群組化大量的 log 資訊</h2> <p>使用 <code>log()</code> 觀看迴圈值是合情合理的，不過當陣列的長度有上百筆時，Console 介面中的資料還真會滾到令人厭世。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">index</span> <span class="o">&lt;</span> <span class="nx">people</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">index</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">people</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52473361732_f9a99f8f40_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>在迴圈中使用 <code>console.log()</code> 會一一呈現資料，數量一多看起來就會顯的很吃力</p></blockquote> <p>使用 <code>console.group()</code>、<code>console.groupEnd()</code> 設置群組的起訖，在 Console 的介面中就能方便的收合群組內容。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="s1">&#39;迴圈群組&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">index</span> <span class="o">&lt;</span> <span class="nx">people</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">index</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">people</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">groupEnd</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>console.group(/* 群組名稱 */)</code> 可以傳入 <strong><code>群組名稱</code></strong> 做為參數，作為在 Console 介面中辨識群組的顯示名稱，在介面中的群組名稱也會以粗體名稱，並且可以點擊箭頭符號收合群組內容。</p> <p><img src="https://live.staticflickr.com/65535/52474142054_74ccb31919_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="consoletime開發者最愛斤斤計較那-1ms-的效能了">console.time()：開發者最愛斤斤計較那 1ms 的效能了</h2> <p>每當寫出神邏輯的時候，都會擔心電腦效能跟不上自己的思維，這時候就可以使用 <code>time()</code> 追蹤片段程式碼所處理的時間差，得知自己是不是該換台電腦解決問題。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 時間追蹤 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;迴圈處理時間&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">index</span> <span class="o">&lt;</span> <span class="nx">people</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">index</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">people</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;迴圈處理時間&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>在起訖中分別加入 <code>time()</code> 以及 <code>timeEnd()</code>，執行程式碼後就可以獲得處理的結果。</p> <p><img src="https://live.staticflickr.com/65535/52473361712_efa32726e1_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="consoledir以物件的形式呈現資料">console.dir()：以物件的形式呈現資料</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// HTML &lt;p&gt;推薦的 Console 語法&lt;/p&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>當使用 <code>console.log()</code> 查看 DOM 元素，並想了解其中可用的方法或屬性時…，它可能會出現如下帶點失望的標籤，並且心裡默罵：</p> <ul> <li>要這個幹嘛啦</li> <li>要知道的是物件屬性、屬性</li> </ul> <p><img src="https://live.staticflickr.com/65535/52473361702_f3efa4c4c9_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這時候需要的是 <code>console.dir()</code>，你會發現另一個新世界，原本的 DOM 元素被改為物件的形式呈現，你可以輕鬆展開此物件，並檢視裡面有哪些可用屬性。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">dir</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52473361677_66dc6be1f6_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>展開的 P 元素，包含其中所有的屬性（這在操作 DOM 時極為好用）</p></blockquote> <hr> <h2 id="consoleerror">console.error()</h2> <p>寫程式有錯誤是難免的，但是如果是錯誤，卻沒有明確的提示導致沒有被發現問題，就失去提示的意義了，如果想讓 Console 的內容更加醒目，可以使用 <code>console.error()</code> 使訊息在 Console 介面中以錯誤的形式呈現。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">Ming</span><span class="p">.</span><span class="nx">name</span><span class="si">}</span><span class="sb"> 你完蛋了`</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>當運用在一般文字訊息上時，也可以展開訊息並說明錯誤來源自哪一段程式碼。</p> <p><img src="https://live.staticflickr.com/65535/52473860411_86fa6efbe3_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 AJAX 的未確認狀態中，也會使用 <code>console.error</code> 來呈現錯誤的回饋訊息，以下範例刻意將 API 路徑調整成錯誤的，並透過 <code>console.error()</code> 來將錯誤的資訊呈現在 Console 介面中</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// Error </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;https://randomuser.me/apis&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">res</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;待誌大條啦: &#39;</span><span class="p">,</span> <span class="nx">error</span><span class="p">.</span><span class="nx">response</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52474142014_1023c7b7d7_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="consolewarn">console.warn()</h2> <p>錯誤太突兀了嗎？如果是自行開發的函式庫，已經透過各種形式避免程式碼出錯，但還是想把有錯誤的訊息給予開發者知道，那麼則可以使用 <code>console.warn()</code>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// Warning </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="cm">/*** </span></span></span><span class="line"><span class="cl"><span class="cm"> * 超精美函式庫 💖 </span></span></span><span class="line"><span class="cl"><span class="cm"> * @param {number} num 純數值 </span></span></span><span class="line"><span class="cl"><span class="cm"> * @param {string} text 請傳入字串 </span></span></span><span class="line"><span class="cl"><span class="cm"> */</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">superMagicLibrary</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="nx">text</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">num</span> <span class="o">!==</span> <span class="s1">&#39;number&#39;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="s1">&#39;尊重一下好嗎，請傳入純數值&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">superMagicLibrary</span><span class="p">(</span><span class="s1">&#39;字串&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>函式庫中大多會避免已知的錯誤，如果要友善的給予回饋，可以使用 <code>warn()</code> 代替 <code>error()</code> 提醒開發者更好的做法。</p> <p><img src="https://live.staticflickr.com/65535/52473361632_0194537b7c_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="consoleclear">console.clear()</h2> <p>如果覺得 Console 介面已經充滿了許多不必要的資訊，想要專注於當前開發的程式碼，那麼可以加入 <code>console.clear()</code>。</p> <p><img src="https://live.staticflickr.com/65535/52474405453_0497411dc5_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>畫面中會出現 Console was cleared 的字眼</p></blockquote> <p>此語法亦可在 Console 介面中直接輸入，會直接清除當下的所有資訊內容。</p> <p><img src="https://live.staticflickr.com/65535/52474422398_9a728ec190_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>不過請慎用此方法，如果隨意插入 <code>console.clear()</code> 在不同的檔案中，不知情的夥伴一定會在開發中卡很久，可能發生的情境有…：</p> <ul> <li>奇怪，我寫的 Code 怎麼都沒顯示在 Console</li> <li>編譯器壞了嗎？怎麼好像沒有運作</li> <li>我的 Chrome 怪怪的</li> </ul> <p>還有哪些方法你也常用，但沒有介紹到的呢？歡迎在底下留言區留言喔</p> <hr>https://blog.wayne-project.com/2022-10-27/js-30-keypoints/Thu, 27 Oct 2022 00:00:00 +0000https://blog.wayne-project.com/2022-10-27/js-30-keypoints/<img src="https://live.staticflickr.com/65535/52457807569_15f64548d9_o.jpg" alt="Featured image of post 30 個 Javascript 知識點總結，總有你不會的！" /><style> .article-content p code { background-color: #f5f5f5; color: #ff3860; } .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://juejin.cn/post/7145036326373425159" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.readfog.com/a/1683106300221820928" target="_blank" rel="noopener" >參考網站</a></p> <p>最近重溫了一遍紅寶書，發現一些比較好玩的寫法，很多東西日常都在用，但是發現還會有不一樣的寫法, 結合一些日常工作中使用的方法，爲大家總結一篇日常經常使用可能還不知道的點，希望對你能有所幫助。</p> <hr> <h2 id="一行代碼完成結構加賦值">一行代碼完成結構加賦值</h2> <p>我們日常經常使用<code>結構賦值</code>，一般都是先<code>結構</code>，再<code>賦值</code>，當然我們也可以一行就完成<code>解構</code>加<code>賦值</code>操作，看起來非常簡化，當然可讀性你懂得！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">people</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="kc">null</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;張三&#39;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">16</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">people</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="nx">people</span><span class="p">.</span><span class="nx">age</span><span class="p">}</span> <span class="o">=</span> <span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">people</span><span class="p">)</span> <span class="c1">// {&#34;name&#34;:&#34;張三&#34;,&#34;age&#34;:16} </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="對基礎數據類型進行解構">對基礎數據類型進行解構</h2> <p>日常中我們應該用不到這樣的場景，但是實際上我們也可以對基礎數據類型解構。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span><span class="nx">length</span> <span class="o">:</span> <span class="nx">a</span><span class="p">}</span> <span class="o">=</span> <span class="s1">&#39;1234&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="c1">// 4 </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="對數組解構快速拿到最後一項值">對數組解構快速拿到最後一項值</h2> <p>實際上我們是可以對數組解構賦值拿到 <strong>length</strong> 屬性的，通過這個特性也可以做更多的事情。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="mi">0</span><span class="o">:</span> <span class="nx">first</span><span class="p">,</span> <span class="nx">length</span><span class="p">,</span> <span class="p">[</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]</span><span class="o">:</span> <span class="nx">last</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">first</span><span class="p">;</span> <span class="c1">// 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">last</span><span class="p">;</span> <span class="c1">// 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">length</span><span class="p">;</span> <span class="c1">// 3 </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="將下標轉爲中文零一二三">將下標轉爲中文零一二三&hellip;</h2> <p>日常可能有的列表我們需要將對應的 012345 轉爲中文的一、二、三、四、五&hellip;，在老的項目看到還有通過自己手動定義很多行這樣的寫法，於是寫了一個這樣的方法轉換</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">transfromNumber</span><span class="p">(</span><span class="nx">number</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">INDEX_MAP</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;零&#39;</span><span class="err">，</span><span class="s1">&#39;一&#39;</span><span class="p">.....]</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">number</span><span class="p">)</span> <span class="k">return</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">number</span> <span class="o">===</span> <span class="mi">10</span><span class="p">)</span> <span class="k">return</span> <span class="nx">INDEX_MAP</span><span class="p">[</span><span class="nx">number</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">[...</span><span class="nx">number</span><span class="p">.</span><span class="nx">toString</span><span class="p">()].</span><span class="nx">reduce</span><span class="p">(</span> <span class="p">(</span><span class="nx">pre</span><span class="p">,</span> <span class="nx">cur</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">pre</span> <span class="o">+</span> <span class="nx">INDEX_MAP</span><span class="p">[</span><span class="nx">cur</span><span class="p">]</span> <span class="p">,</span> <span class="s1">&#39;&#39;</span> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="判斷整數的不同方法">判斷整數的不同方法</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 1. 任何整數都會被1整除，即餘數是0。利用這個規則來判斷是否是整數。但是對字符串不準確 */</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isInteger</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">obj</span> <span class="o">%</span> <span class="mi">1</span> <span class="o">===</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 1. 添加一個是數字的判斷 */</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isInteger</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">typeof</span> <span class="nx">obj</span> <span class="o">===</span> <span class="s1">&#39;number&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">obj</span> <span class="o">%</span> <span class="mi">1</span> <span class="o">===</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 2. 使用Math.round、Math.ceil、Math.floor判斷 整數取整後還是等於自己。利用這個特性來判斷是否是整數*/</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isInteger</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="o">===</span> <span class="nx">obj</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 3. 通過parseInt判斷 某些場景不準確 */</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isInteger</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> <span class="o">===</span> <span class="nx">obj</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 4. 通過位運算符*/</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isInteger</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span><span class="nx">obj</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">===</span> <span class="nx">obj</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 5.ES6提供了Number.isInteger */</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="通過-css-檢測系統的主題色從而全局修改樣式">通過 css 檢測系統的主題色從而全局修改樣式</h2> <p><strong>@media</strong> 的屬性 <code>prefers-color-scheme</code> 就可以知道當前的系統主題，當然使用前需要查查<a class="link" href="https://caniuse.com/?search=prefers-color-scheme" target="_blank" rel="noopener" >兼容性</a>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">prefers-color-scheme</span><span class="o">:</span> <span class="nt">dark</span><span class="o">)</span> <span class="p">{</span> <span class="o">//...</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">prefers-color-scheme</span><span class="o">:</span> <span class="nt">light</span><span class="o">)</span> <span class="p">{</span> <span class="o">//...</span> <span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><strong>javascript</strong> 也可以輕鬆做到</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;theme-mode&#39;</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">mode</span> <span class="o">==</span> <span class="s1">&#39;dark&#39;</span><span class="p">){}</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">mode</span> <span class="o">==</span> <span class="s1">&#39;light&#39;</span><span class="p">){}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39;(prefers-color-scheme: dark)&#39;</span><span class="p">)</span> <span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{}</span> <span class="c1">// dark mode </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="數組隨機打亂順序">數組隨機打亂順序</h2> <p>通過 <code>0.5-Math.random()</code> 得到一個隨機數，再通過兩次 sort 排序打亂的更徹底, 但是這個方法實際上並不夠隨機，如果是企業級運用，建議使用第二種洗牌算法。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">shuffle</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">sort</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="mf">0.5</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()).</span> <span class="nx">sort</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="mf">0.5</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">shuffle</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">randomIndex</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="p">(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="p">;[</span><span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">randomIndex</span><span class="p">]]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">arr</span><span class="p">[</span><span class="nx">randomIndex</span><span class="p">],</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">arr</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="隨機獲取一個-boolean-值">隨機獲取一個 Boolean 值</h2> <p>和上個原理相同，通過隨機數獲取，<strong>Math.random()</strong> 的區間是 0-0.99，用 0.5 在中間百分之五十的概率。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">randomBool</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="mf">0.5</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="把數組最後一項移到第一項">把數組最後一項移到第一項</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="p">(</span><span class="nx">arr</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">arr</span><span class="p">.</span><span class="nx">shift</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="把數組的第一項放到最後一項">把數組的第一項放到最後一項</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span><span class="p">(</span><span class="nx">arr</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="nx">arr</span><span class="p">.</span><span class="nx">pop</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="利用-set-數組去重">利用 set 數組去重</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">uniqueArr</span><span class="p">(</span><span class="nx">arr</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">[...</span><span class="k">new</span> <span class="nx">Set</span><span class="p">(</span><span class="nx">arr</span><span class="p">)]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="dom-節點平滑滾動到可視區域頂部底部">dom 節點平滑滾動到可視區域、頂部、底部</h2> <p>原生的 <strong>scrollTo</strong> 方法沒有動畫，類似於錨點跳轉，比較生硬，可以通過這個方法會自帶平滑的過度效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">scrollTo</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 頂部 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollIntoView</span><span class="p">({</span> <span class="nx">behavior</span><span class="o">:</span> <span class="s2">&#34;smooth&#34;</span><span class="p">,</span> <span class="nx">block</span><span class="o">:</span> <span class="s2">&#34;start&#34;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 底部 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollIntoView</span><span class="p">({</span> <span class="nx">behavior</span><span class="o">:</span> <span class="s2">&#34;smooth&#34;</span><span class="p">,</span> <span class="nx">block</span><span class="o">:</span> <span class="s2">&#34;end&#34;</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 可視區域 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">element</span><span class="p">.</span><span class="nx">scrollIntoView</span><span class="p">({</span> <span class="nx">behavior</span><span class="o">:</span> <span class="s2">&#34;smooth&#34;</span><span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="獲取隨機顏色">獲取隨機顏色</h2> <p>日常我們經常會需要獲取一個隨機顏色，通過隨機數即可完成。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">getRandomColor</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`#</span><span class="si">${</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mh">0xffffff</span><span class="p">)</span> <span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="檢測是否爲空對象">檢測是否爲空對象</h2> <p>通過使用 ES6 的 <strong>Reflect</strong> 靜態方法判斷他的長度就可以判斷是否是空數組了，也可以通過 <strong>Object.keys()</strong> 來判斷。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isEmpty</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">Reflect</span><span class="p">.</span><span class="nx">ownKeys</span><span class="p">(</span><span class="nx">obj</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">===</span> <span class="nb">Object</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="boolean-轉換">Boolean 轉換</h2> <p>一些場景下我們會將 boolean 值定義爲場景，但是在 js 中<strong>非空</strong>的字符串都會被認爲是 <strong>true</strong>。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">toBoolean</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">truthyValues</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;true&#39;</span><span class="p">]){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">normalizedValue</span> <span class="o">=</span> <span class="nb">String</span><span class="p">(</span><span class="nx">value</span><span class="p">).</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">trim</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">truthyValues</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">normalizedValue</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">toBoolean</span><span class="p">(</span><span class="s1">&#39;TRUE&#39;</span><span class="p">);</span> <span class="c1">// true </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">toBoolean</span><span class="p">(</span><span class="s1">&#39;FALSE&#39;</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">toBoolean</span><span class="p">(</span><span class="s1">&#39;YES&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;yes&#39;</span><span class="p">]);</span> <span class="c1">// true </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="各種數組複製方法">各種數組複製方法</h2> <p>數組克隆的方法其實特別多了，看看有沒有你沒見過的！</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">[...</span><span class="nx">arr</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">from</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">x</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">x</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">arr</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">concat</span><span class="p">([]);</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">clone</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">structuredClone</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="比較兩個時間大小">比較兩個時間大小</h2> <p>通過調用 <strong>getTime</strong> 獲取時間戳比較就可以了。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">compare</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">getTime</span><span class="p">()</span> <span class="o">&gt;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="計算兩個時間之間的月份差異">計算兩個時間之間的月份差異</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">monthDiff</span><span class="p">(</span><span class="nx">startDate</span><span class="p">,</span> <span class="nx">endDate</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="p">(</span><span class="nx">endDate</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">-</span> <span class="nx">startDate</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">())</span> <span class="o">*</span> <span class="mi">12</span> <span class="o">-</span> <span class="nx">startDate</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">()</span> <span class="o">+</span> <span class="nx">endDate</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">());</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="一步驟從時間中提取年月日時分秒">一步驟從時間中提取年月日時分秒</h2> <p>時間格式化輕鬆解決，一步驟獲取到<strong>年月日時分秒毫秒</strong>，由於 <strong>toISOString</strong> 會丟失時區，導致時間差八小時，所以在格式化之前我們加上八個小時時間即可。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">extract</span><span class="p">(</span><span class="nx">date</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">date</span><span class="p">).</span><span class="nx">getTime</span><span class="p">()</span> <span class="o">+</span> <span class="mi">8</span><span class="o">*</span><span class="mi">3600</span><span class="o">*</span><span class="mi">1000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">d</span><span class="p">).</span><span class="nx">toISOString</span><span class="p">().</span><span class="nx">split</span><span class="p">(</span><span class="sr">/[^0-9]/</span><span class="p">).</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">extract</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()))</span> <span class="c1">// [&#39;2022&#39;, &#39;09&#39;, &#39;19&#39;, &#39;18&#39;, &#39;06&#39;, &#39;11&#39;, &#39;187&#39;] </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="判斷一個參數是不是函數">判斷一個參數是不是函數</h2> <p>有時候我們的方法需要傳入一個函數回調，但是需要檢測其類型，我們可以通過 <strong>Object</strong> 的原型方法去檢測，當然這個方法可以準確檢測任何類型。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isFunction</span><span class="p">(</span><span class="nx">v</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">[</span><span class="s1">&#39;[object Function]&#39;</span><span class="p">,</span> <span class="s1">&#39;[object GeneratorFunction]&#39;</span><span class="p">,</span> <span class="s1">&#39;[object AsyncFunction]&#39;</span><span class="p">,</span> <span class="s1">&#39;[object Promise]&#39;</span><span class="p">].</span><span class="nx">includes</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">toString</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">v</span><span class="p">));</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="計算兩個座標之間的距離">計算兩個座標之間的距離</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">distance</span><span class="p">(</span><span class="nx">p1</span><span class="p">,</span> <span class="nx">p2</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="sb">`Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); </span></span></span><span class="line"><span class="cl"><span class="sb">} </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="檢測兩個-dom-節點是否覆蓋重疊">檢測兩個 dom 節點是否覆蓋重疊</h2> <p>有些場景下我們需要判斷 dom 是否發生碰撞了或者重疊了，我們可以通過 <strong>getBoundingClientRect</strong> 獲取到 dom 的 x1、y1、x2、y2 座標然後進行座標比對即可判斷出來。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">overlaps</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">x1</span> <span class="o">&lt;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">x2</span> <span class="o">&amp;&amp;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">x1</span> <span class="o">&lt;</span> <span class="nx">a</span><span class="p">.</span><span class="nx">x2</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">y1</span> <span class="o">&lt;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">y2</span> <span class="o">&amp;&amp;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">y1</span> <span class="o">&lt;</span> <span class="nx">a</span><span class="p">.</span><span class="nx">y2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="判斷是否是-nodejs-環境">判斷是否是 Nodejs 環境</h2> <p>前端的日常開發是離不開 nodejs 的，通過判斷全局環境來檢測是否是 nodejs 環境。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">isNode</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">typeof</span> <span class="nx">process</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">process</span><span class="p">.</span><span class="nx">versions</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">&amp;&amp;</span> <span class="nx">process</span><span class="p">.</span><span class="nx">versions</span><span class="p">.</span><span class="nx">node</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="參數求和">參數求和</h2> <p>之前看到有通過函數<strong>柯理化</strong>形式來求和的，通過 <strong>reduce</strong> 一行即可。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">sum</span><span class="p">(...</span><span class="nx">args</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">args</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-08-13/js-async-programs/Sat, 13 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-13/js-async-programs/<img src="https://live.staticflickr.com/65535/52282531224_1f57c841ee_o.jpg" alt="Featured image of post 【Callback、Promise、Async/Await】處理非同步事件" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.youtube.com/watch?v=NOprCnnjHm0" target="_blank" rel="noopener" >參考彭彭 - 回呼函式 Callbacks、Promises 物件、Async/Await 非同步流程控制</a></p> <h2 id="前言">前言</h2> <p>Javascript 的主要特點有兩個：</p> <ul> <li><code>Single Thread (單線程)</code></li> <li><code>Synchronous (同步)</code></li> </ul> <p>當主程式中遇到「非同步」的函式如<span class="focus">排程</span>、<span class="focus">取資料</span>、<span class="focus">讀檔</span>&hellip;等相關的函式時(如：<code>setTimeout</code>、<code>fetch</code>&hellip;等)，主程式並不會停止並等待函式執行完成後才繼續往下跑，而是會將其放到 queue 中直到所有程式碼都跑完了，Javascript 會再回頭到 queue 中按順序將 function 拉回來處理。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;程式開始&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;非同步事件&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;程式結束&#34;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>程式開始<br> 程式結束<br> 非同步事件 &lt;- 最後執行</p></blockquote> <p>上段的原始碼中，setTimeout 所定義的時間為 0，但因為是屬於非同步事件，因此還是會在其他原始碼運行完以後才執行，在 Ajax 的行為中也是一樣，當需要確保擷取到遠端資料才繼續往下執行時，如果程式碼是依序撰寫的方式，就會無法正確呈現資料，以下舉個例子示範。</p> <hr> <h2 id="舉例">舉例</h2> <p>以下為例，此為一個很基本的回傳n1+n2的結果的函式。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">add</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><p>但若今天需求需要延遲兩秒再將結果打印出來時。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; undefined </span></span></code></pre></td></tr></table> </div> </div><p>此時會發現打印出來的 <code>result</code> 因為 <code>delayedAdd</code> 還未將結果回傳，導致直接顯示 <code>undefined</code>，此時就需要來解決這種非同步流程的控制。</p> <hr> <h2 id="方法1callbacks-回呼函式">方法1：<code>Callbacks</code> 回呼函式</h2> <ul> <li>最早期使用的方式，於函式最後設定<code>callback</code>，執行需要做的事情。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// Callback 回呼函式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 設定排程，延遲一段時間後執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 延遲一段時間之後，計算加法，呼叫 callback 函式 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">callback</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="方法2promise-物件">方法2：<code>Promise</code> 物件</h2> <ul> <li>近期於ES6提出的新方式。</li> <li>建立 promise 物件：<code>new Promise(執行函式)</code></li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">p</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 呼叫resolve將結果回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">p</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">promise</span> <span class="o">=</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">promise</span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="常見寫法直接-return-promise">常見寫法，直接 return promise</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 呼叫resolve將結果回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">promise</span> <span class="o">=</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">promise</span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>new Promise(resolve, reject) 的 <code>resolve</code> 與 <code>reject</code> 為 Promise 原生提供，可自行改名但順序不可異動。</li> <li><code>resolve</code> 對應<code>.then()</code>且代表成功，而 <code>reject</code> 則對應到 <code>.catch()</code>且代表失敗。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">reject</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 若使用reject，則需使用.catch </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">promise</span> <span class="o">=</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 因使用 reject 回傳，這裡使用 .catch 來接 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">promise</span><span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="方法3asyncawait-promise-的語法糖">方法3：<code>Async/Await</code> ，<code>Promise</code> 的語法糖</h2> <ul> <li><code>Promise</code>的語法糖，以便於更直觀的閱讀與撰寫非同步流程，同 <code>Promise</code> 於ES6提出的新玩意兒。</li> <li>注意：<code>await</code> 的函式必須要確保有<code>Promise</code>，否則將報錯。</li> <li>需先宣告為 <code>async</code> 函式，才能使用 <code>await</code>。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 若使用reject，則需使用.catch </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="c1">// 需先宣告為 async 函式，才可使用 await </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">async</span> <span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>注意：使用 <code>await</code> 時，主程式會確實停止，等待 <code>await</code> 函式執行完成後，才接續往下跑，舉例：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 若使用reject，則需使用.catch </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="c1">// 需先宣告為 async 函式，才可使用 await </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">async</span> <span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">7</span> </span></span><span class="line"><span class="cl">&gt; Hello </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="延伸一多個-promise-的資料處理promiseall">延伸一：多個 Promise 的資料處理：<code>Promise.all()</code></h2> <ul> <li>若遇到多個 <code>Promise</code>，且需將各個 <code>Promise</code> 的結果進行運算時，可使用 <code>Promise.all()</code> 來處理。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 呼叫resolve將結果回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">promise1</span> <span class="o">=</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">promise2</span> <span class="o">=</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">3000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 多個 Promise 都完成之後，將其數值相乘 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span><span class="nx">promise1</span><span class="p">,</span> <span class="nx">promise2</span><span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 此時 results 為一個陣列 &gt; [7, 5]; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">answer</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">reduce</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">total</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">total</span> <span class="o">*</span> <span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">answer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">35</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="延伸二多個-promise-使用-asyncawait">延伸二：多個 Promise 使用 <code>Async/Await</code></h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">,</span> <span class="nx">delayTime</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 建立 Promise，使用resolve或reject回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">n1</span><span class="o">+</span><span class="nx">n2</span><span class="p">);</span> <span class="c1">// 呼叫resolve將結果回傳 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="nx">delayTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result1</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">2000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">result2</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">delayedAdd</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">3000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">answer</span> <span class="o">=</span> <span class="nx">result1</span> <span class="o">*</span> <span class="nx">result2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">answer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">test</span><span class="p">();</span> </span></span></code></pre></td></tr></table> </div> </div><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">&gt; <span class="m">35</span> </span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-08-13/js-async-await/Sat, 13 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-13/js-async-await/<img src="https://live.staticflickr.com/65535/52281246237_dd06bc8ef9_o.png" alt="Featured image of post Javascript 的 Async/Await" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.oxxostudio.tw/articles/201908/js-async-await.html" target="_blank" rel="noopener" >本文參考網址</a></p> <h2 id="什麼是-async什麼是-await">什麼是 <code>async</code>？什麼是 <code>await</code>？</h2> <p>在 JavaScript 的世界，同步 <span class="focus">sync</span> 和非同步 <span class="focus">async</span> 的愛恨情仇，就如同偶像劇一般的剪不斷理還亂，特別像是<span class="focus">setTimeout</span>、<span class="focus">setInterval</span>、<span class="focus">MLHttpRequest</span>或<span class="focus">fetch</span>這些同步非同步混雜的用法，都會讓人一個頭兩個大，幸好 ES6 出現了 promise，ES7 出現了 async、await，幫助我們可以更容易的進行程式邏輯的撰寫。</p> <p>對於同步和非同步，最常見的說法是「<strong>同步模式下，每個任務必須按照順序執行，後面的任務必須等待前面的任務執行完成，非同步模式則相反，後面的任務不用等前面的，各自執行各自的任務</strong>」，但我覺得這樣實在不容易理解，不容易理解的地方在於「中文」的同步和非同步，可能和實際上的解釋剛好相反了 ( 同步的中文字面意思是「一起走」，非同步的中文意思是「不要一起走」，超容易搞錯的 )，因此如果你跟我一樣也很容易搞錯，可以使用我覺得比較好理解的方法：「<span class="focus">同一個步道 vs 不同步道</span>」，透過步道的方式，就更容易明白同步和非同步。</p> <blockquote> <p>同步：在「同一個步道」比賽「接力賽跑」，當棒子沒有交給我，我就得等你，不能跑。<br> 非同步：在「不 ( 非 ) 同步道」比賽「賽跑」，誰都不等誰，只要輪到我跑，我就開始跑。</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52282241823_af79345bfe_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>在 ES7 裡頭 async 的本質是 promise 的語法糖 ( 包裝得甜甜的比較好吃下肚 )，<strong>只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法</strong>，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步，當 async function 的內容全都結束後，會返回一個 promise，這表示後方可以使用<span class="focus">.then</span>語法來做連接，基本的程式長相就像下面這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">a</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">b</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">.....</span> <span class="c1">// 等 b() 完成後才會執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">c</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">.....</span> <span class="c1">// 等 c() 完成後才會執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span><span class="p">=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="p">.....</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">.....</span> <span class="c1">// 上方的 promise 完成後才會執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">a</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="nx">a</span><span class="p">().</span><span class="nx">then</span><span class="p">(()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="p">.....</span> <span class="c1">// 等 a() 完成後接著執行 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="利用-async-和-await-做個漂亮的等待">利用 async 和 await 做個「漂亮的等待」</h2> <p>比較了解 async 和 await 的意思之後，就來試試看做個「<strong>漂亮的等待</strong>」，過去有使用 ES6 的 promise 來實現 delay ( 如同下方的程式範例 )，這個 delay 透過<span class="focus">.then</span>來完成一步一步的串接，雖然邏輯上很清楚，但若要實作比較複雜的流程，就得把每個程式寫在對應的 callback 裏，也就沒有想像的容易，這就是「不太漂亮的等待」 ( 使用 setTimeout 的做法就是不漂亮的等待 )。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 不漂亮的等待 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">delay</span> <span class="o">=</span> <span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span><span class="nx">s</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">delay</span><span class="p">().</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// 顯示 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">delay</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span> <span class="c1">// 延遲ㄧ秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// 顯示 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="nx">delay</span><span class="p">(</span><span class="mi">2000</span><span class="p">);</span> <span class="c1">// 延遲二秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}).</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span> <span class="c1">// 顯示 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果我們把上面的範例修改為 async 和 await 的寫法，突然就發現程式碼看起來非常的乾淨，因為 <strong><code>await</code> 會等待收到 resolve 之後才會進行後面的動作，如果沒有收到就會一直處在等待的狀態</strong>，所以什麼時候該等待，什麼時候該做下一步，就會非常清楚明瞭，這也就是我所謂「漂亮的等待」。</p> <blockquote> <p>注意，await 一定得運行在 async function 內！</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="o">~</span><span class="kr">async</span> <span class="kd">function</span><span class="p">{</span> <span class="c1">// ~ 開頭表示直接執行這個 function，結尾有 () </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">delay</span> <span class="o">=</span> <span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">){</span> <span class="c1">// 回傳一個 promise </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span><span class="nx">s</span><span class="p">);</span> <span class="c1">// 等待多少秒之後 resolve() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// 顯示 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">delay</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span> <span class="c1">// 延遲ㄧ秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// 顯示 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">delay</span><span class="p">(</span><span class="mi">2000</span><span class="p">);</span> <span class="c1">// 延遲二秒 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span> <span class="c1">// 顯示 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}();</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="搭配-promise">搭配 Promise</h2> <p>基本上只要有 async 和 await 的地方，就一定有 promise 的存在，promise 顧名思義就是「保證執行之後才會做什麼事情」，剛剛使用了 <span class="focus">async</span>、<span class="focus">await</span> 和 <span class="focus">promise</span> 改善<span class="focus">setTimeout</span>這個容易出錯的非同步等待，針對setInterval，也能用同樣的做法修改，舉例來說，下面的程式碼執行之後，並「<strong>不會</strong>」如我們預期的「<strong>先顯示 1，再顯示 haha0&hellip;haha5，最後再顯示 2</strong>」，而是「<strong>先顯示 1 和 2，然後再出現 haha0&hellip;haha5</strong>」，因為雖然程式邏輯是從上往下，但在 count function 裏頭是非同步的語法，導致自己走自己的路，也造成了結果的不如預期。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="p">(</span><span class="nx">t</span><span class="p">,</span><span class="nx">s</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">t</span><span class="si">}${</span><span class="nx">a</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span> <span class="o">=</span> <span class="nx">a</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="o">&gt;</span><span class="mi">5</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span><span class="nx">s</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">count</span><span class="p">(</span><span class="s1">&#39;haha&#39;</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52281246202_7cf2b63ba9_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這時我們可以透過 <span class="focus">async</span>、<span class="focus">await</span> 和 <span class="focus">promise</span> 進行修正，在顯示 1 之後，會「<strong>等待</strong>」count function 結束後再顯示 2。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="o">~</span><span class="kr">async</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="p">(</span><span class="nx">t</span><span class="p">,</span><span class="nx">s</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">t</span><span class="si">}${</span><span class="nx">a</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">a</span> <span class="o">=</span> <span class="nx">a</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="o">&gt;</span><span class="mi">5</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">();</span> <span class="c1">// 表示完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span><span class="nx">s</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">count</span><span class="p">(</span><span class="s1">&#39;haha&#39;</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}();</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52282241813_ded6525063_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>除了<span class="focus">setTimeout</span>和<span class="focus">setInterval</span>，這也可以用於像是「<strong>輸入文字</strong>」的情境，過去我們要做到「<strong>連續輸入</strong>」文字，可能要層層疊疊寫個好幾個 callback，現在如果使用 async 和 await，就能夠很簡單的實現連續輸入的情境，程式碼看起來也更乾淨簡潔。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// HTML 為一個輸入框、一個按鈕和一個 h1 標籤 </span></span></span><span class="line"><span class="cl"><span class="c1">// &lt;input id=&#34;a&#34;&gt;&lt;/input&gt;&lt;button id=&#34;b&#34;&gt;send&lt;/button&gt; </span></span></span><span class="line"><span class="cl"><span class="c1">// &lt;h1 id=&#34;h&#34;&gt;&lt;/h1&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="o">~</span><span class="kr">async</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="p">=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">btnClick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">h</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="s1">&#39;beforeend&#39;</span><span class="p">,</span> <span class="nx">a</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s1">&#39;&lt;br/&gt;&#39;</span><span class="p">);</span> <span class="c1">// 輸入後在 h1 裡添加內容 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">a</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span> <span class="c1">// 清空輸入框 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">a</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span> <span class="c1">// 將焦點移至輸入框 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">b</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="nx">btnClick</span><span class="p">);</span> <span class="c1">// removeEventListener 避免重複綁定事件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">resolve</span><span class="p">();</span> <span class="c1">// 完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="nx">btnClick</span><span class="p">);</span> <span class="c1">// 綁定按鈕事件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="nx">h</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="s1">&#39;beforeend&#39;</span><span class="p">,</span> <span class="s1">&#39;開始&lt;br/&gt;&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">input</span><span class="p">();</span> <span class="c1">// 等待輸入，輸入後才會進行下一步 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">input</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">input</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="nx">h</span><span class="p">.</span><span class="nx">insertAdjacentHTML</span><span class="p">(</span><span class="s1">&#39;beforeend&#39;</span><span class="p">,</span> <span class="s1">&#39;結束&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}();</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52282714720_c1853f1646_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="搭配-fetch">搭配 Fetch</h2> <p>在我之前的文章 <a class="link" href="https://www.oxxostudio.tw/articles/201908/js-fetch.html#_self" target="_blank" rel="noopener" >JavaScript Fetch API 使用教學</a> 已經有提到<span class="focus">fetch</span>的用法，因為<span class="focus">fetch</span>最後回傳的是 promise，理所當然的透過 async 和 await 操作是最恰當不過的。</p> <p>舉例來說，先前往 <a class="link" href="https://opendata.cwb.gov.tw/index" target="_blank" rel="noopener" >中央氣象局開放資料平台</a> 可以取得許多氣象資料，找到 <a class="link" href="https://opendata.cwb.gov.tw/dataset/observation/O-A0003-001" target="_blank" rel="noopener" >局屬氣象站-現在天氣觀測報告</a> ，複製 JSON 格式的連結 ( 需要註冊登入才能看得到連結 )，透過<span class="focus">fetch</span>的<span class="focus">json()</span>方法處理檔案，目標顯示出「高雄市的即時氣溫」。</p> <p>透過 async 和 await 的美化程式碼，得到的結果完全不需要 callback 的輔助，就能按照我們所期望的順序進行。(先顯示「開始抓氣象」，接著顯示「高雄市的氣溫」，最後顯示「總算結束了」)</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="o">~</span><span class="kr">async</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;開始抓氣象&#39;</span><span class="p">);</span> <span class="c1">// 先顯示「開始抓氣象」 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;氣象局 json 網址&#39;</span><span class="p">)</span> <span class="c1">// 帶有 await 的 fetch </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">res</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">city</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">cwbopendata</span><span class="p">.</span><span class="nx">location</span><span class="p">[</span><span class="mi">14</span><span class="p">].</span><span class="nx">parameter</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">parameterValue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">temp</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">cwbopendata</span><span class="p">.</span><span class="nx">location</span><span class="p">[</span><span class="mi">14</span><span class="p">].</span><span class="nx">weatherElement</span><span class="p">[</span><span class="mi">3</span><span class="p">].</span><span class="nx">elementValue</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">city</span><span class="si">}</span><span class="sb">的氣溫為 </span><span class="si">${</span><span class="nx">temp</span><span class="si">}</span><span class="sb"> 度 C`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;總算結束了&#39;</span><span class="p">);</span> <span class="c1">// 抓完氣象之後再顯示「總算結束了」 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}();</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52281246172_5217bf3d10_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="搭配-迴圈">搭配 迴圈</h2> <p>如果要透過 JavaScript 實現「文字慢慢變大」的效果，除了透過 CSS 的 transition 設定之外，通常就是直接使用<span class="focus">setInterval</span>來完成，就像下面的程式碼這樣：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">size</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">h</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">lineHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">h</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="nx">size</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">size</span> <span class="o">=</span> <span class="nx">size</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">size</span> <span class="o">&gt;=</span> <span class="mi">130</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">},</span><span class="mi">10</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>如果搭配 async 和 await，我們就能將同樣的做法，改由「迴圈」實現，因為使用了 await，所以迴圈每次執行時，都會進行「等待」，也就能做到字體慢慢變大的效果。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// HTML 為一個 h1 標籤 &lt;h1 id=&#34;h&#34;&gt;hello&lt;/h1&gt; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="o">~</span><span class="kr">async</span> <span class="kd">function</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">delay</span> <span class="o">=</span> <span class="nx">t</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="c1">// 先撰寫一個等待的 function </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">t</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="nx">h</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">linHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">for</span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span><span class="o">=</span><span class="mi">30</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="mi">130</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">h</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kr">await</span> <span class="nx">delay</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span> <span class="c1">// 迴圈每次執行時，都會在這裡等待 10ms </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}();</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52282241753_68a9196e43_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>同樣的，上面提到的 fetch 或是輸入文字，只要做成 await 的方式，都可以放在迴圈裡面使用，例如透過迴圈不斷的 fetch 資料、透過迴圈不斷的輸入文字&hellip;等，這些就不是 callback 方法能容易辦到的囉</p> <hr> <h2 id="小結">小結</h2> <p>坦白說只要你一但熟悉了 async 和 await，就真的回不去了，雖然說 callback 仍然是程式開發裡必備的功能，但對於同步和非同步之間的轉換，以後就交給 async 和 await 來處理吧！</p> <hr>https://blog.wayne-project.com/2022-08-13/js-regex/Sat, 13 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-13/js-regex/<img src="https://live.staticflickr.com/65535/52282544509_9802b00af7_o.png" alt="Featured image of post Javascript 的正則表達式(Regular Expression, regex)" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://pjchender.dev/javascript/js-regex/" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="建立正規式">建立正規式</h2> <p>正則表達式的規則稱作 <strong>pattern</strong>。在 JavaScript 中可以透過 Regular expression literals 的方式或建構式的方式來建立 regular expressions pattern：</p> <h3 id="方法一regular-expression-literals">方法一：Regular expression literals</h3> <ul> <li>script 載入時即編譯，當 pattern 不會改變時，使用此方式定義 pattern 效能較好。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">re</span> <span class="o">=</span> <span class="sr">/ab+c/</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="方法二function-constructor">方法二：Function Constructor</h3> <ul> <li>程式執行過程才會被編譯，效能較差，適合用在 regular expression pattern 可能會改變時使用。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">re</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">&#39;ab+c&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">myRe</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">&#39;d(b+)d&#39;</span><span class="p">,</span> <span class="s1">&#39;g&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p><code>Regular expression literals</code> 效能較好，適合 pattern 不會改變的情況；<br> <code>Function Constructor</code> 效能較差，適合用在 pattern 可能動態改變的情況。</p></blockquote> <hr> <h2 id="使用正規式">使用正規式</h2> <p>在 JavaScript 中可以使用正規式的函式包含：</p> <ul> <li><code>RegExp.prototype.test()</code>：搜尋字串中是否有符合的部分，回傳 true/false。</li> <li><code>RegExp.prototype.exec()</code>：以陣列回傳字串中匹配到的部分，否則回傳 null。</li> <li><code>String.prototype.match()</code>：以陣列回傳字串中匹配到的部分，否則回傳 null。</li> <li><code>String.prototype.replace()</code>：尋找字串中匹配的部分，並取代之。</li> <li><code>String.prototype.search()</code>：尋找字串中是否有符合的部分，有的話回傳 index，否則回傳 -1。</li> <li><code>String.prototype.split()</code>：在字串根據匹配到的項目拆成陣列。</li> </ul> <blockquote> <p>簡單來說，當你想要看字串是否包含某 <strong>pattern</strong> 時，使用 <code>test</code> 或 <code>search</code>；<br> 想要更多的資訊（花較多耗效能），則使用 exec 或 match。</p></blockquote> <hr> <h2 id="特殊字元-character">特殊字元 (character)</h2> <h3 id="標籤flag">標籤（flag）</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">regex</span> <span class="o">=</span> <span class="sr">/hello/</span><span class="p">;</span> <span class="c1">// 區分大小寫，匹配 &#34;hello&#34;, &#34;hello123&#34;, &#34;123hello123&#34;, &#34;123hello&#34;，但不匹配 &#34;hell0&#34;, &#34;Hello&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regex</span> <span class="o">=</span> <span class="sr">/hello/i</span><span class="p">;</span> <span class="c1">// 不區分大小寫，匹配 &#34;hello&#34;, &#34;HelLo&#34;, &#34;123HelLO&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regex</span> <span class="o">=</span> <span class="sr">/hello/g</span><span class="p">;</span> <span class="c1">// 全域搜尋 </span></span></span></code></pre></td></tr></table> </div> </div><p>ES 2019 新增 <code>/s</code> 的標籤，過去 <code>.</code> 可以用來匹配除了換行符號以外（<code>\n</code>, <code>\r</code>）的所有字元：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 過去 . 可以匹配到除了「換行符號」以外的所有字元 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sr">/./</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;\n&#39;</span><span class="p">));</span> <span class="c1">// → false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sr">/./</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;\r&#39;</span><span class="p">));</span> <span class="c1">// → false </span></span></span></code></pre></td></tr></table> </div> </div><p>過去雖然可以使用 <code>[\w\W]</code> 來匹配到換行符號，但這不是最好的做法：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sr">/[\w\W]/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;\n&#39;</span><span class="p">));</span> <span class="c1">// → true </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sr">/[\w\W]/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;\r&#39;</span><span class="p">));</span> <span class="c1">// → true </span></span></span></code></pre></td></tr></table> </div> </div><p>在 ES 2019 中，只要最後有標記 <code>/s</code> 的標籤，如此 <code>.</code> 將也能夠匹配到換行符號：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="err">/./s.test(&#39;\n&#39;)); // → true</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="err">/./s.test(&#39;\r&#39;)); // → true</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="普通字元-">普通字元 <code>//</code></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/a/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/is/</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="反斜線-">反斜線 <code>\</code></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 在「非」特殊字元前面使用反斜線時，表示要把反斜線後的字當作是特殊字元 */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/\b/</span><span class="p">;</span> <span class="c1">// b 原本不是特殊字元，這個 b 要當成特殊字元 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="cm">/* 在特殊字元前面使用反斜線時，表示要把反斜線後的字當作是「非」特殊字元 */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/if\(true/</span><span class="p">;</span> <span class="c1">// ( 原本是特殊字元，但這裡要當成非特殊字元 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/1\+2=3/</span><span class="p">;</span> <span class="c1">// + 原本是特殊字元，但這裡要當成非特殊字元 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="任意一個字元-">任意一個字元 <code>.</code></h3> <ul> <li>可以用來匹配除了換行符號（<code>\n</code>）以外的所有字元：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/a.man/</span><span class="p">;</span> <span class="c1">// a*man 都會 match，例如 &#34;acman&#34;, &#34;awman&#34;, 但 &#34;a\nman&#34; 無法匹配。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/.a/</span><span class="p">;</span> <span class="c1">// 任何一個字元後加上 a </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="多個字元-">多個字元 <code>[]</code></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 小寫 a 或大寫 A </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[aA]/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 匹配所有不是 a 或 A 的字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[^aA]/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// a, e, i, o, u 都會 match </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[aeiou]/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 英文字母 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[a-z]/</span><span class="p">;</span> <span class="c1">// 所有小寫的字母，從小寫 a 到小寫 z </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[A-Z]/</span><span class="p">;</span> <span class="c1">// 所有大寫的字母，從大寫 A 到大寫 Z </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[a-zA-Z]/</span><span class="p">;</span> <span class="c1">// 所有英文字母 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// 數字 5 ~ 8 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[5-8]/</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="括號-">括號 <code>()</code></h3> <ul> <li>套用到所有</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/^a|^the|^an/</span><span class="p">;</span> <span class="c1">// 套用到裡面所有的 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/^(a|the|an)/</span><span class="p">;</span> <span class="c1">// 等同於 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="不是除了-">不是（除了） <code>^</code></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 不是 a 都會 match */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[^a]/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 不是數字都會 match */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/[^0-9]/</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="多個字元縮寫">多個字元縮寫</h3> <h4 id="keywordsdwsbdws">keywords：<strong>\d</strong>、<strong>\w</strong>、<strong>\s</strong>、<strong>\b</strong>、<strong>\D</strong>、<strong>\W</strong>、<strong>\S</strong></h4> <ul> <li><strong>\d</strong> : digit，<code>[0-9]</code></li> <li><strong>\w</strong> : word，包含英文大小寫、數字、底線，<code>[A-Za-z0-9_]</code></li> <li><strong>\s</strong> : space，包含 space, tab, form feed, line feed，<code>[\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code></li> <li><strong>\D</strong> : 不是 digit，等同於 <code>[^\d]</code></li> <li><strong>\W</strong> : 不是 word，等同於 <code>[^\w]</code></li> <li><strong>\S</strong> : 不是 space，等同於 <code>[^\s]</code></li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 所有 word + e */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/\we/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 連續兩個任意的數值 */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/\d\d/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 句子中結尾為 s 的單字 */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/s\b/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/\b[a-z]/g</span><span class="p">;</span> <span class="c1">// 句子中各個單字的第一個字母 </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="其他特殊字元">其他特殊字元：</h4> <ul> <li><strong>\t</strong> : tab</li> <li><strong>\b</strong> : word boundary，用來比對單字和單字間的空白，<code>/s\b/</code> 則會比對句子中最一個字母是 s 的單字</li> </ul> <h4 id="word-boundary-bb">Word boundary <strong>\b</strong>、<strong>\B</strong></h4> <p>透過 <code>\b</code> 可以配對 <strong>word boundary</strong>，<strong>word boundary</strong> 指的是一個字元的前後沒有其他任何字元。</p> <blockquote> <p>要注意 <code>\b</code> 和 <code>[\b]</code> 是不一樣的，<code>[\b]</code> 是用來配對 backspace。</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// is 這個單字才會被選到，Th`is` 的 is 不會 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">matchedResult</span> <span class="o">=</span> <span class="s1">&#39;This is an apple.&#39;</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\bis\b/</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// [ &#39;is&#39;, index: 5, input: &#39;This is an apple.&#39; ] </span></span></span></code></pre></td></tr></table> </div> </div><p>相反地，<code>\B</code> 則是 <strong>non-word boundary</strong>：</p> <ul> <li>Before the first character of the string, if the first character is not a word character.</li> <li>After the last character of the string, if the last character is not a word character.</li> <li>Between two word characters</li> <li>Between two non-word characters</li> <li>The empty string</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 使用 \B 會配對到 This 中的 is </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">matchedResult</span> <span class="o">=</span> <span class="s1">&#39;This is an apple.&#39;</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\Bis/</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// [ &#39;is&#39;, index: 2, input: &#39;This is an apple.&#39; ] </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="出現次數------">出現次數 <code>* + ? {} {, }</code></h3> <h4 id="keywords--次數最少次數-最多次數">keywords： <strong>*</strong> 、<strong>+</strong>、<strong>?</strong>、<strong>{次數}</strong>、<strong>{最少次數, 最多次數}</strong></h4> <ul> <li><strong>*</strong> : 任意次數，等同於<code>{0,}</code></li> <li><strong>+</strong> : 至少一次（後面要跟著），等同於 <code>{1,}</code></li> <li><strong>?</strong> : 零或一次（有或沒有），等同於 <code>{0,1}</code></li> <li><strong>{次數}</strong></li> <li><strong>{最少次數, 最多次數}</strong></li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/abc/</span><span class="p">;</span> <span class="c1">// 找到符合 &#34;abc&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/ab*c/</span><span class="p">;</span> <span class="c1">// *表示前一個單字可以是 0 個或多個，因此 ac, abc, abbbbc 都符合規則 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/n?a/</span><span class="p">;</span> <span class="c1">// n 可有可無 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/a{2}/</span><span class="p">;</span> <span class="c1">// a 要 2 次，所以會是 a </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/a{2,4}/</span><span class="p">;</span> <span class="c1">// a 介於 2 次到 4 次之間 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/a{2,}/</span><span class="p">;</span> <span class="c1">// 2 次以上的 a 都可以，大括號後面不要有空格 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/(hello){4}/</span><span class="p">;</span> <span class="c1">// 4 次的 hello，hellohellohellohello </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/\d{3}/</span><span class="p">;</span> <span class="c1">// 3 次的數字 </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="開頭與結尾">開頭與結尾</h3> <h4 id="keywords">keywords：<strong>^</strong>、<strong>$</strong></h4> <ul> <li><strong>^</strong> 開頭</li> <li><strong>$</strong> 結尾</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="cm">/* 以 A 開頭的字才會匹配到 */</span> </span></span><span class="line"><span class="cl"><span class="sr">/^A/gm</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;Abc&#39;</span><span class="p">);</span> <span class="c1">// true </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="sr">/^A/gm</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="s1">&#39;bac&#39;</span><span class="p">);</span> <span class="c1">// false </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="cm">/* 開頭有 He */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/^He/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 結尾有 llo */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/llo$/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cm">/* 開頭 He 結尾 llo 中間任意字元可以有任意次數 */</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/^He.*llo$/</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="或-">或 <code>|</code></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// and 或 android，match 到 `and`roid 就不 match `android` </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/and|android/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// match 到 android 還是會 match and </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/android|and/</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="lookaround-assertions">LookAround Assertions</h3> <h4 id="keywords-xyxy">keywords: <strong>x(?=y)</strong>、<strong>x(?!y)</strong></h4> <ul> <li>Lookahead assertions: <code>x(?=y)</code>、<code>x(?!y)</code></li> <li>Lookbehind assertions: <code>(?&lt;=y)x</code>、<code>(?&lt;!y)x</code></li> </ul> <h4 id="look-ahead">Look Ahead</h4> <ul> <li><strong>?=</strong>：後面需要跟著</li> <li><strong>?!</strong>：後面不能跟著</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// foo(?=bar)，foo 後面要跟著 bar 才會配對到 foo </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">regexp</span> <span class="o">=</span> <span class="sr">/foo(?=bar)/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foobar&#39;</span><span class="p">);</span> <span class="c1">// [ &#39;foo&#39;, index: 0, input: &#39;foobar&#39;, groups: undefined ] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// foo(?!bar)，foo 後面不能跟著 bar，如此才會配對到 foo </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">regexp</span> <span class="o">=</span> <span class="sr">/foo(?!bar)/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span> <span class="c1">// [ &#39;foo&#39;, index: 0, input: &#39;foo&#39;, groups: undefined ] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foo123&#39;</span><span class="p">);</span> <span class="c1">// [ &#39;foo&#39;, index: 0, input: &#39;foo123&#39;, groups: undefined ] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foobar&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="look-behind">Look Behind</h4> <ul> <li><strong>?&lt;=</strong>：前面需要跟著才會匹配到</li> <li><strong>?&lt;!</strong>：前面不能跟著才會匹配到</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// (?&lt;=foo)bar，當 bar 前面有 foo 時才會配對到 bar </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">regexp</span> <span class="o">=</span> <span class="sr">/(?&lt;=foo)bar/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foobar&#39;</span><span class="p">);</span> <span class="c1">// [ &#39;bar&#39;, index: 3, input: &#39;foobar&#39;, groups: undefined ] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// (?&lt;!foo)bar，當 bar 前面沒有 foo 時才會配對到 bar </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">regexp</span> <span class="o">=</span> <span class="sr">/(?&lt;!foo)bar/</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">);</span> <span class="c1">// [ &#39;bar&#39;, index: 0, input: &#39;bar&#39;, groups: undefined ] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;123bar&#39;</span><span class="p">);</span> <span class="c1">// [ &#39;bar&#39;, index: 3, input: &#39;123bar&#39;, groups: undefined ] </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">regexp</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="s1">&#39;foobar&#39;</span><span class="p">);</span> <span class="c1">// null </span></span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>❗❗❗ <strong>Lookbehind assertions</strong> 屬於 ES2018 的語法，須注意相容性。 ❗❗❗</p></blockquote> <h3 id="貪婪模式greedy-mode">貪婪模式（Greedy Mode）</h3> <blockquote> <p>預設會啟用貪婪模式，如果想要關閉貪婪模式，也就是讓到一匹配到就停止，可以使用在 <code>*</code> 、 <code>+</code> 等後面加上 <code>?</code>，例如 <code>.*?</code>、<code>.+?</code>。</p></blockquote> <hr> <h2 id="pattern-筆記"><strong>pattern</strong> 筆記</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 允許數字、英文字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 長度4~12 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">account</span><span class="o">:</span> <span class="sr">/^[0-9A-Za-z]{4,12}$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 需包含數字、英文字、英文特殊符號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 但不得包含符號 \ </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 長度1~24 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">password</span><span class="o">:</span> <span class="sr">/^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z0-9!@#$%^&amp;*()_+{}:&#34;|&lt;&gt;?\-=\[\]&#39;\;,./~`]{1,24}$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 允許數字、英文字、中文字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 長度2~8 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">nickName</span><span class="o">:</span> <span class="sr">/^[0-9A-Za-z\u4E00-\u9FFF]{2,8}$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 允許數字、英文字、中文字、英文特殊符號、空白，但開頭不得為特殊符號或空白 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">realName</span><span class="o">:</span> <span class="sr">/^(?!(-))(?!(\s))(?!(,))[A-Za-z\-\,\s\u4E00-\u9FFF]{0,20}[^(?=(!@#$%^&amp;*()_+{}:&#34;|&lt;&gt;?\-=\[\]&#39;\;,./~\s\d`)))]$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 信箱 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">createEmail</span><span class="o">:</span> <span class="sr">/^([\w])([\-\._]?[\w]){0,64}\@([\w])([\-\._]?[\w]){0,64}\.([a-zA-Z]){2,6}$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 前三碼英文字、後三碼數字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">promotionCode</span><span class="o">:</span> <span class="sr">/^[A-Za-z]{3}[0-9]{3}$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 允許數字、英文字、中文字、英文特殊符號、中文特殊符號、空白 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 長度0~100 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">remark</span><span class="o">:</span> <span class="sr">/^[0-9A-Za-z-_\u4E00-\u9FA5+/.*!@#$%&amp;?()=|&#39;:;&lt;&gt;,~！@#￥……&amp;*（）——|{}【】‘；：”“&#39;。，、？%\s]{0,100}$/</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr>https://blog.wayne-project.com/2022-08-11/vue3-quick-start/Thu, 11 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-11/vue3-quick-start/<img src="https://live.staticflickr.com/65535/52277578302_d4a3e0c4aa_o.png" alt="Featured image of post Vue3.0 快速入門，看完基本可以上手搞開發" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <blockquote> <p>本文適合 <code>Vue3</code> 初學者，或者 <code>Vue2</code> 遷移者，當然還是建議 <code>Vue3</code> 官網完全過一遍。</p></blockquote> <hr> <h2 id="先推薦兩個-vscode-外掛">先推薦兩個 vscode 外掛</h2> <h2 id="volar">Volar</h2> <p>首先推薦 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> ，使用 <code>vscode</code> 開發 <code>Vue</code> 專案的小夥伴肯定都認識 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 這個神級外掛，有了它可以讓我們得開發如魚得水。 那麼 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 可以理解為 <code>Vue3</code> 版本的 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> ，程式碼高亮，語法提示，基本上 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 有的它都有。</p> <h3 id="功能一多個根節點編譯器不會報錯">功能一：多個根節點編譯器不會報錯</h3> <p><code>Vue3</code> 是允許我們有多個根節點的，但是我們如果使用 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 就會報錯，不會影響執行，但是看起來就很煩。所以當我們轉向 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a>，那麼就不會出現這個問題了。</p> <p><img src="https://live.staticflickr.com/65535/52277578262_a65ab53574_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="功能二編輯器分隔">功能二：編輯器分隔</h3> <p>即便 <code>Vue</code> 的元件化開發，可以將單檔案的程式碼長度大幅縮短，但還是動輒幾百行甚是上千行。那麼我們切換 <code>template</code>、<code>script</code>、<code>style</code> 的時候就要頻繁上下翻，雖然有的外掛可以直接定位到 <code>css</code>，但是你回不去啊！所以這個功能簡直是太人性化了。</p> <p>安裝完 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 以後，開啟一個 <code>.vue</code> 檔案，看 <code>vscode</code> 的右上角，有這麼一個圖示，點一下。</p> <p><img src="https://live.staticflickr.com/65535/52278825464_ba574177cd_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52278825449_3943326afa_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>它就會自動給你分隔成三個頁面，分別對應 <code>template</code>、<code>script</code>、<code>style</code>，這樣就太舒服了有沒有。</p> <p><img src="https://live.staticflickr.com/65535/52278556091_2d9d2e2b05_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>還有很多新功能，可以參考下面這篇文章：<br> <a class="link" href="https://zhuanlan.zhihu.com/p/375096539" target="_blank" rel="noopener" >Volar - vue終極開發神器！</a></p> <hr> <h3 id="功能三ref-sugar-語法快捷改動支持">功能三：<code>ref sugar</code> 語法快捷改動支持</h3> <p><code>ref sugar</code> 是一個還在 <code>rfc</code> 階段的功能，但是已經持續很久了，現在的 <code>vue3</code> 版本已經可以嚐鮮使用了。具體的用法以及語法我就不展開贅述了，我主要說一下 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 和 <code>ref sugar</code> 的結合。</p> <p><img src="https://live.staticflickr.com/65535/52278556081_0f4b57ceba_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>報錯先不管，是 <code>eslint-plugin-vue</code> 的原因。</p></blockquote> <p>可以看到，在使用了 <code>ref sugar</code> 之後，<code>script</code> 上面出現了一個 <code>ref sugar</code> 的小圖標，並且打了個對勾，那麼我們點一下那個對勾，看看會發生什麼。</p> <p><img src="https://live.staticflickr.com/65535/52278556076_32395d3890_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以看到，我們點擊這個小對勾之後，它由原本的 <code>ref sugar</code> 語法變為了普通的 <code>script setup</code> 模式，驚不驚喜，意不意外。</p> <hr> <h3 id="功能四style-裡面的-class-引用">功能四：<code>style</code> 裡面的 <code>class</code> 引用</h3> <p><img src="https://live.staticflickr.com/65535/52277578187_ab1c1ffd3c_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以看到，在 <code>.foo</code> 這個類名上面，出現了一個 <code>1 reference</code> 的小圖標，代表著當前 <code>class</code> 有一次引用，我們點擊一下這個 <code>1 reference</code>。</p> <p><img src="https://live.staticflickr.com/65535/52278556066_f44a23ef65_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>出現了一個彈窗，裡面是當前 <code>class</code> 的具體使用位置。</p> <hr> <h3 id="功能五class-追朔">功能五：<code>class</code> 追朔</h3> <p>我們創建一個 <code>template</code> 根元素，在裡面寫入：</p> <h5 id="samplevue">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;foo&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>style</code> 中寫入：</p> <h5 id="samplevue-1">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span> <span class="na">scoped</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">foo</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>除了 <code>style</code> 中的 <code>.foo</code> 上面會出現 <code>1 reference</code> 的小圖標之外，在 <code>class=&quot;foo&quot;</code> 的 <code>foo</code> 下面，會出現一道橫線。</p> <p><img src="https://live.staticflickr.com/65535/52279040015_d06725b53d_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>對於經常使用 <code>vscode</code> 的開發人員來說，這代表什麼意義就不必多說了，我們根據提示，按住 <code>ctrl</code>(<code>command</code>) 然後點擊，會發現光標自己移動到了 <code>style</code> 中的 <code>.foo</code> 之前，哇! awesome!</p> <hr> <h3 id="功能六css-module-類型提示">功能六：<code>css module</code> 類型提示</h3> <p><code>css module</code> 一般是 <code>react</code> 技術棧用的會比較多一些，就我個人來說，是從沒在 <code>vue</code> 裡面使用它的，因為 <code>vue</code> 提供了 <code>scoped</code> 作用域，不用擔心樣式衝突，直接使用預處理器會更加簡單方便。</p> <p>我們創建如下代碼：</p> <h5 id="samplevue-2">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;$style.foo&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">style</span> <span class="na">module</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">foo</span> <span class="p">{</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>然後將鼠標移動到 <code>$style</code> 上</p> <p><img src="https://live.staticflickr.com/65535/52278556061_8a9d95187a_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>有點意思，看來 <code>vscode</code> 是讓 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 玩明白了。</p> <hr> <h3 id="功能七lang-語法提示">功能七：<code>lang</code> 語法提示</h3> <p><code>vue</code> 可以使用 <code>lang</code> 屬性來選擇使用的語言，比如 <code>template</code> 中的 <code>html</code>/<code>pug</code>、<code>script</code> 中的 <code>ts</code>、<code>style</code> 中的 <code>scss</code> 等。</p> <p>但是在以前，我們都是手動輸入的，編輯器，或者說 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank" rel="noopener" >Vetur</a> 並沒有給我們提供任何提示，有可能你找了很久的莫名其妙的問題，就是因為 <code>lang</code> 寫錯了。</p> <p>但是這一切，在有了 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 之後，都不同了。</p> <p><img src="https://live.staticflickr.com/65535/52278577133_3988734a44_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="功能八template-語法轉換">功能八：<code>template</code> 語法轉換</h3> <p><code>vue</code> 默認提供了兩種模板供我們使用，但是一般都會使用 <code>html</code>，另外一種叫做 <code>pug</code>。</p> <p>相對於 <code>html</code>，<code>pug</code> 更偏向於 <code>yml</code> 那種，簡潔程度特別高。</p> <p>在 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 中，為我們提供了 <code>html</code> 和 <code>pug</code> 互相轉換的功能。</p> <h5 id="samplevue-3">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在我們書寫 <code>template</code> 之後，<code>template</code> 頂部會出現一個小小的 <code>pug</code> 圖標，我們可以看到此時它是沒有被選中的。</p> <p><img src="https://live.staticflickr.com/65535/52277578137_059aa7e0d5_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>這個時候我們點擊一下這個圖標，讓它選中，神奇的事情發生了。</p> <p><img src="https://live.staticflickr.com/65535/52278577068_bc917eabf4_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們寫好的 <code>html</code> 模板，被自動轉化成了 <code>pug</code>，再點擊一下，又回到了我們熟悉的 <code>html</code>。</p> <p><img src="https://live.staticflickr.com/65535/52278556001_3879f3bbba_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <blockquote> <p>從功能三開始，基本都是算內測的新功能，我是機緣巧合之下，將 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar" target="_blank" rel="noopener" >Volar</a> 下到本地進行查看的時候發現的這些。想嚐鮮的可以自己下載源碼，然後在packages/vscode-vue-languageservice/testCases目錄下體驗，希望這些功能可以盡快發布！</p></blockquote> <h2 id="vue-3-snippets">Vue 3 Snippets</h2> <p>推薦的第二個外掛叫做 <a class="link" href="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" target="_blank" rel="noopener" >Vue 3 Snippets</a> ，同樣的，他也有自己的 <code>Vue2</code> 版本。它是幹什麼的呢，可以看一下下面這張圖，我只輸入了 <code>&quot;v3&quot;</code> ，它有很多提示，我們就先選擇 <code>v3computed</code> ，選中 <code>Enter</code> 即可。</p> <p><img src="https://live.staticflickr.com/65535/52278577048_9b6cd0221a_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>然後它就給我們自動寫了如下程式碼：</p> <p><img src="https://live.staticflickr.com/65535/52279039925_0316ccfe51_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>是不是超級省事，摸魚的時間又增加了！還有更多有趣的使用方式，小夥伴們自行探索吧。</p> <hr> <h2 id="建立-vue3-專案">建立 <code>Vue3</code> 專案</h2> <p>那麼正式開始學習我們的 <code>Vue3</code> ，先從建立專案開始。</p> <h3 id="使用-vue-cli-建立">使用 vue-cli 建立</h3> <p>輸入下面的命令然後選擇配置項進行安裝即可，這裡注意 <code>vue-cli</code> 的版本一定要在 ==4.5.0== 以上。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="c1">### 安裝或者升級</span> </span></span><span class="line"><span class="cl">npm install -g @vue/cli </span></span><span class="line"><span class="cl"><span class="c1">### 檢視版本 保證 vue cli 版本在 4.5.0 以上</span> </span></span><span class="line"><span class="cl">vue --version </span></span><span class="line"><span class="cl"><span class="c1">### 建立專案</span> </span></span><span class="line"><span class="cl">vue create my-project </span></span><span class="line"><span class="cl"><span class="c1">### 然後根據提示一步一步傻瓜式操作就行了</span> </span></span><span class="line"><span class="cl"><span class="c1">### ...</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="使用-vite-建立">使用 <code>Vite</code> 建立</h3> <p>都說 <code>Vue3.0</code> 和 <code>Vite2</code> 更配，各種優化各種快，但都不屬於本文的內容，本文的目的我們只需要知道它特別好用、怎麼用就行了。我這裡是多選擇了 <code>TS</code>，每行都有註釋，一目瞭然。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="c1">### 初始化 viete 專案</span> </span></span><span class="line"><span class="cl">npm init vite-app &lt;project-name&gt; </span></span><span class="line"><span class="cl"><span class="c1">### 進入專案資料夾</span> </span></span><span class="line"><span class="cl"><span class="nb">cd</span> &lt;project-name&gt; </span></span><span class="line"><span class="cl"><span class="c1">### 安裝依賴</span> </span></span><span class="line"><span class="cl">npm install </span></span><span class="line"><span class="cl"><span class="c1">### 啟動專案</span> </span></span><span class="line"><span class="cl">npm run dev </span></span></code></pre></td></tr></table> </div> </div><p>建立完以後我們先來看看入口檔案 <code>main.ts</code></p> <h5 id="maints">main.ts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// 引入 createApp 函式，建立對應的應用，產生應用的例項物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">createApp</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 引入 app 元件 (所有元件的父級元件) </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">App</span> <span class="kr">from</span> <span class="s1">&#39;./App.vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 建立 app 應用返回對應的例項物件，呼叫 mount 方法進行掛載，掛載到 #app 節點上去 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">createApp</span><span class="p">(</span><span class="nx">App</span><span class="p">).</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;#app&#39;</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><p>然後看看根元件 <code>app.vue</code></p> <h5 id="appvue">app.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- Vue2 元件中的 html 模板中必須要有一對根標籤，Vue3 元件的 html 模板中可以沒有根標籤 --&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;Vue logo&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;./assets/logo.png&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- 使用子級元件 --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">HelloWorld</span> <span class="na">msg</span><span class="o">=</span><span class="s">&#34;Welcome to Your Vue.js + TypeScript App&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 這裡可以書寫 TS 程式碼 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="c1">// defineComponent 函式，目的是定義一個元件，內部可以傳入一個配置物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 引入子級元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">HelloWorld</span> <span class="nx">from</span> <span class="s1">&#39;./components/HelloWorld.vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 暴露出去一個定義好的元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 當前元件的名字 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;App&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 註冊元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 註冊一個子級元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">HelloWorld</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="composition-api">Composition API</h2> <p><img src="https://live.staticflickr.com/65535/52278577028_ec0e1597eb_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>接下來到了重頭戲，<code>Vue3</code> 的招牌特性，<code>Composition API</code>。</p> <p>關於 <code>Composition API</code> 這裡有圖解演示，極力推薦。</p> <p><a class="link" href="https://blog.wayne-project.com/@wayne-lin/vue3-option-vs-composition" >圖解 Option API vs Composition API</a></p> <ul> <li><code>Composition API</code> 可以更方便的抽取共通邏輯，但是不要過於在意邏輯程式碼複用，以功能提取程式碼也是一種思路。</li> </ul> <p>順便提一句，<code>Vue3</code> 相容大部分 <code>Vue2</code> 語法，所以在 <code>Vue3</code> 中書寫 <code>Vue2</code> 語法是沒有問題的（廢除的除外），但是既然我們已經升級 <code>Vue3</code> 了，不建議混合使用，除非一些大型特殊專案需要相容兩個版本。</p> <h3 id="生命週期鉤子">生命週期鉤子</h3> <p><img src="https://live.staticflickr.com/65535/52278577033_acc9e36189_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="setup">setup</h3> <ul> <li><code>setup</code> 是組合 <code>Composition API</code> 中的入口函式，也是第一個要使用的函式。</li> <li><code>setup</code> 只在初始化時執行一次，所有的 <code>Composition API</code> 函式都在此使用。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">setup() {</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我執行了&#39;</span><span class="p">)</span> <span class="c1">// 我執行了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">},</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以通過 <code>console.log</code> 看到 <code>setup</code> 是在 <code>beforeCreate</code> 生命週期之前執行的(只執行一次)：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="nx">beforeCreate() {</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;beforeCreate執行了&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup() {</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;setup執行了&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="c1">// setup執行了 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// beforeCreate執行了 </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>由此可以推斷出 <code>setup</code> 執行的時候，元件物件還沒有建立，元件實例物件 <code>this</code> 還不可用，此時 <code>this</code> 是 <code>undefined</code>，不能通過 <code>this</code> 來訪問 <code>data</code>、<code>computed</code>、<code>methods</code>、<code>props</code>。</li> <li>返回物件中的^1.^屬性會與 <code>data</code> 函式返回物件的屬性合併成為元件物件的屬性；^2.^返回物件中的方法會與 <code>methods</code> 中的方法合併成功元件物件的方法。</li> <li>如果有重名，<code>setup</code> 優先。因為在 <code>setup</code> 中 <code>this</code> 不可用，<code>methods</code> 中可以訪問 <code>setup</code> 提供的屬性和方法，但在 <code>setup</code> 方法中不能訪問 <code>data</code> 和 <code>methods</code> 裡的內容，所以還是不建議混合使用。</li> <li><code>setup</code> 函式如果返回物件，物件中的<strong>屬性</strong>或<strong>方法</strong>，<strong>template</strong> 中可以直接使用。</li> </ul> <h5 id="samplevue-4">sample.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{number}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">number</span> <span class="o">=</span> <span class="mi">18</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">number</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注意：<code>setup</code> 不能是一個 <code>async</code> 函式，因為返回值不再是 <code>return</code> 的物件，而是 <code>promise</code>，<code>template</code> 中就不可以使用 <code>return</code> 中返回物件的資料了。</p> <p><code>setup</code> 的參數(^1.^<code>props</code>, ^2.^<code>context</code>)：</p> <ol> <li><code>props</code>：是一個物件，裡面有父級元件向子級元件傳遞的資料，並且是在子級元件中使用 <code>props</code> 接收到的所有的屬性。</li> <li><code>context</code>：上下文物件，可以通過 <code>es6</code> 語法解構 setup(props, {^(a).^<code>attrs</code>, ^(b).^<code>slots</code>, ^(c).^<code>emit</code>})<br> &gt; a). <code>attrs</code>：獲取當前元件標籤上所有沒有通過 <code>props</code> 接收的屬性的物件，相當於 <code>this.$attrs</code>。<br> &gt; b). <code>slots</code>：包含所有傳入的插槽內容的物件，相當於 <code>this.$slots</code>。<br> &gt; c). <code>emit</code>：用來分發自定義事件的函式，相當於 <code>this.$emit</code>。</li> </ol></blockquote> <br/> <ul> <li>演示 <code>attrs</code> 和 <code>props</code>：</li> </ul> <h5 id="parentvue">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child</span> <span class="na">:msg</span><span class="o">=</span><span class="s">&#34;msg&#34;</span> <span class="na">msg2</span><span class="o">=</span><span class="s">&#39;哈哈哈&#39;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// 引入子元件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">Child</span> <span class="nx">from</span> <span class="s1">&#39;./components/Child.vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;App&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Child</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello,vue3&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>子元件<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>msg:{{ msg }}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Child&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">props</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;msg&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">slots</span><span class="p">,</span> <span class="nx">emit</span><span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;props:&#39;</span><span class="p">,</span> <span class="nx">props</span><span class="p">);</span> <span class="c1">// msg: &#34;hello,vue3&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;attrs:&#39;</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">);</span> <span class="c1">// msg2: &#34;哈哈哈&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>演示 <code>emit</code>：</li> </ul> <h5 id="parentvue-1">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">child</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;show&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">show</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;name:&#39;</span><span class="p">,</span> <span class="s1">&#39;hzw&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">show</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-1">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span><span class="p">&gt;</span>事件分發<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Child&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span> <span class="nx">emit</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">emitFn</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;show&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emitFn</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="ref">ref</h3> <ul> <li>作用：定義一個響應式的資料(一般用來定義一個基本型別的響應式資料 <code>Undefined</code>、<code>Null</code>、<code>Boolean</code>、<code>Number</code>、<code>String</code>)</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">xxx</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="nx">initValue</span><span class="p">);</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>注意：<code>script</code> 中操作資料需要使用 <code>xxx.value</code> 的形式，而 <code>template</code> 中<strong>不需要</strong>新增 <code>.value</code></li> </ul> <p>用一個例子來演示，實現一個按鈕，點選可以增加數字：</p> <h5 id="addnumvue">addNum.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>{{count}}<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;updateCount&#39;</span><span class="p">&gt;</span>增加<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>Vue2</code> 中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">conunt</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="nx">methods</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateCount</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">conunt</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>Vue3</code> 中：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// ref 用於定義一個響應式的資料，返回的是一個 Ref 物件，物件中有一個 value 屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 如果需要對資料進行操作，需要使用該 Ref 物件的 value 屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">updateCount</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateCount</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>在 <code>Vue2</code> 中我們通過 <code>this.$refs</code> 來獲取 <code>dom</code> 節點，<code>Vue3</code> 中我們通過 <code>ref</code> 來獲取節點。</p> <p>首先需要在標籤上新增 <code>ref='xxx'</code>，然後再 <code>setup</code> 中定義一個初始值為 <code>null</code> 的 <code>ref</code> 型別，名字要和標籤的 <code>ref</code> 屬性一致。</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">xxx</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p>注意 ：一定要在 <code>setup</code> 的 <code>return</code> 中返回，不然會報錯。</p></blockquote> <p>用一個例子來演示，讓輸入框自動獲取焦點：</p> <h5 id="autofocusvue">autoFocus.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>App<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span><span class="p">&gt;</span>--- </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#34;inputRef&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">onMounted</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="cm">/* </span></span></span><span class="line"><span class="cl"><span class="cm">ref獲取元素: 利用 ref 函式獲取元件中的標籤元素 </span></span></span><span class="line"><span class="cl"><span class="cm">功能需求: 讓輸入框自動獲取焦點 </span></span></span><span class="line"><span class="cl"><span class="cm">*/</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">inputRef</span> <span class="o">=</span> <span class="nx">ref</span><span class="o">&lt;</span><span class="nx">HTMLElement</span><span class="o">|</span><span class="kc">null</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">inputRef</span><span class="p">.</span><span class="nx">value</span> <span class="o">&amp;&amp;</span> <span class="nx">inputRef</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">inputRef</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="reactive">reactive</h3> <ul> <li>作用：定義多個數據的響應式，接收一個普通物件然後返回該普通物件的響應式代理器物件(<code>Proxy</code>)，響應式轉換是&quot;<code>深層的</code>&quot;：會影響物件內部所有巢狀的屬性，所有的資料都是響應式的。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">proxy</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>程式碼演示：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>姓名:{{user.name}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>年齡:{{user.age}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>wife:{{user.wife}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;updateUser&#34;</span><span class="p">&gt;</span>更新<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;hzw&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">wife</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;xioaohong&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">books</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;紅寶書&#39;</span><span class="p">,</span> <span class="s1">&#39;設計模式&#39;</span><span class="p">,</span> <span class="s1">&#39;演算法與資料結構&#39;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">updateUser</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s1">&#39;小紅&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">age</span> <span class="o">+=</span> <span class="mi">2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">wife</span><span class="p">.</span><span class="nx">books</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="s1">&#39;金瓶梅&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">updateUser</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="computed">computed</h3> <ul> <li>與 <code>Vue2</code> 中的 <code>computed</code> 配置功能一致，返回的是一個 <code>ref</code> 型別的物件。</li> <li><code>computed</code> 的函式中如果只傳入一個箭頭函式 表示的是 <code>get</code> 操作：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName1</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li><code>computed</code> 的函式中可以傳入一個物件，可以包含 <code>set</code> 和 <code>get</code> 函式，進行讀取和修改的操作：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName2</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;_&#39;</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">set</span><span class="p">(</span><span class="nx">val</span><span class="o">:</span> <span class="nx">string</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">names</span> <span class="o">=</span> <span class="nx">val</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;_&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="watch">watch</h3> <ul> <li>與 <code>Vue2</code> 中的 <code>watch</code> 配置功能一致。</li> <li>作用：監視指定的一個或多個響應式資料，一旦資料變化，就自動執行監視回撥。</li> <li>語法：watch(<code>要監聽的資料</code>, <code>回調函式</code>, <code>配置</code>)</li> <li>預設初始時不執行回調，但可以通過配置的 <code>immediate</code> 為 <code>true</code>，來指定初始時立即執行第一次。</li> <li>通過配置的 <code>deep</code> 為 <code>true</code>，來指定深度監視。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">watch</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName3</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">watch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">({</span> <span class="nx">firstName</span><span class="p">,</span> <span class="nx">lastName</span> <span class="p">})</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName3</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;_&#39;</span> <span class="o">+</span> <span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">immediate</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">deep</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName3</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><blockquote> <p><code>watch</code> 監聽多個數據，使用陣列。<br> <code>watch</code> 監聽非響應式資料的時候需要使用回調函式的形式。</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">watch</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName3</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;我執行了&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="watcheffect">watchEffect</h3> <ul> <li>作用：監視資料發生變化時執行回調，不用直接指定要監視的資料，回調函式中使用的哪些響應式資料就監視哪些響應式資料，預設初始時就會執行第一次，從而可以收集需要監視的資料。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">watchEffect</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s1">&#39;韓&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s1">&#39;志偉&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">fullName4</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">watchEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName4</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="s1">&#39;_&#39;</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName4</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// watchEffect可以實現計算屬性set方法 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">watchEffect</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">names</span> <span class="o">=</span> <span class="nx">fullName3</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;_&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">user</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><p>生命週期對比：</p> <p><img src="https://live.staticflickr.com/65535/52279039860_760ce781e5_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <ul> <li>注意：<code>3.0</code> 中的生命週期鉤子要比 <code>2.X</code> 中相同生命週期的鉤子要快。</li> <li><code>Composition API</code> 還新增了以下用於除錯的鉤子函式，但是不怎麼常用：<code>onRenderTracked</code>、<code>onRenderTriggered</code>。</li> <li>程式碼演示：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeMount</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onBeforeMount&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onMounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onMounted&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeUpdate</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onBeforeUpdate&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onUpdated</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onUpdated&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onBeforeUnmount</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onBeforeUnmount&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">onUnmounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;--onUnmounted&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="torefs">toRefs</h3> <ul> <li>作用：把一個響應式物件轉換成普通物件，該普通物件的每個屬性都是一個 <code>ref</code>。</li> <li>應用：我們使用 <code>reactive</code> 建立的物件，如果想在模板中使用，就必須得使用 <code>xxx.xxx</code> 的形式，如果大量用到的話還是很麻煩的，但是使用 <code>es6</code> 解構以後，會失去響應式，那麼 <code>toRefs</code> 的作用就體現在這，利用 <code>toRefs</code> 可以將一個響應式 <code>reactive</code> 物件的所有原始屬性轉換為響應式的 <code>ref</code> 屬性。當然小夥伴們可以自行開發更多應用場景。</li> <li>程式碼演示：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> name:{{name}} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#39;ts&#39;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineComponent</span><span class="p">,</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">toRefs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineComponent</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;hzw&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state2</span> <span class="o">=</span> <span class="nx">toRefs</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">setInterval</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">state</span><span class="p">.</span><span class="nx">name</span> <span class="o">+=</span> <span class="s1">&#39;===&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 通過 toRefs 返回的物件，解構出來的屬性也是響應式的 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">...</span><span class="nx">state2</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="provide-與-inject"><code>provide</code> 與 <code>inject</code></h3> <ul> <li>作用：實現跨層級元件(祖孫)間通訊。</li> <li>程式碼演示：</li> </ul> <h6 id="parentvue-2">parent.vue</h6> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>父元件<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>當前顏色: {{color}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;color=&#39;red&#39;&#34;</span><span class="p">&gt;</span>紅<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;color=&#39;yellow&#39;&#34;</span><span class="p">&gt;</span>黃<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;color=&#39;blue&#39;&#34;</span><span class="p">&gt;</span>藍<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Son</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">provide</span><span class="p">,</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Son</span> <span class="nx">from</span> <span class="s1">&#39;./son.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;ProvideInject&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">Son</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;red&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">provide</span><span class="p">(</span><span class="s1">&#39;color&#39;</span><span class="p">,</span> <span class="nx">color</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">color</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="sonvue">son.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>子元件<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">GrandSon</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">GrandSon</span> <span class="nx">from</span> <span class="s1">&#39;./grandson.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">GrandSon</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="grandsonvue">grandson.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">:style</span><span class="o">=</span><span class="s">&#34;{color}&#34;</span><span class="p">&gt;</span>孫子元件: {{color}}<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">inject</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">inject</span><span class="p">(</span><span class="s1">&#39;color&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">color</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="其他特性">其他特性</h2> <h3 id="teleport瞬移">Teleport(瞬移)</h3> <ul> <li>作用：<code>Teleport</code> 提供了一種乾淨的方法，讓元件的 <code>html</code> 在父元件介面外的特定標籤(很可能是 <code>body</code> )下插入顯示，換句話說就是可以把<code>子元件</code>或者<code>dom節點</code>插入到任何你想插入到的地方去。</li> <li>語法：使用 <code>to</code> 屬性，引號內使用選擇器。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">teleport</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">teleport</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>程式碼演示：</li> </ul> <h5 id="parentvue-3">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;father&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>App<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">modal-button</span><span class="p">&gt;&lt;/</span><span class="nt">modal-button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">ModalButton</span> <span class="nx">from</span> <span class="s1">&#39;./components/ModalButton.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">ModalButton</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-2">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;son&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;modalOpen = true&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 點我開啟對話方塊 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">teleport</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;modalOpen&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;looklook&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 看看我出現在了哪裡 </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;modalOpen = false&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> Close </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">teleport</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;modal-button&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">modalOpen</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">false</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">modalOpen</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到在子元件中的 <code>looklook</code> 元素跑到了 <code>body</code> 下面，而之前的位置默認出現了兩行註釋。</p> <p><img src="https://live.staticflickr.com/65535/52277577997_8ba7960112_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h3 id="suspense不確定的">Suspense(不確定的)</h3> <ul> <li>作用：它們允許我們的應用程式在等待非同步元件時渲染一些後備內容，可以讓我們建立一個平滑的使用者體驗。</li> <li>語法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- 非同步元件 --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">AsyncComp</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- 後備內容 --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>LOADING...<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><code>vue3</code> 中引入<strong>非同步元件</strong>的方式：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AsyncComp</span> <span class="o">=</span> <span class="nx">defineAsyncComponent</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kr">import</span><span class="p">(</span><span class="s1">&#39;./AsyncComp.vue&#39;</span><span class="p">))</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>程式碼演示：</li> </ul> <h5 id="parentvue-4">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- v-slot:defaul 可以簡寫成 #defaul --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:default</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">AsyncComp</span><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- v-slot:defaul 可以簡寫成 #fallback --&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">template</span> <span class="na">v-slot:fallback</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>LOADING...<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Suspense</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineAsyncComponent</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AsyncComp</span> <span class="o">=</span> <span class="nx">defineAsyncComponent</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="kr">import</span><span class="p">(</span><span class="s1">&#39;./AsyncComp.vue&#39;</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">components</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">AsyncComp</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-3">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>AsyncComp22<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ts&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;AsyncComp&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span> <span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="o">:</span> <span class="s1">&#39;abc&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">2000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>通過下圖可以看到在非同步元件加載出來之前，顯示的是 <code>fallback</code> 中的內容：</p> <p><img src="https://live.staticflickr.com/65535/52278576943_379d6af224_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="響應式資料的判斷">響應式資料的判斷</h2> <h3 id="作用">作用</h3> <ul> <li>isRef：檢查一個值是否為一個 <code>ref</code> 物件</li> <li>isReactive：檢查一個物件是否是由 <code>reactive</code> 建立的響應式代理</li> <li>isReadonly：檢查一個物件是否是由 <code>readonly</code> 建立的只讀代理</li> <li>isProxy：檢查一個物件是否是由 <code>reactive</code> 或者 <code>readonly</code> 方法建立的代理</li> </ul> <h3 id="程式碼演示">程式碼演示</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state1</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isref:&#39;</span><span class="p">,</span> <span class="nx">isRef</span><span class="p">(</span><span class="nx">state1</span><span class="p">));</span> <span class="c1">// isref: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state2</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isReactive:&#39;</span><span class="p">,</span> <span class="nx">isReactive</span><span class="p">(</span><span class="nx">state2</span><span class="p">));</span> <span class="c1">// isReactive: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state3</span> <span class="o">=</span> <span class="nx">readonly</span><span class="p">({});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isReadonly:&#39;</span><span class="p">,</span> <span class="nx">isReadonly</span><span class="p">(</span><span class="nx">state3</span><span class="p">));</span> <span class="c1">// isReadonly: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">state4</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">({});</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isProxy:&#39;</span><span class="p">,</span> <span class="nx">isProxy</span><span class="p">(</span><span class="nx">state2</span><span class="p">));</span> <span class="c1">// isProxy: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;isProxy:&#39;</span><span class="p">,</span> <span class="nx">isProxy</span><span class="p">(</span><span class="nx">state4</span><span class="p">));</span> <span class="c1">// isProxy: true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"><span class="p">},</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="其他不常用特性">其他不常用特性</h3> <blockquote> <p>還有很多很多不常用的新特性，我在日常開發中是沒有用到的，很多都是用來做優化的，感興趣的小夥伴們自行去官網檢視，或者大佬們可以介紹一下應用場景。</p></blockquote> <ul> <li>shallowReactive</li> <li>shallowRef</li> <li>readonly</li> <li>shallowReadonly</li> <li>markRaw</li> <li>customRef</li> <li>&hellip;</li> </ul> <hr> <h2 id="語法糖">語法糖</h2> <p>雖然 <code>Composition API</code> 用起來已經非常方便了，但是我們還是有很煩的地方，比如：</p> <ul> <li>元件引入了還要註冊。</li> <li>屬性和方法都要在 <code>setup</code> 函式中返回，有的時候僅一個 <code>return</code> 就十幾行甚至幾十行。</li> <li>&hellip;</li> </ul> <p>不想寫啊怎麼辦</p> <p>好辦， <code>Vue3</code> 官方提供了 <code>script setup</code> 語法糖，只需要在 <code>script</code> 標籤中==新增 setup==，元件只需引入不用註冊，屬性和方法也不用返回，<code>setup</code> 函式也不需要，甚至 <code>export default</code> 都不用寫了，不僅是資料、計算屬性和方法，甚至是自定義指令也可以在我們的 <code>template</code> 中自動獲得。</p> <p>但是這麼過癮的語法糖，還是稍微添加了一點點心智負擔，因為沒有了 <code>setup</code> 函式，那麼 <code>props</code>、<code>emit</code>、<code>attrs</code> 怎麼獲取呢，就要介紹一下新的語法了。</p> <p><code>setup script</code> 語法糖提供了三個新的 <code>API</code> 來供我們使用： ==defineProps==、==defineEmit== 和 ==useContext==。</p> <ul> <li><code>defineProps</code>：用來接收父元件傳來的值 <code>props</code>。</li> <li><code>defineEmit</code>：用來宣告觸發的事件表。</li> <li><code>useContext</code>：用來獲取元件上下文 <code>context</code>。</li> </ul> <h3 id="程式碼演示-1">程式碼演示</h3> <h5 id="parentvue-5">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Children</span> <span class="na">msg</span><span class="o">=</span><span class="s">&#34;hello&#34;</span> <span class="err">@</span><span class="na">child-click</span><span class="o">=</span><span class="s">&#34;handleClick&#34;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Children</span> <span class="nx">from</span> <span class="s1">&#39;./components/children.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">ctx</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ctx</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-4">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;sonClick&#34;</span><span class="p">&gt;</span>msg: {{ props.msg }}<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">useContext</span><span class="p">,</span> <span class="nx">defineProps</span><span class="p">,</span> <span class="nx">defineEmit</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">emit</span> <span class="o">=</span> <span class="nx">defineEmit</span><span class="p">([</span><span class="s1">&#39;child-click&#39;</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">useContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">props</span> <span class="o">=</span> <span class="nx">defineProps</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="o">:</span> <span class="nb">String</span><span class="p">,</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sonClick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;child-click&#39;</span><span class="p">,</span> <span class="nx">ctx</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們點選一下子元件：</p> <p><img src="https://live.staticflickr.com/65535/52278825204_a28791d02b_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>可以看到 <code>context</code> 被列印了出來，其中的 <code>attrs</code>、<code>emit</code>、<code>slots</code>、<code>expose</code> 屬性和方法依然可以使用。<code>props</code> 也可以輸出在頁面上，事件也成功派發。</p> <hr> <h2 id="其他知識點">其他知識點</h2> <p>接下來介紹一下我使用 <code>Vue3</code> 過程中遇到的問題或者小技巧，不全面，想起什麼就寫什麼吧。</p> <p><strong><code>script setup</code> 語法糖的坑</strong></p> <p>這個很多大佬已經在 <code>Vue3</code> 的 <code>github</code> 上提交 <code>Issues</code> 了，或許會在不久的將來修復，但現在還是要注意一下。</p> <p>如果在父元件中通過 <code>ref='xxx'</code> 的方法來獲取子元件實例，那麼子元件不可以使用 <code>script setup</code> 語法糖，否則會報錯。</p> <h3 id="程式碼演示-2">程式碼演示</h3> <h5 id="parentvue-6">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child</span> <span class="na">ref</span><span class="o">=</span><span class="s">&#39;son&#39;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child</span> <span class="nx">from</span> <span class="s1">&#39;./components/children.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">son</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39; ~ son:&#39;</span><span class="p">,</span> <span class="nx">son</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>子元件先不使用語法糖：</p> <h5 id="childrenvue-5">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件{{msg}} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="p">&gt;</span> </span></span><span class="line"><span class="cl">import { ref } from &#39;vue&#39; </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">export default { </span></span><span class="line"><span class="cl"> setup() { </span></span><span class="line"><span class="cl"> const msg = ref(&#39;hello&#39;) </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> return { </span></span><span class="line"><span class="cl"> msg, </span></span><span class="line"><span class="cl"> } </span></span><span class="line"><span class="cl"> }, </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52278825189_5a985db5e6_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>現在把子元件換成 <code>script setup</code> 語法糖再來試一試：</p> <h5 id="childrenvue-6">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件{{msg}} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>可以看到現在是<strong>獲取不到</strong>子元件定義的 <code>msg</code> 屬性的。</p> <p><img src="https://live.staticflickr.com/65535/52278825149_f0ed4e8b9f_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="emit-派發事件可以對引數進行驗證">Emit 派發事件可以對引數進行驗證</h2> <h5 id="parentvue-7">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child</span> <span class="err">@</span><span class="na">sonClick</span><span class="o">=</span><span class="s">&#39;sonClick&#39;</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child</span> <span class="nx">from</span> <span class="s1">&#39;./components/Child.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">sonClick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="childrenvue-7">children.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件{{ msg }} </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;handleClick(1)&#34;</span><span class="p">&gt;</span>我是按鈕1<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;handleClick(2)&#34;</span><span class="p">&gt;</span>我是按鈕2<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">emits</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">sonClick</span><span class="o">:</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="p">{</span> <span class="nx">emit</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;sonClick&#39;</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">handleClick</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>我們分別點一下<code>按鈕1</code>和<code>按鈕2</code>，可以看到當我們點了<code>按鈕2</code>的時候，控制檯會發出警告，但是程式會繼續執行，還沒想到什麼適合的應用場景，但是要知道這個知識點，小夥伴們可以在這搞事情。</p> <p><img src="https://live.staticflickr.com/65535/52278825124_e17bb7a569_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="跨元件通訊-mittjs">跨元件通訊 <code>mitt.js</code></h2> <p><code>Vue2</code> 中怎麼實現跨元件通訊呢？很多人第一想法就是 <code>event bus</code>。但是 <code>Vue3</code> 移除了 <code>$on</code>、<code>$once</code>、<code>$off</code> 導致不能使用這個方法。但是 <code>Vue</code> 官方給大家推薦了 ==<a class="link" href="https://www.npmjs.com/package/mitt" target="_blank" rel="noopener" >mitt.js</a>==，它的原理就是 <code>event bus</code>。</p> <p><a class="link" href="https://www.casper.tw/development/2020/12/15/vue-3-mitt/" target="_blank" rel="noopener" >mitt.js 教學</a></p> <h3 id="程式碼演示-3">程式碼演示</h3> <ul> <li>先安裝：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">npm i mitt -s </span></span></code></pre></td></tr></table> </div> </div><ul> <li>然後封裝成一個 <code>hook</code>：</li> </ul> <h5 id="mittjs">mitt.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">mitt</span> <span class="nx">from</span> <span class="s1">&#39;mitt&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">emitter</span> <span class="o">=</span> <span class="nx">mitt</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">emitter</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>使用：</li> </ul> <h5 id="parentvue-8">parent.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>我是父元件！<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child1</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">Child2</span> <span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child1</span> <span class="nx">from</span> <span class="s1">&#39;./components/children1.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Child2</span> <span class="nx">from</span> <span class="s1">&#39;./components/children2.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="children1">children1</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件1 </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{msg}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">onUnmounted</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">emitter</span> <span class="nx">from</span> <span class="s1">&#39;../mitt&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 初始化 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kr">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">changeMsg</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;world&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 監聽事件，更新資料 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">emitter</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;change-msg&#39;</span><span class="p">,</span> <span class="nx">changeMsg</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 顯式解除安裝 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">onUnmounted</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emitter</span><span class="p">.</span><span class="nx">off</span><span class="p">(</span><span class="s1">&#39;change-msg&#39;</span><span class="p">,</span> <span class="nx">changeMsg</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">msg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">changeMsg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="children2">children2</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 我是子元件2 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#39;changeMsg&#39;</span><span class="p">&gt;</span>點選修改msg<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">emitter</span> <span class="nx">from</span> <span class="s1">&#39;../mitt&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">changeMsg</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">emitter</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;change-msg&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">changeMsg</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="演示">演示</h3> <p><img src="https://live.staticflickr.com/65535/52279039685_52ca5e6690_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="自定義指令">自定義指令</h2> <p>先看看 <code>Vue2</code> 自定義指令的鉤子：</p> <ul> <li><code>bind</code>：當指令繫結在對應元素時觸發，只會觸發一次。</li> <li><code>inserted</code>：當對應元素被插入到 DOM 的父元素時觸發。</li> <li><code>update</code>：當元素更新時，這個鉤子會被觸發（此時元素的後代元素還沒有觸發更新）。</li> <li><code>componentUpdated</code>：當整個元件（包括子元件）完成更新後，這個鉤子觸發。</li> <li><code>unbind</code>：當指令被從元素上移除時，這個鉤子會被觸發，也只觸發一次。</li> </ul> <p>在 <code>Vue3</code> 中，官方為了更有助於程式碼的可讀性和風格統一，把<strong>自定義指令</strong>的鉤子名稱改的更像是元件生命週期，儘管他們是兩回事：</p> <ul> <li><code>bind</code> =&gt; beforeMount。</li> <li><code>inserted</code> =&gt; mounted。</li> <li><code>beforeUpdate</code>：新的鉤子，會在元素自身更新前觸發。</li> <li><code>update</code> =&gt; 移除！</li> <li><code>componentUpdated</code> =&gt; updated。</li> <li><code>beforeUnmount</code>：新的鉤子，當元素自身被解除安裝前觸發。</li> <li><code>unbind</code> =&gt; unmounted。</li> </ul> <hr> <h2 id="過渡動畫">過渡動畫</h2> <p>這個沒有什麼大的改動，只是修改了兩個 <code>class</code> 名字，正是因為沒有什麼大的改動，導致我曾經在這裡栽了大跟頭，寫完了怎麼都不對，後來查官網才知道。</p> <p>以下是直接引用<strong>官網的原文</strong>：</p> <ul> <li><code>v-enter-from</code>：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。</li> <li><code>v-enter-active</code>：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。</li> <li><code>v-enter-to</code>：定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter-from 被移除)，在過渡/動畫完成之後移除。</li> <li><code>v-leave-from</code>：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。</li> <li><code>v-leave-active</code>：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。</li> <li><code>v-leave-to</code>：離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave-from 被刪除)，在過渡/動畫完成之後移除。</li> </ul> <blockquote> <p>特別注意的是：<br> <code>v-enter</code> 改成了 <code>v-enter-form</code><br> <code>v-leave</code> 改成了 <code>v-leave-from</code></p></blockquote> <hr> <h2 id="其他小知識">其他小知識</h2> <ul> <li><code>Vue3</code> 移除了 <code>filter</code>。</li> <li>獲取元件實例的方法 <code>getCurrentInstance()</code>：<br> 這個方法可以獲取到當前元件的實例，相當於 <code>Vue2</code> 中的 <code>this</code>，但是它只在==開發環境==起效果，打包以後會報錯，所以大家不要依賴 <code>getCurrentInstance</code> 方法去獲取元件實例來完成一些主要功能。<br> 更詳細的可以檢視下面這篇文章：<br> <a class="link" href="https://www.gushiciku.cn/jump/aHR0cHM6Ly9saW5rLnpoaWh1LmNvbS8/dGFyZ2V0PWh0dHBzJTNBLy9ibG9nLmNzZG4ubmV0L2xfcHBwL2FydGljbGUvZGV0YWlscy8xMTAyOTAxODI=" target="_blank" rel="noopener" >關於Vue3獲取當前元件例項的 getCurrentInstance 方法的補充</a></li> </ul> <p>最後，畢竟是個人總結，難免會出現紕漏和錯誤，期待各路大神的補充和糾正。</p> <hr> <h2 id="參考">參考</h2> <ul> <li><a class="link" href="https://www.gushiciku.cn/pl/g19t/zh-tw" target="_blank" rel="noopener" >參考網站</a></li> <li><a class="link" href="https://www.vue3js.cn/docs/zh/" target="_blank" rel="noopener" >Vue3官方中文文件</a></li> <li><a class="link" href="https://www.bilibili.com/video/BV1Wh411X7Xp" target="_blank" rel="noopener" >Vue3.0光速上手</a></li> <li><a class="link" href="https://www.imooc.com/article/317810" target="_blank" rel="noopener" >Volar - vue終極開發神器！</a></li> <li><a class="link" href="https://juejin.cn/post/6940454764421316644#heading-6" target="_blank" rel="noopener" >Vue3.0 新特性以及使用經驗總結</a></li> <li><a class="link" href="https://www.bilibili.com/video/BV1ra4y1H7ih?spm_id_from=333.788.b_636f6d6d656e74.23" target="_blank" rel="noopener" >尚矽谷2021最新Vue.JS教程快速入門到專案實戰（Vue3/VueJS技術詳解）</a></li> <li><a class="link" href="https://juejin.cn/post/6891640356543627278" target="_blank" rel="noopener" >那個忙了一夜的Vue3動畫很好，就是太短了</a></li> </ul> <hr>https://blog.wayne-project.com/2022-08-11/option-api-vs-composition-api/Thu, 11 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-11/option-api-vs-composition-api/<img src="https://live.staticflickr.com/65535/52277524312_b6dc5e213c_o.png" alt="Featured image of post 圖解 Option API vs Composition API" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://juejin.cn/post/6891640356543627278" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.gushiciku.cn/pl/g19t/zh-tw" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="回顧-option-api">回顧 Option API</h2> <blockquote> <p>在了解 Composition Api 之前，首先回顧下我們使用 Option Api 遇到的問題，我們在 Vue2 中常常會需要在特定的區域（data、methods、watch、computed&hellip;）編寫負責相同功能的代碼。</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52277525197_19c1acbbf4_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;val&#34;</span> <span class="err">@</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="o">=</span><span class="s">&#34;addTodo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;todo in todos&#34;</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#34;todo.id&#34;</span><span class="p">&gt;</span>{{todo.title}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">todos</span><span class="o">:</span><span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;吃饭&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;睡觉&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;lsp&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addTodo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">val</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="option-api-的缺陷">Option Api 的缺陷</h2> <h3 id="反覆橫跳">反覆橫跳</h3> <blockquote> <p>隨著業務複雜度越來越高，代碼量會不斷的加大；由於相關業務的代碼需要遵循 option 的配置寫到特定的區域，導致後續維護非常的複雜，代碼可複用性也不高。</p></blockquote> <ul> <li>相信大部分同學都維護過超過200行的 .vue 組件，新增或者修改一個需求，就需要分別在 data、methods、computed 裡修改，滾動條反复上下移動，我稱之為『反复橫跳』，比如我們簡單的加個拍腦門的需求加個累加器，這種寫代碼上下反复橫條的感覺，相信大家都懂的：</li> </ul> <p><img src="https://live.staticflickr.com/65535/52278523468_474b248a83_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52278504901_8cc9387727_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;add&#34;</span><span class="p">&gt;</span>LSP {{count}}号 double is{{double}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;val&#34;</span> <span class="err">@</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="o">=</span><span class="s">&#34;addTodo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;todo in todos&#34;</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#34;todo.id&#34;</span><span class="p">&gt;</span>{{todo.title}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Counter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span><span class="p">[</span><span class="nx">Counter</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">todos</span><span class="o">:</span><span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;吃饭&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;睡觉&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;lsp&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span><span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">double</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">addTodo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">val</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">add</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="mixin-和-this">mixin 和 this</h3> <ul> <li>反覆橫跳的本質，在於功能的分塊組織，以及代碼量太大了，如果我們能把代碼控制在一屏，自然就解決了，vue2 裡的解決方案，是使用 mixin 來混合, 我們抽離一個 counter.js：</li> </ul> <h5 id="counterjs">counter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span><span class="mi">1</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">double</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">count</span> <span class="o">*</span> <span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">add</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">count</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="appvue">App.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Counter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span><span class="p">[</span><span class="nx">Counter</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="p">...</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"><span class="p">...</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這樣確實拆分了代碼，但是有一個很嚴重的問題，就是不打開 counter.js，App.vue 裡的 this 上，count、add這些屬性，是完全不知道從哪來的，你不知道是 <code>mixin</code>，還是全局 <code>install</code>，還是 <code>Vue.prototype.count</code> 設置的，數據來源完全模糊，調試爽死你，這也是 option 的一個大問題，<code>this</code> 是個黑盒，template 裡寫的 count 和 double，完全不知道從哪來的。</p> <br/> <p>如果有兩個 <code>mixin</code>，就更有意思了，比如我們又有一個需求，實時顯示鼠標的坐標位置 x，並且有一個乘以 2 的計算屬性湊巧也叫 double，再整一個 mixin：</p> <h5 id="usemousejs">useMouse.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span><span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">methods</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">update</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">computed</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">double</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="o">*</span><span class="mi">2</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">mounted</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">destroyed</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>這是一個獨立維護的 mixin，可能在 N 個地方用到，他根本不知道會不會有人和他衝突，然後用一下：</p> <h5 id="appvue-1">App.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Counter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Mouse</span> <span class="nx">from</span> <span class="s1">&#39;./mouse&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">mixins</span><span class="o">:</span><span class="p">[</span><span class="nx">Counter</span><span class="p">,</span><span class="nx">Mouse</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="p">......</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p><img src="https://live.staticflickr.com/65535/52278773824_2fb43692cf_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>兩個 mixin 裡都有 double 這個數，尷尬，看效果，lsp 的 count 被覆蓋了很尷尬，而且在 App.vue 這裡，你完全不知道這個 double 到底是哪個，調試很痛苦。</p> <hr> <h2 id="composition-api">Composition Api</h2> <blockquote> <p>composition 就是為了解決這個問題存在的，通過組合的方式，把零散在各個 data、methods 的代碼重新組合，一個功能的代碼都放在一起維護，並且這些代碼可以單獨拆分成函數，顯然我們可以更加優雅的組織我們的代碼，函數。讓相關功能的代碼更加有序的組織在一起。</p></blockquote> <p><img src="https://live.staticflickr.com/65535/52278991260_8c8720067c_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p><img src="https://live.staticflickr.com/65535/52278529193_878667eeba_o.gif" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>我們用vue3演示一下功能，具體api就不解釋了直接vue3文檔搞起就可以：</p> <h5 id="appvue-2">App.vue</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;val&#34;</span> <span class="err">@</span><span class="na">keyup</span><span class="err">.</span><span class="na">enter</span><span class="o">=</span><span class="s">&#34;addTodo&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;todo in todos&#34;</span> <span class="na">:key</span><span class="o">=</span><span class="s">&#34;todo.id&#34;</span><span class="p">&gt;</span>{{todo.title}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">template</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">reactive</span><span class="p">,</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">toRefs</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">todos</span> <span class="o">=</span> <span class="nx">reactive</span><span class="p">([</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;吃饭&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;睡觉&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;lsp&#39;</span><span class="p">,</span> <span class="nx">done</span><span class="o">:</span><span class="kc">false</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">])</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">addTodo</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="nx">val</span><span class="p">.</span><span class="nx">value</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">done</span><span class="o">:</span> <span class="kc">false</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span><span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>利用函數我們可以把功能完整獨立的拆分成模塊或者函數，方便組織代碼，並且解決了 mixin 混亂的問題。</p> <p>比如我們的累加器，抽離一個counter.js：</p> <h5 id="counterjs-1">counter.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">useCounter</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">count</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">add</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()=&gt;</span><span class="nx">count</span><span class="p">.</span><span class="nx">value</span><span class="o">*</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>直接使用：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-diff" data-lang="diff"><span class="line"><span class="cl">import { reactive, ref, toRefs } from &#39;vue&#39; </span></span><span class="line"><span class="cl"><span class="gi">+ import useCounter from &#39;./counter&#39; </span></span></span><span class="line"><span class="cl"><span class="gi"></span>export default { </span></span><span class="line"><span class="cl"> setup(){ </span></span><span class="line"><span class="cl"> let val = ref(&#39;&#39;) </span></span><span class="line"><span class="cl"> ... </span></span><span class="line"><span class="cl"><span class="gi">+ let { count,double,add } = useCounter() </span></span></span><span class="line"><span class="cl"><span class="gi"></span> return { </span></span><span class="line"><span class="cl"> val, todos, addTodo, </span></span><span class="line"><span class="cl"><span class="gi">+ count, double, add </span></span></span><span class="line"><span class="cl"><span class="gi"></span> } </span></span><span class="line"><span class="cl"> } </span></span><span class="line"><span class="cl">} </span></span></code></pre></td></tr></table> </div> </div><p>再來一個鼠標位置也不在話下，而且可以很好地利用解構賦值的別名，解決 mixin 的命名衝突問題：</p> <h5 id="usemousejs-1">useMouse.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">onMounted</span><span class="p">,</span> <span class="nx">onUnmounted</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">useMouse</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">update</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="kr">double</span> <span class="o">=</span> <span class="nx">computed</span><span class="p">(()=&gt;</span><span class="nx">x</span><span class="p">.</span><span class="nx">value</span><span class="o">*</span><span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">onMounted</span><span class="p">(()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">onUnmounted</span><span class="p">(()=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span> <span class="nx">update</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>模板裡直接用 doubelX：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span><span class="o">:</span><span class="nx">doubleX</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">,</span> <span class="nx">doubleX</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="script-setup">script setup</h2> <blockquote> <p>不過有的同學可能，還有一個小小的吐槽，那就是 setup 函數最後的 return 也是集中的，如果行數太多，一樣會橫條一下下。<br> 這個好解決，因為本身我們可以把 todos 也抽離成函數，這樣 setup 就全部是數據的來源，非常精簡絲滑：</p></blockquote> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useCounter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useMouse</span> <span class="nx">from</span> <span class="s1">&#39;./mouse&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useTodo</span> <span class="nx">from</span> <span class="s1">&#39;./todos&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setup</span><span class="p">(){</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useTodo</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span><span class="o">:</span><span class="nx">doubleX</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">,</span> <span class="nx">doubleX</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>是不是賊爽呢，如果有些同學就是不想啥都抽離，還是覺得統一 return 很麻煩， 我們可以使用 vue3 的 setup script 功能，把 setup 這個配置也優化掉一個功能 export 一次：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">setup</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useCounter</span> <span class="nx">from</span> <span class="s1">&#39;./counter&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useMouse</span> <span class="nx">from</span> <span class="s1">&#39;./mouse&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">useTodo</span> <span class="nx">from</span> <span class="s1">&#39;./todos&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useTodo</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">val</span><span class="p">,</span> <span class="nx">todos</span><span class="p">,</span> <span class="nx">addTodo</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useCounter</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">count</span><span class="p">,</span> <span class="kr">double</span><span class="p">,</span> <span class="nx">add</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="kr">double</span><span class="o">:</span><span class="nx">doubleX</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useMouse</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">doubleX</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p><a class="link" href="https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Frfcs%2Fblob%2Fsfc-improvements%2Factive-rfcs%2F0000-sfc-script-setup.md" target="_blank" rel="noopener" >具體看這裡</a></p> <hr>https://blog.wayne-project.com/2022-08-10/javascript-es6/Wed, 10 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-10/javascript-es6/<img src="https://live.staticflickr.com/65535/52276889089_0bb5aa46f7_o.png" alt="Featured image of post Javascript ES6 特性" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.youtube.com/playlist?list=PLmOn9nNkQxJFlj86lvBSpC2UsNw-pdmdq" target="_blank" rel="noopener" >【尚硅谷】ES6教程 - 涵盖 ES6~ES11</a><br> <a class="link" href="https://book.vue.tw/appendix/es6.html" target="_blank" rel="noopener" >給進入 Vue.js 前的 ES6 必備知識</a><br> <a class="link" href="https://blog.csdn.net/kjssjj12/article/details/107090338" target="_blank" rel="noopener" >超级实用的 ES6 特性</a><br> <a class="link" href="https://ithelp.ithome.com.tw/users/20110579/ironman/1846" target="_blank" rel="noopener" >【詳細 MDN 文件】</a></p> <hr> <h2 id="ecmascript">ECMAScript</h2> <ul> <li><code>ES</code> 是 <code>ECMAScript</code> 的簡稱，<code>ECMAScript</code> 是腳本語言的規範。而我們所使用的 <code>JavaScript</code> 是 <code>ECMAScript</code> 的一種實現。</li> <li>簡言之：ECMA做出規範，各瀏覽器依照規範做出實現，因而不同瀏覽器會有兼容性不同的情況。</li> <li><code>ES6</code> 是 <code>ES</code> 的經典版本，是前端工程師崗位的高頻需求，是前端開發工程師求職的必備技能。</li> <li>現階段前端行業發展迅猛，前端技術也在高速迭代， ES6-ES11 規范增加了很多 <code>JavaScript</code> 新特性。 <code>ES</code> 新特性已經成為前端技術發展的趨勢，語法簡潔，功能豐富，部分特性還有性能提升，前端開發三大框架 <code>Vue</code>、<code>React</code>、<code>Angular</code> 都用到了大量的新特性代碼，框架的升級也在向著新特性語法靠攏。</li> </ul> <hr> <h2 id="var--let-與-const"><code>var</code> 、 <code>let</code> 與 <code>const</code></h2> <ul> <li><code>var</code> 、 <code>let</code> 與 <code>const</code> 在 Javascript 都是用來宣告變數的語法，最大的差別是他們的scope(變數有效範圍)的不同。切分<code>var</code>作用範圍的最小單位為 <code>function</code>，而 <code>let</code> 與 <code>const</code> 的作用範圍是 <code>block</code> 也就是俗稱的大括號：<code>{ }</code> 來切分。</li> <li><code>const</code> 所宣告的變數還有另一個特性是無法被重新賦值 (re-assign)。</li> </ul> <hr> <h3 id="let-特性"><code>let</code> 特性</h3> <ol> <li>var 可以重複聲明，但 let 不能重複聲明。</li> </ol> <h5 id="演示">演示：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">testA</span> <span class="o">=</span> <span class="s2">&#34;AAA&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">testA</span> <span class="o">=</span> <span class="s2">&#34;BBB&#34;</span><span class="p">;</span> <span class="c1">// 不會報錯 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testB</span> <span class="o">=</span> <span class="s2">&#34;AAA&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">testB</span> <span class="o">=</span> <span class="s2">&#34;BBB&#34;</span><span class="p">;</span> <span class="c1">// 會報錯 </span></span></span></code></pre></td></tr></table> </div> </div><ol start="2"> <li>let 為塊級作用域</li> </ol> <ul> <li>塊級作用域：變數只在代碼塊裡面有效(<code>{ ... }</code>、<code>if else</code>、<code>while</code>、<code>for</code>)</li> <li>在 ES5 中，作用域有：全局、函數、eval(嚴格模式下)</li> </ul> <h5 id="演示-1">演示：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="s2">&#34;BBB&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// &#34;BBB&#34;，因為 var 非塊級作用域，所以聲明時會往外層(全局window)添加這個屬性 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="s2">&#34;AAA&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// 會報錯 a is not defined </span></span></span></code></pre></td></tr></table> </div> </div><ol start="3"> <li>不存在變數提升</li> </ol> <ul> <li>變數提升：代碼執行前會先進行變數搜集，<code>var</code> 聲明的變量在搜集時會先定義一個 <code>undefined</code> 的初始值。</li> </ul> <h5 id="演示-2">演示：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 在 a 用 var 聲明前輸出 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> <span class="c1">// 不會報錯，會輸出 undefined </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="s2">&#34;AAA&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 在 b 用 let 聲明前輸出 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> <span class="c1">// 會報錯，Cannot access &#39;b&#39; before initialization </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">b</span> <span class="o">=</span> <span class="s2">&#34;BBB&#34;</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ol start="4"> <li>不影響作用域鏈</li> </ol> <h5 id="演示-3">演示：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">school</span> <span class="o">=</span> <span class="s2">&#34;尚硅谷&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">fn</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">school</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">fn</span><span class="p">();</span> <span class="c1">// 輸出 &#34;尚硅谷&#34;，在 fn 內沒有 school，會往外層尋找 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="let-經典範例實踐">let 經典範例實踐</h3> <ul> <li>實作點擊 div 時切換顏色</li> </ul> <h5 id="代碼">代碼：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;container&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;page-header&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 點擊切換顏色 </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 獲取 div 元素對象 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">let</span> <span class="nx">items</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s2">&#34;item&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 遍歷並綁定事件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span> <span class="nx">items</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">item</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 修改當前元素的背景顏色 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 最佳寫法應為： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">background</span> <span class="o">=</span> <span class="s2">&#34;pink&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// 常見錯誤寫法： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// items[i].style.background = &#34;pink&#34;; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 原因： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// i 使用 var 來聲明，var 聲明的變數非塊級作用域， </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 因此 i 被聲明在全局(window)，此處取 i 會發現 window.i 已經等於 3 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 所以 items[3].style 會找不到。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 修正方式： </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// 將 i 改用 let 來聲明，讓 i 只存在於 for 迴圈中。 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h3 id="const-特性">const 特性</h3> <ol> <li>一定要賦初始值，且聲明後值不能被修改。</li> <li>一般常數使用大寫(淺規則)。</li> <li>也是塊級作用域</li> </ol> <h5 id="演示-4">演示：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">PLAYER</span> <span class="o">=</span> <span class="s2">&#34;UZI&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PLAYER</span><span class="p">);</span> <span class="c1">// 會報錯，PLAYER is not defined </span></span></span></code></pre></td></tr></table> </div> </div><ol start="4"> <li>對於 Array 和 Object 的元素修改，不算對常數的修改，不會報錯。</li> </ol> <h5 id="演示-5">演示：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">TEAM</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;UZI&#34;</span><span class="p">,</span> <span class="s2">&#34;MXLG&#34;</span><span class="p">,</span> <span class="s2">&#34;Ming&#34;</span><span class="p">,</span> <span class="s2">&#34;Letme&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">TEAM</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&#34;Meiko&#34;</span><span class="p">);</span> <span class="c1">// 不會報錯，因為變數所指向的地址沒有改變 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="函式的參數默認值">函式的參數默認值</h2> <ul> <li>在 ES5 中必須這麼寫：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">printText</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">text</span> <span class="o">=</span> <span class="nx">text</span> <span class="o">||</span> <span class="s2">&#34;default&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>在 ES6 以後可以這樣簡寫屬性：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">printText</span><span class="p">(</span><span class="nx">text</span> <span class="o">=</span> <span class="s2">&#34;default&#34;</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="二進制與八進制字面量">二進制與八進制字面量</h2> <ul> <li>ES6 支持二進制與八進制的字面量，通過在數字前面添加 <code>0o</code> 或者 <code>0O</code> 即可將其轉換為<span class="focus">八進制值</span>、添加 <code>0b</code> 或者 <code>0B</code> 即可將其轉換為<span class="focus">二進制值</span>。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">oValue</span> <span class="o">=</span> <span class="s2">&#34;0o10&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">oValue</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 8 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">bValue</span> <span class="o">=</span> <span class="mb">0b10</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">bValue</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 2 </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="es-module-與-import--export">ES Module 與 import 、 export</h2> <ul> <li>Javascript 自從 ES6 開始新增了模組系統(ES Module)，我們可以將每個 Javascript 的檔案當作是一個獨立的模組來看待，在 A 檔案匯出(export)在 B 檔案匯入(import)。</li> </ul> <h5 id="ajs">a.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">aString</span> <span class="o">=</span> <span class="s2">&#34;This is A String&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kd">function</span> <span class="nx">aFunction</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;A Function test&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">aObject</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">1</span> <span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><h5 id="bjs">b.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">aString</span><span class="p">,</span> <span class="nx">aFunction</span><span class="p">,</span> <span class="nx">aObject</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;./a.js&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">aString</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;This is A String&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">aObject</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; { a: 1 } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">aFounction</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;A Function test&#34; </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>當然在 <code>export</code> 也可以不用給變數名稱：</li> </ul> <h5 id="cjs">c.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello 008 JS!!!&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>在另一個檔案就可以這樣來使用：</li> </ul> <h5 id="djs">d.js</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">greeting</span> <span class="nx">from</span> <span class="s2">&#34;./c.js&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">greeting</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;Hello 008 JS!!!&#34; </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="箭頭函數與-this">箭頭函數與 <code>this</code></h2> <ul> <li>從 ES6 開始新增了一種叫做 「箭頭函式表示式」 (Arrow Function expression) 的函式表達式。快速看一下，如何將一般的函式轉換成箭頭函式的寫法：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">plus</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">numA</span><span class="p">,</span> <span class="nx">numB</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">numA</span> <span class="o">+</span> <span class="nx">numB</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>首先我們把參數往前提，然後把關鍵字 <code>function</code> 刪掉改成箭頭符號 <code>=&gt;</code>：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">plus</span> <span class="o">=</span> <span class="p">(</span><span class="nx">numA</span><span class="p">,</span> <span class="nx">numB</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">numA</span> <span class="o">+</span> <span class="nx">numB</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>如果這個函式只是想要回傳某個運算結果的時候，可以將 <code>return</code> 以及大括號 <code>{ }</code> 省略：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">plus</span> <span class="o">=</span> <span class="p">(</span><span class="nx">numA</span><span class="p">,</span> <span class="nx">numB</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">numA</span> <span class="o">+</span> <span class="nx">numB</span><span class="p">;</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>而只有一個參數的時候，參數前面的小括號<code>( )</code>則可以省略：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">saySomething</span> <span class="o">=</span> <span class="nx">msg</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">msg</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">saySomething</span><span class="p">(</span><span class="s2">&#34;Hello!&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;Hello!&#34; </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>另外需要注意的是，在箭頭函式使用 <code>this</code> 時，這時 <code>this</code> 會<span class="focus">指向箭頭函式外面的 <code>this</code></span>，這個規則與原本 <code>function</code> 所宣告的函式不同，而且箭頭函式無法透過 <code>bind()</code> 強制指定裡面的 <code>this</code>。</li> </ul> <hr> <h2 id="字串模板-template-literals">字串模板 (Template literals)</h2> <ul> <li>以往我們在組合 JavaScript 的變數與 HTML 模板的時候，大多會透過「字串結合」 <code>+</code> 的模式，或透過陣列來新增字串，最後再用 <code>[].join(&quot;&quot;)</code> 的方式串接起來。但自 ES6 起，我們可以透過字串模板的語法，將變數、運算式等插入至我們的網頁模板當中，像這樣：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 用「`...`」取代單/雙引號 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="sb">`string text </span><span class="si">${</span><span class="nx">expression</span><span class="si">}</span><span class="sb"> string text`</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>這樣我們就可以將這個 <code>expression</code> 所代表的運算式或數值置入到字串裡頭了。</li> </ul> <hr> <h2 id="解構賦值-destructuring-assignment">解構賦值 (Destructuring assignment)</h2> <ul> <li>ES6 提供了解構賦值的語法，可以將陣列或者物件裡面的資料解開變成獨立的變數：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">:</span> <span class="mi">42</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">displayName</span><span class="o">:</span> <span class="s2">&#34;jdoe&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">fullName</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">firstName</span><span class="o">:</span> <span class="s2">&#34;John&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">lastName</span><span class="o">:</span> <span class="s2">&#34;Doe&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">{</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">displayName</span><span class="p">,</span> <span class="nx">fullName</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">user</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 42 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">displayName</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;jdoe&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">fullName</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; { firstName: &#34;John&#34;, lastName: &#34;Doe&#34; } </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>除了物件以外，陣列也可以：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">number</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">[</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]</span> <span class="o">=</span> <span class="nx">number</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">y</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 2 </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="-展開運算子-spread-operator--其餘運算子-rest-operator"><code>...</code> 展開運算子 (Spread Operator) / 其餘運算子 (Rest Operator)</h2> <ul> <li>雖然 ES6 提供的展開運算子與其餘運算子的語法都是 <code>...</code>，不過它們兩者所代表的涵意還是不太一樣。</li> </ul> <h3 id="展開運算子">展開運算子</h3> <ul> <li>展開運算子通常會用在陣列，或者是函式的參數，如：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">frameworks</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;Vue.js&#34;</span><span class="p">,</span> <span class="s2">&#34;Angular&#34;</span><span class="p">,</span> <span class="s2">&#34;React&#34;</span><span class="p">];</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;Awesome&#34;</span><span class="p">,</span> <span class="p">...</span><span class="nx">frameworks</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; [&#34;Awesome&#34;, &#34;Vue.js&#34;, &#34;Angular&#34;, &#34;React&#34;] </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="其餘運算子">其餘運算子</h3> <ul> <li>延續前面的例子，我們可以透過 「其餘運算子」 將剩下的部分拆解出來：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">arr</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; [&#34;Awesome&#34;, &#34;Vue.js&#34;, &#34;Angular&#34;, &#34;React&#34;] </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="p">[</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="p">...</span><span class="nx">others</span><span class="p">]</span> <span class="o">=</span> <span class="nx">arr</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;Awesome&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;Vue.js&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">others</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;Angular&#34;, &#34;React&#34; </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>像這樣，我們可以搭配解構賦值的語法，將 <code>arr</code> 陣列拆解處來，並將剩餘的元素透過 <code>...others</code> 分離。</li> <li>當然，使用在物件上也是可以的：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// 其餘 Properties </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="p">...</span><span class="nx">z</span> <span class="p">}</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">x</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">4</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">y</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 2 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">z</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; { a: 3, b: 4 } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 展開 Properties </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="p">...</span><span class="nx">z</span> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; { x: 1, y: 2, a: 3, b: 4 } </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>要注意的是，<span class="focus">其餘運算子</span>所分離的部分只是陣列或物件的<span class="focus">「淺拷貝」</span>，若在多層物件使用時要特別小心。</li> </ul> <hr> <h2 id="promise-物件"><code>Promise</code> 物件</h2> <ul> <li>為了解決過去同步與非同步的問題，ES6 提供了 <code>Promise</code> 物件：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myPromiseFunc</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">someValue</span><span class="p">);</span> <span class="c1">// 完成 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// reject(&#34;failure reason&#34;); // 拒絕 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>當 <code>Promise</code> 的任務被完成的時候，我們就可以呼叫 <code>resolve()</code>，然後將取得的資料傳遞出去。 或是說想要拒絕這個 <code>Promise</code>，那麼就裡面呼叫 <code>reject()</code> 來拒絕他。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">myAsyncFunction</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// resolve() or reject() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 透過 .then() 來取代過去的 callback hell </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">myAsyncFunction</span><span class="p">(...)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> <span class="p">...</span> <span class="p">});</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="async-與-await"><code>async</code> 與 <code>await</code></h2> <ul> <li>在後來，從 <code>Promise</code> 物件又延伸出 <code>async</code> 與 <code>await</code> 兩個新特性，其實本質上是更簡便的語法糖。</li> </ul> <h4 id="假設我們有兩個非同步任務要處理並且我們希望在-asyncfunc1-執行完成之後才去執行-asyncfunc2">假設我們有兩個非同步任務要處理，並且我們希望在 <code>asyncFunc1</code> 執行完成之後才去執行 <code>asyncFunc2</code>：</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">asyncFunc1</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// resolve() or reject() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">asyncFunc2</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// resolve() or reject() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">});</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">asyncCall</span> <span class="o">=</span> <span class="kr">async</span><span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">result1</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">asyncFunc1</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">result2</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">asyncFunc2</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="p">};</span> </span></span></code></pre></td></tr></table> </div> </div><p>像這樣，透過 <code>async</code> 與 <code>await</code> 我們就可以擺脫過去一層層 <code>callback</code> 的惡夢，程式碼也更加簡潔。</p> <hr> <h2 id="簡寫屬性">簡寫屬性</h2> <ul> <li>在 ES5 中必須這麼寫：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">createCoord</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="o">:</span> <span class="nx">x</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span><span class="o">:</span> <span class="nx">y</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>在 ES6 以後可以這樣簡寫屬性：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">createCoord</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">x</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">y</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="方法屬性">方法屬性</h2> <ul> <li>在 ES5 中必須這麼寫：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">math</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">add</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">sub</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">multiply</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>在 ES6 以後可以這樣簡寫屬性：</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">math</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">sub</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span><span class="p">;</span> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">multiply</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">*</span> <span class="nx">b</span><span class="p">;</span> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="陣列方法">陣列方法</h2> <h4 id="es6-引入了許多有用的陣列方法例如">ES6 引入了許多有用的陣列方法，例如：</h4> <ul> <li>find()：查找陣列中的成員，返回 null 表示沒找到</li> <li>findIndex()：查找陣列成員的索引</li> <li>some()：檢查某個斷言是否至少一個成員在陣列中</li> <li>includes：陣列是否包含某項目</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">array</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">checked</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="mi">2</span> <span class="p">}];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">arr</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">item</span> <span class="p">=&gt;</span> <span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; { id: 2 } </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">arr</span><span class="p">.</span><span class="nx">findIndex</span><span class="p">(</span><span class="nx">item</span> <span class="p">=&gt;</span> <span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">arr</span><span class="p">.</span><span class="nx">some</span><span class="p">(</span><span class="nx">item</span> <span class="p">=&gt;</span> <span class="nx">item</span><span class="p">.</span><span class="nx">checked</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; true </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">numberArray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">numberArray</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; true </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="es6-的-class">ES6 的 class</h2> <ul> <li>ES6 支持 <code>class</code> 語法，但不是新的對象繼承模型，只是原型鍊的語法糖。</li> </ul> <h3 id="函式中使用-static-關鍵字定義構造函式的方法與屬性">函式中使用 <code>static</code> 關鍵字定義構造函式的方法與屬性：</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">Student</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;I&#39;m a student.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">study</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;study!&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">static</span> <span class="nx">read</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Reading Now.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">Student</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; Function </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">stu</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;I&#39;m a student.&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">stu</span><span class="p">.</span><span class="nx">study</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;study!&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">stu</span><span class="p">.</span><span class="nx">read</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;Reading Now.&#34; </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="class-的繼承extends"><code>class</code> 的繼承(<code>extends</code>)</h2> <ul> <li><code>extends</code> 允許一個子類繼承父類，需要注意的是，子類的 constructor 函式中需要執行 supre() 函式。</li> <li>當然你也可以在子類方法中調用父類的方法，如 <code>supre.parentMethodName()</code>。</li> <li><code>class</code> 的聲明不會提升 <code>hoisting</code> ，如果你要使用某個 <code>class</code> ，那你必須在使用之前定義他，否則會拋出 <code>reference error</code> 的錯誤。</li> <li>在 <code>class</code> 中定義函式不需要使用 <code>function</code> 關鍵字。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">Phone</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;I&#39;m a phone.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">MI</span> <span class="kr">extends</span> <span class="nx">Phone</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">supre</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;I&#39;m a phone designed by xiaomi.&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">mi8</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MI</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;I&#39;m a phone.&#34; </span></span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; &#34;I&#39;m a phone designed by xiaomi.&#34; </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="class-的-super-方法"><code>class</code> 的 <code>super</code> 方法</h2> <ul> <li>super 關鍵字被使用於通過函式存取父層</li> </ul> <p><a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/super" target="_blank" rel="noopener" >【詳細 MDN 文件】</a></p> <h3 id="語法">語法</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">super</span><span class="p">([</span><span class="nx">arguments</span><span class="p">]);</span> <span class="c1">// calls the parent constructor. </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">super</span><span class="p">.</span><span class="nx">functionOnParent</span><span class="p">([</span><span class="nx">arguments</span><span class="p">]);</span> </span></span></code></pre></td></tr></table> </div> </div><ul> <li>當使用<span class="focus">建構子</span>，<code>super</code> 關鍵字<span class="focus">必須出現</span>在 <code>this</code> 關鍵字之前使用，<code>super</code> 關鍵字也可以使用在呼叫函式與父對象。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">parent</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello from the Parent&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">child</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">foo</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">.</span><span class="nx">foo</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Hello from the Child&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nb">Object</span><span class="p">.</span><span class="nx">setPrototypeOf</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">parent</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">child</span><span class="p">.</span><span class="nx">foo</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; Hello from the Parent </span></span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; Hello from the Child </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="非同步處理工具---generator生成器函式">非同步處理工具 - <code>Generator</code>(生成器函式)</h2> <ul> <li>生成器函式</li> <li>生成器對像是由一個 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*" target="_blank" rel="noopener" >generator function</a> 返回的,並且它符合<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#iterable" target="_blank" rel="noopener" >可迭代協議</a>和<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#iterator" target="_blank" rel="noopener" >迭代器協議</a>。</li> </ul> <p><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator" target="_blank" rel="noopener" >【詳細 MDN 文件】</a></p> <h3 id="語法-1">語法</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span><span class="o">*</span> <span class="nx">gen</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">yield</span> <span class="mi">1</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">yield</span> <span class="mi">2</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">yield</span> <span class="mi">3</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">gen</span><span class="p">();</span> </span></span><span class="line"><span class="cl"><span class="c1">// &#34;Generator { }&#34; </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="方法">方法</h3> <ul> <li><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator/next" target="_blank" rel="noopener" >Generator.prototype.next()</a>：返回一個由 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield" target="_blank" rel="noopener" >yield</a>表達式生成的值。</li> <li><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator/return" target="_blank" rel="noopener" >Generator.prototype.return()</a>：返回給定的值並結束生成器。</li> <li><a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator/throw" target="_blank" rel="noopener" >Generator.prototype.throw()</a>：向生成器拋出一個錯誤。</li> </ul> <h3 id="範例一個無限迭代器">範例：一個無限迭代器</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">function</span><span class="o">*</span> <span class="nx">idMaker</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">while</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">yield</span> <span class="nx">index</span><span class="o">++</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">let</span> <span class="nx">gen</span> <span class="o">=</span> <span class="nx">idMaker</span><span class="p">();</span> <span class="c1">// &#34;Generator { }&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">gen</span><span class="p">.</span><span class="nx">next</span><span class="p">().</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 0 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">gen</span><span class="p">.</span><span class="nx">next</span><span class="p">().</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 1 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">gen</span><span class="p">.</span><span class="nx">next</span><span class="p">().</span><span class="nx">value</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// &gt;&gt;&gt; 2 </span></span></span><span class="line"><span class="cl"><span class="c1">// ... </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="生成器對象">生成器對象</h3> <ul> <li>Generator.prototype.next()：返回 <a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield" target="_blank" rel="noopener" >yield</a> 表達式生成的值。</li> <li>Generator.prototype.close()：關閉生成器，因此執行該函式後調用next()方法時將會拋出 <code>StopIteration</code> 錯誤。</li> <li>Generator.prototype.send()：用於將值發送到生成器。該值由<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield" target="_blank" rel="noopener" >yield</a>表達式返回，並且返回下一個<a class="link" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield" target="_blank" rel="noopener" >yield</a>表達式生成的值。</li> <li>Generator.prototype.throw()：向生成器拋出錯誤。</li> </ul> <hr>https://blog.wayne-project.com/2022-08-09/js-deep-copy-vs-shallow-copy/Tue, 09 Aug 2022 00:00:00 +0000https://blog.wayne-project.com/2022-08-09/js-deep-copy-vs-shallow-copy/<img src="https://live.staticflickr.com/65535/52277851687_14d13f49a6_o.jpg" alt="Featured image of post JavaScript的記憶體空間、賦值和深淺拷貝" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.itread01.com/hklfcyhk.html" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="javascript的記憶體空間">JavaScript的記憶體空間</h2> <ul> <li>在 JavaScript 中，每一個數據都需要一個記憶體空間。記憶體空間分為兩種，<code>棧記憶體（stock）</code> 與 <code>堆記憶體（heap）</code>。</li> <li><code>棧</code>是系統自動分配的記憶體空間，由系統自動釋放，<code>堆</code>則是動態分配的記憶體，大小不定不會自動釋放。</li> </ul> <h2 id="基礎資料型別">基礎資料型別</h2> <ul> <li>JavaScript 中的基礎資料型別，這些值都有固定的大小，儲存在 <code>棧記憶體</code>中，由系統自動分配儲存空間，在<code>棧記憶體</code>空間的值，我們可以直接進行操作，因此基礎資料型別都是按照值訪問。</li> <li>在<code>棧記憶體</code>中的資料發生複製的行為時，系統會自動為新變數開闢一個新的記憶體空間，當複製執行後，兩個記憶體空間的值就互不影響，改變其中一個不會影響另一個</li> </ul> <h4 id="棧記憶體空間資料複製示例">棧記憶體空間資料複製示例</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="sb">`I am variable a`</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">a</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> <span class="c1">//`I am variable a` </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">b</span> <span class="o">=</span> <span class="sb">`I am variable b`</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> <span class="c1">//`I am variable a` </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> <span class="c1">//`I am variable b` </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="引用資料型別">引用資料型別</h2> <ul> <li>引用型別的值是儲存在 <code>堆記憶體</code>中的物件，在 JavaScript 中我們不能直接操作物件的<code>堆記憶體</code>空間。因為引用型別的值都是按引用訪問的，所以在操作物件時，實際上是操作物件的引用而不是實際的物件。 引用可以理解為儲存在<code>棧記憶體</code>中的一個地址，該地址指向<code>堆記憶體</code>中的一個實際物件。</li> <li>引用型別值的複製，系統會為新的變數自動分配一個新的<code>棧記憶體</code>空間 這個<code>棧記憶體</code>空間，儲存著與被複制變量相同的指標，儘管他們在<code>棧記憶體</code>中的記憶體空間的位置互相獨立，但是在<code>堆記憶體</code>中訪問到的物件實際上是同一個，因此當我們改變其中一個物件的值時，實際上就是改變原來的物件。</li> <li><code>棧記憶體</code>空間儲存指標（地址），<code>堆記憶體</code>空間儲存實際的物件，我們通過變數訪問物件時，實際上訪問的是物件的引用（地址）。</li> <li>記憶體中的<code>棧區域</code>存放變數（基本型別的變數包括變數宣告和值）以及指向<code>堆區域</code>儲存位置的指標（引用型別的變數包括變數宣告和指向內容的指標）。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="o">:</span> <span class="sb">`I am object a`</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="o">:</span> <span class="s1">&#39;object&#39;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">a</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;I am object a&#34;, type: &#34;object&#34;} </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">b</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="sb">`I am object b`</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;I am object b&#34;, type: &#34;object&#34;} </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;I am object b&#34;, type: &#34;object&#34;} </span></span></span></code></pre></td></tr></table> </div> </div><h2 id="基本型別總結">基本型別總結</h2> <h4 id="基本資料型別">基本資料型別：</h4> <table> <thead> <tr> <th style="text-align: left">基本資料型別</th> <th style="text-align: left"></th> <th></th> </tr> </thead> <tbody> <tr> <td style="text-align: left">包括</td> <td style="text-align: left">null、undefined、number、string、boolean、symbol(es6)</td> <td></td> </tr> <tr> <td style="text-align: left">存放位置</td> <td style="text-align: left">記憶體中的棧區域中</td> <td></td> </tr> <tr> <td style="text-align: left">比較</td> <td style="text-align: left">值的比較，判斷是否相等，如果值相等，就相等。一般使用 <code>===</code> 進行比較，因為 <code>==</code> 會進行型別的轉換</td> <td></td> </tr> <tr> <td style="text-align: left">拷貝</td> <td style="text-align: left">賦值（通過 <code>=</code> 賦值操作符來賦值），兩個變數的值之間相互沒有影響</td> <td></td> </tr> </tbody> </table> <table> <thead> <tr> <th style="text-align: left">引用型別總結</th> <th style="text-align: left"></th> <th></th> </tr> </thead> <tbody> <tr> <td style="text-align: left">包括</td> <td style="text-align: left">陣列、物件、函式</td> <td></td> </tr> <tr> <td style="text-align: left">存放位置</td> <td style="text-align: left">記憶體的棧區域中存放變數和指標，堆區域儲存實際的物件</td> <td></td> </tr> <tr> <td style="text-align: left">比較</td> <td style="text-align: left">是引用的比較（就是地址的比較，變數在棧記憶體中對應的指標地址相等就指向同一個物件）判斷是否為同一個物件，示例如下</td> <td></td> </tr> </tbody> </table> <h4 id="變數a和變數b的引用不同物件就不是同一個物件">變數a和變數b的引用不同，物件就不是同一個物件</h4> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;Jay&#39;</span><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;Jay&#39;</span><span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="nx">a</span><span class="o">===</span><span class="nx">b</span> <span class="c1">//false </span></span></span></code></pre></td></tr></table> </div> </div><h4 id="我們對javascript中引用型別進行操作的時候都是操作其物件的引用儲存在棧記憶體中的指標">我們對JavaScript中引用型別進行操作的時候，都是操作其物件的引用（儲存在棧記憶體中的指標）</h4> <hr> <h2 id="賦值深拷貝和淺拷貝-assignment-deep-copy-and-shallow-copy">賦值、深拷貝和淺拷貝 (Assignment, deep copy and shallow copy)</h2> <ul> <li>賦值：兩個變數的都指向同一個物件，改變其中一個，另一個也會受到影響。</li> <li>所謂拷貝就是複製，通過複製原物件生成一個新的物件。</li> </ul> <h3 id="淺拷貝">淺拷貝</h3> <ul> <li>重新在堆記憶體中開闢一個空間，拷貝後新物件獲得一個獨立的基本資料型別 資料，和原物件共用一個原物件內的引用型別 資料，改變基本型別 資料，兩個物件互不影響，改變其中一個物件內的引用型別 資料，另一個物件會受到影響。</li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Jay Chou&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">32</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">song</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;發如雪&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">year</span><span class="o">:</span><span class="mi">2007</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">obj1</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">shallowCopy</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">scObj</span> <span class="o">=</span> <span class="p">{};</span> </span></span><span class="line"><span class="cl"> <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">prop</span> <span class="k">in</span> <span class="nx">obj</span><span class="p">){</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">prop</span><span class="p">)){</span> </span></span><span class="line"><span class="cl"> <span class="nx">scObj</span><span class="p">[</span><span class="nx">prop</span><span class="p">]</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">prop</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">scObj</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">obj2</span> <span class="o">=</span> <span class="nx">shallowCopy</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span> <span class="o">===</span> <span class="nx">obj1</span><span class="p">,</span><span class="s1">&#39;obj === obj1&#39;</span><span class="p">,</span><span class="s1">&#39;賦值&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span> <span class="o">===</span> <span class="nx">obj2</span><span class="p">,</span><span class="s1">&#39;obj === obj2&#39;</span><span class="p">,</span><span class="s1">&#39;淺拷貝&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// true &#34;obj === obj1&#34; &#34;賦值&#34; </span></span></span><span class="line"><span class="cl"><span class="c1">// false &#34;obj === obj2&#34; &#34;淺拷貝&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">song</span> <span class="o">===</span> <span class="nx">obj2</span><span class="p">.</span><span class="nx">song</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">//true </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">obj2</span><span class="p">.</span><span class="nx">song</span><span class="p">.</span><span class="nx">name</span><span class="o">=</span><span class="s1">&#39;雙截棍&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">obj2</span><span class="p">.</span><span class="nx">name</span><span class="o">=</span><span class="s1">&#39;Jay&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;Jay Chou&#34;, age: 32, song: {name:&#39;雙截棍&#39;,year:2007}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;Jay Chou&#34;, age: 32, song: {name:&#39;雙截棍&#39;,year:2007}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s2">&#34;Jay&#34;</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">32</span><span class="p">,</span> <span class="nx">song</span><span class="o">:</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;雙截棍&#39;</span><span class="p">,</span><span class="nx">year</span><span class="o">:</span><span class="mi">2007</span><span class="p">}}</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="o">===</span><span class="nx">obj1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">//true </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="o">===</span><span class="nx">obj2</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="c1">//false </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="深拷貝">深拷貝</h3> <ul> <li>不論是物件內的基本型別還是引用型別 都被完全拷貝,拷貝後兩個物件互不影響。</li> <li>一種比較簡單實現方法是使用 <span class="focus"><code>var dcObj = JSON.parse(JSON.stringify(obj))</code></span></li> </ul> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Jay Chou&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">age</span><span class="o">:</span> <span class="mi">32</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">song</span><span class="o">:</span><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;發如雪&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">year</span><span class="o">:</span><span class="mi">2007</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">dcObj</span><span class="o">=</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">obj</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">dcObj</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;Jay Chou&#34;, age: 32, song: {name:&#39;發如雪&#39;,year:2007}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">dcObj</span><span class="p">.</span><span class="nx">song</span> <span class="o">===</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">song</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">//false </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">dcObj</span><span class="p">.</span><span class="nx">name</span><span class="o">=</span><span class="s1">&#39;Jay&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">dcObj</span><span class="p">.</span><span class="nx">song</span><span class="p">.</span><span class="nx">name</span><span class="o">=</span><span class="s1">&#39;雙截棍&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// {name: &#34;Jay Chou&#34;, age: 32, song: {name:&#39;發如雪&#39;,year:2007}} </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">dcObj</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">//{name: &#34;Jay&#34;, age: 32, song: {name:&#39;雙截棍&#39;,year:2007}} </span></span></span></code></pre></td></tr></table> </div> </div><h3 id="比較賦值深拷貝淺拷貝">比較：賦值、深拷貝、淺拷貝：</h3> <table> <thead> <tr> <th style="text-align: left"></th> <th style="text-align: left"></th> <th></th> </tr> </thead> <tbody> <tr> <td style="text-align: left">賦值</td> <td style="text-align: left">新物件仍然指向原物件，改變新物件的<code>基本型別</code>和<code>引用型別</code>的值都會使原物件對應的值一同改變。</td> <td></td> </tr> <tr> <td style="text-align: left">淺拷貝</td> <td style="text-align: left">改變新物件<code>基本型別</code>的值不會使原物件對應的值一起改變，但是改變新物件<code>引用型別</code>的值會使原物件對應的值一同改變。</td> <td></td> </tr> <tr> <td style="text-align: left">深拷貝</td> <td style="text-align: left">改變新物件<code>基本型別</code>和<code>引用型別</code>的值，都不會影響原物件，兩者互相獨立，互不影響。</td> <td></td> </tr> </tbody> </table> <hr>