requireJS 使用ガイド_その他-jsチュートリアル-php.cn

requireJS 使用ガイド_その他

WBOY

リリース： 2016-05-16 15:03:36

オリジナル

1346 人が閲覧しました

ほとんどのプロジェクトではモジュール開発が使用されており、requireJS は AMD モジュール開発のモデルであるため、学習する必要があります。 requireJS を使用してデモを段階的に作成することで、requireJS の全体的な開発プロセスと、requireJS の使用に関する自分自身の感想を学ぶことができます。

AMD: JavaScript コードを非同期にロードするためのモジュールベースのメカニズム。グローバルオブジェクトへの依存関係を他のモジュールにカプセル化することを開発者に推奨します。多くのグローバル変数を宣言する必要はありません。遅延ロードおよびオンデマンドロードを通じて、個々のモジュールの依存関係を解決します。モジュール化された JavaScript コードの利点は明らかです。各機能コンポーネントの疎結合により、コードの再利用性と保守性が大幅に向上します。この JavaScript コードのノンブロッキングかつ同時かつ高速な読み込みにより、JavaScript コードに依存しない Web ページ上の他の UI 要素 (画像、CSS、その他の DOM ノードなど) が最初に読み込まれるようになり、Web ページの読み込みが速くなり、ユーザーは高速に読み込むことができます。良い結果が得られます。

1. requireJS をダウンロードします

requireJS を使用したモジュール開発の前に、いくつか準備する必要があります。次に、require.js ファイルをダウンロードする必要があります。ははは、このファイルはそれに基づいて開発されているためです。

2. HTML ファイルを作成します

HTML ファイルを作成した後、requireJS をインポートするときに <script> タグを使用する必要があります。これについては間違いありません。そして、このタグにはdata-main属性があり、これが入り口と出口として機能します。つまり、requireJSを読み込んだ後、data-main属性から入ります。 </p> <p>例: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <!DOCTYPE html> <head> <title>require</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body>  <script data-main="js/main" src="js/require.js"></script> </body> </html> </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p>js/require.jsをロードしたら、js/mainのjsファイルを実行します。 main も js ファイルです。その .js 接尾辞を省略すると、requireJS によって追加されます。 </p> <p><strong>3. データメイン</strong></p> <p>プログラムが <script data-main='js/main' src='js/require.js'></script> を実行するとき、 data-main を通じて main.js に入り、 main.js を実行します。では、main.js には何が含まれているのでしょうか?

コードを参照してください:

/*
  require.config执行baseUrl为'js'，
  baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require，来引入monkey.js，
  然后通过后面的匿名函数给他们分配参数，如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

ログイン後にコピー

上記のコードから、main.js に require.config と require の 2 つのモジュールが含まれていることがわかります。

require.config の機能は、requireJS のいくつかのパラメータを設定し、それらをパブリックに参照することです。

たとえば、上記のbaseUrlの機能は、それをベースパスとして使用し、このパスの下にあるファイルを検索することです。すべての .js ファイルを js フォルダーに置きます。したがって、この属性を構成すると、今後のファイルは js パスの下でコンテンツを検索します。

次のように:

require(['monkey'], function(monkey){
  monkey.init();
});

ログイン後にコピー

猿を指す場合は、js/monkey ではなく、monkey を指します。

パスの役割は何ですか?よく使用されるいくつかの js ファイルを一般的な名前に置き換えるだけです。たとえば、jquery-1.8.2.min.js は、呼び出すたびにこれを記述することはできません。便宜上、jquery-1.8.2.min.js を今後は jquery に置き換えて使用できます。 jquery を直接実行すると、高速で便利です。

はい、require.config は見慣れたものです。一言で言えば、その機能は requireJS を設定することです。

require についてはどうですか?

require の機能は実行です。たとえば、ここでは、monkey.js だけを実行する必要があるため、monkey をインポートし、mk パラメーターを使用して、monkey 実行後の戻り値を取得しています。戻り値がある場合は、それに応じて mk を処理できます。

ねえ、猿の中には何が入ってるの？

見てみましょう:

/*
  define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

ログイン後にコピー

定義してください!その機能は、他のモジュールまたは require で使用するための js モジュールを定義することです。他のjsモジュールを参照する方法はrequireと同様で、必要なjsファイルをインポートし、パラメータを1対1に対応させます。誰もが注意する必要があるのは、define で定義されたメソッドや変数には他のモジュールからアクセスできないということです。そのため、他のモジュールにアクセスさせたい場合は、対応するメソッドを object または function にスローするだけです。ここで、私が返すのは、他のモジュールを呼び出すための init を提供するオブジェクトです。