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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
原生js二级联动效果
Jun 20 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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循环获取GET和POST值的代码
2008/04/09 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python求pi的方法
2014/10/08 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
PHP面试题附答案
2015/11/28 面试题
写好自荐信的技巧
2013/11/08 职场文书
工厂实习感言
2014/01/14 职场文书
创先争优活动方案
2014/02/12 职场文书
消防演习通知
2015/04/25 职场文书
2015年教研员工作总结
2015/05/26 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL