JavaScript 개발 에세이 2: js 및 files_javascript 기술을 동적으로 로드

이때 가장 좋은 방법은 요청 시 도입하고, 파일이 로드된 후 콜백을 호출하고 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;
}
}
}else{
function(){
Res.onload = null;
callback();
_self.loadedUi[modelName] = true;
}
Res.onerror = function(){
새 오류 발생(' res error:' modelName ' .js');
}
}

2. 모든 구성 요소의 이름을 일관되게 유지하는 것이 가장 좋으며 콜백 호출도 더 편리합니다. 필요에 따라 해당 파일에 따라 달라지는 스타일, true || false, 스타일 로드 여부 등과 같은 매개변수를 추가할 수도 있습니다.
3. 스크립트, 스타일 태그 제거, 구성요소 삭제 등도 가능합니다.

코드 복사 코드는 다음과 같습니다. 🎜>

(function(window,undefine){
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 == '완료' || Res.readyState == '로드됨'){
Res.onreadystatechange = null;
callback()
_self.loadedUi[modelName ] = true;
}
}
}else{
Res.onload = function(){
Res.onload =
callback(); modelName] = true;
}
Res.onerror = function(){
throw new Error('res error:' modelName '.js')
}
}
},
removeUi : function(modelName){
if(!modelName){
return true
};
this.loadedUi[modelName] =
var head = document .getElementsByTagName('head')[0];
var model_js = document.getElementById('J_model_' modelName '_js')
var model_css = document.getElementById('J_model_' modelName '_css') ; 🎜>if(model_js && model_css){
delete window.ui[modelName];
head.removeChild(model_js)
head.removeChild(model_css)
return true; else{
return false;
}
},
loadUi : function(modelName,callback,setting){
if(!modelName){
return true
};
콜백 = 콜백 || function(){};
if(this.loadedUi[modelName] == true){
콜백()
return true
}
var deafult_setting = {
style : true,
js : true,
requires: []
}
for(var key in 설정){
deafult_setting[key] = 설정 [key ];
}
deafult_setting['style'] === true && this.loadRes(modelName,{
id : 'J_model_' modelName '_css',
name : modelName,
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
}, 콜백);
if(deafult_setting.requires.length > 0){
for(var i=0,len = deafult_setting.requires.length;ithis.loadUi( deafult_setting.requires[i])
}
}
}
}
})(창)


사용법

코드 복사

코드는 다음과 같습니다.

// 피드 댓글 로드
window.bus.loadUi('new_comment_feed', function(){
window.ui.new_comment_feed($("#J_newsList"));
},{
스타일: false,
필요:['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)
});