avalon模块加载

avalon自己实现了一套可被替换的模块加载系统（AMD loader）。具体什么是AMD loader可参看doJo官方博客关于AMD loader的，看完之后，再继续往下看，会比较清楚些。

模块加载配置

模块加载系统可替换原理参见,可替换的前提是前面加载的amd loader文件将define和require函数暴露给window对象。具体如何替换可执行

avalon.config.plugins.loader(false)//不推荐，但有效//或者avalon.config({loader:false})

当然了，如果更改了amd loader的话，可不要用avalon.config.plugins.text|css(url)了。

avalon.config.nocache可用来配置是否去除缓存，测试的时候avalon可通过配置avalon.config.[shim|paths],来加载一些不符合amd加载规则的数据源，例如加载csdn上的jquery等。paths意味着地址。这里需要注意的是，paths的设定时，需要:,也就是全路径，不要像这样www.abc.com,而是http:www.abc.com。shim则是一个object。

//shim{//参考下面的数据结构    $moduleId:{        src:$url        exports:$fn|$string // string说明加载的js文件会在window下存放引用，例如jquery， "$"==>window["$"]        deps:...    }}

模块加载数据结构

模块加载所用到的数据先放出来，方便源码阅读推断。

//avalon.modules 存储模块信息{    $moduleId:{//默认值        id:$string//随机生成或指定        exports:$object|$string,//暴露出引用        deps:$array|$object,//依赖的部件 为$object时，会添加当前部件的加载状态，依赖的deps 又都会在avalon.modules下有各自的状态记录        state:$number//加载状态 2:加载过 1:正在加载        factory:$fn//模块本身，会被存放到factorys中，他的this指代window对象        args:$array//保存依赖模块的返回值    }}//factorys数组下的factory函数factory.delay=$fn//检查依赖，延迟加载factory.id=$string//用来debug用的

require实现

require(deps, factory, baseUrl)

require 默认id的生成是通过"callback"+setTimeout("1")来实现UniId。require 函数会先调用loadSource遍历deps是否都加载完，没加载完的，会根据加载文件类型调用不同的函数去完成异步加载，并将其要加载的依赖放入loadings存储，通过各种合适的时机（例如，完成一个js模块的加载时）调用checkDeps来将loadings处理掉，更新依赖状态，进而加载自己。这里需要注意的是，factory的this，指代window对象（不知为何）。

动态加载

动态加载划分为三种：js、css、text（文本），分别对应一个函数。并对url #?后缀进行删除。

加载css时，前面添加 css! 。

css加载

css分两种加载，先介绍一个简单的，复杂的则是通过AMD loader加载的。加载方式是构造<link href='...' rel='stylesheet' id='$sepcialURL'>并插入到head最上边。这个地方有个疑问是，css样式覆盖会按照后来覆盖前面的样式来吗？有待测试。

text加载

text的加载是通过ajax做的，并将结果赋值给exports，保存在avalon.modules下面。

js加载

js加载会有对前面提到的avalon.config.shim进行处理（说实在的这个处理只有看完源码后方能使用无误。纠结~），具体的加载功能由loadJS函数来完成。

loadJS通过创建<script class='$日期'>节点并插入到head上来加载js文件，当加载完成后，会将class属性改写掉，并将define函数定义的factory函数和回调函数执行一下。如果加载失败了，写个日志呗。

define实现

define(id, deps, factory)

define的实现会牵扯到用户传参的循环依赖，例如：加载a需要先加载b，加载b又需要先加载a。所以上面的数据结构$moduleId和deps就变的十分有用了。根据这个参数的关系，就可找到是否存在循环依赖。define还会调用require函数来实现JS文件的加载。define还是require函数的属性值哦。innerRequire.define=function(){...}

ready!

ready!是avalon内置模块，主要用来等待游览器扫完dom树之后，再执行。avalon.ready也就是基于此的，上下avalon.ready源码。

avalon.ready = function(fn) {    innerRequire("ready!", fn)//  require('ready!',fn);使用innerRequire是预防avalon的AMD loader被替代掉}

函数介绍

checkDeps

checkDeps是用来检查存放在loadings模块的依赖是否都完成加载,如果依赖都完成了加载，而自己没有,则去执行自己的factory工厂函数。这个函数用到了loop来跳过双for循环break问题，可以拿来借鉴下。

function checkDeps() {    //检测此JS模块的依赖是否都已安装完毕,是则安装自身    //只要loadings有一个    loop: for (var i = loadings.length, id; id = loadings[--i];) {        var obj = modules[id],            deps = obj.deps        for (var key in deps) {            if (ohasOwn.call(deps, key) && modules[key].state !== 2) {                continue loop            }        }        //如果deps是空对象或者其依赖的模块的状态都是2        if (obj.state !== 2) {            loadings.splice(i, 1) //必须先移除再安装，防止在IE下DOM树建完后手动刷新页面，会多次执行它            fireFactory(obj.id, obj.args, obj.factory)            checkDeps() //如果成功,则再执行一次,以防有些模块就差本模块没有安装好        }    }}

获取当前scriptURL

源码很棒且注释很全，直接上源码。作者司徒正美还在博文中进行了详细的讲解,有兴趣的可以去了解下。

//getCurrentScript(true);function getCurrentScript(base) {    // 参考 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)         *  //firefox4+ 可以用document.currentScript         */        stack = stack.split(/[@ ]/g).pop() //取得最后一行,最后一个空格或@之后的部分        stack = stack[0] === "(" ? stack.slice(1, -1) : stack.replace(/\s/, "") //去掉换行符        return stack.replace(/(:\d+)?:\d+$/i, "") //去掉行号与或许存在的出错字符起始位置    }    var nodes = (base ? DOC : head).getElementsByTagName("script") //只在head标签中寻找    for (var i = nodes.length, node; node = nodes[--i]; ) {        if ((base || node.className === subscribers) && node.readyState === "interactive") {//subscribers="$"+(new Date-0)            return node.className = node.src        }    }}

一个有趣的加载测试

这个测试时关于加载顺序的。

    
     
      
Hello, {
    {name}}
      
     
    

请问avalon什么时候将model刷进页面去的，为什么？和下面的代码有什么区别?

    
     
      
Hello, {
    {name}}
      
     
    

做完这个练习，我相信你一定会对dom加载有个新的认识。

小结

整个实现，为factory函数依赖注入废了不少劲，不知道添上angularJS的annotate函数，会不会简单些。