许多主题使用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); ```