YUIモジュールの開発原理を詳しく解説_基礎知識

インターネット アプリケーションがますます重くなり、JS コードがますます大きくなるにつれて、独自のコードを効果的に整理する方法が非常に重要になってきています。私たちは、どこからともなく大量のバグが発生して終わるのではなく、自分自身のコードを制御する方法を学ぶ必要があります。モジュール式フロントエンド開発は、特に複数人で開発する場合に、コードを効果的に管理するのに役立ち、開発効率が向上します。

YUI がモジュールを生成する方法は です:
YUI.add('module1', function (Y) { ... }, '1.0.0', Required: [' module2']);
YUI は、jquery の $ に似たグローバル変数です。 add メソッドの最初のパラメータはモジュール module1 の名前、2 番目のパラメータはモジュールの内容である匿名関数、3 番目のパラメータはバージョン名、4 番目の require はモジュールの依存関係を表します。 is module1 module2 に依存します (つまり、module2 は module1 の前に実行される必要があります)。
通常、各モジュールは js ファイルに保存され、ファイルにはモジュール名に基づいた名前が付けられます。つまり、モジュール module1 は module1.js ファイルに保存され、module2 は module2.js ファイルに保存されます。
モジュール module1 をロードします:
//すべての YUI 依存関係を含む YUI シード ファイルをロードします

コードをコピー コードは次のとおりです:

<script><br> YUI().use('module1', function (Y ) { .. });<br></script>

上記のコード行で何が起こるかを分析してみましょう。
1) YUI はまず module1 モジュールの依存関係を分析し、URL: http://localhost:3000/yui/combo?mudule2.js&module1.js を作成します。 module2.js が module1.js の前にあることに注意してください。
2) 動的スクリプトタグを作成し、サーバーから js ファイルをリクエストします

コードをコピー コードは次のとおりです。

var script = document.createElement('script ');
script = 'http://localhost:3000/yui/combo?mudule2.js&module1.js';
if(script.readyState) {
//IE
script.onreadystatechange = function ( ) {
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
//予約
}
};
} else {
//非 IE
script.onload = function () {
//予約
};
}
document.body .append (スクリプト);

3) サーバーはクライアントからの受信リクエストを検出し、URL を解析して、2 つの JS ファイル module2.js と module1.js の検索を開始し、2 つのファイルを順番に 1 つのファイルに結合して返します。それをクライアントに送ります。返される最終的な js ファイルの内容は次のとおりです。

コードをコピー コードは次のとおりです。

//module2.js の内容
YUI.add('module2', function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; }, '1.0 .0', Required : []);
// module1.js
の内容 YUI.add('module1', function (Y) { Y.module1 = {}; Y.module1.name = ' module1'; } 、 '1.0.0'、次が必要です: ['module2']);

4) クライアントは返された js を受け取り、解析を開始します。つまり、YUI 内部で add メソッドを実行します。実行プロセスはおおよそ次のとおりです。

コードをコピー コードは次のとおりです:

YUI.modules = {};
// module2
YUI.modules.push(function (Y) { Y.module2 = {}; Y.module2.name = 'module2'; });
//module1
YUI.modules .push( function (Y) { Y.module1 = {}; Y.module1.name = 'module1'; });

5) 解析が完了すると、ステップ 2 の onload メソッド (IE では onreadystatechange メソッド) が自動的にトリガーされます。 以下は、ステップ 2 の「予約」のコードです。

コードをコピー コードは次のとおりです。

for(var i = 0, len = YUI.modules .length; i < len; i ) {
// これは YUI のインスタンスです;
YUI.modules[ i](this);
}
//callback は YUI() のコールバック関数です。use
//この時点でモジュールの解析が完了し、 this パラメータを渡します。そして、コールバックで module1 を自由に呼び出すことができます。 そして module2 の API 出力
callback(this);

上記は、YUI を使用したモジュール開発の簡単な紹介です。YUI の実際のプロセスは、上記よりもはるかに複雑です。