JavaScript 開発エッセイ 2: js とファイルの動的ロード_javascript スキル

現時点での最善の方法は、オンデマンドでコンポーネント js とスタイルを動的に導入し、ファイルがロードされた後にコールバックを呼び出して js を実行することです。コードはまだ非常に単純です
1. ファイルのロードが完了したかどうかを確認します。読み込みステータスは onreadystatechange、その他は onload、onerror

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

if (isie){
Res.onreadystatechange = function(){
if(Res.readyState == 'complete' || Res.readyState == 'loaded'){
Res .onreadystatechange = null;
callback();
_self.loadedUi[modelName] = true;
Res.onload = function(){
Res.onload = null;
callback();
_self.loadedUi[modelName] = true;
Res.onerror = function(){
throw new Error(' res error:' modelName ' .js');
}
}


2. すべてのコンポーネントの名前を一貫させることが最善であり、コールバック呼び出しもより便利です。必要に応じて、ファイルに依存するパラメータ、true || スタイルをロードするかどうかなどのパラメータを追加することもできます。
3. スクリプト、スタイルタグ、およびコンポーネントを削除することもできます。

コードをコピーします。

コードは次のとおりです。 🎜> (function(window,unknown){ if(!window.ui) { window.ui = {};

}

// ui js の動的読み込み
window.bus = {
config : {
version : window.config.version,
cssPath : window.config.resServer '/css/v3/ui',
jsPath : window .config.resServer '/js/v2/ui'
},
loadedUi : {},
readyStateChange : function(){
var ua = navigator.userAgent.toLowerCase(); >return ua.indexOf('msie') >= 0;
},
loadRes : function(modelName,prames,callback){
var _self = this; createElement(prames.tagName);
for(var k in prames){
if(k != 'tagName'){
Res.setAttribute(k,prames[k],0); >}
}
document.getElementsByTagName('head')[0].appendChild(Res);
if(this.readyStateChange()){
Res.onreadystatechange = function() {
if(Res.readyState == 'complete' || Res.readyState == 'loaded'){
Res.onreadystatechange = null
callback();
_self.loadedUi[modelName] = true;
}
}
}else{
Res.onload = function(){
callback();モデル名] = true;
}
Res.onerror = function(){
throw new Error('res error:' modelName '.js');
}
}
},
removeUi : function(modelName){
if(!modelName){
return true
};
this.loadedUi[modelName] = false; .getElementsByTagName('head')[0];
var model_js = document.getElementById('J_model_' モデル名 '_js');
var model_css = document.getElementById('J_model_' モデル名 '_css') ; 🎜>if(model_js && model_css){
delete window.ui[modelName];
head.removeChild(model_css);
return true; else{
return false;
}
},
loadUi : function(modelName,callback,setting){
if(!modelName){
return true
};
callback = callback ||
if(this.loadedUi[modelName] == true){
return true
}
var deafult_setting = {
style : true,
js : true,
requires : []
}
for(var key in settings){
deafult_setting[key] = 設定 [key] ];
}
deafult_setting['style'] === true && this.loadRes(modelName,{
id : 'J_model_' モデル名 '_css',
名前 : モデル名,
tagName : 'link'、
type : 'text/css'、
rel : 'stylesheet'、
href : this.config.cssPath '/' modelName '.css?v=' this .config .version
});
deafult_setting['js'] === true && this.loadRes(modelName,{
id : 'J_model_' modelName '_js',
name : modelName ,
tagName : 'script',
type : 'text/javascript',
src : this.config.jsPath '/' modelName '.js?v=' this.config.version
}, callback);
if(deafult_setting.requires.length > 0){
for(var i=0,len = deafult_setting.requires.length;ithis. deafult_setting.requires[i]);
}
}
}
}
})(ウィンドウ)


使用法




コードをコピー


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

// フィードのコメントを読み込みます
window.bus.loadUi('new_comment_feed', function(){
window.ui.new_comment_feed($("#J_newsList"));
},{
style : false,
requires:['emoticon','addFriend']
});
// 新しい yy ui を読み込みます
window.bus.loadUi('yy', function(){
window.ui.yy(options);
},{
style:false 、
には次が必要です:['絵文字']
});
// photoLightbox を読み込みます
window.bus.loadUi('photoLightbox', function(){
window.ui.photoLightbox(options.urlAjaxGetFriendPhoto, options.urlCommentOtherPhoto,$("#J_newsList"),options .myUid,options.myName);
});