大多數網頁開發作業都不是從頭開始。在現有的程式碼集中，累積了多年的舊版解決方法、polyfill 和 JavaScript 公用程式 (自動調整大小、自訂核取方塊樣式駭客、scrollHeight 監聽器)，用於瀏覽器現在原生處理的事物。但問題在於：舊程式碼不會中斷。因為程式碼能正常運作，所以沒人回報錯誤。此外，重構運作中的程式碼 (即使是舊程式碼) 也需要信任，因此開發人員不願意這麼做也是情有可原。
另一方面，如果不重構舊程式碼來使用現代網頁功能，則會默默地在套件大小、網頁回應速度和無障礙功能方面付出代價。更糟的是，當您在這些專案中使用程式設計代理時，它們會複製周圍的 2015 年慣例，以及訓練資料中的過時模式。
建構新內容時，Modern Web Guidance 會引導代理使用現代基準功能。針對現有程式碼，Modern Web Guidance 1.0 新增了翻新工作流程，可掃描專案中的舊版模式，並協助代理升級。
翻新工作流程的作用
當您要求代理翻新專案 (或直接執行 legacy-scan 指令) 時，運作方式如下：
- 確定性本機掃描：使用抽象語法樹 (AST)、DOM 和 CSS 剖析器，在本機快速掃描 HTML、CSS、JavaScript/TypeScript、特定架構元件和
package.json檔案，完全不需呼叫 LLM 或耗用權杖。 - 舊版規則目錄：如果掃描器每次執行時都會標記過多項目，就會遭到忽略。我們在約 45,000 個開放原始碼存放區中測試候選規則，並將存放區分成兩半：一半用於編寫和調整規則，另一半則用於評估規則。我們捨棄的候選規則比保留的多，跳過沒有對應舊版程式碼的功能，並淘汰沒有實際效益的純語法替換 (例如將可運作的
+或~同層選取器重寫為:has())。如要預設提供，規則必須在未見過的程式碼上，達到至少 80% 的靜態比對器精確度，以及 90% 的驗證後精確度。 - 情境感知偽陽性篩選：每項規則比對都附有明確的
keepWhen/dropWhen評分標準。這會指示代理程式評估周圍的程式碼，並在呈現結果前，捨棄刻意設定的備用方案、CSS@supports防護措施或類似項目。 - 範圍限於高信賴度的舊版模式 (且持續增加)：
legacy-scan會檢查約 200 個指南中的子集 (約 20%)，在這些指南中，舊版程式碼可以確定偵測到，不會出現偽陽性，而且我們會隨著時間擴大涵蓋範圍。至於目錄的其他部分，代理會在你建構時搜尋及擷取指南。
如何叫用翻新工作流程
如要使用 Modern Web Guidance 翻新程式碼，必須使用 1.0 以上版本。請使用 npm 或代理的外掛程式市集安裝或更新：
# Install Modern Web Guidance 1.0 in your project
npx modern-web-guidance@latest install
# Or update an existing installation
npx modern-web-guidance@latest update
由於現代化工作流程是核心技能定義的一部分，您可以使用自然語言觸發掃描器，要求代理檢查存放區或資料夾中的「舊版模式」或「現代化」。
注意：如果只命名一個元件，系統會改為執行一般指南查詢。
以下是掃描整個存放區的提示範例：
Modernize this repository using Modern Web Guidance. Scan our frontend files for legacy patterns, verify the findings, and propose a modernization plan before making any code edits.
您也可以將其指向特定資料夾：
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
雖然您目前可以在終端機中手動執行 legacy-scan，但自動化 CI/CD 管道整合功能目前仍在開發中。
可偵測及修正的模式範例
合格規則會針對四個領域的常見舊版反模式：表單和 UI、對話方塊和控制項、CSS 版面配置、字體排版和視覺設計，以及安全性。下表列出舊版模式範例和新版替代模式：
程式碼轉換範例
收到提示時，程式設計代理可透過翻新工作流程，將舊版反模式轉換為現代化反模式。範例如下：
自動擴充 <textarea> 元素
舊版 JavaScript 在每個 input 事件上評估 scrollHeight，會強制執行版面配置
。這可能會導致效能問題，尤其是 Interaction to Next Paint (INP)。使用翻新工作流程，代理程式就能修正這個問題：
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
現在，您不需要 JavaScript 也能做到這一點。翻新工作流程會引導代理程式將其替換為 CSS：
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
宣告式彈出式視窗
使用 JavaScript 事件監聽器的自訂互動視窗和彈出式視窗邏輯，可替換為標準 HTML 屬性：
<!-- Before: a click listener that only calls showPopover() -->
<button id="openBtn">Open Menu</button>
<div id="menu" popover>Menu Content</div>
<script>
openBtn.addEventListener('click', () => menu.showPopover());
</script>
<!-- After: declarative control, no JavaScript -->
<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu Content</div>
IME 安全輸入提交
使用者以日文、中文或韓文輸入法編輯器 (IME) 輸入內容時，未受保護的 Enter 鍵事件監聽器會提前觸發訊息提交。
代理會新增組合狀態防護機制：
// Before: Fires mid-composition when confirming kanji/hanzi characters
textarea.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// After: Accurately checks IME composition state
textarea.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
if (e.isComposing || e.keyCode === 229) return;
sendMessage();
}
});
運作方式：四步驟翻新工作流程
重構現有應用程式中的工作程式碼需要信任，因為沒有人希望自動流失或細微迴歸。這也是為什麼沒有 --fix 旗標的原因：即使是看似簡單的現代化作業，往往也會變成跨層重構，例如刪除必要的 JS 事件監聽器或 npm 套件，並將行為移至 HTML 和 CSS，這會帶來細微的行為和瀏覽器支援挑戰。
而是由現代化工作流程與程式設計代理執行四步驟迴圈：
- 掃描 (
legacy-scan)：代理會執行npx modern-web-guidance legacy-scan <path> --json，預先篩選檔案中的相關子字串，只針對候選檔案和規則啟動 AST、CSS 和 HTML 剖析器。如果發現項目能通過這項檢查，則有很高的機率 (約 92%) 不是偽陽性。每項比對結果都包含代理的驗證檢查清單。 - 情境驗證 (
keepWhen/dropWhen)：由於程式設計代理已開啟存放區，因此會根據該規則的驗證標準，檢查每個相符項目周圍的程式碼。如果scrollHeight讀取是虛擬化捲動的一部分，而非<textarea>駭客攻擊，或者@supports檢查已保護屬性，系統會自動捨棄發現項目。 - 報告：代理會彙整已驗證的結果 (請注意，
legacy-scan涵蓋具有確定性規則的指南子集，如果您要求在編輯前審查計畫，則還會包含現代化計畫)。 - 引導檢索、重構和測試驗證：當要求現代化時，代理會執行
npx modern-web-guidance retrieve <guide-id>來擷取適當的指南。它會根據指南的基準相容性模式重構程式碼，並在修改後的檔案上重新執行legacy-scan <path>，同時執行專案的測試套件，確認問題已解決。
試試看
無論是在終端機中執行一次性 legacy-scan，還是要求程式設計代理翻新舊模組，翻新工作流程都能協助您償還舊版網路平台債務，而不會受到傳統程式碼檢查工具的干擾。
如要從靜態程式碼現代化，轉為即時瀏覽器驗證、基準測試和偵錯，請搭配使用 Modern Web Guidance 和代理專用 Chrome 開發人員工具。