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代码通俗易懂(自写)
Jun 19 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Django权限控制的使用
2021/01/07 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
社区消防工作实施方案
2014/03/21 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
个人维稳承诺书
2015/05/04 职场文书
博物馆观后感
2015/06/05 职场文书
python如何获取网络数据
2021/04/11 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers