https://blog.wayne-project.com/categories/others/Recent content in 其他 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-08/different-in-localhost-ip/Wed, 08 Feb 2023 00:00:00 +0000https://blog.wayne-project.com/2023-02-08/different-in-localhost-ip/<img src="https://live.staticflickr.com/65535/52675709862_d54358fb30_o.jpg" alt="Featured image of post 你/妳真的了解 127.0.0.1 與 0.0.0.0 的區別？" /><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="http://www.52im.net/thread-3590-1-1.html" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="http://www.52im.net/topic-tcpipvol1.html" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://blog.csdn.net/huaying927/article/details/87625028" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="http://www.52im.net/thread-2928-1-1.html" target="_blank" rel="noopener" >參考網站</a></p> <hr> <h2 id="前言">前言</h2> <p>對於工程師來說，127.0.0.1 與 0.0.0.0 這兩個IP地址再熟悉不過了，看起來好像就那麼回事，但真正較起真來，這兩個IP地址到底有什麼作用以及到底有什麼不同？貌似誰可以輕鬆回答，但張嘴卻又不知從何說起&hellip;(這要是面試，估計真會被這搞砸&hellip;)</p> <p>本文將系統地總結 127.0.0.1 和 0.0.0.0 這兩個IP地址的作用，以及它們之間的區別，希望能為你解惑。</p> <p><img src="https://live.staticflickr.com/65535/52676713038_5475fa3a18_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <hr> <h2 id="ip地址分類">IP地址分類</h2> <p>我們先回顧一下IP地址的基礎知識（本節內容僅作快速概覽，如您對IP地址知識一無所知，建議首先閱讀《<a class="link" href="https://blog.csdn.net/huaying927/article/details/87625028" target="_blank" rel="noopener" >IP地址和子網劃分學習筆記之《IP地址詳解》</a>》）。</p> <h3 id="ip地址表示">IP地址表示</h3> <p>IP地址由兩個部分組成，<strong>net-id</strong> 和 <strong>host-id</strong>，即<code>網絡號</code>和<code>主機號</code>：</p> <ol> <li>net-id： 表示 ip 地址所在的<strong>網絡號</strong>。</li> <li>host-id： 表示 ip 地址所在網絡中的某個<strong>主機號碼</strong>。</li> </ol> <p>即：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">IP-address ::<span class="o">=</span> <span class="o">{</span> &lt;Network-ID&gt;, &lt;Host-ID&gt;<span class="o">}</span> </span></span></code></pre></td></tr></table> </div> </div><p>就像下圖這樣：</p> <p><img src="https://live.staticflickr.com/65535/52676220246_ff6aacfcdf_o.png" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <h3 id="ip地址分類-1">IP地址分類</h3> <p>IP地址一共分為5類，即<code>A～E</code>，它們分類的依據是其 <strong>net-id</strong> 所佔的字節長度以及網絡號前幾位。</p> <p>大致分類如下：</p> <ol> <li>A類地址： 網絡號佔1個字節，網絡號的第一位固定為0。</li> <li>B類地址： 網絡號佔2個字節，網絡號的前兩位固定為10。</li> <li>C類地址： 網絡號佔3個字節，網絡號的前三位固定位110。</li> <li>D類地址： 前四位是1110，用於多播(multicast)，即一對多通信。</li> <li>E類地址： 前四位是1111，保留為以後使用。</li> </ol> <p>其中，A、B、C 三類地址為<code>單播地址</code>（unicast)，用於一對一通信，是最常用的。</p> <p><strong>IP地址分類</strong>看下面這張圖，可能更直接一些：</p> <p><img src="https://live.staticflickr.com/65535/52676649305_568b686eb1_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>（上圖來源於《<a class="link" href="https://blog.csdn.net/huaying927/article/details/87625028" target="_blank" rel="noopener" >IP地址和子網劃分學習筆記之《IP地址詳解》</a>》）</p> <p>這裡還有一張<strong>IP地址分類的思維導圖</strong>：</p> <p><img src="https://live.staticflickr.com/65535/52676649285_5e12904ba4_o.jpg" max-width="100%" max-height="100%" class="gallery-image" loading="lazy" ></p> <p>（上圖來源於《<a class="link" href="https://blog.csdn.net/huaying927/article/details/87625028" target="_blank" rel="noopener" >IP地址和子網劃分學習筆記之《IP地址詳解》</a>》）</p> <h3 id="特殊ip地址">特殊IP地址</h3> <p><strong>特殊IP地址</strong>就是用來做一些特殊的事情。<a class="link" href="https://datatracker.ietf.org/doc/rfc1700/" target="_blank" rel="noopener" >RFC1700</a>中定義了以下特殊IP地址：</p> <ol> <li><code>{0,0}</code>： 網絡號和主機號都全部為0，表示&quot;<strong>本網絡上的本主機</strong>&quot;，只能用作源地址。</li> <li><code>{0，host-id}</code>： 本網絡上的某台主機。只能用作源地址。</li> <li><code>{-1,-1}</code>： 表示網絡號和主機號的所有位上都是 1（二進制），用於本網絡上的廣播，只能用作目的地址，發到該地址的數據包不能轉發到源地址所在網絡之外。</li> <li><code>{net-id,-1}</code>： 直接廣播到指定的網絡上。只能用作目的地址。</li> <li><code>{net-id,subnet-id,-1}</code>： 直接廣播到指定網絡的指定子網絡上。只用作目的地址。</li> <li><code>{net-id,-1,-1}</code>： 直接廣播到指定網絡的所有子網絡上。只能用作目的地址。</li> <li><code>{127,}</code>： 即網絡號為 127 的任意 ip 地址。都是內部主機<strong>回環地址</strong>(loopback)，永遠都不能出現在主機外部的網絡中。</li> </ol> <p>具體來說，特殊的IP地址，主要是以下這些：</p> <ol> <li> <p><code>0.0.0.0</code>：<br> 嚴格說來，0.0.0.0 已經不是一個真正意義上的IP地址了。它表示的是這樣一個<strong>集合</strong>：<strong>所有不清楚的主機和目的網絡</strong>。這裡的&quot;<strong>不清楚</strong>&ldquo;是指在本機的路由表裡沒有特定條目指明如何到達。對本機來說，它就是一個&rdquo;<strong>收容所</strong>&quot;，所有不認識的&quot;三無&quot;人員，一律送進去。如果你在網絡設置中設置了缺省網關，那麼 Windows 系統會自動產生一個目的地址為 0.0.0.0 的缺省路由。</p> </li> <li> <p><code>255.255.255.255</code>：<br> <strong>限制廣播地址</strong>。對本機來說，這個地址指本網段內(同一廣播域)的所有主機。如果翻譯成人類的語言，應該是這樣：&ldquo;這個房間裡的所有人都注意了！&quot;，這個地址不能被路由器轉發。</p> </li> <li> <p><code>127.0.0.1</code>：<br> <strong>本機地址</strong>，主要用於測試。用漢語表示，就是&rdquo;<strong>我自己</strong>&quot;。在 Windows 系統中，這個地址有一個別名&quot;<strong>Localhost</strong>&quot;。尋址這樣一個地址，是不能把它發到網絡接口的。除非出錯，否則在傳輸介質上永遠不應該出現目的地址為 &ldquo;127.0.0.1&rdquo; 的數據包。</p> </li> <li> <p><code>224.0.0.1</code>：<br> <strong>組播地址</strong>，注意它和廣播的區別。從 224.0.0.0 到 239.255.255.255 都是這樣的地址。224.0.0.1 特指<strong>所有主機</strong>，224.0.0.2 特指<strong>所有路由器</strong>。這樣的地址多用於一些特定的程序以及多媒體程序。如果你的主機開啟了 IRDP (Internet路由發現協議，使用組播功能)功能，那麼你的主機路由表中應該有這樣一條路由。</p> </li> <li> <p><code>169.254.xx</code>：<br> 如果你的主機使用了 DHCP 功能自動獲得一個IP地址，那麼當你的 <strong>DHCP 服務器發生故障</strong>，或響應時間太長而超出了一個系統規定的時間，Windows 系統會為你分配這樣一個地址。如果你發現你的主機IP地址是一個諸如此類的地址，很不幸，十有八九是你的網絡不能正常運行了。</p> </li> <li> <p><code>10.xxx</code>、<code>172.16.xx～172.31.xx</code>、<code>192.168.xx</code>：<br> <strong>私有地址</strong>，這些地址被大量用於企業內部網絡中。一些寬帶路由器，也往往使用 192.168.1.1 作為<strong>缺省地址</strong>。私有網絡由於不與外部互連，因而可能使用隨意的IP地址。保留這樣的地址供其使用是為了避免以後接入公網時引起地址混亂。使用私有地址的私有網絡在接入 Internet 時，要使用<strong>地址翻譯</strong>(NAT)，將私有地址翻譯成公用合法地址。在 Internet 上，這類地址是不能出現的。</p> </li> </ol> <hr> <h2 id="127001-和-0000-的區別">127.0.0.1 和 0.0.0.0 的區別</h2> <h3 id="基本情況">基本情況</h3> <p>通過上節基礎知識的回顧，我們回到正題：<code>127.0.0.1 與 0.0.0.0 地址的區別是什麼？</code></p> <p>我們先來看下共同點：</p> <ol> <li>都屬於<strong>特殊地址</strong>。</li> <li>都屬於<strong>A類地址</strong>。</li> <li>都是<strong>IPV4</strong>地址。</li> </ol> <p>接下來我們分別看下這兩個地址的具體作用，就一目了解了。</p> <h3 id="0000">0.0.0.0</h3> <h4 id="說明">說明</h4> <p>IPV4中，<strong>0.0.0.0</strong> 地址被用於表示一個<strong>無效的</strong>、<strong>未知的</strong>或者<strong>不可用的</strong>目標：</p> <ol> <li>在服務器中： 0.0.0.0 指的是本機上的所有IPV4地址，如果一個主機有兩個IP地址，192.168.1.1 和 10.1.2.1，並且該主機上的一個服務監聽的地址是 0.0.0.0 ，那麼<strong>通過兩個ip地址都能夠訪問該服務</strong>。</li> <li>在路由中： 0.0.0.0 表示的是<strong>默認路由</strong>，即當<strong>路由表中沒有找到完全匹配的路由的時候</strong>所對應的路由。</li> </ol> <h4 id="用途總結">用途總結</h4> <ol> <li>當一台主機<strong>還沒有被分配</strong>一個IP地址的時候，用於表示主機本身（DHCP 分配IP地址的時候）。</li> <li>用作<strong>默認路由</strong>，表示&quot;<strong>任意IPV4主機</strong>&quot;。</li> <li>用來表示<strong>目標機器不可用</strong>。</li> <li>用作服務端，表示本機上的<strong>任意IPV4地址</strong>。</li> </ol> <h3 id="127001">127.0.0.1</h3> <h4 id="說明-1">說明</h4> <p>127.0.0.1 屬於 <code>{127,}</code> 集合中的一個，而所有網絡號為 127 的地址都被稱之為<strong>回環地址</strong>，所以<strong>回環地址</strong>不等於 127.0.0.1，它們是<code>包含</code>關係，即回環地址包含 127.0.0.1。</p> <h4 id="用途總結-1">用途總結</h4> <ol> <li>回環測試： 通過使用 <code>ping 127.0.0.1</code> 測試某台機器上的網絡設備，操作系統或者 TCP/IP 實現是否工作正常。</li> <li>DDos攻擊防禦： 網站收到 DDos 攻擊之後，將域名A記錄到 127.0.0.1，即讓攻擊者自己攻擊自己。</li> <li>程序測試： 大部分 Web 容器測試的時候綁定的本機地址。</li> </ol> <h4 id="回環地址的定義">回環地址的定義</h4> <p>所有發往該類地址的數據包都應該被 loop back。</p> <h3 id="bonus127001-與-localhost-的關係">BONUS：127.0.0.1 與 localhost 的關係</h3> <p>相比 127.0.0.1，localhost 具有更多的意義。</p> <p>localhost 是個<strong>域名</strong>，而不是一個ip地址。之所以我們經常把 localhost 與 127.0.0.1 認為是同一個是因為我們使用的大多數電腦上都講 localhost <strong>指向</strong>了 127.0.0.1 這個地址。</p> <p>在 ubuntu 系統中，<code>/ets/hosts</code> 文件中都會有如下內容：</p> <h5 id="etshosts">/ets/hosts</h5> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span 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-fallback" data-lang="fallback"><span class="line"><span class="cl">127.0.0.1 localhost </span></span><span class="line"><span class="cl">127.0.1.1 52im-aliyun </span></span><span class="line"><span class="cl"># The following lines are desirable for IPv6 capable hosts </span></span><span class="line"><span class="cl">::1 ip6-localhost ip6-loopback </span></span><span class="line"><span class="cl">fe00::0 ip6-localnet </span></span><span class="line"><span class="cl">ff00::0 ip6-mcastprefix </span></span><span class="line"><span class="cl">ff02::1 ip6-allnodes </span></span><span class="line"><span class="cl">ff02::2 ip6-allrouters </span></span></code></pre></td></tr></table> </div> </div><p>上面第一行是幾乎每台電腦上都會有的默認配置。但是 localhost 的意義並不局限於 127.0.0.1。</p> <p>localhost 是一個<strong>域名</strong>，用於指代 <strong>this computer</strong> 或者 <strong>this host</strong>，可以用它來獲取運行在本機上的網絡服務。</p> <p>在大多數系統中，localhost 被指向了 IPV4 的 <code>127.0.0.1</code> 和 IPV6 的<code>::1</code>：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">127.0.0.1 localhost </span></span><span class="line"><span class="cl">::1 localhost </span></span></code></pre></td></tr></table> </div> </div><p>所以，在使用的時候要注意確認IPV4還是IPV6。</p> <hr> <h2 id="結語">結語</h2> <p><code>127.0.0.1</code> 是一個<strong>環回地址</strong>，並不表示&quot;<strong>本機</strong>&quot;。</p> <p><code>0.0.0.0</code> 才是真正表示&quot;<strong>本網絡中的本機</strong>&quot;。</p> <p>在實際應用中：一般我們在服務端綁定端口的時候可以選擇綁定到 <code>0.0.0.0</code>，這樣我的服務訪問方就可以通過我的<strong>多個ip地址</strong>訪問我的服務。</p> <p>比如：我有一台服務器，一個外網地址A,一個內網地址B，如果我綁定的端口指定了 <code>0.0.0.0</code>，那麼通過內網地址或外網地址<strong>都可以訪問</strong>我的應用。</p> <p>但是如果我只綁定了內網地址，那麼通過外網地址就不能訪問。所以如果綁定 <code>0.0.0.0</code>，也有一定安全隱患，對於只需要內網訪問的服務，可以只綁定內網地址。</p> <hr>https://blog.wayne-project.com/2023-01-07/single-multi-thread/Sat, 07 Jan 2023 00:00:00 +0000https://blog.wayne-project.com/2023-01-07/single-multi-thread/<img src="https://live.staticflickr.com/65535/52611539777_c564013cbd_o.png" 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://samknows.one/hc/en-gb/articles/115003164305-What-is-the-difference-between-Single-and-Multi-Thread-" target="_blank" rel="noopener" >參考網站</a><br> <a class="link" href="https://www.twblogs.net/a/5b8d26df2b717718833be03a" target="_blank" rel="noopener" >參考網站</a></p> <p>以生活例子說明單線程與多線程。</p> <hr> <h2 id="程序設計的目標">程序設計的目標</h2> <p>在我看來單從程序的角度來看，一個好的程序的目標應該是性能與用戶體驗的平衡。當然一個程序是否能夠滿足用戶的需求暫且不談，這是業務層面的問題，我們僅僅討論程序本身。圍繞兩點來展開，性能與用戶體驗。</p> <ul> <li>性能：高性能的程序應該可以等同於CPU的利用率，CPU的利用率越高(一直在工作，沒有閒下來的時候)，程序的性能越高。</li> <li>體驗：這裏的體驗不只是界面多麼漂亮，功能多麼順手，這裏的體驗指程序的響應速度，響應速度越快，用戶體驗越好。</li> </ul> <p>下面我們就這兩點進行各種模型的討論。</p> <hr> <h2 id="單線程多任務無阻塞">單線程多任務無阻塞</h2> <p>以生活中食堂打飯的場景作爲比喻，假設有這樣的場景，小A，小B，小C 在窗口依次排隊打飯。</p> <p>假設窗口負責打飯的阿姨打一個菜需要耗時1秒。如果小A需要2個菜，小B需要3個菜，小C需要2個菜。如下：</p> <ul> <li>阿姨(CPU)：打一個菜需要1秒</li> <li>小A：2個菜</li> <li>小B：3個菜</li> <li>小C：2個菜</li> </ul> <p>那麼在這種模型下將所有服務做完阿姨需要耗時 2 + 3 + 2 = <strong>7秒</strong></p> <p>阿姨 = CPU，小A、小B、小C = 任務(這裏是以任務爲概念，表示需要做一些事情)</p> <p>這種模型下CPU是滿負荷不間斷運轉的，沒有空閒，用戶體驗還不錯。</p> <p>這種程序中每個任務的耗時都比較小，是非常理想的狀態，一般情況下基本不太可能存在。</p> <hr> <h2 id="單線程多任務io阻塞">單線程多任務IO阻塞</h2> <p>將上面的場景稍微做改動：</p> <ul> <li>阿姨：打一個菜需要1秒</li> <li>小A：2個菜，但是忘記帶錢了，要找同學送過來，估計需要等5分鐘可以送到(可以理解爲磁盤IO)</li> <li>小B：3個菜</li> <li>小C：2個菜</li> </ul> <p>這種情況下小A這裏發生了阻塞，實際上小A這裏耗費了5分鐘也就是 300秒 + 2個菜的時間，也就是302秒，而CPU則空閒了300秒，實際上工作2秒。</p> <p>所有服務做完花費 302 + 3 + 2 = <strong>307秒</strong>，CPU實際工作7秒，等待300秒。極大浪費了CPU的時鐘週期。</p> <p>用戶體驗很差，因爲小A阻塞的時候，後面的所有人都等着，而實際上此時CPU空閒。所以單線程中不要有阻塞出現。</p> <hr> <h2 id="單線程多任務異步io">單線程多任務異步IO</h2> <p>還是上面的模型，加入一個角色：值日生小哥，他負責事先詢問每一個人是否帶錢了，如果帶錢了則允許打菜，否則把錢準備好了再說。</p> <ol> <li>值日生小哥問小A準備好打菜了嗎，小A說忘帶錢了，值日生小哥說，你把錢準備好了再說，小A開始準備(需要300秒，從此刻開始記時)。</li> <li>值日生小哥問小B準備好打菜了嗎，小B說可以了，阿姨服務小B，耗時3秒。</li> <li>值日生小哥問小C準備好打菜了嗎，小C說可以了，阿姨服務小C，耗時2秒。</li> <li>值日生小哥問小A準備好了沒有，小A說還要等一會，阿姨由於沒有人過來服務，處於空閒狀態。</li> <li>300秒之後，小A準備好了，阿姨服務小A，耗時2秒。</li> </ol> <p>整個過程做完耗時 300 + 2 = <strong>302秒</strong>，CPU工作7秒，空閒295秒。</p> <p>值日生小哥相當於select模型中的select功能，負責輪詢任務是否可以工作，如果可以則直接工作，否則繼續輪詢。</p> <p>在小A阻塞的300秒裏面，阿姨(CPU)沒有傻等，而是在服務後面的人，也就是小B和小C，所以這裏與模型3不同的是，這裏有5秒CPU是工作的。</p> <p>如果打飯的人越多，這種模型CPU的利用率越高，例如如果有小D，小E，小F&hellip;等需要服務，CPU可以在小A阻塞的300秒期間內繼續服務其他人。實際上值日生小哥輪詢也會耗時，這個耗時是很少的，幾乎可以忽略不計，但是如果任務非常多，這個輪詢還是會影響性能的，但是epoll模型已經不使用輪詢的方式，相當於A，B，C會主動跟值日生小哥報告，說我準備好了，可以直接打菜了。</p> <p>這種模式下用戶體驗好，CPU利用率高(任務越多利用率越高)</p> <hr> <h2 id="單線程多任務有耗時計算">單線程多任務，有耗時計算</h2> <p>回到最開始的模型，如下：</p> <ul> <li>阿姨：打一個菜需要1秒</li> <li>小A：200個菜</li> <li>小B：3個菜</li> <li>小C：2個菜</li> </ul> <p>順序做完所有任務，需要耗時 200 + 3 + 2 = 205秒，CPU無空閒，但是用戶體驗卻不是很好，因爲顯然後面的 B、C 需要等待小A 200秒的時間，這種情況下是沒有IO阻塞的，但是任務A本身太耗CPU了，所以說如果單線程出現了耗時的操作，一定會影響體驗(IO操作或者是耗時的計算都屬於耗時的操作，都會導致阻塞，但是這兩種導致阻塞的性質是不一樣的)。</p> <p>在所有的單線程模型中都不允許出現阻塞的情況，如果出現，那麼用戶體驗是極差的，例如在UI編程中(QT、C# Winform)是不允許在UI線程中做耗時的操作的，否則會導致UI界面無響應。 編寫Nodejs程序的時候，我們所寫的代碼實際上是在一個線程中執行的，所以也不允許有阻塞的操作(當然整個Nodejs框架實現異步，一定不止一個線程)。</p> <p>出現阻塞的情況一般有2種，一種是<strong>IO阻塞</strong>，例如典型的如磁盤操作，這種情況下的阻塞會導致CPU空閒等待(當然現代操作系統中如果IO阻塞，操作系統一定會將導致IO阻塞的線程掛起)。這種阻塞的情況，可以通過異步IO的方法避免，這樣就避免程序中僅有的單線程被操作系統掛起。另一種情況下是確實有<strong>非常多的計算操作</strong>，例如一個複雜的加密算法，確實需要消耗非常多的CPU時間，這種情況下CPU並不是空閒的，反而是全負荷工作的。</p> <p>這種CPU密集的工作不適合放在單線程中，雖然CPU的利用率很高，但是用戶體驗並不是很好。這種情況下使用多線程反而會更好，例如如果3個任務，每個任務都在一個線程中，也就是有3個線程，A任務在ThreadA中，B任務在ThreadB中，C任務在ThreadC中，那麼即使A任務的計算量比較大，B，C兩個任務所在的線程也不必等待A任務完成之後再工作，他們也有機會得到調度，這是由操作系統來完成的。這樣就不會因爲某一個任務計算量大，而導致阻塞其他任務而影響體驗了。</p> <hr> <h2 id="多線程程序">多線程程序</h2> <p>我們將上面的模型改造成多線程的模型是怎樣的呢，我們在模型5的基礎上添加一個角色，管理員大叔(操作系統的角色)：</p> <ul> <li>阿姨：打一個菜需要1秒</li> <li>小A：200個菜</li> <li>小B：3個菜</li> <li>小C：2個菜</li> </ul> <p>加入管理員大叔之後變成這樣的了，小A打兩個菜之後，大叔說，你打的菜太多了，不能因爲你要打200個菜，讓後面的同學都沒有機會打菜，你打兩個菜之後等一會，讓後面的同學也有機會。</p> <p>大叔讓小B打兩個菜，然後讓小C打兩個菜(小C完成)，然後再讓小A打兩個菜(完成之後小A總共就有4個菜了)，再讓小B打1個菜(此時小B總共打3個菜，完成)，然後小A打剩下的196個菜。</p> <p>CPU的利用率：很高，阿姨在不斷的工作。</p> <p>用戶體驗：不錯，即使小A要打200個菜，小B，小C也有機會；當然如果小A說我是幫校長打菜，要快一點(<strong>線程優先級高</strong>)，那也只能先把小A服務完。</p> <p>總耗時： 200 + 3 + 2 + (大叔指揮安排所消耗的時間，包括從小C切換回小A的時候，大叔要知道小A上次打的菜是哪兩個，這次應該接着打什麼菜，這相當於線程上下文切換的開銷以及線程環境的保存與恢復)，所以並不是線程越多越好，線程非常多的時候大叔估計會焦頭爛額吧，要記住這麼狀態，切換來切換去也耗時間。</p> <p>這種模型下實際上是將小A的耗時任務，<strong>分成多份去執行</strong>而不是集中執行，所以小A要完成他的任務，可能需要更多的時間(期間他也需要等別人，阿姨不會一直爲他一個人服務，但是阿姨爲他服務的時間是沒有變化的)，這種其實有點以時間換取用戶體驗(小B和小Ｃ的體驗，小Ａ的體驗可能就不會那麼好了，但是小Ａ本來也非常耗時，所以多等一會是不是也沒關係)。</p> <p>那麼IO阻塞和CPU計算耗時阻塞這兩者有什麼區別呢？</p> <p>區別在於IO阻塞是不使用CPU的，而CPU計算耗時導致的阻塞是會使用CPU的。</p> <p>例如上面的例子中，小A說忘記帶錢了需要同學送錢，於是小A等着同學送錢過來，這個過程中阿姨並沒有爲小A提供服務，這個過程中爲小A提供服務的是他的同學(送錢過來)，實際上小A的同學相當於現代計算機系統中的DMA(直接內存操作)，小A同學送錢的過程相當於DMA從磁盤讀取數據到內存的過程，這個過程基本不需要CPU干預。</p> <p>當然在DMA技術還沒有出現的年代，從磁盤讀取文件也是需要CPU發送指令去讀取的，也就是說需要CPU的計算，應用到這裏的場景中，就是阿姨親自跑一趟幫小A把錢拿過來。</p> <hr> <h2 id="多cpu">多CPU</h2> <p>多CPU是一個更加複雜的問題，多CPU如何調度？小A在第一個窗口打兩個菜，又跑到第二個窗口打兩個菜這種情況如何處理？</p> <p>小A在第一個窗口，小B在第二個窗口他們要同一個菜，但是這個菜只夠一個人，那麼兩個窗口阿姨如何分配這種需求(實際上應該是由操作系統也就是管理員大叔來決定如何分配，也就是多核下的線程同步與互斥)？</p> <p>多核CPU情況下，多線程的調度、互斥、鎖與同步相對來講更加複雜，多核情況下是真正的並行，同一時刻有多個線程在同時運行，他們的競爭怎麼處理，多個CPU之間如何同步(多CPU之間的緩存狀態一致性)等等一系列的問題。</p> <hr> <h2 id="多線程與多進程">多線程與多進程</h2> <p>上面描述的多線程實際上是討論的是多線程的調度問題，這裏我們說一說多線程與多進程與資源的分配問題。什麼意思呢，一群人(多個線程)在一個桌子(進程)上吃飯，他們會涉及到一些問題，比如多個人可能會夾一個菜(競爭)，A和B同時看到盤子裏面有一塊肉，同時伸出筷子去夾，A先夾走，B遲了一點伸到盤子的時候已經沒了，只能縮回來(臨界資源，互斥)，有一個點心需要用饃夾肉一起吃。A夾了肉，B夾了饃，A需要B的饃，B需要A的肉，他們僵持不下誰都不讓步(死鎖)。</p> <p>多線程之間的資源共享是非常方便的，因爲他們共用進程的資源空間(在一個桌子上)，但是需要注意一系列的問題：競爭、死鎖、同步&hellip;等。如果在旁邊再開一個桌子(進程)。 那麼桌子之間講話，遞東西又不方便(進程間通信)，而開一個桌子的開銷比在一個桌子上多加一個人的開銷要大。另外一個桌子上的人數不可能無限制增加，桌子的容量有限也坐不下這麼多人(進程的線程句柄是有限制的)。一個桌子壞了不會影響到另一個桌子上面人的就餐情況(進程間相互DuLi，一個進程崩潰不會影響另一個)，而一個桌子上的某人喝掛了需要送醫院，估計這一桌人都要散了(線程掛掉會導致整個進程也掛掉)。所以多線程與多進程是各有優缺點，不能一概而論。</p> <hr> <h2 id="總結">總結</h2> <p>單線程程序：適合IO異步，不能阻塞，不能有大量耗CPU的計算，典型如Nodejs，還有一些網絡程序。</p> <hr>