- 本文地址: 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已经可以实现了…..