in.js 軽量 JavaScript の詳細なモジュールの読み込みと依存関係管理ソリューション_JavaScript スキル

海外のものでは、jQueryをベースにしたRequireJs、YUI Loader、LabJs、RunJs、国内ではTaobaoのSeaJs、DoubanのDoJなどもあります。これらは非常に優れたモジュールローダーです。ただし、この記事では、新しいオープンソースの軽量「マルチスレッド」非同期モジュール ローダー In.js を紹介します。In の開発には、Do のアイデアと使用習慣の一部が使用されています。この期間中、@kejun の忍耐に感謝します。私の場合、In.js は圧縮後わずか 4.77k で、小さいだけでなく非常に使いやすいです。

利点:
オンデマンド読み込み
ノンブロッキング読み込み
依存関係管理
詳細なモジュール管理
使用方法?
A. In.js を導入します

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

ページの上部に in.js を導入するだけで、注意すべきパラメータが 2 つあります:
autoload: in.js をロードするときに基礎となるコア ライブラリをロードするかどうか – {オプションのパラメータ – true|false}
core: 基礎となるコア ライブラリへのパス – {オプション パラメーター – url}
core が同時に設定され、autoload=true の場合、In.js の導入時にコアがページに読み込まれます。
B. 各モジュールのアドレスと依存関係を宣言します In.add(name,{config})

コードをコピーします コード次のように:

In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'}); 🎜 >In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']}) ;
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a'] } );

上記のコードは、3 つのモジュールの依存関係とモジュールのアドレスを宣言し、それらをキューに追加します (キューに追加されるだけであり、ページにはロードされません)。 。
C. Load queue In(queue)

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

var Demon=In('mod-b',function() {
//何かをする
},function() {
//何かをする
return false;
} );

mod-b モジュールをロードし、ロード後に functionA と functionB を実行します。in.js の導入時に autoload=true が設定されていると仮定すると、キュー内のロード順序は次のようになります。 >1 jquery .min.js >>> mod-a >>> mod-b >>> ; functionB( )
すべてのキューがロードされた後、デモには各関数の戻り値を格納する配列が割り当てられます:
1demo={returns:[unknown,false],complete:true}
D. domReady の後にキュー In.ready(queue) をロードします

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

In.ready('mod-b',function() {

//何かを実行します
});


キューの読み込み順序:

jquery.min.js >>> {domReady} >>> mod-b >> ()
In.ready() と In() の違いは次の 2 点です。
In.ready() のキューは、domReady() に戻り値がなくなった後にのみ実行されます。 E. 変数の変化と値の変化を監視します。 In.watch(object,property,function(prop,old,new) {})
In によってロードされるキューはすべて非同期でノンブロッキングなロードであるため、場合によっては、特別なニーズ (キュー関数の戻り値に依存する後続の操作など) のために、後続の操作を実行する前にキューの実行が完了していることを確認する必要があります。この場合、In.watch() を使用して return.complete 変数を監視し、return.complete==true の場合にコールバック関数を実行できます。コードは次のとおりです。 >
コードをコピー

コードは次のとおりです: var model=In('model',function() { //何かをしますreturn 123; });

In.watch(model,'complete',function(prop,old,new) {

if(model[prop]==true) {
console.log(model.returns [0]);//print 123
In.unwatch(model,prop);//model.complete の監視イベントを破棄します
}
}); 🎜>

In の魅力は上記にとどまらず、いくつかの大規模なプロジェクトでも確認されています。さらに、In() を使用して未宣言のモジュールをロードすると、次のようになります。モジュール名を確認するように求められます。より多くのフロントエンドの友人が In に注目し、In を使用し、さらには In のその後の開発に投資してくれることを心から願っています。

下の写真は、In.js 使用アルバム の英語版です:

どこからダウンロードしますか?

In.js はオープンソース プロジェクトです。ソース コードは以下のアドレスで見つけるか、ダウンロードして使用できます。

In.js を使用して Javascript モジュールを細かく管理し、ロードします

http://project.benben.cc/In

http://github.com/PaulGuo/In

著者について

著者: Guokai