使用requirejs加载avalon.js以及mmRouter路由

requirejs  avalon.js requirejs

avalon自带加载器也就是说可以像requirejs那样加载JS，事实上并不是这样，它也就只能加载自家的插件如mmRouter.js或者mmState.js如果你想加载jquery会报错，说明avalon自带的加载器是累赘。就连作者本人司徒正美也不推荐使用了在avalon2.0中也已经废除了。

作者推荐使用：webpack

这么高大尚的东西还需要安装nodejs环境才能使用，我们也可以选择requirejs来使用。

<script src="require.min.js"></script>
<script>
 require.config({
   paths: {
      avalon: 'avalon.shim' //注意这里为avalon自定义名称也只能是自定义为"avalon",因为avalon内部早就自定好了，jquery也是一样的也只能是"jquery"
   },
   shim: {
     'avalon': {
         exports: "avalon" //将avalon对象暴露出来
     }
   }
 });

 require(["domReady!","jquery","avalon","mmRouter"], function() {  //domReady!是等待DOM加载完毕后在运行JS   mmRouter是路由
   document.title=avalon.version; //标题能输出 证明avalon能使用
   var model = avalon.define({
     $id:'test',
     currPath : "",
     params : {},
     query : {},
     args : "[]"
   })

//--------------以下代码能执行证明mmRouter路由也能执行成功了------------------------
   function callback() {
     model.currPath = this.path+$('#jq').text();  // 能输出$('#jq').text()证明是DOM加载完成后执行JS的，也证明jquery能执行
     var params = this.params
     if ("time" in params) {
        params.time = avalon.filters.date(params.time, "yyyy年M月dd日")
     }
     model.params = params
     model.query = this.query
     model.args = "[" + [].slice.call(arguments, 0) + "]"
    }
    avalon.router.get("/aaa/", callback)
    avalon.router.get("/bbb", callback)
    avalon.router.get("/ccc/:ccc", callback)
    avalon.router.get("/ddd/{time:date}/", callback)
    avalon.router.get("/eee/{count:\\d{4}}/", callback)
    avalon.router.get("/fff", callback)
    avalon.history.start({
      basepath: "/avalon"
    })
    avalon.scan();
 })
 </script>

<div id="jq">测试jq</div>

domReady下载：domReady

用法1：

require(["domReady!"], function() {
   //加载DOM结束后JS代码执行这里
});

用法2：

require(["domReady"], function(domReady) {
    domReady(function(){
         //加载DOM结束后JS代码执行这里
    });
});