javascript - 在 Wordpress 中使用 requireJS

标签 javascript php jquery wordpress requirejs

我正在设置一种方法来保持我喜欢的 requireJS 工作方式并将其与 Wordpress 集成。

最大的问题是如何加载 jquery。 Wordpress 通过 wp_enqueue_script 加载 jQuery,这需要保持这种方式,因为我经常使用的一些 Wordpress 插件需要以这种方式添加 jquery。然后我不想在我的 requireJS 设置中加载第二个版本的 jQuery。所以,经过一番环顾四周,这就是我想出的:

模板/页脚.php

<script>
if (typeof jQuery === 'function') {
    define( 'jquery', function () { return jQuery; } );
}

require(['/assets/js/sample-common.js'], function (common) {
   require(['sample-bootstrapper']);
});
</script>

它查看 jQuery 是否已添加到页面,如果已添加,则将其设置为模块值。

我的问题是,我是应该让 jquery 留在全局命名空间中,还是按照以下说明操作:

http://requirejs.org/docs/jquery.html#noconflictmap

上面的问题是我可能需要包含与 AMD 不兼容的 jquery 插件,是否值得努力使它们与 AMD 兼容,或者我考虑的另一种解决方案是从 noConflict 声明中删除 true全局命名空间中的“jQuery”允许插件运行。

这与其说是一个问题,不如说是对最佳实践建议的呼吁。任何人都将不胜感激!

谢谢!

最佳答案

WordPress 将 jQuery 排入队列,因为它是一个脚本,您应该为您自己的脚本执行相同的操作,因为这意味着 WordPress 可以优雅地为您处理依赖项。另请注意,WordPress 的捆绑 jQuery 已经以 noConflict() 模式加载,以防止插件冲突。

如果您将 jQuery 指定为脚本的依赖项之一,那么 WordPress 会将其添加到添加依赖于它的脚本的任何页面 - 但前提是尚未加载它(它不会再添加它时间)。

更新:根据@brasofilo 的评论,get_stylesheet_directory() 函数搜索子项,如果子项中不存在任何匹配项,则搜索父项。在父主题和子主题情况下都可以安全地使用 get_stylesheet_directory()

取自 WP 法典并修改:http://codex.wordpress.org/Function_Reference/wp_enqueue_script

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/sample-common.js', array( 'jquery' ), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

这里值得注意的是,如果您的脚本位于子主题目录中,那么您应该换出 get_template_directory_uri() 并将其替换为 get_stylesheet_directory_uri()

关于javascript - 在 Wordpress 中使用 requireJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19160344/

相关文章:

javascript - Jquery 新手 - 它在任何浏览器上都无法加载或工作

javascript - 上传到数据库时,反斜杠将从 JSON 字符串中删除

jquery - jquery中如何将图片变成链接?

javascript - 如何在 Directus 中创建报告页面

javascript - 获取选项标签之间的文本以与 Google map 路线计算器一起使用

php - PHP中数字的递归和阶乘

php - IF 后面是否必须跟 ELSE

jquery - 提交操作在生产服务器 (RAILS) 上被调用两次

javascript - 通过 saga 取消请求

javascript - Backbone 只需在事件中添加变量