JS文件装载器(Eve Js Loader)

风雪之隅 2009-10-29 14:08:23 累计浏览 2,715 次

本机暂存

内容概览

这篇讲的是前端开发中如何按需加载脚本，以解决传统全量加载带来的性能问题。

作者在新项目中遇到了一个典型痛点：不同用户角色需要访问不同的功能模块，如果将所有JS文件一次性打包加载，会导致大量无用代码被下载和执行，拖慢页面速度。为此，他并没有选择重型的模块打包方案，而是实现了一个名为 Eve Js Loader 的轻量级脚本装载器。

这个 Loader 的核心思路非常直接：它根据传入的用户角色或具体需求，动态地加载对应的 JS 文件簇。其实现上支持 Promise 异步加载，避免了阻塞页面渲染，同时具备一定的依赖管理能力，确保脚本按序执行。对于中小型项目或需要极高动态性的场景，这种“用什么加载什么”的方式，比构建时打包要灵活得多，能显著减少应用的初期加载体积，提升首屏响应速度。

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

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

JQuery实现Excel表格呈现（累计阅读 48,349）
深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,404）
从输入 URL 到页面加载完成的过程中都发生了什么事情？（累计阅读 15,933）
图片动态局部毛玻璃模糊效果的实现（累计阅读 14,848）
天朝第二代身份证号码的验证机制（累计阅读 14,761）
HTML 5 的data-* 自定义属性（累计阅读 14,349）
分享一个JQUERY颜色选择插件（累计阅读 14,223）
什么是全栈工程师？（累计阅读 14,037）
快速排序（Quicksort）的Javascript实现（累计阅读 11,735）
7 天打造前端性能监控系统（累计阅读 11,187）