许多主题使用JavaScript来提供交互、动画或其他增强功能。这些最佳实践将有助于确保您的代码高效工作,并且不会与您的内容或插件发生冲突。
使用包含的JS库
在构建主题时,您可能希望包含许多有用的JavaScript库。你知道WordPress捆绑了几十个流行库吗?查看WordPress附带的默认脚本列表。
主题和插件开发人员在开始开发主题和插件时经常犯的一个错误是将他们的主题或插件与他们自己版本的库捆绑在一起。这可能与其他将与WordPress捆绑的版本的插件冲突。作为最佳实践,使您的主题与WordPress附带的您最喜欢的库版本兼容。
如果你觉得必须用自己的版本替换WordPress的版本......那么......答案仍然是:不要做。 WordPress使用的JavaScript库的版本可能包括WordPress运行所需要的自定义的调整。 任何时候你覆盖这些库,你都有可能破坏WordPress实例。此外,由其他作者创建的插件也应该写成与WordPress的这些库的版本兼容。添加你自己的版本可能(而且经常如此!)与插件冲突。
标准的JavaScript
Javascript在网络开发者中越来越受欢迎,它被用来完成各种任务。这里有一些编写JavaScript时的最佳做法。
- 避免全局变量
- 保持JavaScript的低调
- 使用闭包和模块模式
- 坚持一种编码风格,使用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容器上发生,然后一直到文档对象本身--我们可以在页面结构中把一个事件处理程序放在更高的位置,并且仍然捕捉所有这些链接的点击事件。
// 在文档级别绑定一个处理程序,该处理程序被触发 // 只要有来自"a"标签的"click"事件 $(document).on('click', 'a', logClick);