如何按需动态加载js文件

动态加载JavaScript
服务器君一共花费了147.286 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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

本文地址:http://www.nowamagic.net/librarys/veda/detail/604,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/604

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《重来:更为简单有效的商业思维》 贾森•弗里德(Jason Fried) (作者), 大卫•汉森(David Heinemeier Hansson) (作者), Mike Rohde (插图作者), 李瑜偲 (译者)

这本书呈现的是一种更好、更简单的经商成功之道。读完这本书,你就会明白为什么计划实际上百害而无一益,为什么你不需要外界投资人,为什么将竞争视而不见反倒会发展得更好。事实是你所需要的比你想象的少得多。你不必成为工作狂,你不必大量招兵买马,你不必把时间浪费在案头工作和会议上,你甚至不必拥有一间办公室。所有这些都仅仅是借口!

更多计算机宝库...