您的位置：首页 > Web前端 > JavaScript

如何按需动态加载js文件

2014-11-08 13:09 363 查看
JavaScript无非就是script标签引入页面，但当项目越来越大的时候，单页面引入N个js显然不行，合并为单个文件减少了请求数，但请求的文件体积却很大。这时候最好的做法就是按需引入，动态引入组件js和样式，文件load完成后调用callback，运行js。代码还是很简便的。


1. 判断文件load完成。加载状态ie为onreadystatechange，其他为onload、onerror

01
if
(isie){
02
Res.onreadystatechange =
function
(){
03
if
(Res.readyState ==
'complete'
 
|| Res.readyState ==
'loaded'
){
04
Res.onreadystatechange =
null
;
05
callback();
06
_self.loadedUi[modelName] =
true
;
07
}
08
}
09
}
10
else
{
11
Res.onload =
function
(){
12
Res.onload =
null
;
13
callback();
14
_self.loadedUi[modelName] =
true
;
15
}
16
Res.onerror =
function
(){
17
throw
 
new
 
Error(
'res error:'
 
+modelName+
'.js'
);
18
}
19
}
2. 所有组件的命名最好保持一致，callback调用也比较方便。还可以根据需要增加参数比如： requires，依赖于那些文件；style,true || false，是否加载样式，等等。

3. 移除操作也可以有，移除script、style标签、delete组件

001
(
function
(window,undefined){
002
if
(!window.ui) {
003
window.ui  = {};
004
}
005
//动态加载ui的js
006
window.bus  = {
007
config : {
008
version : window.config.version,
009
cssPath : window.config.resServer +
'/css/v3/ui'
,
010
jsPath  : window.config.resServer +
'/js/v2/ui'
011
},
012
loadedUi : {},
013
readyStateChange :
function
(){
014
var
 
ua = navigator.userAgent.toLowerCase();
015
return
 
ua.indexOf(
'msie'
) >= 0;
016
},
017
loadRes :
function
(modelName,prames,callback){
018
var
 
_self =
this
;
019
var
 
Res = document.createElement(prames.tagName);
020
for
(
var
 
k
in
 
prames){
021
if
(k!= 
'tagName'
){
022
Res.setAttribute(k,prames[k],0);
023
}
024
}
025
document.getElementsByTagName(
'head'
)[0].appendChild(Res);
026
027
if
(
this
.readyStateChange()){
028
Res.onreadystatechange =
function
(){
029
if
(Res.readyState ==
'complete'
 
|| Res.readyState ==
'loaded'
){
030
Res.onreadystatechange =
null
;
031
callback();
032
_self.loadedUi[modelName] =
true
;
033
}
034
}
035
}
else
{
036
Res.onload =
function
(){
037
Res.onload =
null
;
038
callback();
039
_self.loadedUi[modelName] =
true
;
040
}
041
Res.onerror =
function
(){
042
throw
 
new
 
Error(
'res error:'
 
+modelName+
'.js'
);
043
}
044
}
045
},
046
removeUi :
function
(modelName){
047
if
(!modelName){
048
return
 
true
049
};
050
this
.loadedUi[modelName] =
false
;
051
052
var
 
head   = document.getElementsByTagName(
'head'
)[0];
053
var
 
model_js   = document.getElementById(
'J_model_'
+modelName +
'_js'
);
054
var
 
model_css  = document.getElementById(
'J_model_'
+modelName +
'_css'
);
055
if
(model_js &&model_css){
056
delete
 
window.ui[modelName];
057
head.removeChild(model_js);
058
head.removeChild(model_css);
059
return
 
true
;
060
}
else
{
061
return
 
false
;
062
}
063
},
064
loadUi :
function
(modelName,callback,setting){
065
if
(!modelName){
066
return
 
true
067
};
068
callback= callback|| 
function
(){};
069
if
(
this
.loadedUi[modelName] ==
true
){
070
callback();
071
return
 
true
072
}
073
074
var
 
deafult_setting = {
075
style :
true
,
076
js: 
true
,
077
requires : []
078
}
079
for
(
var
 
key
in
 
setting){
080
deafult_setting[key] = setting[key];
081
}
082
deafult_setting[
'style'
] ===
true
 
&&
this
.loadRes(modelName,{
083
id  : 
'J_model_'
+modelName +
'_css'
,
084
name: modelName,
085
tagName :
'link'
,
086
type: 
'text/css'
,
087
rel : 
'stylesheet'
,
088
href: 
this
.config.cssPath +
'/'
 
+modelName +
'.css?v='
 
+
this
.config.version
089
});
090
091
deafult_setting[
'js'
] ===
true
 
&&
this
.loadRes(modelName,{
092
id  : 
'J_model_'
+modelName +
'_js'
,
093
name: modelName,
094
tagName :
'script'
,
095
type: 
'text/javascript'
,
096
src : 
this
.config.jsPath +
'/'
 
+modelName +
'.js?v='
+
this
.config.version
097
},callback);
098
if
(deafult_setting.requires.length > 0){
099
for
(
var
 
i=0,len = deafult_setting.requires.length;i < len;i++){
100
this
.loadUi(deafult_setting.requires[i]);
101
}
102
}
103
}
104
}
105
})(window)
使用方法：

01
// load comment for feed
02
window.bus.loadUi(
'new_comment_feed'
,
function
(){
03
window.ui.new_comment_feed($(
"#J_newsList"
));
04
},{
05
style :
false
,
06
requires:[
'emoticon'
,
'addFriend'
]
07
});
08
09
// load new yy ui
10
window.bus.loadUi(
'yy'
,
function
(){
11
window.ui.yy(options);
12
},{
13
style:
false
,
14
requires:[
'emoticon'
]
15
});
16
17
// load photoLightbox
18
window.bus.loadUi(
'photoLightbox'
,
function
(){
19
window.ui.photoLightbox(options.urlAjaxGetFriendPhoto,options.urlCommentOtherPhoto,$(
"#J_newsList"
),options.myUid,options.myName);
20
});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航