msgbartop
PHP语言, PHP扩展, Zend引擎相关的研究,技术,新闻分享 – 左手代码 右手诗
msgbarbottom

21 May 09 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/


    分享到:



    Related Posts:

    Tags: , , , ,

    7 Responses to “JS文件装载器(Eve Js Loader)”

    1. Jimmy |

      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!

    2. longlinfeng |

      当要使用的对象不存在, 则去load相应的js文件, 回调函数中继续执行??

      恩。

      那Js能不能实现PHP中auto_load()的效果呢,对象不存在时自动去加载?

    3. 雪候鸟 |

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

    4. longlinfeng |

      laruence,附加一个问题:Eve Js Loader只能在页面加载完成(形成DOM树)后才开始工作,如果用户在页面加载完成后立即操作,这时候该如何给用户反馈?

      当然,可以采用loading进度条的方式,提前提醒用户等待。

    5. longlinfeng |

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

    6. 雪候鸟 |

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

    7. toms |

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

    Leave a Reply

    *