如何按需动态加载js文件

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


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

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

2. 所有组件的命名最好保持一致，callback调用也比较方便。还可以根据需要增加参数比如： requires，依赖于那些文件；style,true || false，是否加载样式，等等。


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

(function(window,undefined){
    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;
            var Res = document.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(){
                    Res.onload = null;
                    callback();
                    _self.loadedUi[modelName] = true;
                }
                Res.onerror = function(){
                    throw new Error('res error:' + modelName+'.js');
                }
            }
        },
        removeUi : function(modelName){
            if(!modelName){
                return true
            };
            this.loadedUi[modelName] = false;

            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
            };
            callback = callback || function(){};
            if(this.loadedUi[modelName] == true){
                callback();
                return true
            }

            var deafult_setting = {
                style : true,
                js    : true,
                requires : []
            }
            for(var key in setting){
                deafult_setting[key] = setting[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
            },callback);
            if(deafult_setting.requires.length > 0){
                for(var i=0,len = deafult_setting.requires.length;i < len;i++){
                    this.loadUi(deafult_setting.requires[i]);
                }
            }
        }
    }
})(window)

使用方法：

// load comment for feed
    window.bus.loadUi('new_comment_feed', function(){
        window.ui.new_comment_feed($("#J_newsList"));
    },{
        style : false,
        requires:['emoticon','addFriend']
    });

    // load new yy ui
    window.bus.loadUi('yy', function(){
        window.ui.yy(options);
    },{
        style:false,
        requires:['emoticon']
    });

    // load photoLightbox
    window.bus.loadUi('photoLightbox', function(){
        window.ui.photoLightbox(options.urlAjaxGetFriendPhoto, options.urlCommentOtherPhoto,$("#J_newsList"),options.myUid,options.myName);
    });