Press "Enter" to skip to content

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;
        }
    }
    

    备忘: http://code.google.com/p/evejsloader/

    10 Comments

    1. friv
      friv December 7, 2018

      Eve Js Loader?

    2. happy wheels
      happy wheels October 2, 2018

      在你这个blog上我学到了很多东西,记得你有此在某篇文章里提到php编译执行,你为什么不写一个出来了, 我第一个愿意用~——~

    3. Jimmy
      Jimmy February 11, 2016

      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!

    4. longlinfeng
      longlinfeng August 14, 2009

      当要使用的对象不存在, 则去load相应的js文件, 回调函数中继续执行??
      恩。
      那Js能不能实现PHP中auto_load()的效果呢,对象不存在时自动去加载?

    5. 雪候鸟
      雪候鸟 August 13, 2009

      恩, loader的初衷是为了按需加载. 当项目的js文件很大的时候,会有帮助.
      当,要使用的对象不存在, 则去load相应的js文件, 回调函数中继续执行.

    6. longlinfeng
      longlinfeng August 13, 2009

      laruence,附加一个问题:Eve Js Loader只能在页面加载完成(形成DOM树)后才开始工作,如果用户在页面加载完成后立即操作,这时候该如何给用户反馈?
      当然,可以采用loading进度条的方式,提前提醒用户等待。

    7. longlinfeng
      longlinfeng August 13, 2009

      loader.on(‘onLoad’, function(name) {
      alert(name + ‘载入完成’);
      });
      ———-应该是?———-
      loader.on(‘load’, function(name) {
      alert(name + ‘载入完成’);
      });

    8. toms
      toms May 23, 2009

      在你这个blog上我学到了很多东西,记得你有此在某篇文章里提到php编译执行,你为什么不写一个出来了, 我第一个愿意用~——~

      • 雪候鸟
        雪候鸟 May 23, 2009

        呵呵, 这个只是个设想, 目前来讲,APC已经可以实现了…..

    Comments are closed.