require.js to load javascript

时间:2012-04-28 作者:Alex

虽然wp\\u enqueue\\u脚本似乎可以工作,但它并不是很优雅。我目前正在制作一个使用MVC(backbone.js)的WP前端,它有30多个独立的模型/视图/集合/控制器脚本,我一直在增加这个数量。我用过require。js以前很喜欢它,但它似乎完全打破了WordPress的逻辑。

有谁能告诉我一个在wordpress中使用js脚本加载器的干净方法吗?还是这是一项没有希望的任务?

谢谢

2 个回复
最合适的回答,由SO网友:Wyck 整理而成

虽然WordPress已经有了一个基本的。js API(带有register和enqueue脚本),我不明白为什么不能将其与require结合使用。js,至少在模块化级别。

据我所知(从未使用过),只需加载即可,

wp_enqueue_script( 
     $handle, 
     \'...folder../require.js\',
      $deps,
      $ver,
      $in_footer 
);
然后使用推荐的require文件夹结构和js代码来利用它。我认为这是必要的。js是框架无关的,尽管如此,它有自己的名称空间功能来避免冲突。

尽管如此,您仍将被限制为将其用于自己的代码,而不是您可能使用的插件和主题。

也就是说,如果插件或主题作者以正确的方式wp_dequeue_script 脚本并使用require对其进行管理。js,但如果他们没有呢?除了编写某种黑客插件或手动更改代码之外,你没什么可做的。

因此,在wordpress中使用js框架可能不值得,除非您从头开始并控制插件和主题。

SO网友:akazakou

要使用require JS,您需要外接程序头

<!-- Delayed execution of inline jQuery scripts with ready waiting event -->
<script type="text/javascript">(function(w, d, u){w.readyQ = []; w.bindReadyQ = []; function p(x, y){if (x == "ready"){w.bindReadyQ.push(y); } else{w.readyQ.push(x); }}; var a = {ready:p, bind:p}; w.$ = w.jQuery = function(f){if (f === d || f === u){return a} else{p(f)}}})(window, document)</script>

<!-- Loading require.js -->
<script async data-main="/wp-content/theme/default/js/requirejs.config" src="/wp-content/theme/default/js/requirejs.min.js"></script>
接下来,创建Require。JS配置文件和更新函数。php

/* Delayed loading of all JS files */
add_filter(\'script_loader_tag\', function($tag, $handle, $src) {
    if (isAdmin()) return $tag;

    if (stripos($src, \'jquery.min\') !== FALSE) return \'\';

    global $wp_scripts;
    $dependencies = $wp_scripts->query($handle, \'registered\')->deps;
    $dependenciesList = empty($dependencies) ? "\'jquery\'" : "\'" . implode("\',\'", $wp_scripts->query($handle, \'registered\')->deps) . "\'";

    return "<script>$(document).ready(function(){ define(\'{$handle}\', [{$dependenciesList}], function(){require([\'{$src}\']);}); require([\'{$handle}\']); });</script>\\n";
}, 10, 3);
在finish中,您需要在配置文件中添加延迟jquery事件的初始化,如下所示:

requirejs.config({
    paths: {
        jquery: \'jquery.min\'
    }
});

//loading jquery as dependency
require(["jquery"], function ($) {
    (function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document);
});

结束