https://blog.wayne-project.com/tags/web-browser/Recent content in Web Browser 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-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/2022-12-19/browser-http1.0-http1.1-http2.0-difference/Mon, 19 Dec 2022 00:10:00 +0000https://blog.wayne-project.com/2022-12-19/browser-http1.0-http1.1-http2.0-difference/<img src="https://live.staticflickr.com/65535/52571909202_4ddc6d0335_o.jpg" alt="Featured image of post 面試常見的瀏覽器問題(三) - HTTP/1、HTTP/1.1 和 HTTP/2 的區別" /><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://zh.wikipedia.org/zh-tw/HTTP/2" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/browser/http1.0-http1.1-http2.0-difference" target="_blank" rel="noopener" >參考網站</a></p> <p>從 1989 年起，HTTP 經歷了數代的演化，從 1 到 1.1 再到 2 以及目前的 3，這些不同版本有些什麼不同呢？不管是前端或後端的面試，都是經常會考的。這篇我們會先針對 1 到 1.1 再到 2 之間的異同處做摘要。</p> <hr> <h2 id="出現時間">出現時間</h2> <p><strong>超文本傳輸協定 HTTP</strong> (<strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol) 是在網際網路中用來通信數據的基礎。HTTP 一開始的發展是從 1989 年所發起制定，其中經過幾個時期的演進，HTTP/1.1 是隨著在 1999 年 6 月公布的 <a class="link" href="https://tools.ietf.org/html/rfc2616" target="_blank" rel="noopener" >RFC 2616</a> 所發表 。HTTP/2 (最初命名為 HTTP 2.0) 則是在 2015 年 5 月以 <a class="link" href="https://www.rfc-editor.org/rfc/rfc7540" target="_blank" rel="noopener" >RFC 7540</a> 正式發表，並取代 HTTP/1.1 成為 HTTP 的實作標準。截至 2021 年 10 月，全球有 46.5%的網站支援了 HTTP/2 (<a class="link" href="https://zh.wikipedia.org/zh-tw/HTTP/2" target="_blank" rel="noopener" >wiki</a>)。</p> <hr> <h2 id="http1-和-http11-差異">HTTP/1 和 HTTP/1.1 差異</h2> <p>往下讀之前，要先理解之所以會有 HTTP/1.1 是因為 HTTP/1 有一些不那麼理想的地方。因此建議不要死背差異，而是從「 HTTP/1.1 解決了什麼問題」出發來理解。</p> <h3 id="持久連接-keep-alive">持久連接 (keep-alive)</h3> <p>HTTP/1 在發送每個請求之前都需要建立一個新的連接，而每次連接都是有成本的，這種每次重連的方式會造成很多頻寬的浪費，以及時間的延遲。而 HTTP/1.1 默認使用持久連接，讓 HTTP/1.1 可以使用同一個 TCP 連接來重複多個 HTTP 請求，這麼一來就可以避免每次重新建立連接造成的頻寬浪費、時間延遲。</p> <h3 id="狀態碼-100-continue">狀態碼 100 (Continue)</h3> <p>在某些情況下，伺服器端會拒絕客戶端發送的請求，因為發請求時可能會夾帶正文 (request body)，所以每次請求被拒絕都會造成頻寬上的額外浪費。在 HTTP/1 沒有機制避免這種類型的浪費，而 HTTP/1.1 的 <code>100 (Continue)</code> 狀態碼則可以協助我們避免這種浪費。具體來說，HTTP/1.1 讓使用者端先送出一個只含有標頭、不帶內文的請求到伺服器，伺服器確認沒有問題之後，會回應狀態碼 <code>100 (Continue)</code>；收到 <code>100 (Continue)</code> 後，客戶端才會正式發一個帶有正文的請求；如果沒有收到，則代表伺服器端不接受該請求，這讓客戶端知道伺服器端不接受，這能讓客戶端可以避免發帶有正文的請求，進而減少傳輸上的頻寬浪費。(詳細請見 <a class="link" href="https://www.rfc-editor.org/rfc/rfc2616#section-8.2.3" target="_blank" rel="noopener" >RFC 的這個段落</a>)。</p> <h3 id="快取緩存">快取緩存</h3> <p>HTTP/1 主要使用標頭中的 <code>If-Modified-Since</code>、<code>Expires</code> 來做為緩存的判斷標準，這兩者都是以時間作為依據；HTTP/1.1 則引入更多的緩存策略，例如：<code>Etag</code>、<code>If-Unmodified-Since</code>、<code>If-Match</code>、<code>If-None-Match</code>，透過這些可以更優化緩存的實現 (這些標頭的使用在面試也很常考，詳見<a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/browser/http-caching" target="_blank" rel="noopener" >這篇文章</a>)。</p> <h3 id="host-字段">Host 字段</h3> <p>HTTP/1.1 增加了 Host 字段，用來指定伺服器的域名。在 HTTP/1 中，會認為每台伺服器都綁定唯一的 IP 地址，因此請求當中的 URL 並沒有傳遞主機名(hostname)。但隨著之後虛擬主機技術的演進，現在在一台伺服器上可以存在多個虛擬主機，並且他們會共享同一個 IP 地址。所以有了 host 字段之後，就可以將請求發往同一台伺服器上的不同網站。</p> <h3 id="更多請求方法">更多請求方法</h3> <p>HTTP/1.1 相對於 HTTP/1 新增了許多請求方法，現今我們常用的 PUT, PATCH, DELETE, CONNECT, TRACE 和 OPTIONS 等都是在 HTTP/1.1 時新增的。</p> <hr> <h2 id="http2-和-http11-比較">HTTP/2 和 HTTP/1.1 比較</h2> <h3 id="多路復用request-multiplexing-來解決頭部阻塞-head-of-line-blocking">多路復用(Request multiplexing) 來解決頭部阻塞 (head-of-line blocking)</h3> <p>HTTP/1.1 使用了 pipelining 的機制，這可以讓客戶端在同一個 TCP 連接內並行發出多個 HTTP 請求，客戶端也不需要等待上一次請求結果返回，就可以發出下一次請求，但伺服器端必須依照接收到的客戶端請求的先後順序一次返回，以保證客戶端能夠區分出每次請求的回應內容，但這項機制在實作上較難實現，因此各家瀏覽器，都將此功能預設為關閉。(<a class="link" href="https://stackoverflow.com/questions/30477476/why-is-pipelining-disabled-in-modern-browsers" target="_blank" rel="noopener" >可以參考此篇 stackoverflow</a>)。此外 pipeline 也造成頭部阻塞(head-of-line blocking ( HOL ))問題，如果有任一個請求要操作很久或傳輸包流失，那就會阻塞整個 pipeline 的工作。</p> <p>HTTP/2 引進了多路復用的機制，讓同一個 TCP 連接中，同時發送和接受多個請求，並且不用等到前一個請求收到回應，透過這個機制，解決了過往在 HTTP 層級的的頭部阻塞問題 (備註：但 TCP 層級仍有頭部阻塞問題，這會在 HTTP/3 被解決)。</p> <h3 id="優先請求順序">優先請求順序</h3> <p>HTTP/2 版本中，每個請求或回應的所有數據包，稱之為一個數據流，並且，每個數據流擁有一個唯一編號 ID (<code>stream ID</code>)。每個數據包在發送的時候就會戴上對應的數據流編號 ID，客戶端還能指定數據流的優先級，優先級越高服務器也會越快做出回應。</p> <h3 id="標頭header訊息壓縮">標頭(Header)訊息壓縮</h3> <p>在 HTTP/2 之前因為安全性問題，多數不會對標頭的訊息進行壓縮，主要是過去的採用的演算法可能遭受 CRIME 攻擊。在 HTTP/2 中，使用 HPACK 算法來避免攻擊，進而能壓縮標頭。因為壓縮標頭，讓傳輸時能大幅減少傳輸的訊息量，進而減少頻寬負擔，也增快傳輸速度。具體上 HPACK 使用一份索引表來定義常用的 http header，並把 http header 存放在表裡，請求的時候只需要發送在表裡的索引位置即可，不須用傳完整的標頭。</p> <h3 id="伺服器主動推送server-push">伺服器主動推送(Server push)</h3> <p>HTTP/2 允許伺服器端主動向客戶端推送數據，這能協助減少客戶端的請求次數。舉例來說，瀏覽器在過去要請求 <code>index.html</code> 與 <code>style.css</code> 來渲染完整的畫面；透過 Server Push，可以在瀏覽器請求 <code>index.html</code> 時，也由伺服器主動發送 <code>style.css</code> ，這樣只需要一輪 HTTP 的請求，就可以拿到所需的所有資源。</p> <hr>https://blog.wayne-project.com/2022-12-19/browser-delegation-capture-bubble/Mon, 19 Dec 2022 00:05:00 +0000https://blog.wayne-project.com/2022-12-19/browser-delegation-capture-bubble/<img src="https://live.staticflickr.com/65535/52571751437_6018c4804c_o.jpg" alt="Featured image of post 面試常見的瀏覽器問題(二) - 事件委派、捕獲、冒泡" /><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://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Events#event_delegation" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/browser/fe-event-delegation-capture-bubble" target="_blank" rel="noopener" >參考網站</a></p> <p>當使用者與瀏覽器互動時，會觸發各類不同的<strong>事件(event)</strong>，例如常見的<strong>點擊(click)</strong>、<strong>滑動(scroll)</strong>。我們可以透過 JavaScript 的事件處理器(handler)，來處理這些事件。讓我們能在事件觸發時，做出我們要的效果，例如點擊某個按鈕，觸發某個邏輯。</p> <p>針對瀏覽器事件，最常見的考題之一，便是<strong>事件委派</strong>、<strong>事件捕獲</strong>、<strong>事件冒泡</strong>，是很常見的面試考題。以下將用第一人稱的擬答，來回答「請說明瀏覽器中的事件委派、捕獲、冒泡」這個問題。</p> <hr> <h2 id="事件委派">事件委派</h2> <p>事件委派是當我們想要在一群子元素中，都加上同樣的事件監聽器與處理器時可以派上用場。當我們有許多相同元素，有相似的行為時，我們可以不用在每個元件都加上處理器，而是可以直接<strong>在父層加上處理器</strong>。這時透過 <code>event.target</code> 來得知實際上是哪一個元素發生事件，並處理該事件。</p> <p>這種<strong>把監聽器與處理器裝在父層，然後委派給子元素</strong>，就是所謂的<code>事件委派</code>。</p> <p>這麼做的好處是，我們不用在每個元件，例如每個按鈕上都加上處理器，這可以<strong>減少記憶體消耗</strong>；這也讓我們的架構更彈性，可以隨時新增或移除元素。也可以寫比較少的程式碼，讓可閱讀性提升。</p> <p>舉例來說 (編按：<a class="link" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation" target="_blank" rel="noopener" >此例子來自 MDN</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></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">id</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">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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;tile&#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></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-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">container</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;#container&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">container</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="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="nx">bgChange</span><span class="p">()));</span> </span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="事件捕獲">事件捕獲</h2> <p>事件委派之所以能夠發生，是因為在背後的<code>事件捕獲</code>與<code>冒泡機制</code>。一般來說，當事件觸發時，會先進入<strong>捕獲階段</strong>，然後到達<strong>事件目標</strong>，接著才是<strong>冒泡階段</strong>。(建議在面試時，可以簡單手繪這張 W3C 的事件流程，會更加幫助說明唷！)</p> <p><img src="https://live.staticflickr.com/65535/52572209101_d6bbd1b3a7_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>從上圖可得知，所謂的捕獲階段是指：當某個事件觸發時，例如使用者點了某個按鈕，此時由 <code>DOM 樹的最上層 Window 一路往下，將事件傳遞下去並執行</code>。實際在程式碼上，需要在事件監聽器中，加入 <code>{capture: true}</code> 來開啟捕獲機制。</p> <hr> <h2 id="事件冒泡">事件冒泡</h2> <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></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">form</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;alert(&#39;form 點擊事件觸發&#39;)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 這是一個 form 元素 </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;alert(&#39;div 點擊事件觸發&#39;)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> 這是一個 div 元素 </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;alert(&#39;p 點擊事件觸發&#39;)&#34;</span><span class="p">&gt;</span>這是一個 p 元素<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">form</span><span class="p">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>以上面的例子來說(建議在面試時也可以簡單快速手寫這個例子，可以幫助說明)，當我們在子層 <code>&lt;p&gt;</code> 裝一個 <code>onclick</code> 的處理器，點下去時，不僅該元素有跑出 <code>alert</code> ，其父層 <code>&lt;div&gt;</code> 的 <code>onclick</code> 也被觸發，然後祖父層 <code>&lt;form&gt;</code> 的 <code>onclick</code> 也接續被觸發。</p> <p>這邊有個細節需要分別，在冒泡時的 <code>this</code> 不必然等於 <code>event.target</code>，而是會等於 <code>event.currentTarget</code>。換句話說，<code>this</code> 是正在執行的處理器 (會一直變成下一個)；而 <code>event.target</code> 一直都會是真正變點擊的那個(在這邊就是最裡頭的子層)。</p> <p>在實務上，我們有時候不想要冒泡，例如只想要子元素的事件被觸發，不想要父層的元素被觸發，避免干擾。這時候想要不發生冒泡，可以在處理器加上 <code>event.stopPropagation()</code>(不過這個仍會讓該處理器執行，只是不會冒泡上去)；如果連該處理器的其他事件類別都不想執行的話，可以用 <code>event.stopImmediatePropagation()</code>。</p> <hr>https://blog.wayne-project.com/2022-12-19/browser-http-caching/Mon, 19 Dec 2022 00:00:00 +0000https://blog.wayne-project.com/2022-12-19/browser-http-caching/<img src="https://live.staticflickr.com/65535/52571693467_4bcdc4d080_o.png" alt="Featured image of post 面試常見的瀏覽器問題(一) - HTTP caching 機制" /><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://aws.amazon.com/tw/caching/" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.explainthis.io/zh-hant/interview-guides/browser/http-caching" target="_blank" rel="noopener" >參考網站</a></p> <p>如果要加快網頁應用程式的速度，caching 是個經常被用的策略 (caching 中文有被翻譯成緩存或快取，但因為工作與面試時都還是會說 caching 居多，這篇就暫不翻譯這個詞了)。當我們已經跟後端請求過某個資源，例如某筆資料或某張圖片，下一次再次請求時，如果該資源沒有改變，這時再次請求會相對浪費網路頻寬；反之，如果第一次請求來的資源已經被存下來，那麼下次請求時，可以直接用該資源，這樣可以減少不必要的請求。而這也是 caching 的概念。</p> <p>caching 可以被應用在很多地方，<a class="link" href="https://aws.amazon.com/tw/caching/" target="_blank" rel="noopener" >AWS 的這篇文章</a>中有概略分析到，在客戶端、DNS、伺服器、資料庫等地方都可以做 caching。而身為前後端工程師，在面試中很常被問到的是 HTTP 的 caching 機制。透過本篇文章，希望讓大家下次面試時被問到「請說明 HTTP caching 機制」時，可以解釋地夠清楚與完整。</p> <hr> <h2 id="http-caching-是用在哪-為什麼要用-http-caching">HTTP caching 是用在哪？ 為什麼要用 HTTP caching？</h2> <p>可以把 cache 理解成某個我們暫時存放資源(例如某筆資料、某張圖片)的地方，所以當下次需要這些資源時，不用再請求一次，而是可以直接從 cache 這個暫存處拿到。換到 HTTP caching 的脈絡，這個暫存的地方就是瀏覽器。</p> <p>舉例來說，當今天使用者逛了 LV 的官網，官網中的商品圖片與價錢，不太會快速改變，換句話說現在逛跟一小時後逛，看到的資訊很可能是完全一樣的。</p> <p>這時當第一次逛網站時，前端跟伺服器請求了這些商品圖片、描述與價錢，把他們 cache 起來 (放在瀏覽器記憶體的某個地方)，當使用者下次逛的時候，就不需要再跟伺服器請求了。下面這張是來自 MDN 的圖示，可以看到，如果沒有 cache，每一次請求都要對到伺服器；然而如果有 cache，則可以從 cache 裡面拿，可以減少直接對伺服器的請求：</p> <p><img src="https://live.staticflickr.com/65535/52571693412_75c82142de_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>讀到這邊我們可以歸納出，這麼做有幾項 caching 好處，也是我們為什麼要用 caching 的理由：</p> <ul> <li>減少請求次數：因為不用請求，而是直接從 cache 拿出之前暫存的資料，這樣做能減少伺服器與資料庫端的負擔。</li> <li>加快資源載入：向伺服器請求，需要等網路傳輸資料。直接從瀏覽器裡面的 cache 拿，就不用等這一段資料傳輸的時間，會快很多。</li> </ul> <hr> <h2 id="該如何設定-http-caching">該如何設定 HTTP caching？</h2> <p>上面談到 HTTP caching 的好處，以及可以把跟伺服器請求來的資料 cache 在瀏覽器中。但實際上該如何設定呢？這也是面試時會被追問的。</p> <p>以下有幾種方式：</p> <h3 id="expires">Expires</h3> <p>第一種方式是在 <strong>HTTP Response header</strong> 當中加入 <code>Expires</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">Expires: Tue, <span class="m">18</span> Jul <span class="m">2022</span> 16:07:23 GMT </span></span></code></pre></td></tr></table> </div> </div><p>瀏覽器收到該回應的資料會先把資料存在 cache 當中，而下一次用戶發送相同請求時，瀏覽器會去判斷現在時間是否已經到了 <code>Expires</code> 設定的時間，如果還沒到，那就會直接從 cache 裡面拿資料，而不是發送請求。</p> <h3 id="cache-control">cache-control</h3> <p>由於 <code>Expires</code> 是比較舊的方法，現在比較少人會用，更多人會用 <code>cache-control</code>。<code>cache-control</code> 的設定方式不是直接設定一個 cache 過期的時間點，而是設定 cache 有效的時間。舉例來說，下面這段是設定 cache 有效期是 60 秒。所以在第一次請求拿到回應後的六十秒內，如果在發送相同請求，瀏覽器都會直接拿 cache 的資料，而不是發請求到伺服器端：</p> <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">cache-control: max-age<span class="o">=</span><span class="m">60</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="cache-control-快問快答">cache-control 快問快答</h3> <p>關於 <code>cache-control</code> 的設定，有一些面試常會被問的快問快答，以下列出題目。下面會有答案，不過大家可以先自己想想看，看看自己知不知道這些問題的回答。</p> <ul> <li>如果只想讓客戶端 cached，而不想讓中間層的代理伺服器等其他層 cached，該用什麼？</li> <li>反之，如果想讓代理伺服器也能夠 cached 從後端來的資料，該用什麼？</li> <li>因為很多時候瀏覽器可能會自動 cache，如果完全不想要有 cache，想要內容一直都是最新的，那又該用什麼</li> <li>cache-control: no-store 跟 cache-control: no-cache 兩者有什麼差別？</li> </ul> <p>上面的問題的回答分別是：</p> <ul> <li><code>cache-control: private</code></li> <li><code>cache-control: public</code></li> <li><code>cache-control: no-store</code></li> </ul> <p><code>cache-control: no-store</code> 是指不要 cache，而 <code>cache-control: no-cache</code> 則是指會 cache，不過每一次請求時都要重新驗證一次 (<strong>revalidate</strong>)，換句話說每次都還是會問伺服器內容有沒有更新，沒更新就用 cache 的。詳見<a class="link" href="https://stackoverflow.com/questions/7573354/what-is-the-difference-between-no-cache-and-no-store-in-cache-control" target="_blank" rel="noopener" >這篇討論</a>。</p> <hr> <h2 id="http-caching-過期後該如何重新驗證">HTTP caching 過期後，該如何重新驗證？</h2> <p>上面提到我們可以透過 <code>cache-control: max-age</code> 來設定多久後 cache 過期；不過當 cache 過期後就要直接跟伺服器請求嗎？</p> <p>如果 cache 過期了，但其實伺服器那邊的資料並沒有更新，換句話說 cache 還是可以繼續被使用，這時有沒有什麼方法可以避免我們直接重新請求，繼續使用 cache？</p> <p>有的，這又被稱為<strong>驗證 (validation)</strong>，而 HTTP caching 有兩種主要方式可以做到這件事。</p> <h3 id="etag-搭配-if-none-match">ETag (搭配 If-None-Match)</h3> <p>第一個方式是在回應的 header 當中放入 <strong>ETag</strong> (entity tag 的簡寫)。這個 ETag 會是一個獨特的值，例如 ETag: &ldquo;686897696a7c876b7e&rdquo;；如果後端的資料有變動，則 ETag 會改變。如果伺服器在回傳的 header 中有放入 ETag， 則之後瀏覽器在請求時，會在請求的 header 帶上 <code>If-None-Match</code> 欄位，而欄位的值會是之前收到的 ETag 的獨特值。</p> <p>這時後端收到了該請求，並去查看 <code>If-None_match</code> 當中的 ETag 跟現在的 ETag 是不是一樣的。如果是一樣的，就代表後端的資料沒變(因為如果資料有變，則 ETag 會跟著變)；這時只需用傳個 <strong>304 Not Modified</strong> 給前端，瀏覽器收到 304 後，就知道資料沒變，所以可以繼續用 cache 的。</p> <p>而如果後端比較了 ETag 發現改變，那就不是回傳 304，而是回傳一包新的資料。</p> <h3 id="last-modified-搭配-if-modified-since">Last-Modified (搭配 If-Modified-Since)</h3> <p>第二個方式則是在伺服器的回應 header 中加入 <code>Last-Modified</code>，並標注最後修改該資源的時間，例如 <code>Last-Modified: 2021-11-07 21:32:16</code>。</p> <p>當瀏覽器收到帶有 <code>Last-Modified</code> 的回應後，之後的請求就會帶上 <code>If-Modified-Since</code>，然後帶上先前收到的時間，例如 <code>If-Modified-Since: 2021-11-07 21:32:16</code>。伺服器收到帶有 <code>If-Modified-Since</code> 的請求，比對了時間，如果更新資源的時間沒有變，拿一樣可以回傳 <strong>304 Not Modified</strong> 給前端，如果變了則回傳 200 以及新的資料。</p> <hr>https://blog.wayne-project.com/2022-09-12/use-indexeddb/Mon, 12 Sep 2022 00:00:00 +0000https://blog.wayne-project.com/2022-09-12/use-indexeddb/<img src="https://live.staticflickr.com/65535/52351840670_d321f7cc15_o.jpg" alt="Featured image of post 前端緩存大筆資料：IndexedDB 介紹/應用" /><style> .focus { background: #f1e2e2; color: #d62c2c; padding: 0 5px; } </style> <p><a class="link" href="https://www.yasssssblog.com/2020/08/19/web-indexeddb/" target="_blank" rel="noopener" >參考網站1</a><br> <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB" target="_blank" rel="noopener" >參考網站2</a></p> <hr> <h2 id="indexeddb-介紹">IndexedDB 介紹</h2> <ul> <li><code>key-value</code> 的儲存形式，透過索引功能來高效率搜尋資料。</li> <li><a class="link" href="https://www.w3.org/Security/wiki/Same_Origin_Policy" target="_blank" rel="noopener" ><code>同源政策 same-origin policy</code></a>：只能取用同網域下的資料。</li> <li><code>Async API</code> : 提供非同步 api，單線程的應用下取用資料時就不會有 block the main thread 的情況造成使用者體驗不佳。</li> <li><code>transaction</code> : 能夠確保大量寫入資料時的完整性，如果有單筆資料寫入失敗會全數 rollback。</li> </ul> <hr> <h2 id="相容性">相容性</h2> <ul> <li>大部分的瀏覽器都已經支援使用，參閱：<a class="link" href="https://caniuse.com/#feat=indexeddb" target="_blank" rel="noopener" >When Can I Use IndexedDB</a></li> </ul> <p><img src="https://live.staticflickr.com/65535/52351854285_c7b2ca3fda_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="儲存限制">儲存限制</h2> <p>單一資料庫項目的容量/大小並沒有任何限制，但是各個 IndexedDB資料庫的容量就有限制，且根據各瀏覽器其限制會不同。</p> <ul> <li>Chrome：允許瀏覽器使用多達總磁盤空間的60％。 您可以使用StorageManager API來確定可用的最大配額。 其他基於Chromium的瀏覽器可能允許該瀏覽器使用更多存儲空間。</li> <li>Internet Explorer 10 和更高版本：最多可以存儲250MB，並且在使用了10MB以上時將提示用戶。</li> <li>Firefox：允許一個來源最多使用2GB。 您可以使用StorageManager API來確定仍有多少可用空間。</li> <li>Safari (both desktop and mobile) 似乎最多可容納1GB，達到限制後，Safari會提示用戶，以200MB為增量增加限制。</li> </ul> <p>refer to <a class="link" href="https://web.dev/storage-for-the-web/" target="_blank" rel="noopener" >storage-for-the-web</a></p> <hr> <h2 id="資料鍵key">資料鍵(Key)</h2> <ul> <li>data type: string, date, float和 array</li> <li>必須是能排序的值(<span class="focus">無法處理多國語言字串排序</span>)</li> <li>物件存檔有三種方式產生資料鍵: <code>資料鍵產生器 (key generator)</code>、<code>資料鍵路徑 (key path)</code> 以及<code>指定值</code>。</li> <li><code>資料鍵產生器 (key generator)</code>：用產生器自動產生資料鍵。</li> <li><code>資料鍵路徑 (key path)</code>：空字串或是javascript identifier（包含用 &ldquo;.&rdquo; 分隔符號的名稱）且路徑不能有空白 (實測過中文會被轉成空字串)。</li> </ul> <hr> <h2 id="基本操作步驟">基本操作步驟</h2> <h5 id="操作indexeddb的基本步驟建議如下">操作IndexedDB的基本步驟建議如下：</h5> <ol> <li>開啟資料庫和交易(transaction)</li> <li>建立物件存檔(object store)</li> <li>發出資料庫操作請求，例如新增或取得資料</li> <li>聆聽對應DOM事件等待操作完成</li> <li>從result物件上取得結果進行其他工作</li> </ol> <hr> <h2 id="使用方式">使用方式</h2> <h3 id="1-試驗瀏覽器的前綴標示">1. 試驗瀏覽器的前綴標示</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></code></pre></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">// In the following line, you should include the prefixes of implementations you want to test. </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">indexedDB</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">indexedDB</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">mozIndexedDB</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitIndexedDB</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">msIndexedDB</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// DON&#39;T use &#34;var indexedDB = ...&#34; if you&#39;re not in a function. </span></span></span><span class="line"><span class="cl"><span class="c1">// Moreover, you may need references to some window.IDB* objects: </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">IDBTransaction</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">IDBTransaction</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitIDBTransaction</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">msIDBTransaction</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">IDBKeyRange</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">IDBKeyRange</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitIDBKeyRange</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">msIDBKeyRange</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="c1">// (Mozilla has never prefixed these objects, so we don&#39;t need window.mozIDB*) </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></code></pre></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="o">!</span><span class="nb">window</span><span class="p">.</span><span class="nx">indexedDB</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">alert</span><span class="p">(</span><span class="s2">&#34;Your browser doesn&#39;t support a stable version of IndexedDB. Such and such feature will not be available.&#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><h3 id="2-開啟資料庫">2. 開啟資料庫</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="c1">// Let us open database </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">let</span> <span class="nx">request</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">indexedDB</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">&#34;DB名稱&#34;</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">request</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Do something with request.errorCode! </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">request</span><span class="p">.</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Do something with request.result! </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>open()</code>方法會回傳一個<a class="link" href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBOpenDBRequest" target="_blank" rel="noopener" >IDBOpenDBRequest</a>物件，這個物件擁有兩個事件(<code>success</code> 和 <code>error</code>)。大部分IndexedDB的非同步功能都會回傳一個<a class="link" href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabase" target="_blank" rel="noopener" >IDBDatabase</a>類物件，然後我們可以註冊成功和失敗事件處理器。</li> <li><code>.open()</code>方法第二個參數是資料庫版本，資料庫版本決定了資料庫結構，也就是資料庫物件存檔的結構。如果請求版本不存在(比如因為這是一個新資料庫或是資料庫版本已升級)，<code>onupgradeneeded</code>事件會被觸發，然後我們可以在<code>onupgradeneeded</code>事件處理器中再建立新的版本，下面<a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB#Updating_the_version_of_the_database" target="_blank" rel="noopener" >升級資料庫版本</a>有更詳細的說明。</li> </ul> <h3 id="3-使用資料鍵產生器">3. 使用資料鍵產生器</h3> <ul> <li>當建立物件存檔時設定<code>autoIncrement</code>旗標為<code>ture</code>將啟動資料鍵產生器，預設上該旗標為<code>false</code>。</li> <li>有了資料鍵產生器，當新增資料到物件存檔中，資料鍵產生器會自動幫我們產生資料鍵。資料鍵產生器產生的資料鍵由整數1開始，而基本上新產生的資料鍵是由前一個資料鍵加1產生。資料鍵的產生不會因為資料刪除或清空所有資料而重新開始起算，所以資料鍵值是一直累加上去的，除非資料庫操作中斷，整個交易作業被取消。</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></code></pre></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">// Open the indexedDB. </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">indexedDB</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">dbName</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">request</span><span class="p">.</span><span class="nx">onupgradeneeded</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</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">db</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Create another object store called &#34;names&#34; with the autoIncrement flag set as true. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">var</span> <span class="nx">objStore</span> <span class="o">=</span> <span class="nx">db</span><span class="p">.</span><span class="nx">createObjectStore</span><span class="p">(</span><span class="s2">&#34;names&#34;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">autoIncrement</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">// Because the &#34;names&#34; object store has the key generator, the key for the name value is generated automatically. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// The added records would be like: </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// key : 1 =&gt; value : &#34;Bill&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// key : 2 =&gt; value : &#34;Donna&#34; </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="k">in</span> <span class="nx">customerData</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">objStore</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">customerData</span><span class="p">[</span><span class="nx">i</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></code></pre></td></tr></table> </div> </div><p>關於資料鍵產生器細節，請參考<a class="link" href="http://www.w3.org/TR/IndexedDB/#key-generator-concept" target="_blank" rel="noopener" >&ldquo;W3C Key Generators&rdquo;</a>。</p> <h3 id="4-新增和刪除資料">4. 新增和刪除資料</h3> <ul> <li>在操作資料庫之前必須要先進行交易，交易來自資料庫物件，在交易中要指定涵蓋物件存檔範圍，然後也要決定是要變更資料庫或純粹讀取資料。</li> <li>交易共有三種種類，分別是讀取(read-only)，讀寫(read/write), 以及版本變更(versionchange)，如果只需要讀資料最好只使用讀取(read-only)交易，因為讀取(read-only)交易可以多重同步進行。</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></code></pre></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">transaction</span> <span class="o">=</span> <span class="nx">db</span><span class="p">.</span><span class="nx">transaction</span><span class="p">([</span><span class="s2">&#34;customers&#34;</span><span class="p">],</span> <span class="s2">&#34;readwrite&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="c1">// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of &#34;readwrite&#34;. </span></span></span><span class="line"><span class="cl"><span class="c1">// In case you want to support such an implementation, you can just write: </span></span></span><span class="line"><span class="cl"><span class="c1">// var transaction = db.transaction([&#34;customers&#34;], IDBTransaction.READ_WRITE); </span></span></span></code></pre></td></tr></table> </div> </div><ul> <li>呼叫 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase#transaction" target="_blank" rel="noopener" >transaction()</a> 方法會回傳一個交易物件。<code>transaction()</code>第一個接受參數代表交易涵蓋的物件存檔，雖然傳入空陣列會讓交易涵蓋所有物件存檔，但請不要這麼做，因為根據正式標準傳入空陣列應該要導致InvalidAccessError錯誤；第二個參數代表交易種類，不傳入的話預設為讀取交易，本例要寫入資料庫所以傳入讀寫(&ldquo;readwrite&rdquo;)。</li> <li>交易的生命週期和事件循環關係密切。當我們發起交易又回到事件循環中後，如果忽略，那麼交易將轉成結束，唯一保持交易存活的方法是在交易上發出請求；當請求完成後我們會收到DOM事件，假設請求結果成功，我們可以在事件的回呼函數(callback中)繼續進行交易，反之，如果我們沒有繼續進行交易，那麼交易將結束，也就是說只要尚有未完成請求的話，交易就會繼續存活，如果收到TRANSACTION_INACTIVE_ERR錯誤那便意謂著交易早已結束，我們錯過了繼續進行交易的機會。</li> <li>交易能收到三種事件: <code>錯誤(error)</code>、<code>中斷(abort)</code>以及<code>完成(complete)</code>，其中錯誤事件會向上傳遞，所以任何一個交易下轄的請求產生錯誤事件，該交易都會收到。如果交易收到錯誤事件時，瀏覽器預設行為會中斷交易，除非我們有在錯誤事件上呼叫<code>preventDefault()</code>阻擋瀏覽器預設行動，否則整筆交易都將取消、復原，這樣的設計告訴我們必須要思考如何處裡錯誤，或者說如果對每一個錯誤進行處裡過於麻煩，那麼至少加入一個概括性的錯誤處理器也是可以。只要不處裡錯誤或呼叫<code>abort()</code>，交易將取消、復原，然後中斷事件接著觸發，反之，當所有請求都完成後，我們會收到一個完成事件，所以說如果我們同時發起多項請求時，可以只追蹤單一交易而非個別請求，這樣會大大減輕我們的負擔。</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></code></pre></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">// Do something when all the data is added to the database. </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">transaction</span><span class="p">.</span><span class="nx">oncomplete</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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;All done!&#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">transaction</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Don&#39;t forget to handle errors! </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">var</span> <span class="nx">objectStore</span> <span class="o">=</span> <span class="nx">transaction</span><span class="p">.</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;customers&#34;</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="k">in</span> <span class="nx">customerData</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">request</span> <span class="o">=</span> <span class="nx">objectStore</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">customerData</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">request</span><span class="p">.</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// event.target.result == customerData[i].ssn; </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>呼叫 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#add%28%29" target="_blank" rel="noopener" >add()</a> 方法可以加入一筆新資料，呼叫後會回傳一個<a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBRequest" target="_blank" rel="noopener" >IDBRequest</a>物件，即為上方範例中的request，如果新增成功，request的成功事件會被觸發，而成功事件物件中有一個result屬性，這個result值剛好就等於新資料的資料鍵，所以說上方範例中的event.target.result剛好就等於顧客的ssn值(因為我們用ssn屬性作為資料鍵路徑)。請注意add方法只在當物件存檔中沒有相同資料鍵資料存在時有用，如果想要更動或是直接覆蓋現存資料請呼叫put方法。</li> </ul> <h3 id="5-移除資料">5. 移除資料</h3> <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></code></pre></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">request</span> <span class="o">=</span> <span class="nx">db</span><span class="p">.</span><span class="nx">transaction</span><span class="p">([</span><span class="s2">&#34;customers&#34;</span><span class="p">],</span> <span class="s2">&#34;readwrite&#34;</span><span class="p">).</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;customers&#34;</span><span class="p">).</span><span class="k">delete</span><span class="p">(</span><span class="s2">&#34;444-44-4444&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">request</span><span class="p">.</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// It&#39;s gone! </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="6-讀取資料">6. 讀取資料</h3> <h5 id="要取資料庫內的資料有數種途徑第一個最簡單的途徑就是提供資料鍵呼叫-get-方法取得資料">要取資料庫內的資料有數種途徑，第一個最簡單的途徑就是提供資料鍵，呼叫 <a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#get%28%29" target="_blank" rel="noopener" >get()</a> 方法取得資料：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span 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">var</span> <span class="nx">transaction</span> <span class="o">=</span> <span class="nx">db</span><span class="p">.</span><span class="nx">transaction</span><span class="p">([</span><span class="s2">&#34;customers&#34;</span><span class="p">]);</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">objectStore</span> <span class="o">=</span> <span class="nx">transaction</span><span class="p">.</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;customers&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="kd">var</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">objectStore</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&#34;444-44-4444&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">request</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Handle errors! </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">request</span><span class="p">.</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Do something with the request.result! </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">alert</span><span class="p">(</span><span class="s2">&#34;Name for SSN 444-44-4444 is &#34;</span> <span class="o">+</span> <span class="nx">request</span><span class="p">.</span><span class="nx">result</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></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></code></pre></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">db</span><span class="p">.</span><span class="nx">transaction</span><span class="p">(</span><span class="s2">&#34;customers&#34;</span><span class="p">).</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;customers&#34;</span><span class="p">).</span><span class="nx">get</span><span class="p">(</span><span class="s2">&#34;444-44-4444&#34;</span><span class="p">).</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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;Name for SSN 444-44-4444 is &#34;</span> <span class="o">+</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</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></code></pre></td></tr></table> </div> </div><ul> <li>呼叫 transcation 方法而不指定模式會開啟讀取(readonly)模式，接著取得我們的目標物件存檔，輸入目標資料的資料鍵，呼叫get方法取得請求物件，然後在請求物件上註冊成功事件處理器，當作業成功後，成功事件會觸發，成功事件的物件中含有請求物件(event.target如上述範例)，請求物件中含有請求結果(event.target.result如上述範例)。</li> </ul> <h3 id="7-使用指標cursor">7. 使用指標(Cursor)</h3> <h5 id="使用get方法需要知道資料鍵如果想要一一存取物件存檔中的資料我們可以利用指標">使用get方法需要知道資料鍵，如果想要一一存取物件存檔中的資料，我們可以利用指標：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span 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">objectStore</span> <span class="o">=</span> <span class="nx">db</span><span class="p">.</span><span class="nx">transaction</span><span class="p">(</span><span class="s2">&#34;customers&#34;</span><span class="p">).</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;customers&#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">objectStore</span><span class="p">.</span><span class="nx">openCursor</span><span class="p">().</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">cursor</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</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">cursor</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;Name for SSN &#34;</span> <span class="o">+</span> <span class="nx">cursor</span><span class="p">.</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&#34; is &#34;</span> <span class="o">+</span> <span class="nx">cursor</span><span class="p">.</span><span class="nx">value</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">cursor</span><span class="p">.</span><span class="k">continue</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="s2">&#34;No more entries!&#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><ul> <li><a class="link" href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#openCursor%28%29" target="_blank" rel="noopener" >openCursor</a> 方法第一個參數用來接受資料鍵範圍物件來限制存取資料範圍，第二個參數用來指定存取進行方向，像上面的範例程式便是以資料鍵由小到大之方向存取資料；呼叫openCursor方法後一樣會回傳一個請求物件，成功時成功事件會觸發，不過這裡有些地方要特別注意，當成功事件處裡函數被喚起時，指標物件(cursor)會存放在result屬性內(亦即上述event.target.result)，cursor物件下有兩個屬性，key屬性是資料鍵，value屬性是資料值，如果要取得下一份資料就呼叫cursor的continue()方法，然後cursor物件就會指向下一份資料，當沒有資料時，cursor會是undefined，當請求一開始便找沒有資料，result屬性也會是undefined。</li> </ul> <h5 id="以下用cursor存取一遍資料後放在陣列中的作法相當常見">以下用cursor存取一遍資料後放在陣列中的作法相當常見：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span 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">customers</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">objectStore</span><span class="p">.</span><span class="nx">openCursor</span><span class="p">().</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">cursor</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</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">cursor</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">customers</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">cursor</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">cursor</span><span class="p">.</span><span class="k">continue</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="s2">&#34;Got all customers: &#34;</span> <span class="o">+</span> <span class="nx">customers</span><span class="p">);</span> </span></span><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><span class="focus">Warning: 以下範例不是IndexedDB標準!</span></p> <h5 id="mozilla瀏覽器自己做了一個-getall-方法來方便一次取得所有cursor下的資料值這個方法相當方便不過請小心未來它有可能會消失以下程式碼的效果和上面的一樣">Mozilla瀏覽器自己做了一個 <code>getAll()</code> 方法來方便一次取得所有cursor下的資料值，這個方法相當方便，不過請小心未來它有可能會消失。以下程式碼的效果和上面的一樣：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><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">objectStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">().</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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;Got all customers: &#34;</span> <span class="o">+</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</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></code></pre></td></tr></table> </div> </div><ul> <li>一一檢查cursor的value屬性較不利性能表現，因為物件是被動一一建立，然而呼叫 <code>getAll()</code>，Gecko一定要一次建立所有物件，所以如果想要一次取得所有物件的資料值陣列使用 <code>getAll()</code> 比較好，如果想要一一檢查每筆資料則請利用cursor的方法。</li> </ul> <h3 id="8-使用索引">8. 使用索引</h3> <ul> <li>利用一定唯一的ssn碼作為資料鍵相當合乎邏輯(隱私權的問題先擱置一放，不在本文探討範圍)。不過當我們想要查詢使用者的名字的時候，如果沒有索引就需要一一檢查每一筆資料，十分沒有效率，所以我們可以建立name的索引。</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">index</span> <span class="o">=</span> <span class="nx">objectStore</span><span class="p">.</span><span class="nx">index</span><span class="p">(</span><span class="s2">&#34;name&#34;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="nx">index</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&#34;Donna&#34;</span><span class="p">).</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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;Donna&#39;s SSN is &#34;</span> <span class="o">+</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">.</span><span class="nx">ssn</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>因為 name 不是唯一值，所以可能會有多筆資料符合&quot;Donna&quot;名字，此時呼叫 <code>get()</code> 會取得資料鍵最小值的資料。</li> </ul> <h3 id="9-設定指標查詢範圍和方向">9. 設定指標查詢範圍和方向</h3> <ul> <li>如果想要限定指標查詢範圍，那麼在乎叫 <code>openCursor()</code> 或 <code>openKeyCursor()</code> 時第一個參數要傳入 <a class="link" href="https://developer.mozilla.org/en/IndexedDB/IDBKeyRange" target="_blank" rel="noopener" >IDBKeyRange</a> 物件以限制範圍。IDBKeyRange物件能夠只聚焦在單一資料鍵上或者一段上下限區間；上下限區間可以是封閉(含界限)或開放(不含界限)，請看以下範例：</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="c1">// Only match &#34;Donna&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">singleKeyRange</span> <span class="o">=</span> <span class="nx">IDBKeyRange</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="s2">&#34;Donna&#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">// Match anything past &#34;Bill&#34;, including &#34;Bill&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">lowerBoundKeyRange</span> <span class="o">=</span> <span class="nx">IDBKeyRange</span><span class="p">.</span><span class="nx">lowerBound</span><span class="p">(</span><span class="s2">&#34;Bill&#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">// Match anything past &#34;Bill&#34;, but don&#39;t include &#34;Bill&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">lowerBoundOpenKeyRange</span> <span class="o">=</span> <span class="nx">IDBKeyRange</span><span class="p">.</span><span class="nx">lowerBound</span><span class="p">(</span><span class="s2">&#34;Bill&#34;</span><span class="p">,</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">// Match anything up to, but not including, &#34;Donna&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">upperBoundOpenKeyRange</span> <span class="o">=</span> <span class="nx">IDBKeyRange</span><span class="p">.</span><span class="nx">upperBound</span><span class="p">(</span><span class="s2">&#34;Donna&#34;</span><span class="p">,</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">// Match anything between &#34;Bill&#34; and &#34;Donna&#34;, but not including &#34;Donna&#34; </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">var</span> <span class="nx">boundKeyRange</span> <span class="o">=</span> <span class="nx">IDBKeyRange</span><span class="p">.</span><span class="nx">bound</span><span class="p">(</span><span class="s2">&#34;Bill&#34;</span><span class="p">,</span> <span class="s2">&#34;Donna&#34;</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</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">index</span><span class="p">.</span><span class="nx">openCursor</span><span class="p">(</span><span class="nx">boundKeyRange</span><span class="p">).</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">cursor</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</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">cursor</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Do something with the matches. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">cursor</span><span class="p">.</span><span class="k">continue</span><span class="p">();</span> </span></span><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="有時候我們會想要由大到小查看資料而非預設由小到大方向傳入第二個prev字串便能做到">有時候我們會想要由大到小查看資料而非預設由小到大方向，傳入第二個&quot;prev&quot;字串便能做到：</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span 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">objectStore</span><span class="p">.</span><span class="nx">openCursor</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">&#34;prev&#34;</span><span class="p">).</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">cursor</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</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">cursor</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Do something with the entries. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">cursor</span><span class="p">.</span><span class="k">continue</span><span class="p">();</span> </span></span><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="由於name索引不具唯一性所以一個名字下可能會出現多筆資料此時如果想要避開這多筆資料請傳入nextunique或prevunique做為第二個方向參數當傳入之後如一個名字下遇到多筆資料則只有資料鍵最小的資料會被回傳">由於&quot;name&quot;索引不具唯一性，所以一個名字下可能會出現多筆資料，此時如果想要避開這多筆資料，請傳入&quot;nextunique&quot;或&quot;prevunique&quot;做為第二個方向參數，當傳入之後，如一個名字下遇到多筆資料，則只有資料鍵最小的資料會被回傳。</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span 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">index</span><span class="p">.</span><span class="nx">openKeyCursor</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">&#34;nextunique&#34;</span><span class="p">).</span><span class="nx">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">cursor</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</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">cursor</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Do something with the entries. </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">cursor</span><span class="p">.</span><span class="k">continue</span><span class="p">();</span> </span></span><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://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants" target="_blank" rel="noopener" >IDBCursor</a>常數。</p> <hr> <h2 id="安全性">安全性</h2> <ul> <li>IndexedDB遵守<a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" target="_blank" rel="noopener" >同源政策</a>，所以它綁定創建它的來源網站，其他來源網站無法存取。</li> <li>就像對載入 <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/frame" target="_blank" rel="noopener" >&lt;frame&gt;</a> 和 <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/frame" target="_blank" rel="noopener" >&lt;iframe&gt;</a> 網頁的第三方cookie所設下的安全性和隱私權考量限制，IndexedDB無法在載入 <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/frame" target="_blank" rel="noopener" >&lt;frame&gt;</a> 和 <a class="link" href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/frame" target="_blank" rel="noopener" >&lt;iframe&gt;</a> 網頁上運作，詳情請見 <a class="link" href="https://bugzilla.mozilla.org/show_bug.cgi?id=595307" target="_blank" rel="noopener" >bug 595307</a>。</li> </ul> <hr> <h2 id="瀏覽器關閉風險">瀏覽器關閉風險</h2> <h5 id="當瀏覽器關閉例如使用者按下關閉鈕任何未完成indexeddb交易都將默默中止這些交易不會完成錯誤事件也不會觸發既然瀏覽器可能隨時被關閉我們無法完全指望任何特定交易一定會完成或是依賴錯誤事件做出相應處理針對這種狀況我們需要注意">當瀏覽器關閉，例如使用者按下關閉鈕，任何未完成IndexedDB交易都將默默中止，這些交易不會完成，錯誤事件也不會觸發。既然瀏覽器可能隨時被關閉，我們無法完全指望任何特定交易一定會完成，或是依賴錯誤事件做出相應處理，針對這種狀況，我們需要注意：</h5> <ol> <li>每一筆交易結束後都應該要保持資料庫完整性，例如說，有一串使用者編輯項目清單正要存入資料庫，我們如果先在一個交易中清除舊清單，然後在另一個交易中存入新清單，那就會面臨到清除完就清單後，新清單存入交易還來不及回存，瀏覽器就關閉的風險，而這個時候資料庫裡面的清單資料將消失。所以比較好的做法應該是在同一筆交易中完成清除舊清單和存入新清單。</li> <li>永遠不要在unload事件中執行資料庫交易，因為如果unload事件是觸發在瀏覽器關閉下，任何資料庫交易都不會發生，或許，瀏覽器(或分頁)打開時讀取資料庫，更新資料庫當使用者編輯資料，當瀏覽器(或分頁)關閉時儲存資料這樣的做法比較直覺，不過資料庫的操作是非同步進行地，所以瀏覽器關閉的執行會在資料庫操作前發生，進而中斷後續非同步的資料庫交易，所以在unload事件中執行資料庫交易是行不通地。</li> </ol> <ul> <li>事實上不論瀏覽器是否正常關閉，都沒有任何方法保證IndexedDB交易能夠順利完成，請見 <a class="link" href="https://bugzilla.mozilla.org/show_bug.cgi?id=870645" target="_blank" rel="noopener" >bug 870645</a>。</li> </ul> <hr> <h2 id="範例練習將聊天室推播訊息寫進-indexeddb">範例練習：將聊天室推播訊息寫進 IndexedDB</h2> <ul> <li>建立db.js，並將操作 IndexedDB 整合至檔案中。</li> <li>vue檔引入db.js，並一次僅撈最新50筆資料。</li> </ul> <h5 id="dbjs">db.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></code></pre></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">// 回傳是否支援 IndexedDB </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="kd">function</span> <span class="nx">isSupportDB</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">indexedDB</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">indexedDB</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitIndexedDB</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">mozIndexedDB</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">msIndexedDB</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="o">!!</span><span class="nx">indexedDB</span> </span></span><span class="line"><span 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建立DB </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="kd">function</span> <span class="nx">openDB</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="kr">const</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">indexedDB</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">&#34;ChatDB&#34;</span><span class="p">)</span> <span class="c1">// 打開or建立聊天室DB </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">request</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="nx">e</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;idb create fail&#34;</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="nx">request</span><span class="p">.</span><span class="nx">onsuccess</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="s2">&#34;idb create success&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">DBObject</span> <span class="o">=</span> <span class="nx">request</span><span class="p">.</span><span class="nx">result</span> </span></span><span class="line"><span class="cl"> <span class="nx">resolve</span><span class="p">(</span><span class="nx">DBObject</span><span class="p">)</span> <span class="c1">// 成功後返回DB物件 </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">request</span><span class="p">.</span><span class="nx">onupgradeneeded</span> <span class="o">=</span> <span class="nx">e</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 若版本已升級則重新建立DB物件，並返回DB物件 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">DBObject</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span> </span></span><span class="line"><span class="cl"> <span class="nx">DBObject</span><span class="p">.</span><span class="nx">createObjectStore</span><span class="p">(</span><span class="s2">&#34;chatData&#34;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">keyPath</span><span class="o">:</span> <span class="s2">&#34;index&#34;</span><span class="p">,</span> <span class="nx">autoIncrement</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">resolve</span><span class="p">(</span><span class="nx">DBObject</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span 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">// 取歷史聊天紀錄最新50筆 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="kd">function</span> <span class="nx">getHistory</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">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="kr">const</span> <span class="nx">objectStore</span> <span class="o">=</span> <span class="nx">DBObject</span><span class="p">.</span><span class="nx">transaction</span><span class="p">([</span><span class="s2">&#34;chatData&#34;</span><span class="p">],</span> <span class="s2">&#34;readonly&#34;</span><span class="p">).</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;chatData&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">getKey</span> <span class="o">=</span> <span class="nx">objectStore</span><span class="p">.</span><span class="nx">getAllKeys</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="nx">getKey</span><span class="p">.</span><span class="nx">onsuccess</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="kd">let</span> <span class="nx">result</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">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">getKey</span><span class="p">.</span><span class="nx">result</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="nx">num</span> <span class="o">*</span> <span class="mi">50</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="nx">getKey</span><span class="p">.</span><span class="nx">result</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="nx">num</span> <span class="o">*</span> <span class="mi">50</span> <span class="o">-</span> <span class="mi">50</span> <span class="o">-</span> <span class="mi">1</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">getItem</span> <span class="o">=</span> <span class="nx">objectStore</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">getKey</span><span class="p">.</span><span class="nx">result</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">getItem</span><span class="p">.</span><span class="nx">onsuccess</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">result</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="nx">getItem</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">resolve</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></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">// const request = DBObject.transaction([&#34;chatData&#34;], &#34;readonly&#34;).objectStore(&#34;chatData&#34;).getAll() </span></span></span><span class="line"><span class="cl"><span class="c1"></span> </span></span><span class="line"><span class="cl"> <span class="c1">// request.onsuccess = () =&gt; { </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// resolve(request.result) </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><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// 收到推播將訊息寫入idb </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="kd">function</span> <span class="nx">addToDB</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="kr">const</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">DBObject</span><span class="p">.</span><span class="nx">transaction</span><span class="p">([</span><span class="s2">&#34;chatData&#34;</span><span class="p">],</span> <span class="s2">&#34;readwrite&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">request</span><span class="p">.</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;chatData&#34;</span><span class="p">).</span><span class="nx">add</span><span class="p">(</span><span class="nx">data</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">request</span><span class="p">.</span><span class="nx">onsuccess</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></span><span class="line"><span class="cl"> <span class="nx">request</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</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="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span 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">// 清除idb聊天紀錄 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">export</span> <span class="kd">function</span> <span class="nx">clearDB</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">request</span> <span class="o">=</span> <span class="nx">DBObject</span><span class="p">.</span><span class="nx">transaction</span><span class="p">([</span><span class="s2">&#34;chatData&#34;</span><span class="p">],</span> <span class="s2">&#34;readwrite&#34;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">request</span><span class="p">.</span><span class="nx">objectStore</span><span class="p">(</span><span class="s2">&#34;chatData&#34;</span><span class="p">).</span><span class="nx">clear</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="chatroomvue">chatroom.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></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></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="o">*</span> <span class="nx">as</span> <span class="nx">idb</span> <span class="nx">from</span> <span class="s2">&#34;@/utils/db&#34;</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">data</span><span class="o">:</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">msgData</span><span class="o">:</span> <span class="p">[],</span> </span></span><span class="line"><span class="cl"> <span class="nx">historyRange</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">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">getHistory</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">historyRange</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 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">getHistory</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">if</span> <span class="p">(</span><span class="nx">idb</span><span class="p">.</span><span class="nx">isSupportDB</span><span class="p">())</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 若支援則開啟DB，並待回傳後撈資料 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">idb</span><span class="p">.</span><span class="nx">openDB</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">idb</span><span class="p">.</span><span class="nx">getHistory</span><span class="p">(</span><span class="nx">num</span><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="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">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">msgData</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="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">msgData</span> <span class="o">=</span> <span class="nx">result</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">result</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">item</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c1">// 將撈到的資料由前塞入msgData </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">msgData</span><span class="p">.</span><span class="nx">unshift</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 class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">historyRange</span><span class="o">++</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="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="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">add</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">idb</span><span class="p">.</span><span class="nx">addToDB</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="nx">clearDB</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">idb</span><span class="p">.</span><span class="nx">clearDB</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</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>