JavaScript简介
JavaScript是一种用于为网页添加交互性的编程语言。
主题开发者经常使用JavaScript为其主题提供交互性、动画效果或其他增强功能。
虽然使用JavaScript可以使您的主题更具吸引力和交互性，但如果使用不当，也可能带来潜在问题。
本课内容
在本课程中，您将学习在WordPress主题中使用JavaScript的一些最佳实践。
您将了解如何使用第三方JavaScript库、编写JavaScript时应遵循的最佳实践、是否应该使用jQuery，以及在哪里可以找到更多信息。
JavaScript库
如果您需要在主题中使用任何第三方JavaScript库，请确保检查它是否已经通过WordPress安装提供。
WordPress包含多个您可以使用的JavaScript库。这些库随WordPress一起提供，可供您在主题中使用。
初学者主题开发者常犯的一个错误是将自己的库版本与主题捆绑在一起。
然而，这可能会与使用WordPress捆绑版本的插件发生冲突。
您可以在wp_enqueue_scripts函数参考中找到WordPress包含和注册的默认脚本和JavaScript库的完整列表。
确保您的主题与WordPress包含的您喜爱的库版本兼容。
编写JavaScript
JavaScript在网络上越来越受欢迎，多年来这门语言已经改进到能够执行各种任务。这意味着对于更常见的任务，您可能根本不需要使用JavaScript库，而只需编写纯JavaScript。
编写JavaScript时的注意事项
尽量避免使用全局变量
全局变量在整个代码中都可用，无论作用域如何。这意味着您可以从代码的任何地方访问和修改这些变量，无论是在函数内部还是外部。
let greeting = "Hello, World!";
function greet() {
console.log(greeting);
}
greet(); // Outputs: "Hello, World!"为了避免使用全局变量，您可以使用多种替代方案，但最直接的方法是使用立即调用函数表达式(IIFE)。这允许您在局部作用域中定义变量，防止它们污染全局命名空间。
(function() {
var greeting = "Hello, World!";
console.log(greeting);
})(); // Outputs: "Hello, World!"保持JavaScript的非侵入性
确保您的JavaScript不会干扰页面内容或产生不必要的错误。这意味着您的JavaScript应该与HTML分离，并且不应该依赖于HTML中的特定元素或类。
例如，如果您需要为按钮添加点击事件，您应该使用addEventListener()方法添加事件监听器，而不是在HTML中使用onclick属性。此外，在添加事件监听器之前，您应该检查该元素是否存在于页面上。
(function() {
var greeting = "Hello, World!";
console.log(greeting);
})(); // Outputs: "Hello, World!"使用编码标准
使用编码标准有助于确保代码一致且易于阅读。WordPress有一个JavaScript编码标准，您可以使用它来确保您的代码与WordPress代码库的其余部分保持一致。
验证和检查代码
使用linter检查代码中的错误和潜在问题。这有助于及早发现错误，并确保代码一致且易于阅读。
ESLint是一个流行的JavaScript linter，可用于检查代码中的错误和潜在问题。您可以通过@wordpress/scripts包配置主题以使用EsLint检查JavaScript代码。
确保主题在没有JavaScript的情况下也能工作
首先确保您的网站主题在没有JavaScript的情况下也能工作，然后再添加JavaScript以提供额外的功能。这是一种渐进增强的形式，这是一种强调网络内容优先的策略，允许每个人都能访问网页的基本内容和功能。
资源加载
对不需要立即使用的资源使用延迟加载。要做到这一点，识别对内容不关键的资源，并仅在需要时加载这些资源。
jQuery
jQuery是一个在早期网页开发中使用增加的JavaScript库。然而，随着JavaScript的改进，对于许多常见任务，通常不再需要使用jQuery。
如果不需要，请不要使用jQuery——”您可能不需要jQuery”是一个很棒的网站，向您展示如何使用纯JavaScript完成许多这些常见任务。
例如，如果您需要通过ID选择元素，您可以在纯JavaScript中使用document.getElementById()方法。
// jQuery
$( "#myElement" );
// Plain JavaScript
document.getElementById( 'myElement' );另一个很好的例子是，如果您需要发出AJAX请求，您可以在纯JavaScript中使用fetch()方法，或者更好的是使用WordPress的apiFetch包。
// jQuery
$.ajax({
url: 'https://example.com/wp-json/wp/v2/posts',
success: function( data ) {
console.log( data );
}
});
// Plain JavaScript
fetch('https://example.com/wp-json/wp/v2/posts')
.then(data => console.log(data));
// apiFetch
apiFetch( { path: '/wp/v2/posts' } ).then( posts => {
console.log( posts );
} );如果必须在主题中使用jQuery，您应该使用WordPress附带的jQuery版本。
在排队主题脚本时，您应该通过在依赖项数组中包含jQuery来将其指定为依赖项。
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
wp_enqueue_script(
'my-script',
get_template_directory_uri() . '/js/my-script.js',
array( 'jquery' ),
'1.0',
true
);
}这将确保在加载脚本之前加载jQuery，并使用WordPress附带的版本。
由于WordPress中包含的jQuery副本以noConflict()模式加载，您还应该将代码包装在立即调用函数表达式或IIFE中。
( function( $ ) {
// Your jQuery code goes here
} )( jQuery );这可以防止其他JavaScript库使用$变量与您的jQuery代码发生冲突。
延伸阅读
对于这些以及其他开发主题时的JavaScript最佳实践，请务必阅读WordPress开发者手册高级主题部分下的JavaScript最佳实践手册页面。