- 本文地址: https://www.laruence.com/2009/05/21/829.html
- 转载请注明出处
最近的项目中,需要对于不同的用户角色分别读取不同的的JS文件簇, 从而避免一次载入全部JS文件, 于是就写了一个简单的JS Loader.
这个loader, 每次载入一个js文件, 在前一个文件完全载入后, 才继续载入下一个文件.
Loader提供了俩个事件:
一个完整的实例, 看这里: Eve Js loader
例子:
var loader = Loader;
loader.onReady = function(){
alert('全部载入完成');
}
loader.on('onLoad', function(name) {
alert(name + '载入完成');
});
loader.load([
'http://www.laruence.com/1.js',
'http://www.laruence.com/test.js',
'http://www.laruence.com/main.js'
]
Loader.js
/**
* Eve Js Loader
* @version 1.0.1
* @author laruence<laruence at yahoo.com.cn>
* @copyright (c) 2009 www.laruence.com
*/
/**
* a global object instance, you can easily change to a class definition
*/
var Loader = {
/**
* @var onLoad when load a individual file completed ,
* this event will be fired * @param string name loaded script file name
*/
onLoad : function(name){},
/**
* @var onReady when all scripts loaded, this event will be fired
*/
onReady : function(){},
/**
* a empty constructor
*/
init : function(container) {
},
/**
* a empty error handler
*/
handlerError : function(e) {
alert(e);
},
/**
* event register
* @param string evt event name
* @param function handler
*/
on : function(evt, handler) {
switch ( evt.toLowerCase() ) {
case 'load' :
this.onLoad = handler;
break;
case 'ready' :
this.onReady = handler;
break;
default :
break;
}
return true;
},
/**
* private method
*/
_load : function(path, callback) {
try {
var script = document.createElement('script');
script.src = path;
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
if( script.addEventListener ) {
script.addEventListener("load", callback, false);
} else if(script.attachEvent) {
script.attachEvent("onreadystatechange", function(){
if(script.readyState == 4
|| script.readyState == 'complete'
|| script.readyState == 'loaded') {
callback();
}
});
}
} catch(e) {
this.handlerError(e);
callback();
}
},
/**
* start loding process
* @param array scripts files want to be loaded
*/
load : function(scripts) {
var total = scripts.length;
var _self = this;
var indicator = arguments[1] || 0;
if ( indicator >= total ) {
_self.onReady();
return true;
}
var callee = arguments.callee;
var script = scripts[indicator];
this._load(script, function() {
_self.onLoad(script);
callee.apply(_self, [scripts, ++indicator]);
});
return true;
}
}
备忘: http://code.google.com/p/evejsloader/
Thanks for experience.
Eve Js Loader?
在你这个blog上我学到了很多东西,记得你有此在某篇文章里提到php编译执行,你为什么不写一个出来了, 我第一个愿意用~——~
It’s perfect time to make some plans for the future
and it’s time to be happy. I’ve learn this submit and if I could
I wish to recommend you some attention-grabbing issues or advice.
Perhaps you could write subsequent articles relating to this
article. I desire to read even more issues approximately it!
当要使用的对象不存在, 则去load相应的js文件, 回调函数中继续执行??
恩。
那Js能不能实现PHP中auto_load()的效果呢,对象不存在时自动去加载?
恩, loader的初衷是为了按需加载. 当项目的js文件很大的时候,会有帮助.
当,要使用的对象不存在, 则去load相应的js文件, 回调函数中继续执行.
laruence,附加一个问题:Eve Js Loader只能在页面加载完成(形成DOM树)后才开始工作,如果用户在页面加载完成后立即操作,这时候该如何给用户反馈?
当然,可以采用loading进度条的方式,提前提醒用户等待。
loader.on(‘onLoad’, function(name) {
alert(name + ‘载入完成’);
});
———-应该是?———-
loader.on(‘load’, function(name) {
alert(name + ‘载入完成’);
});
在你这个blog上我学到了很多东西,记得你有此在某篇文章里提到php编译执行,你为什么不写一个出来了, 我第一个愿意用~——~
呵呵, 这个只是个设想, 目前来讲,APC已经可以实现了…..