主题中的JavaScript – WordPress建站指南

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 时需要考虑的一些事项：

尽量避免使用全局变量。

全局变量在整个代码中都是可用的，无论作用域如何。这意味着你可以从代码的任何位置访问和修改这些变量，无论是在函数内部还是外部。

// 避免这样做
var myGlobal = 'Hello';

function myFunction() {
    console.log(myGlobal);
}

为了避免使用全局变量，你可以使用多种替代方法，但最直接的方法是使用立即调用函数表达式（IIFE）。这允许你在局部作用域中定义变量，防止它们污染全局命名空间。

(function() {
    var myLocal = 'Hello';
    console.log(myLocal);
})();

保持你的 JavaScript 不引人注目

确保你的 JavaScript 不会干扰页面内容或产生不必要的错误。这意味着你的 JavaScript 应该与 HTML 分离，并且不应依赖于 HTML 中的特定元素或类。

例如，如果你需要为按钮添加点击事件，你应该使用 addEventListener() 方法来添加事件监听器，而不是在 HTML 中使用 onclick 属性。此外，在添加事件监听器之前，你应该检查该元素是否存在于页面上。

// 好的做法
var button = document.getElementById('myButton');
if (button) {
    button.addEventListener('click', function() {
        console.log('Button clicked');
    });
}

使用编码标准。

使用编码标准有助于确保你的代码一致且易于阅读。WordPress 有一个 JavaScript 编码标准，你可以使用它来确保你的代码与 WordPress 代码库的其他部分保持一致。

验证并检查你的代码

使用 linter 检查你的代码是否存在错误和潜在问题。这有助于及早发现错误，并确保你的代码一致且易于阅读。

ESLint 是一个流行的 JavaScript linter，可用于检查你的代码是否存在错误和潜在问题。你可以通过 @wordpress/scripts 包配置你的主题，使用 ESLint 检查你的 JavaScript 代码。

确保你的主题在没有 JavaScript 的情况下也能工作

首先确保你的网站主题在没有 JavaScript 的情况下也能工作——然后添加 JavaScript 以提供额外的功能。这是一种渐进增强的形式，这种策略强调网页内容优先，允许每个人访问网页的基本内容和功能。

资源加载

对非立即需要的资源使用懒加载。为此，请识别对内容不关键的资源，并仅在需要时加载它们。

jQuery

jQuery 是一个 JavaScript 库，在 Web 开发的早期阶段使用率有所增加。然而，随着 JavaScript 的改进，对于许多常见任务，通常不再需要使用 jQuery。

如果不需要，就不要使用 jQuery——你可能不需要 jQuery 是一个很棒的网站，它向你展示了如何使用纯 JavaScript 完成许多常见任务。

例如，如果你需要按 ID 选择一个元素，你可以在纯 JavaScript 中使用 document.getElementById() 方法。

// 使用纯 JavaScript 选择元素
var element = 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 最佳实践手册页面。