JS文件装载器(Eve Js Loader)

最近的项目中,需要对于不同的用户角色分别读取不同的的JS文件簇, 从而避免一次载入全部JS文件, 于是就写了一个简单的JS Loader.

这个loader, 每次载入一个js文件, 在前一个文件完全载入后, 才继续载入下一个文件.

Loader提供了俩个事件:

onLoad 每当一个单独的js文件被载入完成后, 就会调用这个事件函数.
onReady 当全部载入完成后, 会调用OnReady事件处理函数.

** 一个完整的实例, 看这里: 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;
    }
}