javascript开发随笔二 动态加载js和文件

 更新时间:2011年11月25日 01:26:50   作者:   我要评论
js无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大

这时候最好的做法就是按需引入,动态引入组件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中的for循环

    深入理解JavaScript中的for循环

    这篇文章主要给大家深入的介绍了JavaScript中的for循环,其中包括ES5中的三种for循环,分别是简单for循环、for-in以及forEach,另外还详细介绍了ES6新增的一种循环:for-of ,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • JS运动特效之同时运动实现方法分析

    JS运动特效之同时运动实现方法分析

    这篇文章主要介绍了JS运动特效之同时运动实现方法,结合实例形式分析了javascript同时运动的原理与相关实现技巧,需要的朋友可以参考下
    2018-01-01
  • 使用javascript实现简单的选项卡切换

    使用javascript实现简单的选项卡切换

    本文主要介绍了使用javascript实现简单的选项卡切换的效果,代码非常的简单,兼容性十分棒,这里推荐给小伙伴们。
    2015-01-01
  • PHP中CURL的几个经典应用实例

    PHP中CURL的几个经典应用实例

    这篇文章主要介绍了PHP中CURL的几个经典应用实例,本文讲解了cURL请求的基本步骤、在cURL中用POST方法发送数据、用cURL上传文件等内容,需要的朋友可以参考下
    2015-01-01
  • JavaScript中的对象继承关系

    JavaScript中的对象继承关系

    这篇文章主要介绍了JavaScript中的对象继承关系的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • jQuery实现为控件添加水印文字效果(附源码)

    jQuery实现为控件添加水印文字效果(附源码)

    这篇文章主要介绍了jQuery实现为控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • 解决 FireFox 下[使用event很麻烦] 的问题.

    解决 FireFox 下[使用event很麻烦] 的问题.

    解决 FireFox 下[使用event很麻烦] 的问题....
    2006-08-08
  • javascript实现图像循环明暗变化的方法

    javascript实现图像循环明暗变化的方法

    这篇文章主要介绍了javascript实现图像循环明暗变化的方法,实例分析了javascript操作css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript深拷贝的原理与实现方法分析

    javascript深拷贝的原理与实现方法分析

    这篇文章主要介绍了javascript深拷贝的原理与实现方法,简单分析了值传递和引用传递的原理与实现方法,并结合实例形式给出了深拷贝的具体实现技巧,需要的朋友可以参考下
    2017-04-04
  • 简单方法判断JavaScript对象为null或者属性为空

    简单方法判断JavaScript对象为null或者属性为空

    对已声明但未初始化的和未声明的变量执行typeof,都返回undefined,null表示一个空对象指针,typeof操作会返回object
    2014-09-09

最新评论