設定ファイルに従ってjs依存モジュールをロード_javascriptスキル

要件:

以下の設定ファイルによると

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

module=[
{'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
{'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
{'name':'register','src':'/js/page/reg.js','require':['jqform']},
{'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
{'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','uploadify']}
]

関数を書く

def getfiles(name)

特定の名前で指定されたページ、ロードされる JS ファイルのリストをロードする場合に戻ります。依存関係のあるファイルは最初にロードする必要があります

スナックソリューション

この質問は一見簡単そうに見えますが、実はそうではありません。

難しいのは、依存モジュールのロードのタイミングです。 A-B&C、B-C、モジュール A がモジュール B とモジュール C に依存し、モジュール B がモジュール C に依存するような依存関係がある場合、C を 2 回ロードすることはできません。

Xiaocai が与えた解決策は単なるアイデアです。Xiaocai はこれよりも優れたアルゴリズムが存在するはずですが、二分木のようなアルゴリズムで解決できると考えていますが、Xiaocai はその方法を知りません~~~

このアルゴリズムは循環依存関係を考慮していません。

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

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

/**
* 循環依存関係は考慮しません
* @type {関数}
​*/
varloadModule = (function(){
/**
* ビジネスロジックのカプセル化
* @type {{chainHead: {}、chainCurrent: {}、srcCache: {}、main: main、load:load、findModule: findModule}}
​​*/
var ロジック = {
チェーンヘッド: {}, // リンク
chainCurrent: {}, //リンクされたリストの現在のノード
srcCache: {}, //モジュール src キャッシュ
/**
* 外部インターフェース
* @param modules 構成オブジェクト
* @param name モジュール名
* @returns {Array} ロード順に並べられた依存モジュールのリスト
                       */
main: function(モジュール, 名前){
var nameArray = [], //モジュール名リスト
Srcarray = [], // 依存モジュールのリスト
nameStr = "", // モジュール名の文字列セット
Repeatregex = /（^|）（[w]）。*2 /、//通常のモジュール名deplication
i = 0;
//すべての依存モジュールを大まかにロードします
This.load(モジュール, 名前)
//モジュール名文字列セットを構築します
This.chainCurrent = this.chainHead;
while(this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
this.chainCurrent = this.chainCurrent.next;
}
nameStr = nameArray.join(" ") " " // 標準を統一し、最後にスペースを追加します
// 依存モジュールの重複排除
while(repeatRegex.exec(nameStr)){
nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
return g0.substring(0, (g0.length - g2.length));
});
}
nameStr = nameStr.substring(0, (nameStr.length - 1)) //補足的な余分なスペースを削除します
//依存モジュール名をモジュールパスに変換
nameArray = nameStr.split(" ");
for(i = 0; i srcArray.push(this.srcCache[nameArray[i]]);
}
return srcArray;
}、
/**
* モジュールを再帰的にロードします
* @param modules 構成オブジェクト
* @param name モジュール名
*/
ロード: function(モジュール, 名前){
var ノード = {},
module = this.findModule.call(modules, "name", name),
i = 0;
//モジュールが存在するかどうかを判断します
If(!モジュール){
throw Error("依存モジュール " name " が見つかりませんでした");
}
//モジュールの依存関係リストを構築します
node.name = 名前;
// ノード.src = module.src;
This.srcCache[名前] = module.src;
Node.next = this.chainHead;
This.chainHead = ノード;
//再帰的な依存関係
If(module.require && module.require.length){
for(i = 0;i This.load(modules, module.require[i]);
}
}
}、
/**
* 指定された属性名と属性値に基づいてモジュールを検索します
* @param name 属性名
* @param value 属性値
* @returns {*}
                       */
findModule: function(name, value){
var array = this,
アイテム = {}、
i = 0;
//トラバースモジュール
for(i = 0; i 項目 = 配列[i];
//指定されたモジュールを取得します
If(アイテム && アイテム[名前] === 値){
返品商品;
}
}
//見つからないためnullを返します
null を返す;
}
};
// 外部インターフェイスを公開します
戻り関数(){
returnlogics.main.apply(logics, argument);
};
}());
 /**
  * テストの使用例
  * @type {*[]}
 */
 var modules=[
     {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
     {'name':'swfobject','src':'/js/utils/swfobject.js'},
     {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
     {'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
     {'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
     {'name':'register','src':'/js/page/reg.js','require':['jqform']},
     {'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
     {'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','login','uploadify']}
 ];
 console.log(loadModule(modules, "upload"));