BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] requireJSとjQueryを一緒に使うにはどうしたらいいですか？

2023-07-13 01:46:02

質問

requireJSを使用したいのですが、jQueryを使用しています。 私は最新のjQueryのバージョンを使用していないので、requireJSとjQueryの結合されたバージョンを使用したくありません。 私がrequireJSで作業するための最良の方法は何ですか？

どのように解決するのですか？

それはあまりにも私の正確な質問です 私はまた、古いjQueryを使用する必要がありますが、より多くのquot;traditional"javascriptライブラリも使用します。それを行うための最良の技術は何ですか？(あなたが気にしないなら、私はそれをより広くするためにあなたの質問を編集するかもしれません。) 以下は、私が学んだことです。

RequireJSの作者であるJames Burkeが説明したのは RequireJS + jQuery の結合ファイルの長所である . 2つのことを得ることができます。

  1. モジュールです。 jquery が利用可能で、それはjQueryオブジェクトです。これは安全です。 

    // My module depends on jQuery but what if $ was overwritten?
define(["jquery"], function($) {
  // $ is guaranteed to be jQuery now */
})

  2. jQueryは require() または define() のようなものです。すべてのモジュールは、jQueryの準備が整っていることが保証されています。は必要ありません。 require/order.js プラグインも必要ありません。

私にとって、2番はあまり役に立ちません。ほとんどの実際のアプリケーションでは が多く .js ファイル が必要です。 を正しい順序で読み込まなければなりません-悲しいことですが事実です。Sammy や Underscore.js が必要になるとすぐに、RequireJS+jQuery の組み合わせのファイルは役に立たなくなるのです。

私の解決策は、"order" プラグインを使用して私の従来のスクリプトをロードするシンプルな RequireJS ラッパーを書くことです。

例

私のアプリがこれらのコンポーネントを持っているとします（依存関係による）。

  • 私のアプリは greatapp
    • greatapp はカスタム jquery (古いバージョンを使用しなければなりません)
    • greatappは以下のものに依存しています。 my_sammy (SammyJSと私が使わなければならないすべてのプラグイン)に依存しています。これらは は順番に並べなければなりません
      1. my_sammy は以下のものに依存します。 jquery (SammyJSはjQueryのプラグインです)
      2. my_sammyは以下のものに依存しています。 sammy.js
      3. my_sammyは以下のものに依存しています。 sammy.json.js
      4. my_sammyは以下のものに依存しています。 sammy.storage.js
      5. my_sammyは以下のものに依存しています。 sammy.mustache.js

私の頭の中では、それより上はすべて .js で終わるものはすべて伝統的なスクリプトです。を含まないものはすべて .js はRequireJSのプラグインです。重要なのは、高レベルのもの（greatapp、my_sammy）はモジュールであり、より深いレベルでは、従来の .js ファイルに戻るということです。

起動

すべてはブーターがRequireJSに起動方法を伝えることから始まります。 

<html>
  <head>
    <script data-main="js/boot.js" src="js/require.js"></script>
  </head>
</html>

で js/boot.js 設定とアプリケーションの起動方法のみを記述しています。 

require( // The "paths" maps module names to actual places to fetch the file.
         // I made modules with simple names (jquery, sammy) that will do the hard work.
         { paths: { jquery: "require_jquery"
                  , sammy : "require_sammy"
                  }
         }

         // Next is the root module to run, which depends on everything else.
       , [ "greatapp" ]

         // Finally, start my app in whatever way it uses.
       , function(greatapp) { greatapp.start(); }
       );

メインアプリケーション

で greatapp.js 普通の見た目のモジュールを持っています。 

define(["jquery", "sammy"], function($, Sammy) {
  // At this point, jQuery and SammyJS are loaded successfully.
  // By depending on "jquery", the "require_jquery.js" file will run; same for sammy.
  // Those require_* files also pass jQuery and Sammy to here, so no more globals!

  var start = function() {
    $(document).ready(function() {
      $("body").html("Hello world!");
    })
  }

  return {"start":start};
}

従来のファイルに対するRequireJSモジュールラッパー

require_jquery.js : 

define(["/custom/path/to/my/jquery.js?1.4.2"], function() {
  // Raw jQuery does not return anything, so return it explicitly here.
  return jQuery;
})

require_sammy.js : 

// These must be in order, so use the "order!" plugin.
define([ "order!jquery"
       , "order!/path/to/custom/sammy/sammy-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js"
       ]

       , function($) {
           // Raw sammy does not return anything, so return it explicitly here.
           return $.sammy;
         }
      );

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します