在Wordpress中使用requireJS

Fli*_*lam 5 javascript php wordpress jquery requirejs

我正在为我设置一种方法来保持我首选的requireJS工作方式并将其与Wordpress集成.

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

模板/ footer.php

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

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

这看到jQuery是否已经添加到页面中,如果已经将它设置为模块值.

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

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

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

这不是一个问题,更多的是要求最佳实践建议.任何人都将不胜感激!

谢谢!

Wil*_*ton 0

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

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

更新:根据 @brasofilo 注释,get_stylesheet_directory()如果子项中不存在匹配项,则该函数将搜索子项,然后搜索父项。get_stylesheet_directory()在父主题和子主题情况下均可安全使用。

取自 WP codex 并进行修改: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' );
Run Code Online (Sandbox Code Playgroud)

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