如何按需动态加载js文件

浏览数：30 / 时间：2015年06月09日

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
});