JavaScript最佳实践

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

使用包含的库

在构建主题时，您可能需要包括许多有用的JavaScript库。你知道WordPress与几十个流行的库捆绑在一起吗？看看这个WordPress中包含的默认脚本列表.

开始开发主题和插件的人经常犯的一个错误是将他们的主题或插件与自己的库版本捆绑在一起。这可能与其他插件冲突，这些插件将与WordPress捆绑的版本排队。作为最佳实践，使您的主题与WordPress中包含的您最喜欢的库的版本兼容。

如果你觉得你必须用你自己的版本替换WordPress版本……那么……答案仍然是：不要这样做。WordPres使用的JavaScript库版本可能包括WordPress需要操作的自定义调整。任何时候覆盖这些库，都有可能破坏WordPress实例。此外，其他作者创建的插件也应该与WordPress版本的这些库兼容。添加您自己的版本可能（而且经常会）与插件冲突。

标准JavaScript

Javascript越来越受到web开发人员的欢迎，并被用于完成各种任务。以下是编写JavaScript时要使用的一些最佳实践

• 避免全局变量
• 保持您的JavaScript不引人注目
• 使用闭包和模块模式
• 坚持编码风格。使用WordPress Javascript编码标准.
• 验证并删除您的代码–E类S公司林特网
• 首先确保您的站点在没有JavaScript的情况下仍能正常工作，然后添加JavaScript以提供其他功能。这是一种渐进式增强.
• 懒惰地加载不立即需要的资产。
• 不使用jQuery如果你不需要的话-有一个很棒的网站向您展示了如何使用简单的旧JavaScript执行一些常见任务-您可能不需要jQuery

jQuery（jQuery）

在主题中包含jQuery

jQuery（jQuery）是一个流行的JavaScript库，使跨浏览器使用JavaScript更加容易和可靠。如果使用jQuery，请确保遵循包含JavaScript的手册指南。为主题的enqueued.js文件提供一个依赖数组数组（“jquery”）确保在主题代码之前下载并加载jQuery脚本。

使用$

因为WordPress中包含的jQuery副本加载到无冲突（）模式下，在主题的.js文件中使用此包装器代码将“$”映射到“jQuery”：

（函数（$）{//此处显示您的代码}）（jQuery）；

这个包装器（称为立即调用函数表达式或IIFE）允许您在底线上传递变量-jQuery，并在内部将其命名为“$”。在这个包装中，您可以使用$以正常方式选择图元。

选择器

每次使用jQuery选择元素时，它都会通过文档的标记执行查询。这些查询速度非常快，但确实需要时间，您可以通过重新使用jQuery对象而不是使用新查询来加快站点的响应速度。因此，不要重复选择程序：

//反彩色$（'.post-img'）.addClass（'theme-image'）；$（'.post-img'）.on（'click'，function（）｛…｝）；

建议缓存选择器因此，您可以重用返回的元素，而无需重复查找过程：

var$postImage=$（'.post-img'）；//现在可以通过$postImage访问帖子中的所有图像标记$postImage.addClass（'theme-image'）；$postImage.on（'click'，function（）｛…｝）；

事件处理

使用jQuery方法时，如.绑定或。单击，jQuery创建一个新的浏览器事件对象来处理请求的事件。创建的每个新事件都占用少量内存，但所需的内存量会随着绑定的事件数量的增加而增加。如果您有一个带有100个锚标记的页面，并且希望每当用户单击链接时触发“logClick”事件处理程序，则很容易编写如下代码：

//反彩色$（'a'）.点击（logClick）；

这是可行的，但实际上您已经要求jQuery为页面上的每个链接创建一个新的事件处理程序。

活动委托是一种以较少开销实现相同效果的方法。因为jQuery中的事件“冒泡”，也就是说，单击事件将在链接上触发，然后在链接的周围触发<p>标记，然后在div公司容器等，直到文件对象本身-我们可以将单个事件处理程序放在页面结构的更高位置，并仍然捕获所有这些链接的单击事件：

//在文档级别绑定一个处理程序，该处理程序被触发//每当有来自“a”标记的“click”事件时$（document）.on（'click'，'a'，logClick）；