许多主题使用 JavaScript 提供交互性、动画或其他增强功能。这些最佳实践将有助于确保您的代码高效运行，并且不会与内容或插件发生冲突。

使用内置库

在构建主题时，您可能希望包含许多有用的 JavaScript 库。您知道吗？WordPress 自带了数十种流行的库。请查看此 WordPress 默认脚本列表。

初学者主题和插件开发者常犯的一个错误是将自己的版本与主题或插件捆绑在一起。这可能会与挂载 WordPress 自带版本的其它插件发生冲突。作为最佳实践，请确保您的主题兼容您喜爱的库的 WordPress 内置版本。

不要尝试使用已 捆绑 在 WordPress 中的 JavaScript 库的其他版本。这样做可能会破坏核心功能并与插件发生冲突。

如果您觉得必须用您自己的版本替换 WordPress 的版本……好吧……答案仍然是：不要这样做。WordPress 使用的 JavaScript 库版本可能包含 WordPress 正常运行所需的自定义调整。任何时候覆盖这些库，都有风险破坏您的 WordPress 实例。此外，其他作者创建的插件也应编写为与 WordPress 的这些库版本兼容。添加您自己的版本可能会（并且经常确实！）与插件发生冲突。

标准 JavaScript

JavaScript 在网页开发者中越来越受欢迎，并被用于完成各种任务。以下是编写 JavaScript 时的一些最佳实践：

  • 避免使用全局变量
  • 保持您的 JavaScript 不干扰性（unobtrusive）
  • 使用闭包和 模块模式
  • 坚持一种编码风格。请使用 WordPress JavaScript 编码标准。
  • 验证和整理您的代码 – ESLint.com
  • 首先确保在没有 JavaScript 的情况下您的站点仍能工作，然后再添加 JavaScript 以提供额外功能。这是一种 渐进增强。
  • 懒加载那些不是立即需要的资源。
  • 如果没有必要就不要使用 jQuery — 有一个很好的网站向您展示如何使用纯 JavaScript 完成一些常见任务 – 您可能不需要 jQuery

jQuery

在您的主题中包含 jQuery

jQuery 是一个流行的 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 中的事件会“冒泡”——即点击事件会在链接上触发，然后在链接周围的 <p> 标签上触发，然后在上层的 div 容器上触发，依此类推直到 document 对象本身——我们可以将单个事件处理程序放在页面结构的更高位置，仍然可以捕获所有这些链接的点击事件：

// 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);