JavaScript AMD 模块加载器原理与实现

关于前端模块化，玉伯在其博文 前端模块化开发的价值 中有论述，有兴趣的同学可以去阅读一下。

1. 模块加载器

模块加载器目前比较流行的有 Requirejs 和 Seajs。前者遵循 AMD规范，后者遵循 CMD规范。前者的规范产出比较适合于浏览器异步环境的习惯，后者的规范产出对于写过 nodejs 的同学来说是比较爽的。关于两者的比较，有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些。本文希望能按照 AMD 规范来简单实现自己的一个模块加载器，以此来搞清楚模块加载器的工作原理。

2. AMD规范与接口定义

在实现之前，我们需要拟定实现的API，然后才能进行下一步的编码。出于学习的目的，并没有完全实现 AMD规范 中定义的内容，简单实现的API如下：

// 定义模块
define(id?, dependencies?, factory);

// 调用模块
require(dependencies?, factory);

// 模块加载器配置
require.config({
    paths: {},
    shim: {
        'xx': {
            deps: [],
            exports: ''
        }
    }
    
});

// 模块加载器标识
define.amd = {};

假如我们有以下的开发目录：

    scripts
        |-- a.js
        |-- b.js
        |-- c.js
        |-- d.js
        |-- main.js
    define.js
    index.html

除了 define.js 为需要实现的内容，各个文件的大概内容为：

// a.js
define(['b'], function(b) {
    
    return {
        say: function() {
            return 'a call: ' + b;
        }
    };
        
});


// b.js
define(function() {
    return 'this is b';
});    


// c.js
(function(global) {
    global.NotAmd = function() {
        return 'c, not amd module';
    }
})(window);


// d.js
define(['b'], function(b) {
    
    return {
        say: function() {
            return 'd call: ' + b;
        }
    };
        
});


// main.js
require.config({
    paths: {
        'notAmd': './c'
    },
    shim: {
        'notAmd': {
            exports: 'NotAmd'
        }
    }
});
    
require(['a', 'notAmd', 'd'], function(a, notAmd, d) {
    console.log(a.say());           // should be: a call: this is b
    console.log(notAmd());       // should be: c, not amd module
    console.log(d.say());           // should be: d call: this is b
});


// index.html
<script src="vendors/define.js" data-main="scripts/main"></script>

上面的代码完全兼容于 Requirejs，将 define.js 换成 Requirejs，上面的代码就能成功跑起来。这里我们需要实现 define.js 来达到同样的效果。

3. 实现

一个文件对于一个模块。先看一下模块加载器的主要执行流程：

 整个流程其实就是加载主模块（data-main指定的模块，里面有require调用），然后加载require的依赖模块，当所有的模块及其依赖模块都已加载完毕，执行require调用中的factory方法。

在实现过程中需要考虑到的点有：

1. 构造一个对象，用以保存模块的标识、依赖、工厂方法等信息。

2. 非AMD模块的支持。非AMD模块不会调用define方法来定义自己，如果不支持非AMD模块，那么该模块在加载完毕之后流程会中断，其exports的结果也不对。

3. 采用url来作为模块标识，由于url的唯一性，不同目录同id的模块就不会相互覆盖。

4. 循环依赖。可分为两种依赖方式：

// 弱依赖：不在factory中直接执行依赖模块的方法
// a.js
define(['b'], function(b) {
    return {
        say: function() {
            b.say();
        }
    }
});

// b.js
define(['a'], function(a) {
    return {
        say: function(a) {
            a.say();
        }
    }
});

// 强依赖：直接在factory中执行依赖模块的方法
// a.js
define(['b'], function(b) {
    b.say();
             
    return {
         say: function() {
             return 'this is a';
         }
     }
});

// b.js
define(['a'], function(a) {
    a.say();
            
    return {
        say: function() {
            return 'this is b';
        }
    }
});

对于弱依赖，程序的解决方式是首先传递undefined作为其中一个依赖模块的exports结果，当该依赖模块的factory成功执行后，其就能返回正确的exports值。对于强依赖，程序会异常。但是如果确实在应用中发生了强依赖，我们可以用另外一种方式去解决，那就是模块加载器会传递该模块的exports参数给factory，factory直接将方法挂载在exports上。其实这也相当于将其转换为了弱依赖。不过大部分情况下，程序里面发生了循环依赖，往往是我们的设计出现了问题。

 

好了，下面是 define.js 实现的代码：

/*jslint regexp: true, nomen: true, sloppy: true */
/*global window, navigator, document, setTimeout, opera */
(function(global, undefined) {
    var document = global.document,
        head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
        baseElement = document.getElementsByTagName('base')[0],
        noop = function(){},
        currentlyAddingScript, interactiveScript, anonymousMeta,
        dirnameReg = /[^?#]*//,
        dotReg = //.//g,
        doubleDotReg = //[^/]+/..//,
        multiSlashReg = /([^:/])/+//g,
        ignorePartReg = /[?#].*$/,
        suffixReg = /.js$/,

        seed = {
            // 缓存模块
            modules: {},
            config: {
                baseUrl: '',
                charset: '',
                paths: {},
                shim: {},
                urlArgs: ''
            }
        };

    /* utils */
    function isType(type) {
        return function(obj) {
            return {}.toString.call(obj) === '[object ' + type + ']';
        }
    }

    var isFunction = isType('Function');
    var isString = isType('String');
    var isArray = isType('Array');


    function hasProp(obj, prop) {
        return Object.prototype.hasOwnProperty.call(obj, prop);
    }

    /**
     * 遍历数组，回调返回 true 时终止遍历
     */
    function each(arr, callback) {
        var i, len;

        if (isArray(arr)) {
            for (i = 0, len = arr.length; i < len; i++) {
                if (callback(arr[i], i, arr)) {
                    break;
                }
            }
        }
    }

    /**
     * 反向遍历数组，回调返回 true 时终止遍历
     */
    function eachReverse(arr, callback) {
        var i;

        if (isArray(arr)) {
            for (i = arr.length - 1; i >= 0; i--) {
                if (callback(arr[i], i, arr)) {
                    break;
                }
            }
        }
    }

    /**
     * 遍历对象，回调返回 true 时终止遍历
     */
    function eachProp(obj, callback) {
        var prop;
        for (prop in obj) {
            if (hasProp(obj, prop)) {
                if (callback(obj[prop], prop)) {
                    break;
                }
            }
        }
    }

    /**
     * 判断是否为一个空白对象
     */
    function isPlainObject(obj) {
        var isPlain = true;

        eachProp(obj, function() {
            isPlain = false;
            return true;
        });

        return isPlain;
    }

    /**
     * 复制源对象的属性到目标对象中
     */
    function mixin(target, source) {
        if (source) {
            eachProp(source, function(value, prop) {
                target[prop] = value;
            });
        }
        return target;
    }

    function makeError(name, msg) {
        throw new Error(name + ":" + msg);
    }

    /**
     * 获取全局变量值。允许格式：a.b.c
     */
    function getGlobal(value) {
        if (!value) {
            return value;
        }
        var g = global;
        each(value.split('.'), function(part) {
            g = g[part];
        });
        return g;
    }


    /* path */
    /**
     * 获取path对应的目录部分
     *
     * a/b/c.js?foo=1#d/e  --> a/b/
     */
    function dirname(path) {
        var m = path.match(dirnameReg);

        return m ? m[0] : "./";
    }

    /**
     * 规范化path
     *
     * http://test.com/a//./b/../c  -->  "http://test.com/a/c"
     */
    function realpath(path) {
        // /a/b/./c/./d --> /a/b/c/d
        path = path.replace(dotReg, "/");

        // a//b/c --> a/b/c
        // a///b////c --> a/b/c
        path = path.replace(multiSlashReg, "$1/");

        // a/b/c/../../d --> a/b/../d --> a/d
        while (path.match(doubleDotReg)) {
            path = path.replace(doubleDotReg, "/");
        }

        return path;
    }

    /**
     * 将模块id解析为对应的url
     *
     * rules:
     * baseUrl: http://gcfeng.github.io/blog/js
     * host: http://gcfeng.github.io/blog
     *
     * http://gcfeng.github.io/blog/js/test.js  -->  http://gcfeng.github.io/blog/js/test.js
     *                                    test  -->  http://gcfeng.github.io/blog/js/test.js
     *                              ../test.js  -->  http://gcfeng.github.io/blog/test.js
     *                                /test.js  -->  http://gcfeng.github.io/blog/test.js
     *                            test?foo#bar  -->  http://gcfeng.github.io/blog/test.js
     *
     * @param {String} id 模块id
     * @param {String} baseUrl 模块url对应的基地址
     */
    function id2Url(id, baseUrl) {
        var config = seed.config;

        id = config.paths[id] || id;

        // main///test?foo#bar  -->  main/test?foo#bar
        id = realpath(id);

        // main/test?foo#bar  -->  main/test
        id = id.replace(ignorePartReg, "");

        id = suffixReg.test(id) ? id : (id + '.js');

        id = realpath(dirname(baseUrl) + id);

        id = id + (config.urlArgs || "");

        return id;
    }


    function getScripts() {
        return document.getElementsByTagName('script');
    }

    /**
     * 获取当前正在运行的脚本
     */
    function getCurrentScript() {
        if (currentlyAddingScript) {
            return currentlyAddingScript;
        }

        if (interactiveScript && interactiveScript.readyState === 'interactive') {
            return interactiveScript;
        }

        if (document.currentScript) {
            return interactiveScript = document.currentScript;
        }

        eachReverse(getScripts(), function (script) {
            if (script.readyState === 'interactive') {
                return (interactiveScript = script);
            }
        });
        return interactiveScript;
    }

    /**
     * 请求JavaScript文件
     */
    function loadScript(url, callback) {
        var config = seed.config,
            node = document.createElement('script'),
            supportOnload = 'onload' in node;

        node.charset = config.charset || 'utf-8';
        node.setAttribute('data-module', url);

        // 绑定事件
        if (supportOnload) {
            node.onload = function() {
                onload();
            };
            node.onerror = function() {
                onload(true);
            }
        } else {
            node.onreadystatechange = function() {
                if (/loaded|complete/.test(node.readyState)) {
                    onload();
                }
            }
        }

        node.async = true;
        node.src = url;

        // 在IE6-8浏览器中，某些缓存会导致结点一旦插入就立即执行脚本
        currentlyAddingScript = node;

        // ref: #185 & http://dev.jquery.com/ticket/2709
        baseElement ? head.insertBefore(node, baseElement) : head.appendChild(node);

        currentlyAddingScript = null;


        function onload(error) {
            // 保证执行一次
            node.onload = node.onerror = node.onreadystatechange = null;
            // 删除脚本节点
            head.removeChild(node);
            node = null;
            callback(error);
        }
    }



    // 记录模块的状态信息
    Module.STATUS = {
        // 初始状态，此时模块刚刚新建
        INITIAL: 0,
        // 加载module.url指定资源
        FETCH: 1,
        // 保存module的依赖信息
        SAVE: 2,
        // 解析module的依赖内容
        LOAD: 3,
        // 执行模块，exports还不可用
        EXECUTING: 4,
        // 模块执行完毕，exports可用
        EXECUTED: 5,
        // 出错：请求或者执行出错
        ERROR: 6
    };

    function Module(url, deps) {
        this.url = url;
        this.deps = deps || [];                 // 依赖模块列表
        this.dependencies = [];                 // 依赖模块实例列表
        this.refs = [];                         // 引用模块列表，用于模块加载完成之后通知其引用模块
        this.exports = {};
        this.status = Module.STATUS.INITIAL;

        /*
         this.id
         this.factory
         */
    }

    Module.prototype = {
        constructor: Module,

        load: function() {
            var mod = this,
                STATUS = Module.STATUS,
                args = [];

            if (mod.status >= STATUS.LOAD) {
                return mod;
            }
            mod.status = STATUS.LOAD;

            mod.resolve();
            mod.pass();
            mod.checkCircular();

            each(mod.dependencies, function(dep) {
                if (dep.status < STATUS.FETCH) {
                    dep.fetch();
                } else if (dep.status === STATUS.SAVE) {
                    dep.load();
                } else if (dep.status >= STATUS.EXECUTED) {
                    args.push(dep.exports);
                }
            });

            mod.status = STATUS.EXECUTING;

            // 依赖模块加载完成
            if (args.length === mod.dependencies.length) {
                args.push(mod.exports);
                mod.makeExports(args);
                mod.status = STATUS.EXECUTED;
                mod.fireFactory();
            }
        },

        /**
         * 初始化依赖模块
         */
        resolve: function() {
            var mod = this;

            each(mod.deps, function(id) {
                var m, url;

                url = id2Url(id, seed.config.baseUrl);
                m = Module.get(url);
                m.id = id;
                mod.dependencies.push(m);
            });
        },

        /**
         * 传递模块给依赖模块，用于依赖模块加载完成之后通知引用模块
         */
        pass: function() {
            var mod = this;

            each(mod.dependencies, function(dep) {
                var repeat = false;

                each(dep.refs, function(ref) {
                    if (ref === mod.url) {
                        repeat = true;
                        return true;
                    }
                });

                if (!repeat) {
                    dep.refs.push(mod.url);
                }
            });
        },

        /**
         * 解析循环依赖
         */
        checkCircular: function() {
            var mod = this,
                STATUS = Module.STATUS,
                isCircular = false,
                args = [];

            each(mod.dependencies, function(dep) {
                isCircular = false;
                // 检测是否存在循环依赖
                if (dep.status === STATUS.EXECUTING) {
                    each(dep.dependencies, function(m) {
                        if (m.url === mod.url) {
                            // 存在循环依赖
                            return isCircular = true;
                        }
                    });

                    // 尝试解决循环依赖
                    if (isCircular) {
                        each(dep.dependencies, function(m) {
                            if (m.url !== mod.url && m.status >= STATUS.EXECUTED) {
                                args.push(m.exports);
                            } else if (m.url === mod.url) {
                                args.push(undefined);
                            }
                        });

                        if (args.length === dep.dependencies.length) {
                            // 将exports作为最后一个参数传递
                            args.push(dep.exports);
                            try {
                                dep.exports = isFunction(dep.factory) ? dep.factory.apply(global, args) : dep.factory;
                                dep.status = STATUS.EXECUTED;
                            } catch (e) {
                                dep.exports = undefined;
                                dep.status = STATUS.ERROR;
                                makeError("Can't fix circular dependency", mod.url + " --> " + dep.url);
                            }
                        }
                    }
                }
            });
        },

        makeExports: function(args) {
            var mod = this,
                result;

            result = isFunction(mod.factory) ? mod.factory.apply(global, args) : mod.factory;
            mod.exports = isPlainObject(mod.exports) ? result : mod.exports;
        },

        /**
         * 模块执行完毕，触发引用模块回调
         */
        fireFactory: function() {
            var mod = this,
                STATUS = Module.STATUS;

            each(mod.refs, function(ref) {
                var args = [];
                ref = Module.get(ref);

                each(ref.dependencies, function(m) {
                    if (m.status >= STATUS.EXECUTED) {
                        args.push(m.exports);
                    }
                });

                if (args.length === ref.dependencies.length) {
                    args.push(ref.exports);
                    ref.makeExports(args);
                    ref.status = STATUS.EXECUTED;
                    ref.fireFactory();
                } else {
                    ref.load();
                }
            });
        },

        /**
         * 发送请求加载资源
         */
        fetch: function() {
            var mod = this,
                STATUS = Module.STATUS;

            if (mod.status >= STATUS.FETCH) {
                return mod;
            }
            mod.status = STATUS.FETCH;

            loadScript(mod.url, function(error) {
                mod.onload(error);
            });
        },

        onload: function(error) {
            var mod = this,
                config = seed.config,
                STATUS = Module.STATUS,
                shim, shimDeps;

            if (error) {
                mod.exports = undefined;
                mod.status = STATUS.ERROR;
                mod.fireFactory();
                return mod;
            }

            // 非AMD模块
            shim = config.shim[mod.id];
            if (shim) {
                shimDeps = shim.deps || [];
                mod.save(shimDeps);
                mod.factory = function() {
                    return getGlobal(shim.exports);
                };
                mod.load();
            }

            // 匿名模块
            if (anonymousMeta) {
                mod.factory = anonymousMeta.factory;
                mod.save(anonymousMeta.deps);
                mod.load();
                anonymousMeta = null;
            }
        },

        save: function(deps) {
            var mod = this,
                STATUS = Module.STATUS;

            if (mod.status >= STATUS.SAVE) {
                return mod;
            }
            mod.status = STATUS.SAVE;

            each(deps, function(d) {
                var repeat = false;
                each(mod.dependencies, function(d2) {
                    if (d === d2.id) {
                        return repeat = true;
                    }
                });

                if (!repeat) {
                    mod.deps.push(d);
                }
            });
        }
    };


    /**
     * 初始化模块加载
     */
    Module.init = function() {
        var script, scripts, initMod, url;

        if (document.currentScript) {
            script = document.currentScript;
        } else {
            // 正常情况下，在页面加载时，当前js文件的script标签始终是最后一个
            scripts = getScripts();
            script = scripts[scripts.length - 1];
        }
        initMod = script.getAttribute("data-main");
        // see http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
        url = script.hasAttribute ? script.src : script.getAttribute("src", 4);

        // 如果seed是通过script标签内嵌到页面，baseUrl为当前页面的路径
        seed.config.baseUrl = dirname(initMod || url);

        // 加载主模块
        if (initMod) {
            Module.use(initMod.split(","), noop, Module.guid());
        }

        scripts = script = null;
    };

    /**
     * 生成一个唯一id
     */
    Module.guid = function() {
        return "seed_" + (+new Date()) + (Math.random() + '').slice( -8 );
    };

    /**
     * 获取一个模块，如果不存在则新建
     *
     * @param url
     * @param deps
     */
    Module.get = function(url, deps) {
        return seed.modules[url] || (seed.modules[url] = new Module(url, deps));
    };

    /**
     * 加载模块
     *
     * @param {Array} ids 依赖模块的id列表
     * @param {Function} callback 模块加载完成之后的回调函数
     * @param {String} id 模块id
     */
    Module.use = function(ids, callback, id) {
        var config = seed.config,
            mod, url;

        ids = isString(ids) ? [ids] : ids;
        url = id2Url(id, config.baseUrl);
        mod = Module.get(url, ids);
        mod.id = id;
        mod.factory = callback;

        mod.load();
    };

    // 页面已经存在AMD加载器或者seed已经加载
    if (global.define) {
        return;
    }

    define = function(id, deps, factory) {
        var currentScript, mod;

        // define(factory)
        if (isFunction(id)) {
            factory = id;
            deps = [];
            id = undefined;

        }

        // define(deps, factory)
        else if (isArray(id)) {
            factory = deps;
            deps = id;
            id = undefined;
        }

        if (!id && (currentScript = getCurrentScript())) {
            id = currentScript.getAttribute("data-module");
        }

        if (id) {
            mod = Module.get(id);
            mod.factory = factory;
            mod.save(deps);
            mod.load();
        } else {
            anonymousMeta = {
                deps: deps,
                factory: factory
            };
        }
    };

    define.amd = {};

    require = function(ids, callback) {
        // require("test", callback)
        if (isString(ids)) {
            makeError("Invalid", "ids can't be string");
        }

        // require(callback)
        if (isFunction(ids)) {
            callback = ids;
            ids = [];
        }

        Module.use(ids, callback, Module.guid());
    };

    require.config = function(config) {
        mixin(seed.config, config);
    };


    // 初始化
    Module.init();
})(window);

变量 seed 保存加载过的模块和一些配置信息。对象 Module 用来描述一个模块，Module.STATUS 描述一个模块的状态信息，define.js 加载完毕之后调用 Module.init 来初始化baseUrl 和主模块。当主模块调用require方法后，程序就会去加载相关的依赖模块。

有一个需要注意的地方是 动态创建的script，在脚本加载完毕之后，会立即执行返回的代码。对于AMD模块，其加载完毕之后会执行define方法，如果该模块为匿名模块（没有指定id），我们需要在onload回调中来处理该模块。在开始加载模块的时候，我们不会知道其依赖和工厂方法等信息，需要在这个模块加载完毕执行define方法才能获得。

4. 参考

Requirejs

Seajs