web-dev-qa-db-ja.com

javaScriptをロードするためのrequire.js

wp_enqueue_scriptはうまくいくように見えますが、それほどエレガントではありません。私は現在MVC（backbone.js）を使用し、文字通り30以上の別々のModel/View/Collection/Controllerスクリプトを持つWPフロントエンドを作っています、そして私は数を増やし続けます。私はrequire.jsを以前からよく使っていて、とても気に入っていますが、ワードプレスのロジックを完全に壊しているようです。

ワードプレスでjsスクリプトローダを使用するクリーンな方法を誰かに教えてもらえますか？それともこれは絶望的な仕事ですか？

ありがとう

javascriptwp-enqueue-scriptmvc
3
Alex

WordPressには基本的な.js API（登録およびエンキュースクリプト付き）が既にありますが、少なくともモジュールレベルでrequire.jsと組み合わせて使用​​できない理由はわかりません。

私が知ることができる（それを使用したことはない）ことから、ロードする必要があるだけなので、

wp_enqueue_script( 
     $handle, 
     '...folder../require.js',
      $deps,
      $ver,
      $in_footer 
);

次に、推奨されるrequireフォルダー構造とjsコードを使用して、それを利用します。 require.jsはフレームワークに依存しないと信じていますが、競合を避けるための独自の名前空間関数があります。

そうは言っても、使用しているプラ​​グインやテーマではなく、独自のコードで使用することに制限されます。

つまり、プラグインまたはテーマの作成者が正しい方法でスクリプトをwp_dequeue_scriptし、require.jsで管理することができますが、そうでない場合はどうでしょうか。ある種のハッキーなプラグインを書いたり、コードを手動で変更したりする以外にできることはあまりありません。

このため、wordpressでjsフレームワークを使用することは、プラグインとテーマをゼロから制御して制御しない限り、おそらく効果がありません。

1
Wyck

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設定ファイルを作成してfunctions.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);

そして最後に、あなたはあなたの設定ファイルに次のように遅延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);
});
0
akazakou