ホームページ > 記事 > ウェブフロントエンド > requireJS 使用ガイド_その他
ほとんどのプロジェクトではモジュール開発が使用されており、requireJS は AMD モジュール開発のモデルであるため、学習する必要があります。 requireJS を使用してデモを段階的に作成することで、requireJS の全体的な開発プロセスと、requireJS の使用に関する自分自身の感想を学ぶことができます。
AMD: JavaScript コードを非同期にロードするためのモジュールベースのメカニズム。グローバル オブジェクトへの依存関係を他のモジュールにカプセル化することを開発者に推奨します。多くのグローバル変数を宣言する必要はありません。遅延ロードおよびオンデマンドロードを通じて、個々のモジュールの依存関係を解決します。モジュール化された JavaScript コードの利点は明らかです。各機能コンポーネントの疎結合により、コードの再利用性と保守性が大幅に向上します。この JavaScript コードのノンブロッキングかつ同時かつ高速な読み込みにより、JavaScript コードに依存しない Web ページ上の他の UI 要素 (画像、CSS、その他の DOM ノードなど) が最初に読み込まれるようになり、Web ページの読み込みが速くなり、ユーザーは高速に読み込むことができます。良い結果が得られます。
1. requireJS をダウンロードします
requireJS を使用したモジュール開発の前に、いくつか準備する必要があります。次に、require.js ファイルをダウンロードする必要があります。ははは、このファイルはそれに基づいて開発されているためです。
2. HTML ファイルを作成します
HTML ファイルを作成した後、requireJS をインポートするときに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用する必要があります。これについては間違いありません。そして、このタグにはdata-main属性があり、これが入り口と出口として機能します。つまり、requireJSを読み込んだ後、data-main属性から入ります。
例:
<!DOCTYPE html> <head> <title>require</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <!--这是requireJS,data-main是作为入口模块,在这里就是js/main--> <script data-main="js/main" src="js/require.js"></script> </body> </html>
js/require.jsをロードしたら、js/mainのjsファイルを実行します。 main も js ファイルです。その .js 接尾辞を省略すると、requireJS によって追加されます。
3. データメイン
プログラムが e4e68973213230bde45ab37f3eb5d0cc2cacc6d41bbb37262a98f745aa00fbf0 を実行するとき、 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 を提供するオブジェクトです。