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