如何利用`wp_enqueue_script`和`wp_enqueue_style`实现前端资源的依赖管理？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

WordPress 前端资源依赖管理：`wp_enqueue_script` 和 `wp_enqueue_style` 的深度解析

大家好，今天我们来深入探讨 WordPress 中前端资源依赖管理的核心工具：wp_enqueue_script 和 wp_enqueue_style。前端性能优化是每个 WordPress 开发者都必须面对的课题，而有效的依赖管理是性能优化的基础。了解如何正确使用这两个函数，能够帮助我们构建更高效、更易维护的 WordPress 主题和插件。

1. 为什么需要依赖管理？

在没有依赖管理的情况下，前端资源（JavaScript 和 CSS 文件）的加载顺序往往不可控，容易出现以下问题：

代码冲突： 多个 JavaScript 库可能定义了相同的变量或函数，导致冲突。
功能失效： 某些 JavaScript 代码依赖于其他库或插件先加载，如果顺序错误，会导致功能无法正常运行。
性能问题： 冗余加载重复的资源，阻塞页面渲染，降低用户体验。
维护困难： 代码结构混乱，难以追踪依赖关系，后期维护成本高昂。

依赖管理的目标就是解决这些问题，确保资源按正确的顺序加载，避免冲突，提升性能，并提高代码的可维护性。

2. `wp_enqueue_script` 和 `wp_enqueue_style` 的基本用法

这两个函数的作用非常相似，wp_enqueue_script 用于注册和加载 JavaScript 文件，wp_enqueue_style 则用于注册和加载 CSS 文件。

wp_enqueue_script 函数原型：

wp_enqueue_script(
    string   $handle,
    string   $src = '',
    string[] $deps = [],
    string|bool|null $ver = false,
    bool     $in_footer = false
);

参数说明：

参数名	类型	描述
`$handle`	`string`	脚本的唯一标识符（handle）。
`$src`	`string`	脚本的 URL。如果为空，则假定该脚本已被注册，只需加载。
`$deps`	`string[]`	一个包含依赖脚本 handle 的数组。在当前脚本加载之前，必须先加载这些依赖脚本。
`$ver`	`string\|bool\|null`	脚本的版本号。用于缓存刷新。如果设置为 `false`，则 WordPress 会自动添加版本号（如果可用）。设置为 `null` 将禁用版本号。
`$in_footer`	`bool`	指定脚本是否在页面的 `<footer>` 中加载。默认为 `false`，即在 `<head>` 中加载。如果性能是关键，通常建议将 JavaScript 文件放在底部加载，避免阻塞页面渲染。

wp_enqueue_style 函数原型：

wp_enqueue_style(
    string   $handle,
    string   $src = '',
    string[] $deps = [],
    string|bool|null $ver = false,
    string   $media = 'all'
);

参数说明：

参数名	类型	描述
`$handle`	`string`	样式表的唯一标识符（handle）。
`$src`	`string`	样式表的 URL。如果为空，则假定该样式表已被注册，只需加载。
`$deps`	`string[]`	一个包含依赖样式表 handle 的数组。在当前样式表加载之前，必须先加载这些依赖样式表。
`$ver`	`string\|bool\|null`	样式表的版本号。用于缓存刷新。如果设置为 `false`，则 WordPress 会自动添加版本号（如果可用）。设置为 `null` 将禁用版本号。
`$media`	`string`	指定样式表应用的媒体类型。常见的取值包括 `all`（所有设备）、`screen`（屏幕）、`print`（打印）等。可以根据实际情况进行设置，以优化加载策略。例如，只在打印时使用的样式表，可以设置为 `print`，从而避免在屏幕上加载。

示例代码：

function my_theme_enqueue_scripts() {
  // 注册并加载 main.css
  wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );

  // 注册并加载 custom.js，依赖于 jQuery
  wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

代码解释：

my_theme_enqueue_scripts 函数用于注册和加载脚本和样式表。
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' ) 将该函数挂载到 wp_enqueue_scripts 钩子上，确保在 WordPress 加载前端资源时执行该函数。
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' ) 注册并加载主题的 style.css 文件。 get_stylesheet_uri() 函数返回当前主题的 style.css 文件的 URL。 array() 表示没有依赖项。 '1.0' 是版本号。
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true ) 注册并加载 custom.js 文件，并声明它依赖于 WordPress 内置的 jquery 库。 get_template_directory_uri() 函数返回当前主题的目录 URL。 true 表示在页脚加载。

3. 依赖关系的处理

$deps 参数是依赖管理的核心。通过正确声明依赖关系，可以确保资源按正确的顺序加载。 WordPress 已经注册了一些常用的脚本，可以直接作为依赖项使用，例如：

jquery：jQuery 库
jquery-ui-core：jQuery UI 核心组件
jquery-ui-widget：jQuery UI Widget 工厂
jquery-ui-mouse：jQuery UI Mouse 交互
jquery-ui-draggable：jQuery UI Draggable 组件
jquery-ui-droppable：jQuery UI Droppable 组件
jquery-ui-resizable：jQuery UI Resizable 组件
jquery-ui-selectable：jQuery UI Selectable 组件
jquery-ui-sortable：jQuery UI Sortable 组件
jquery-ui-position：jQuery UI Position 工具
jquery-ui-autocomplete：jQuery UI Autocomplete 组件
jquery-ui-menu：jQuery UI Menu 组件
jquery-ui-dialog：jQuery UI Dialog 组件
jquery-ui-slider：jQuery UI Slider 组件
jquery-ui-tabs：jQuery UI Tabs 组件
jquery-ui-accordion：jQuery UI Accordion 组件
jquery-ui-progressbar：jQuery UI Progressbar 组件
jquery-ui-button：jQuery UI Button 组件
wp-color-picker：WordPress 颜色选择器
wp-mediaelement：WordPress MediaElement.js 集成
wp-i18n：WordPress i18n 库

示例：

假设 custom.js 依赖于 bootstrap.js 和 utils.js，bootstrap.js 又依赖于 jquery。

function my_theme_enqueue_scripts() {
  // 注册 bootstrap.js，依赖于 jQuery
  wp_register_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ), '4.6.0', true );

  // 注册 utils.js，不依赖任何其他脚本
  wp_register_script( 'utils', get_template_directory_uri() . '/js/utils.js', array(), '1.0', true );

  // 注册 custom.js，依赖于 bootstrap.js 和 utils.js
  wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'bootstrap', 'utils' ), '1.0', true );

  // 加载 bootstrap
  wp_enqueue_script( 'bootstrap' );

  // 加载 utils
  wp_enqueue_script( 'utils' );

  // 加载 custom
  wp_enqueue_script( 'custom' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

代码解释：

使用 wp_register_script 注册 bootstrap.js 和 utils.js，而不是直接使用 wp_enqueue_script。这样做的好处是可以先注册，然后在需要的时候再加载。
wp_register_script( 'bootstrap', ... array( 'jquery' ) ... ) 声明 bootstrap.js 依赖于 jquery。
wp_enqueue_script( 'custom', ... array( 'bootstrap', 'utils' ) ... ) 声明 custom.js 依赖于 bootstrap.js 和 utils.js。
WordPress 会自动处理依赖关系，确保 jquery 先于 bootstrap.js 加载，bootstrap.js 和 utils.js 先于 custom.js 加载。

注意：

循环依赖会导致死循环，应该避免。例如，如果 A 依赖于 B，B 又依赖于 A，就会导致循环依赖。 WordPress 会检测到循环依赖并尝试中断，但最好避免这种情况的发生。
建议先注册所有脚本，然后在需要的时候再加载。这样可以更好地组织代码，并避免重复注册。

4. 版本号的管理

$ver 参数用于指定资源的版本号。版本号的作用是告诉浏览器，资源是否发生了更新。如果版本号发生了变化，浏览器就会重新下载资源，否则会使用缓存。

版本号的管理策略：

每次更新都修改版本号： 这是最简单的方法。每次修改 JavaScript 或 CSS 文件后，都更新版本号。可以使用时间戳或者递增的数字作为版本号。
使用文件修改时间作为版本号： 可以使用 PHP 的 filemtime() 函数获取文件的修改时间，并将其作为版本号。这样可以确保只有在文件被修改后，浏览器才会重新下载资源。
使用 Git commit hash 作为版本号： 如果使用 Git 进行版本控制，可以使用 Git commit hash 作为版本号。这样可以更精确地跟踪资源的更新。
使用构建工具自动管理版本号： 如果使用 Webpack、Gulp 等构建工具，可以配置构建工具自动生成版本号，并将其添加到资源 URL 中。

示例：

function my_theme_enqueue_scripts() {
  // 使用文件修改时间作为版本号
  $version = filemtime( get_template_directory() . '/js/custom.js' );
  wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), $version, true );

  // 使用常量作为版本号
  define( 'THEME_VERSION', '1.2.3' );
  wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), THEME_VERSION );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

注意：

避免使用固定的版本号。如果使用固定的版本号，浏览器可能永远不会重新下载资源，即使资源已经更新。
如果不需要版本号，可以将 $ver 参数设置为 null。

5. 条件加载

有时候，我们只需要在特定的页面或情况下加载某些资源。可以使用 WordPress 的条件判断函数来实现条件加载。

常用的条件判断函数：

is_front_page()：是否是首页
is_home()：是否是文章列表页
is_single()：是否是文章详情页
is_page()：是否是页面
is_category()：是否是分类页
is_tag()：是否是标签页
is_archive()：是否是归档页
is_search()：是否是搜索结果页
is_404()：是否是 404 页面
is_page_template()：是否使用了特定的页面模板

示例：

function my_theme_enqueue_scripts() {
  // 只在文章详情页加载 highlight.js
  if ( is_single() ) {
    wp_enqueue_script( 'highlight', get_template_directory_uri() . '/js/highlight.js', array(), '1.0', false );
  }

  // 只在使用特定页面模板的页面加载 custom-page.css
  if ( is_page_template( 'templates/custom-page.php' ) ) {
    wp_enqueue_style( 'custom-page', get_template_directory_uri() . '/css/custom-page.css', array(), '1.0' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

6. 最佳实践

使用 wp_register_script 和 wp_register_style 注册资源： 这样可以更好地组织代码，并避免重复注册。
正确声明依赖关系： 确保资源按正确的顺序加载。
使用版本号进行缓存刷新： 避免浏览器缓存旧版本的资源。
使用条件加载： 只在需要的时候加载资源。
将 JavaScript 文件放在页脚加载： 避免阻塞页面渲染。
合并和压缩资源： 可以使用构建工具或插件来合并和压缩 JavaScript 和 CSS 文件，减少 HTTP 请求数量，提高加载速度。
使用 CDN： 将静态资源托管到 CDN 上，可以提高加载速度，减轻服务器压力。
避免在循环中调用 wp_enqueue_script 和 wp_enqueue_style： 这会导致资源被重复加载。

7. `wp_localize_script` 的使用

wp_localize_script 函数可以将 PHP 变量传递给 JavaScript 代码。这在很多情况下都非常有用，例如：

将 WordPress 的配置信息传递给 JavaScript 代码。
将翻译后的字符串传递给 JavaScript 代码。
将 AJAX URL 传递给 JavaScript 代码。

函数原型：

wp_localize_script(
    string $handle,
    string $object_name,
    array  $l10n
);

参数说明：

参数名	类型	描述
`$handle`	`string`	脚本的 handle，必须是已经注册的脚本。
`$object_name`	`string`	JavaScript 中用于访问数据的对象名。
`$l10n`	`array`	一个关联数组，包含要传递给 JavaScript 的数据。数组的键将成为 JavaScript 对象中的属性名，数组的值将成为 JavaScript 对象中的属性值。

示例：

function my_theme_enqueue_scripts() {
  wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );

  // 将 PHP 变量传递给 JavaScript 代码
  $data = array(
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'nonce'    => wp_create_nonce( 'my_nonce' ),
    'text'     => __( 'Hello from PHP!', 'my-theme' ),
  );
  wp_localize_script( 'my-theme-script', 'MyThemeData', $data );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

JavaScript 代码：

jQuery(document).ready(function($) {
  console.log(MyThemeData.ajax_url);
  console.log(MyThemeData.nonce);
  console.log(MyThemeData.text);
});

代码解释：

wp_localize_script( 'my-theme-script', 'MyThemeData', $data ) 将 $data 数组传递给 JavaScript 代码，并将其存储在 MyThemeData 对象中。
在 JavaScript 代码中，可以使用 MyThemeData.ajax_url、MyThemeData.nonce 和 MyThemeData.text 来访问这些数据。

8. 解除注册和移除资源

WordPress 提供了 wp_deregister_script、wp_deregister_style、wp_dequeue_script 和 wp_dequeue_style 函数来解除注册和移除已注册的资源。

wp_deregister_script( string $handle ): 解除注册一个脚本。解除注册后，该脚本将无法再被加载。
wp_deregister_style( string $handle ): 解除注册一个样式表。解除注册后，该样式表将无法再被加载。
wp_dequeue_script( string $handle ): 从队列中移除一个脚本。移除后，该脚本将不会被加载，但它仍然是注册的。
wp_dequeue_style( string $handle ): 从队列中移除一个样式表。移除后，该样式表将不会被加载，但它仍然是注册的。

使用场景：

替换默认的 JavaScript 库： 例如，可以使用 wp_deregister_script( 'jquery' ) 解除注册 WordPress 自带的 jQuery 库，然后加载自己版本的 jQuery 库。
移除不需要的插件样式： 有些插件可能会加载一些不需要的样式表，可以使用 wp_dequeue_style 将其移除。
在特定页面移除全局加载的资源： 例如，可以在某个不需要 jQuery 的页面上使用 wp_dequeue_script( 'jquery' ) 移除 jQuery。

示例：

function my_theme_dequeue_scripts() {
  // 解除注册 WordPress 自带的 jQuery 库
  wp_deregister_script( 'jquery' );

  // 注册并加载自己版本的 jQuery 库
  wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), '3.6.0', true );
  wp_enqueue_script( 'jquery' );

  // 在文章详情页移除 contact-form-7 插件的样式表
  if ( is_single() ) {
    wp_dequeue_style( 'contact-form-7' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_theme_dequeue_scripts', 100 ); // 使用较高的优先级，确保在插件加载资源之后执行

注意：

wp_dequeue_script 和 wp_dequeue_style 只是从队列中移除资源，并不会解除注册。如果想要彻底移除资源，需要使用 wp_deregister_script 和 wp_deregister_style。
在移除插件的资源时，需要确保你的代码在插件加载资源之后执行。可以使用 add_action 函数的第三个参数（优先级）来控制执行顺序。优先级数值越大，执行顺序越晚。

9. 总结：资源加载策略

wp_enqueue_script 和 wp_enqueue_style 是 WordPress 中进行前端资源依赖管理的关键工具。它们提供了注册、加载、声明依赖关系、管理版本号和条件加载等功能，帮助我们构建更高效、更易维护的 WordPress 主题和插件。

要有效地使用这两个函数，需要理解其参数的含义，掌握依赖关系的处理方法，并遵循最佳实践。此外，还可以使用 wp_localize_script 将 PHP 变量传递给 JavaScript 代码，使用 wp_deregister_script 和 wp_dequeue_script 移除不需要的资源。

通过合理的资源管理，可以显著提升 WordPress 网站的性能和用户体验。重点在于理解，实践，反复练习，才能掌握。

WordPress 前端资源依赖管理：wp_enqueue_script 和 wp_enqueue_style 的深度解析

1. 为什么需要依赖管理？

2. wp_enqueue_script 和 wp_enqueue_style 的基本用法

3. 依赖关系的处理

4. 版本号的管理

5. 条件加载

6. 最佳实践

7. wp_localize_script 的使用

8. 解除注册和移除资源

9. 总结：资源加载策略

发表回复 取消回复

WordPress 前端资源依赖管理：`wp_enqueue_script` 和 `wp_enqueue_style` 的深度解析

2. `wp_enqueue_script` 和 `wp_enqueue_style` 的基本用法

7. `wp_localize_script` 的使用

发表回复取消回复