技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> JS文件装载器(Eve Js Loader)

JS文件装载器(Eve Js Loader)

浏览:2148次  出处信息

最近的项目中,需要对于不同的用户角色分别读取不同的的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/

  • 建议继续学习:

    1. 海量小文件存储    (阅读:7383)
    2. 其实,文件也可以truncate    (阅读:7255)
    3. 关于Linux的文件系统cache    (阅读:4645)
    4. Perl 倒行分析文件方法。perl读文本文件,从末尾往前读.    (阅读:4314)
    5. 修改系统最大文件句柄数    (阅读:4122)
    6. PHP:从一个大文件第N行开始读取M行    (阅读:3801)
    7. C/C++循环获取文件中的每行数据(别以为很简单!)    (阅读:3746)
    8. linux file命令是如何识别文件的类型的    (阅读:3727)
    9. 打开多个文件:linux ulimit max open files    (阅读:3496)
    10. shell文件存在相关判断参数    (阅读:3488)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    << 前一篇:使用JS做文档处理
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1