javascript开发随笔二 动态加载js和文件
35 浏览量
2020-12-10
19:19:54
上传
评论
收藏 35KB PDF 举报
javascript开发随笔二开发随笔二 动态加载动态加载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;
}
资源评论
