javascript开发随笔二 动态加载js和文件


Posted in Javascript onNovember 25, 2011

这时候最好的做法就是按需引入,动态引入组件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); 
});
Javascript 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jquery 笔记 事件
Nov 02 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
javascript基本语法
May 31 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 #Javascript
基于jquery的拖动布局插件
Nov 25 #Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 #Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
JQuery1.6 使用方法三
Nov 23 #Javascript
jQuery1.6 使用方法二
Nov 23 #Javascript
jQuery1.6 使用方法一
Nov 23 #Javascript
You might like
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
利用js对象弹出一个层
2008/03/26 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python 调用Google翻译接口的方法
2020/12/09 Python
打架检讨书50字
2014/01/11 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
合作意向书
2014/07/30 职场文书
2014年医务科工作总结
2014/12/18 职场文书
公务员年终个人总结
2015/02/12 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电