私は少し前に Ruan Yifeng の記事「jQuery の deferred オブジェクトの詳細な説明」を読み、
jQuery での deferred の使用法についてある程度理解しました。今日、庭で次の記事を目にしました:
リファクタリングについて。 JS フロントエンド フレームワーク の失敗経験 (ところで、デッド コードが懐かしいです) なので、jQuery の遅延を使用して JS ファイルを順番に非同期にロードする以前に書いたソリューションを共有しました。修正は歓迎です。
jQuery の deferred をまだ理解していない場合は、Ruan Yifeng による jQuery の deferred オブジェクトの詳細な説明を読むことを強くお勧めします。
JS ファイルをロードするコードは次のとおりです:
/*
JavaScript の非同期ロード
loadScript.load(["a.js", "b.js"]);
*/
varloadScript = (function( ) {
varloadOne = function (url) {
var dtd = $.Deferred();
var node = document.createElement('script');
node.type = "text/ javascript";
var onload = function(){
dtd.resolve();
};
$(node).load(onload).bind('readystatechange', function(){
if (node.readyState == 'loaded'){
onload();
}
});
document.getElementsByTagName('head')[0].appendChild(node) );
node.src = url;
return dtd.promise()
};
if(!$.isArray(urls)) {
returnload([ urls]);
}
var ret = [];
for (var i = 0; i ret[ i] =loadOne(urls[i]);
return $.when.apply($, ret)
return {
load:load
} ;
})() ;
コードは比較的単純なので、ここでは説明しません。
たとえば、プロジェクトには 2 つの JS ファイル (a.js と b.js) があります。コードは次のとおりです。
a.js:
var b = "i am in a.js"; .js";
b.js:
var b = "私は b.js にいます";
b をロードしたい場合最初に .js、次に a.js の例 コードは次のとおりです:
JavaScript の非同期
結果は次のとおりです。
ここでは、b.js で定義された変数が a.js の変数によって上書きされることがわかります。
要素パネルに移動すると、b.js と a.js が順に head に追加されていることがわかります。
このような問題については、皆さんも独自の解決策を共有してください。