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 相关文章推荐
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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
PHP开发文件系统实例讲解
2006/10/09 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP new static 和 new self详解
2017/02/19 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
python3下载抖音视频的完整代码
2019/06/05 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
小学开学典礼主持词
2014/03/19 职场文书
单位员工收入证明样本
2014/10/09 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书