首页 > 代码库 > 如何按需动态加载js文件

如何按需动态加载js文件

2024-08-01 00:36:02   215人阅读

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

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

01if(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}
10else{
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
02window.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
10window.bus.loadUi(‘yy‘, function(){
11    window.ui.yy(options);
12},{
13    style:false,
14    requires:[‘emoticon‘]
15});
16 
17// load photoLightbox
18window.bus.loadUi(‘photoLightbox‘, function(){
19    window.ui.photoLightbox(options.urlAjaxGetFriendPhoto, options.urlCommentOtherPhoto,$("#J_newsList"),options.myUid,options.myName);
20});

如何按需动态加载js文件


联系
我们