許多主題使用JavaScript來提供交互性，動畫或其他增強功能。 這些最佳做法將有助于確保您的代碼有效運行，并且不會導致與您的內容或插件的沖突。 ## 使用包含的庫 在構建主題時可能需要包含許多有用的JavaScript庫。您是否知道WordPress與數十個受歡迎的圖書館捆綁在一起？[查看WordPress附帶的默認腳本列表](themes/including-css-and-javascript.md)。 開始主題和插件開發人員的一個常見錯誤是將他們的主題或插件與他們自己的圖書館版本捆綁在一起。這可能會與插入WordPress捆綁的版本的其他插件沖突。作為最佳做法，使您的主題與WordPress附帶的最喜愛的圖書版本兼容。 >[danger]警告：不要嘗試使用自己的版本的已經與WordPress捆綁在一起的JavaScript庫。這樣做可能會破壞核心功能并與插件沖突。 如果你覺得你必須用自己的一個WordPress版本替換...好的答案還是：不要這樣做。 WordPress使用的JavaScript庫版本可能包括WordPress需要操作的自定義調整。每當你重寫這些庫時，都有可能破壞你的WordPress實例。此外，其他作者創建的插件也應該寫成與WordPress的這些庫的版本兼容。添加您自己的版本可能（并且經常與！）與插件沖突。 ## 標準 JavaScript Javascript正在越來越受到Web開發人員的歡迎，它被用于完成各種任務。 以下是編寫JavaScript時使用的最佳做法 - 避免使用全局變量 - 保持JavaScript不引人注目 - 使用閉包和模塊模式 - 堅持編碼風格。 使用WordPress Javascript編碼標準。 - 驗證和刪除您的代碼 - JSLint.com - 確保您的網站仍然無法使用JavaScript，然后添加JavaScript以提供其他功能。 這是漸進式增強的一種形式。 - 懶惰的負載資產不是立即需要的。 - 不要使用jQuery，如果你不需要 - 有一個偉大的網站，顯示如何做一些常見的任務與純舊的JavaScript - 你可能不需要jQuery #jQuery ## 在您的主題中包含jQuery Query是一個流行的JavaScript庫，可以使瀏覽器中的JavaScript更輕松，更可靠。 如果您使用jQuery，請務必遵循包含JavaScript的手冊指南。 給你的主題排隊的.js文件一個array（'jquery'）的依賴數組確保jQuery腳本已經下載并加載到主題的代碼之前。 ## 使用 $ 因為WordPress中包含的jQuery的副本加載（需要鏈接）noConflict()模式，請在主題的.js文件中使用此包裝代碼來映射“$” 到 “jQuery”: ``` ( function( $ ) { // Your code goes here } )( jQuery ); ``` 這個包裝器（稱為即時調用函數表達式或IIFE）可讓您傳遞一個變量jQuery - 在底線，并在內部給它名稱“$”。 在這個包裝器中，您可以使用$來正常選擇元素。 ## 選擇器 每次使用jQuery選擇元素時，它都會通過文檔的標記執行查詢。 這些查詢速度非常快，但是它們需要時間，您可以通過重新使用jQuery對象而不是使用新的查詢來更快地響應您的站點。 所以代替重復選擇器： ``` // Anti-pattern $('.post img').addClass('theme-image'); $('.post img').on('click', function() { /* ... */ }); ``` 建議緩存選擇器，以便您可以重新使用返回的元素，而無需重復查找過程： ``` var $postImage = $('.post img'); // All image tags within posts can now be accessed through $postImage $postImage.addClass('theme-image'); $postImage.on('click', function() { /* ... */ }); ``` ## 事件處理 當您使用jQuery方法（.bind或.click）時，jQuery會創建一個新的瀏覽器事件對象來處理請求的事件。 創建的每個新事件都占用少量內存，但是所需的內存量會增加綁定的事件數量。 如果你有一個頁面有一百個錨標簽，并且想要在用戶點擊一個鏈接時觸發一個“logClick”事件處理程序，那么編寫如下代碼是很容易的： ``` // Anti-pattern $('a').click( logClick ); ``` 這是有效的，但在引擎蓋下，您要求jQuery為您網頁上的每個鏈接創建一個新的事件處理程序。 事件委托是一種以更少的開銷來實現相同效果的方法。 因為jQuery“bubble”中的事件就是這樣，一個點擊事件將在一個鏈接上觸發，然后在鏈接的周圍的<p>標簽上，然后在div容器上，依此類推，直到文檔對象本身 - 我們可以放一個 單個事件處理程序在頁面結構中較高，并且仍然捕獲所有這些鏈接的點擊事件： ``` // Bind one handler at the document level, which is triggered // whenever there is a "click" event originating from an "a" tag $(document).on('click', 'a', logClick); ```