如何使用 JavaScript 減少 HTML 程式碼：一個簡單的範例

高效編碼實踐：利用 JavaScript 進行可擴充的 Web 開發

編寫乾淨、易於擴展的程式碼對於任何程式設計師來說都是至關重要的。 這對於像部落格網站這樣內容不斷增長的項目尤其重要。 維護此類項目應該快速且無錯誤，從而防止客戶的聲譽受損。 JavaScript 為提高程式碼效率和可調試性提供了強大的解決方案。本文示範了我如何使用 JavaScript 來簡化部落格網站專案中的社群媒體連結整合。

許多部落格都包含社交媒體鏈接，以提高在線知名度。 一種常見的方法是在每個頁面上顯示這些鏈接，通常在頁腳或側邊欄中，如下所示：

手動將這些連結（本例中為 14 行程式碼）新增至每個 HTML 頁面效率低且容易出錯，如下所示：

雖然在小型專案中可以管理，但這種複製貼上方法會創建臃腫的程式碼，減慢頁面載入時間並阻礙修改。 考慮一下客戶更改 Instagram 用戶名的場景。手動更新每個 HTML 頁面既乏味又危險。

一個優秀的解決方案涉及 JavaScript。 我創建了一個 JavaScript 函數來動態地將這些連結新增至所有 HTML 頁面上已存在的 <div> 元素（儲存在 <code>socialsPanel 變數中）。 功能如下圖：

這種方法集中了連結訊息，簡化了更新。只需在一個位置進行更改，無需在眾多 HTML 文件中重複手動更新。添加或刪除連結同樣簡化。

這種方法不僅節省時間，還減少了 HTML 程式碼。我們只需在每個頁面上呼叫 popSocialsPanel() 函數，而不是每頁重複 14 行程式碼，如下所示：

效率提升非常顯著。 新增 9 行 JavaScript 程式碼將取代每頁 14 行 HTML。 在我的專案中，這種方法已經節省了 56 行程式碼，每個新部落格文章頁面還額外節省了 13 行程式碼。

這個簡單的例子強調了一個關鍵原則：培養辨識重複程式碼的本能。 重構此類程式碼通常會帶來更有效率且可維護的解決方案。

歡迎您的回饋與建議。 如果您覺得這篇文章有幫助，請分享。

最初於 2022 年 9 月 28 日以簡單英語在 Medium for JavaScript 上發布