你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
阿安

如何实现一个 CMD 模块加载器 2个回复 专栏 @ Javascript

阿安 发布于 2 年前

cmd 是阿里大神玉伯提出的基于浏览器的前端模块化规范,并在 seajs 中实现了这个规范。相对于另一个在国外比较流行的前端模块化规范 amd,cmd 对于 nodejs 的使用者来说更加友好,使得类似 commonJS 模块的写法可以在浏览器中使用,同时解决了浏览器中模块异步加载的困扰。
关于 cmd 更详细的内容可以移步 https://github.com/cmdjs/specification/blob/master/draft/module.md
今天,我们一起来学习如何实现一个浏览器端的简单的 cmd loader。

模块加载流程

下图展示了一个 cmd loader 的模块加载大体流程:

cmd loader

  1. 首先,通过 use 方法来加载入口模块,并接收一个回调函数, 当模块加载完成, 会调用回调函数,并传入对应的模块。use 方法会 check 模块有没有缓存,如果有,则从缓存中获取模块,如果没有,则创建并加载模块。
  2. 获取到模块后,模块可能还没有 load 完成,所以需要在模块上绑定一个 "complete" 事件,模块加载完成会触发这个事件,这时候才调用回调函数。
  3. 创建一个模块时,id就是模块的地址,通过创建 script 标签的方式异步加载模块的代码(factory),factory 加载完成后,会 check factory 中有没有 require 别的子模块:
    • 如果有,继续加载其子模块,并在子模块上绑定 "complete" 事件,来触发本身 的 "complete" 事件;
    • 如果没有则直接触发本身的 "complete" 事件。
  4. 如果子模块中还有依赖,则会递归这个过程。
  5. 通过事件由里到外的传递,当所有依赖的模块都 complete 的时候,最外层的入口模块才会触发 "complete" 事件,use 方法中的回调函数才会被调用。

功能划分

理解了整个过程,那么我们就来开始实现我们的代码,我们暂且给这个加载器命名为 mcmd 吧。首先是加载器的功能模块划分:

cmd loader

  • mcmd:入口文件,用于定义默认配置,参数,常量等,同时使用或加载其他的功能模块;
  • define:实现 cmd 中的 "define" 方法;
  • require:实现 cmd 中的 "require" 方法;
  • use:实现 cmd 中的 "use" 方法;
  • module:模块类,实现模块的创建、加载、事件等功能;
  • load:用于获取模块,把模块从新建和从 cache 中获取封装成统一的接口;
  • promise:异步任务处理器;
  • util:工具类函数;

构建

我们使用 commonJS 的方式进行编码,并使用 browserify 配合 gulp 来构建我们的项目。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer')

var pg = require('./package');
var versionName = pg.name + '.' + pg.version

gulp.task('default', ['build']);

gulp.task('build', function () {
    browserify('./src/mcmd.js')
        .bundle()
        .pipe(source(versionName))
        .pipe(buffer())
        .pipe(concat(versionName + '.js'))
        .pipe(gulp.dest('./prd'))
        .pipe(uglify())
        .pipe(concat(versionName + '.min.js'))
        .pipe(gulp.dest('./prd'));
});

确定好了功能划分和构建方式,下面我们就来实现每一个功能模块:

入口文件

将我们的 cmd loader 挂在 window.mcmd 上,把 define 方法也挂在 window.define 上,初始化其他的方法和配置。

var g = window;
g.define = require('./define');
g.mcmd = {
    use: require('./use'),
    require: require('./require'),

    // 模块缓存
    modules: {},

    // 默认配置
    config: {
        root: '/'
    },

    // 修改配置
    setConfig: function (obj) {
        for (var key in obj) {
            this.config[key] = obj[key];
        }
    },

    // 模块状态常量
    MODULE_STATUS: {
        PENDDING: 0,
        LOADING: 1,
        COMPLETED: 2,
        ERROR: 3
    }
};

use.js

实现了 mcmd.use 方法,接收两个参数,第一个是id或者id数组,第二个是回调函数。内部会使用 load.js 来获取模块,并通过 promise 来处理获取多个模块的并发异步场景。

var Promise = require('./promise');
var load = require('./load');

module.exports = function use(ids, callback) {

    if (!Array.isArray(ids)) {
        ids = [ids]
    }

    Promise.all(ids.map(function (id) {
        return load(mcmd.config.root + id);
    })).then(function (list) {
        if (typeof callback === 'function') {
            callback.apply(window, list);
        }
    }, function (errorInfo) {
        throw errorInfo;
    });
}

load.js

获取一个模块,并绑定事件,接收两个参数,一个是模块id,一个是回调函数,并返回一个 promise 对象。当模块 complete(加载完成)时,执行回调,同时 resolve 返回的 promise 对象。

var Promise = require('./promise');
var Module = require('./module');
var util = require('./util');

module.exports = function (id, callback) {
    return new Promise(function (resolve, reject) {
        var mod =  mcmd.modules[id] || Module.create(id);
        mod.on('complete', function () {
            var exp = util.getModuleExports(mod);
            if (typeof callback === 'function') {
                callback(exp);
            }
            resolve(exp);
        });
        mod.on('error', reject);
    });
}

promise.js

详见: http://annn.me/ecmascript6-promise

module.js

模块的构造函数,实现了模块的创建,加载,事件传递,状态维护等。

// 构造函数
function Module(id) {
    mcmd.modules[id] = this; // 缓存模块
    this.id = id;
    this.status = mcmd.MODULE_STATUS.PENDDING; // 状态
    this.factory = null;    // 执行代码
    this.dependences = null;    //依赖
    this.callbacks = {};    // 绑定的事件回调函数
    this.load();
}

// 静态方法创建模块
Module.create = function (id) {
    return new Module(id);
}

// 通过创建 script 标签异步加载模块
Module.prototype.load = function () {
    var id = this.id;
    var script = document.createElement('script');
    script.src = id;
    script.onerror = function (event) {
        this.setStatus(mcmd.MODULE_STATUS.ERROR, {
            id: id,
            error: (this.error = new Error('module can not load.'))
        });
    }.bind(this);
    document.head.appendChild(script);
    this.setStatus(mcmd.MODULE_STATUS.LOADING);
}

// 事件绑定方法
Module.prototype.on = function (event, callback) {
    (this.callbacks[event] || (this.callbacks[event] = [])).push(callback);
    if (
        (this.status === mcmd.MODULE_STATUS.LOADING && event === 'load') ||
        (this.status === mcmd.MODULE_STATUS.COMPLETED && event === 'complete')
    ) {
        callback(this);
    }
    if (this.status === mcmd.MODULE_STATUS.ERROR && event === 'error') {
        callback(this, this.error);
    }
}

// 事件触发方法
Module.prototype.fire = function (event, arg) {
    (this.callbacks[event] || []).forEach(function (callback) {
        callback(arg || this);
    }.bind(this));
}

// 设置状态方法,并抛出相应的事件
Module.prototype.setStatus = function (status, info) {
    if (this.status !== status) {
        this.status = status;
        switch (status) {
            case mcmd.MODULE_STATUS.LOADING:
                this.fire('load');
                break;
            case mcmd.MODULE_STATUS.COMPLETED:
                this.fire('complete');
                break;
            case mcmd.MODULE_STATUS.ERROR:
                this.fire('error', info);
                break;
            default:
                break;
        }
    }
}

module.exports = Module;

define.js

实现 window.define 方法。接收一个参数 factory(cmd规范中不止一个,为了保持简单,我们只实现一个),即模块的代码包裹函数。通过 getCurrentScript 这个函数获取到当前执行脚本的 script 节点 src ,提取出模块 id ,找到模块对象。然后提取出 factory 中的依赖子模块,如果没有依赖,则直接触发模块的 "complete" 事件, 如果有依赖,则创建依赖的模块,绑定事件并加载,等依赖的模块加载完成后,再触发 "complete" 事件。

var util = require('./util');
var Promise = require('./promise');
var Module = require('./module');

module.exports = function (factory) {
    var id = getCurrentScript().replace(location.origin, '');
    var mod = mcmd.modules[id];
    var dependences = mod.dependences = getDenpendence(factory.toString());
    mod.factory = factory;
    if (dependences) {
        Promise.all(dependences.map(function (id) {
            return new Promise(function (resolve, reject) {
                id = mcmd.config.root + id;
                var depMode = mcmd.modules[id] || Module.create(id);
                depMode.on('complete', resolve);
                depMode.on('error', reject);
            });
        })).then(function () {
            mod.setStatus(mcmd.MODULE_STATUS.COMPLETED);
        }, function (error) {
            mod.setStatus(mcmd.MODULE_STATUS.ERROR, error);
        });
    }
    else {
        mod.setStatus(mcmd.MODULE_STATUS.COMPLETED);
    }
}

// 获取当前执行的script节点
// 参考 http://www.cnblogs.com/rubylouvre/archive/2013/01/23/2872618.html
function getCurrentScript() {
    var doc = document;
    if(doc.currentScript) {
        return doc.currentScript.src;
    }
    var stack;
    try {
        a.b.c();
    } catch(e) {
        stack = e.stack;
        if(!stack && window.opera){
            stack = (String(e).match(/of linked script \S+/g) || []).join(" ");
        }
    }
    if(stack) {
        stack = stack.split( /[@ ]/g).pop();
        stack = stack[0] == "(" ? stack.slice(1,-1) : stack;
        return stack.replace(/(:\d+)?:\d+$/i, "");
    }
    var nodes = head.getElementsByTagName("script");
    for(var i = 0, node; node = nodes[i++];) {
        if(node.readyState === "interactive") {
            return node.className = node.src;
        }
    }
}

// 解析依赖,这里只做简单的提取,实际需要考虑更多情况,参考seajs
function getDenpendence(factory) {
    var list = factory.match(/require\(.+?\)/g);
    if (list) {
        list = list.map(function (dep) {
            return dep.replace(/(^require\(['"])|(['"]\)$)/g, '');
        });
    }
    return list;
}

require.js

返回模块的 exports 属性, 这里通过封装的 util.getModuleExports 方法获取并返回。

var util = require('./util');

module.exports = function (id) {
    id = mcmd.config.root + id;
    var mod = mcmd.modules[id];
    if (mod) {
        return util.getModuleExports(mod);
    }
    else {
        throw 'can not get module by from:' + id;
    }
}

module.exports.async = function (ids, callback) {
    mcmd.use(ids, callback);
}

util.js

这里只有一个 getModuleExports 方法, 接收一个模块,返回模块的接口。当模块的 exports 属性不存在时,说明模块的 factory 没有被执行过。这时我们需要执行下 factory,传入 require, 创建的exports,以及 module 本身作为参数。最后获取模块的暴露的数据并返回。

module.exports = {
    getModuleExports: function (mod) {
        if (!mod.exports) {
            mod.exports = {};
            mod.factory(mcmd.require, mod.exports, mod);
        }
        return mod.exports;
    }
};

这样,整个 cmd loader 就基本完成了。这只是一个非常基础的模块加载器,主要是为了理解 cmd 的原理和实现方式,对于生产环境,推荐使用成熟的 seajs。

整个 mcmd 项目我都放在了 github 上,大家可以去看看:https://github.com/hanan198501/mcmd

  • changfuguo

    通俗易懂

    #1
  • 剧中人

    前段时间手贱,实现了一个使用 all in one 的打包方式后的 seajs 的替代品,作为博客前端资源 build 后的模块管理工具。

    阉割了线上不需要的模块加载部分,从中体会到了前辈们精妙的思路,也学习、实践了模块管理、定义的相关方式,收获甚多。

    项目: https://github.com/bh-lay/seaportjs
    博客:http://bh-lay.com

    #2
登录后回复,如无账号,请使用邀请码注册