javascript开发随笔二 动态加载js和文件
时间:2024-05-10 14:06:32
这时候最好的做法就是按需引入,动态引入组件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);
});
标签:动态加载
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue中el-table合并列的具体实现
2024-05-02 16:35:03
![](https://img.aspxhome.com/file/2023/0/130230_0s.png)
python实现数组求和与平均值
2021-09-27 07:15:49
![](https://img.aspxhome.com/file/2023/4/118054_0s.png)
javascript打印html内容功能的方法示例
2024-04-25 13:13:23
浅析Go语言中的Range关键字
2024-02-10 10:57:42
Python编程通过懒属性提升性能
2022-04-01 09:48:43
矩形相交以及求出相交的区域的原理解析
2023-08-17 18:39:09
![](https://img.aspxhome.com/file/2023/2/123762_0s.jpg)
Python实现简单截取中文字符串的方法
2022-09-08 01:43:48
解决杀毒软件误删asp文件的方法
2008-10-21 21:23:00
基于python使MUI登录页面的美化
2023-10-23 16:28:03
![](https://img.aspxhome.com/file/2023/5/95585_0s.jpg)
Python 二分查找之bisect库的使用详解
2023-10-03 01:24:29
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2022-02-25 20:42:51
Sanic框架应用部署方法详解
2021-04-29 08:40:33
python不使用for计算两组、多个矩形两两间的iou方式
2021-08-19 19:08:33
![](https://img.aspxhome.com/file/2023/5/115465_0s.jpg)
Go Gin实现文件上传下载的示例代码
2023-06-21 15:11:13
解决vue-cli + webpack 新建项目出错的问题
2024-04-29 13:10:56
Django 内置权限扩展案例详解
2022-08-21 23:25:45
![](https://img.aspxhome.com/file/2023/7/133827_0s.jpg)
SQLSERVER查看数据库日志方法与语句示例代码(已亲测)
2024-01-17 21:32:35
![](https://img.aspxhome.com/file/2023/6/106236_0s.png)
关于numpy中np.nonzero()函数用法的详解
2023-01-06 12:29:34
Python struct.unpack
2023-10-14 21:29:56
python爬虫判断招聘信息是否存在的实例代码
2022-09-14 20:38:04