学步园

很久没有写博客了，一来是工作比较忙，二来主要是觉得没什么可写。当然，自己的懒惰也是不可推卸的责任。
最近有点空余的时间，就看了一下AMD模块加载。关于它的定义和优缺点就不介绍了，园子里大把。相信大家也都知道。主要说一下加载器的原理以及在开发过程当中遇到的一些坑。当然由于加载器不是规范的一部分，所以实现方法也各不相同。我所用的方法也不是最优的，只是用来当作学习而已。

【模块加载器原理】
1.开始
2.通过模块名解析出模块信息，以及计算出URL。
3.通过创建SCRIPT的形式把模块加载到页面中。（当然也可以采用其它方法，如XHR。 IFRAME等等）
4.判断被加载的脚本，如果发现它有依赖就去加载依赖模块。如果不依赖其它模块，就直接执行factory方法。
5.等所有脚本都被加载完毕就执行加载完成之后的回调函数。
【实现的过程】
在弄懂了整个加载器的工作原理之后，就开始具体的编码过程。最开始，我使用了moduleCache，modules,moduleLoads这三个对象。分别记录加载中需要用到的信息。首先我把整个加载的信息存储到moduleCache中。其中的结构大致如下。

moduleCache[uuid] = {
    uuid : uuid,    //随即生成的id
    deps : deps, //此次加载需需要加载的模块
   args : args, //回调函数需要的方法
   callback : callback  //此次加载完成后需要调用的回调函数      
}

在modules中储存具体的模块信息，也就是moduleCache[uuid]的deps中的模块的具体信息。结构很简单，主要是记录一下名字，和url和状态。

modules[modname] = {
    name : name, //模块名字
    url : url, //模块的url
    state : state //模块的状态   
}

moduleLoads 中是存储的加载信息，也就是uuid的数组。 过程很顺利，很快就完成了开发。当然有一个前提，加载的模块是不能依赖其它模块的。 实现的大致原理就是。分析完毕模块信息，储存完上面的信息后。创建一个script来加载模块。当被加载的模块的define执行的时候，就通过模块名去modules中把模块的状态改为1,然后执行模块的factory方法。得到exports 放入到modules[modname].exports 中。 然后循环moduleLoads，得到uuid去moduleCache中的数据。然后判断deps的模块是否全部加载完毕。如果加载完毕就执行callback方法。 然后把uuid从moduleLoads中删除。

然后开始实现加载的模块依赖别的模块，一开始的做法是当发现加载的模块存在依赖的时候，就从新调用require方法去加载模块需要的模块。 然而这样就造成了一个问题。就是等所有的被依赖的模块加载完毕之后，按照上面的流程执行完毕。无法告知需要依赖的那个模块它依赖的模块都被加载完毕了。可能这么说不是太直观，看一下现在变量里存储的信息就一目了然了。

//加载hello模块，hello模块又依赖test模块。
moduleCache = {
     cb100001 : {
        uuid : cb10001
        deps: {hello}
        args:[hello]
        callback : callback   
     } ,
     cb100002:{
         uuid:cb10002,
         deps:{test}
         args:[test]
         callback : callback
     }  
}
modules : {
     hello : {
        name:hello,
        url:url,
        state : 1,
        exports : {} 
    },
    test: {
        name:test
        url:url
        state:2
        exports:{}
    }
}

就像上面这样，test已经加载完毕。uuid 为cb10002的moduleCache的信息已经执行完毕。但是无法让hello模块加载完毕。 苦思冥想了许久，终于找到了一个解决方案。就是在申请一个变量，来存储模块的依赖信息。 结构如下

var moduledeps = {
    'hello' : ['test']
    'test' : ['module1','module2']
}

这样一来就解决了两个问题，一个是循环依赖的问题，可以通过上面的结构被检测出来。二来就是可以在被依赖模块被加载完毕之后遍历上面的moduledeps来将需要依赖的那个模块状态改为加载完成。从而执行moduleCache中的回调。又经过一番编码之后，初级版本的模块加载器终于完成了。 实现了并行下载依赖模块，可以检测循环依赖。在各个浏览器下测试。似乎都没什么问题。然后当我去测试加载在不同目录的两个同名模块的时候，问题产生了。后加载的模块，覆盖了前面的同名模块的信息。 后来在群里经过一番讨论，决定用URL来做modules的key。这样就避免了覆盖的问题。 同时又优化了加载器的结构，将3个变量改为两个变量。 保留了modules与moduleCache，去掉了moduleLoads与moduledeps。

结构如下。

modules = {
     url1 : {
        name: hello,
        url : url1,
        state : 1
        exports : {}
     },
     url2 : {
        name: test,
        url : url2,
        state : 2
        exports : {}
     }
}

moduleCache : {
     cbi10001 : {
          state: 1,
          uuid : cbi10001,
          factory : callback,
          args : [url1],l
          deps :{url1:'lynx'}
     },
    url1 : {
          state: 1,
          uuid : url1,
          factory : callback,
          args : [url2],
          deps :{url2:'lynx'}
     }
}

这样通过url既可以获得模块的依赖，又能够获得模块。 所以就不用modoleLoads与moduleDeps了。然后在define中获得url又有一个坑就是在safari下无法获得正在被解析的script。获得正在被解析的script请参见正美大大的这篇文章。 不过在safari下又另外一个特性就是在脚本解析完成之后会立即调用脚本的onload事件，如此一来就找到了解决办法。 就是在脚本解析的时候，存入一个函数到某个数组中，然后在它的onload事件中取出这个函数。将node的url传入函数中就可以了，唯一的坏处就是比可以获得url要慢上一点点。想到办法之后便开始改代码，经过半天左右的编码终于完成了。 下面是全部源码。在各个浏览器中测试都通过。但由于个人能力有限，其中未被发现的bug定所难免，如果各位发现其中的bug或有什么不足的地方请告知。

View Code 

(function(win, undefined){
    win = win || window;
    var doc = win.document || document,
        head = doc.head || doc.getElementsByTagName("head")[0];
        hasOwn = Object.prototype.hasOwnProperty,
        slice = Array.prototype.slice,
        basePath = (function(nodes){
            var node = nodes[nodes.length - 1],
            url = (node.hasAttribute ? node.src : node.getAttribute("src", 4)).replace(/[?#].*/, "");
            return url.slice(0, url.lastIndexOf('/') + 1);
        }(doc.getElementsByTagName('script')));

    function lynxcat(){

    }
    lynxcat.prototype = {
        constructor : lynxcat,
        init : function(){

        }
    }
    lynxcat.prototype.init.prototype = lynxcat.prototype;

    /**
     * mix
     * @param  {Object} target   目标对象
     * @param  {Object} source   源对象
     * @return {Object}          目标对象
     */
    lynxcat.mix = function(target, source){
        if( !target || !source ) return;
        var args = slice.call(arguments), i = 1, override = typeof args[args.length - 1] === "boolean" ? args.pop() : true, prop;
        while ((source = args[i++])) {
            for (prop in source) {
                if (hasOwn.call(source, prop) && (override || !(prop in target))) {
                    target[prop] = source[prop];
                }
            }
        }
        return target;
    };

    lynxcat.mix(lynxcat, {
        modules : {},
        moduleCache : {},
        loadings : [],

        /**
         * parse module
         * @param {String} id 模块名
         * @param {String} basePath 基础路径
         * @return {Array} 
         */
        parseModule : function(id, basePath){
            var url, result, ret, dir, paths, i, len, ext, modname, protocol = /^(\w+\d?:\/\/[\w\.-]+)(\/(.*))?/;
            if(result = protocol.exec(id)){
                url = id;
                paths = result[3] ? result[3].split('/') : [];
            }else{
                result = protocol.exec(basePath);
                url = result[1];
                paths = result[3] ? result[3].split('/') : [];
                modules = id.split('/');
                paths.pop();
                for(i = 0, len = modules.length; i < len; i++){
                    dir = modules[i];
                    if(dir == '..'){
                        paths.pop();
                    }else if(dir !== '.'){
                        paths.push(dir);
                    }
                }
                url = url + '/' + paths.join('/');
            }
            modname = paths[paths.length - 1];
            ext = modname.slice(modname.lastIndexOf('.'));
            if(ext != '.js'){
                url = url + '.js';
            }else{
                modname = modname.slice(0, modname.lastIndexOf('.'));
            }
            if(modname == ''){
                modname = url;
            }
            return [modname, url]
        },

        /**
         * get uuid
         * @param {String} prefix
         * @return {String} uuid
         */
        guid : function(prefix){
            prefix = prefix || '';
            return prefix + (+new Date()) + String(Math.random()).slice(-8);
        },

        /**
         * error 
         * @param {String} str
         */
        error : function(str){
            throw new Error(str);
        }
    });


    //================================ 模块加载 ================================
    /**
     * 模块加载方法
     * @param {String|Array}   ids      需要加载的模块
     * @param {Function} callback 加载完成之后的回调
     * @param {String} parent 父路径
     */
    win.require = lynxcat.require = function(ids, callback, parent){
        ids = typeof ids === 'string' ? [ids] : ids;
        var i = 0, len = ids.length, flag = true, uuid = parent || lynxcat.guid('cb_'), path = parent || basePath,
            modules = lynxcat.modules, moduleCache = lynxcat.moduleCache, 
            args = [], deps = {}, id, result;
        for(; i < len; i++){
            id = ids[i];
            result = lynxcat.parseModule(id, path);

            if(!modules[result[1]]){
                modules[result[1]] = {
                    name : result[0],
                    url : result[1],
                    state : 0,
                    exports : {}
                }
                flag = false;
            }else if(modules[result[1]].state != 2){
                flag = false;
            }
            if(!deps[result[1]]){
                if(checkCircularDeps(uuid, result[1])){
                    lynxcat.error('模块[url:'+ uuid +']与模块[url:'+ result[1] +']循环依赖');
                }
                deps[result[1]] = 'lynxcat';
                args.push(result[1]);
            }
            lynxcat.loadJS(result[1]);
        }

        moduleCache[uuid] = {
            uuid : uuid,
            factory : callback,
            args : args,
            deps : deps,
            state : 1
        }

        if(flag){
            fireFactory(uuid);
            return checkLoadReady();
        }
    };
    require.amd = lynxcat.modules;

    /**
     * @param  {String} id           模块名
     * @param  {String|Array} [dependencies] 依赖列表
     * @param  {Function} factory      工厂方法
     */
    win.define = function(id, dependencies, factory){
        if((typeof id === 'array' || typeof id === 'string') && typeof dependencies === 'function'){
            factory = dependencies;
            dependencies = [];
        }else if (typeof id == 'function'){
            factory = id;
            dependencies = [];
        }
        id = lynxcat.getCurrentScript();
        if(!id){
            lynxcat.loadings.push(function(id){
                require(dependencies, factory, id);
            });
        }else{
            require(dependencies, factory, id);
        }
    }

    /**
     * fire factory
     * @param  {String} uuid
     */
    function fireFactory(uuid){
        var moduleCache = lynxcat.moduleCache, modules = lynxcat.modules,
        data = moduleCache[uuid], deps = data.args, result,
        i = 0, len = deps.length, args = [];
        for(; i < len; i++){
            args.push(modules[deps[i]].exports)
        }
        result = data.factory.apply(null, args);
        if(modules[uuid]){
            modules[uuid].state = 2;
            modules[uuid].exports = result;
            delete moduleCache[uuid];
        }else{
            delete lynxcat.moduleCache;
        }
        return result;
    }

    /**
     * 检测是否全部加载完毕
     */
    function checkLoadReady(){
        var moduleCache = lynxcat.moduleCache, modules = lynxcat.modules,
            i, data, prop, deps, mod;
        loop: for (prop in moduleCache) {
            data = moduleCache[prop];
            deps = data.args;
            for(i = 0; mod = deps[i]; i++){
                if(hasOwn.call(modules, mod) && modules[mod].state != 2){
                    continue loop;
                }
            }
            if(data.state != 2){
                fireFactory(prop);
                checkLoadReady();
            }
        }
    }

    /**
     * 检测循环依赖
     * @param  {String} id         
     * @param  {Array} dependencie
     */
    function checkCircularDeps(id, dependencie){
        var moduleCache = lynxcat.moduleCache, depslist = moduleCache[dependencie] ? moduleCache[dependencie].deps : {}, prop;
        for(prop in depslist){
            if(hasOwn.call(depslist, prop) && prop === id){
                return true;
            }
        }
        return false;
    }

    lynxcat.mix(lynxcat, {
        /**
         * 加载JS文件
         * @param  {String} url
         */
        loadJS : function(url){
            var node = doc.createElement("script");
            node[node.onreadystatechange ? 'onreadystatechange' : 'onload'] = function(){
                if(!node.onreadystatechange || /loaded|complete/i.test(node.readyState)){
                    var fn = lynxcat.loadings.pop();
                    fn && fn.call(null, node.src);
                    node.onload = node.onreadystatechange = node.onerror = null;
                    head.removeChild(node);
                }
            }
            node.onerror = function(){
                lynxcat.error('模块[url:'+ node.src +']加载失败');
                node.onload = node.onreadystatechange = node.onerror = null;
                head.removeChild(node);
            }
            node.src = url;
            head.insertBefore(node, head.firstChild);
        },

        /**
         * get current script [此方法来自司徒正美的博客]
         * @return {String}
         */
        getCurrentScript : function(){
            //取得正在解析的script节点
            if (doc.currentScript) { //firefox 4+
                return doc.currentScript.src;
            }
            // 参考 https://github.com/samyk/jiagra/blob/master/jiagra.js
            var stack;
            try {
                a.b.c(); //强制报错,以便捕获e.stack
            } catch (e) { //safari的错误对象只有line,sourceId,sourceURL
                stack = e.stack;
                if (!stack && window.opera) {
                    //opera 9没有e.stack,但有e.Backtrace,但不能直接取得,需要对e对象转字符串进行抽取
                    stack = (String(e).match(/of linked script \S+/g) || []).join(" ");
                }
            }
            if (stack) {
                /**e.stack最后一行在所有支持的浏览器大致如下:
                 *chrome23:
                 * at http://113.93.50.63/data.js:4:1
                 *firefox17:
                 *@http://113.93.50.63/query.js:4
                 *opera12:http://www.oldapps.com/opera.php?system=Windows_XP
                 *@http://113.93.50.63/data.js:4
                 *IE10:
                 *  at Global code (http://113.93.50.63/data.js:4:1)
                 */
                stack = stack.split(/[@ ]/g).pop(); //取得最后一行,最后一个空格或@之后的部分
                stack = stack[0] === "(" ? stack.slice(1, -1) : stack;
                return stack.replace(/(:\d+)?:\d+$/i, ""); //去掉行号与或许存在的出错字符起始位置
            }
            var nodes = head.getElementsByTagName("script"); //只在head标签中寻找
            for (var i = 0, node; node = nodes[i++]; ) {
                if (node.readyState === "interactive") {
                    return node.src;
                }
            }    
        }
    });
    win.lynxcat = lynxcat;
}(window));

 

使用方法

//hello.js文件
define('hello', function(){
    return {world : 'hello, world!'};
});

//主文件
lynxcat.require('hello',function(hello){
    console.log(hello.world);  //hello, world!;
});


//hello.js 有依赖的情况
//hello.js文件
define('hello', 'test',function(test){
    return {world : 'hello, world!' + test};
});

//test.js文件
define('test', function(){
    return 'this is test';
});
//主文件
lynxcat.require('hello',function(hello){
    console.log(hello.world);  //hello, world!this is test;
});