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);
});
0
投稿
猜你喜欢
- 本文实例讲述了SQL Server时间戳功能与用法。分享给大家供大家参考,具体如下:一直对时间戳这个概念比较模糊,相信有很多朋友也都会误认为
- 如何将产生的密码记录并发送给用户?这里使用了cdonts邮件组件来发送邮件,前提服务器得支持cdonts组件。好了,看看具体实现方法吧,不是
- 简介:with是从Python2.5引入的一个新的语法,它是一种上下文管理协议,目的在于从流程图中把 try,except 和finally
- 本文针对SQL 2016 正式版安装过程进行梳理总结,帮助大家顺利安装SQL 2016,具体内容如下1.点击全新安装2.接着就是下一步,下一
- tensorflow在保存权重模型时多使用tf.train.Saver().save 函数进行权重保存,保存的ckpt文件无法直接打开,不利
- python svm实现手写数字识别——直接可用最近在做个围棋识别的项目,需要识别下面的数字,如下图:我发现现在网上很多代码是良莠不齐,…真
- xmlhttp,IE不支持overrideMimeType()方法,即使是IE7。 // Mozilla/Safari/
- 一、内置函数下面简单介绍几个:1.abs() 求绝对值2.all() 如果 iterable 的所有元素都为真(或者如果可迭代为空),则返回
- 授权就是为某个用户赋予某些权限。例如,可以为新建的用户赋予查询所有数据库和表的权限。MySQL 提供了 GRANT 语句来为用户设置权限。在
- 1、前言 MySQL 是完全网络化的跨平台关系型数据库系统,同时是具有客户机/服务器体系结构的分布式数据库管理系统。它具有功能强、使用简便、
- 前言React核心的单向数据流、一切皆数据的state、不会改变的props,以及状态提升等等经常使用便不多总结,需要的看官方文档。JSXJ
- 一、os函数目录1 os.access(path, mode) 检验权限模式2 os.chdir(path) 改变当前工
- 我就废话不多说了,直接上代码吧!#coding:utf-8import osimport statimport shutil#filePat
- 区别:series,只是一个一维数据结构,它由index和value组成。dataframe,是一个二维结构,除了拥有index和value
- 1. 使用while循环输出1 2 3 4 5 6 8 9 10count=0while count <10:count+=1prin
- 这篇论坛文章着重介绍了SQL Server数据库简体繁体数据混用的问题,详细内容请参考下文:我现在要说的是一个在简体繁体数据混用的时候很容易
- select信道处理注意:有default就不会阻塞package mainfunc main() {var chan1 = make(ch
- 本文实例讲述了Python实现返回数组中第i小元素的方法。分享给大家供大家参考,具体如下:#! /usr/bin/env python#co
- sort 包源码解读前言我们的代码业务中很多地方需要我们自己进行排序操作,go 标准库中是提供了 sort 包是实现排序功能的,这里来看下生
- 初学python,我们必须干点有意思的事!从微信下手吧!头像集样例如下: 大家可以发朋友圈开启辨认大赛哈哈~话不多说,直接上代码,注释我写了