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 相关文章推荐
prototype class详解
Sep 07 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
Javascript中With语句用法实例
May 14 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP文本操作类
2006/11/25 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
经管应届生求职信
2013/11/17 职场文书
晚会邀请函范文
2014/01/24 职场文书
中学生英语演讲稿
2014/04/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
小学教师节活动总结
2015/03/20 职场文书
趣味运动会赞词
2015/07/22 职场文书
小学主题班会教案
2015/08/17 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
配置nginx 重定向到系统维护页面
2021/06/08 Servers
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Python基本的内置数据类型及使用方法
2022/04/13 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers