ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の遅延オブジェクトを使用して JS ファイルを非同期かつ順次にロードする_jquery
jQuery の遅延オブジェクトを使用して JS ファイルを非同期かつ順次にロードする_jquery
- WBOYオリジナル
- 2016-05-16 17:40:301257ブラウズ
私は少し前に 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) があります。コードは次のとおりです。
コードをコピー コードは次のとおりです。 var a = "i am in a.js";
var b = "i am in a.js"; .js"; b.js:
コードをコピー コードは次のとおりです: var a = "私は b.js にいます";
var b = "私は b.js にいます"; b をロードしたい場合最初に .js、次に a.js の例 コードは次のとおりです:
コードをコピー コードは次のとおりです: