director.js教程

directive.js

初始化和注册路由

director.js 的主要对象是Router对象，构造方法如下：

var router = new Router(routes); //routes为路由表

构造方法中传入的routes参数是一个路由表对象，它是一个具有键值对结构的对象，路由允许多层的嵌套定义。

　　键值对的键对应URL中传入的路径，一般一个键对应按分隔符切割后的某一部分；而键值对的值则对应该路径需要触发的回调函数名，可以传入一个或多个函数名，传入多个函数名时请使用数组对象。一般来说，回调函数要在路由表对象使用前先声明，否则js会报错。

　　另外，回调函数除非特殊情况，一般不推荐使用匿名函数，请尽量先声明后使用。

var routes = {
    '/dog': bark,
    '/cat': [meow, scratch]
};
var router = new Router(routes);
router.init(); //初始化

上面例子中，对应的URL分别为：#/dog 和 #/cat

路由的实时注册

当我们在开发一些规模比较大的应用的时候，一般做不到一开始就将需要的路径和它对应的回调函数都预先准备好。很多时候，我们都是在做到某一功能时，或者是开发一些独立性比较强耦合度比较低的模块时，才知道我们需要什么样的路径和回调函数。这个时候我们就需要实时注册路由的功能了。

director.js 通过“on”方法，提供对即时注册功能的支持，示例如下：

var router = new Router(routes).init();
router.on('/rabbit', function(){
        //....
    });

路由事件

//注册
router.on('/rabbit', handler);
router.once('/dog', handler2);

路由事件生命周期:

on ：当路由匹配成功后，需要执行的方法
before：在触发“on”方法之前执行的方法
after：当离开当前注册路径时，需要执行的方法
once: 当前注册路径仅执行一次的方法

var routes = {
'/about/:id': {
before: function(id){ alert('directive to /home/about/'+id); },
on: function(id){ window.location = '/home/about/'+id; }
}
}

配置参数

director.js 通过配置一些可选项的参数从而提升Router对象的灵活性。而这些参数的设置需要通过router.configure()方法实现。

var router = new Router(routes).configure(options);

具体的配置参数有：

recurse：控制路由递归触发方式的参数，可选值为"forward","backward"和"false"，客户端的默认值是"false"，而服务端的默认值是"backward"
strict：当值为"false"时，路径允许以"/"结尾（也可以是其他自定义的分隔符）；默认值是"true"，说明默认不允许路径以"/"结尾
async：同步异步控制器，值为"ture","false"，默认值为"false"
delimiter：路由分隔符，默认值为"/"
notfound：当路由方法router.dispatch()被调用时，没有匹配到任何路由时触发的方法
on：当路由方法router.dispatch()被调用时，任何一个路由匹配成功后都需要执行的方法；与上文路由事件中的“on”事件的区别类似于全局和局部的概念，路由表中仅针对当前注册的路由；而configure方法中的"on"则针对全局的所有路由
before：当路由方法router.dispatch()被调用时，当任何一个路由匹配成功并在"on"执行之前需要执行的方法；与上文路由事件中的 “before” 事件的区别同上
　　仅在客户端有效的参数：
resource：用来进行回调函数绑定的基于字符串的对象。使用该参数能实现回调函数的延迟绑定（原词是 "late-binding"，后面有相关的详细说明）
after：当给定的路径不再是当前激活的路径时触发的方法，可以理解为离开当前路径后触发的方法；与上文路由事件中的 “after” 事件的区别同上

URL匹配

url参数捕获和嵌套路由定义

//例如"#/about/5"中，5就是id参数的值
var router = Router({
        '/about': {
            '/:id':{
                on: function(id){ console.log(id); }
            }
        }
    });

director.js 支持利用正则表达式来匹配复杂的路由名称

//当URL传入'#/hello/world'，则回调函数的who=world
var router = new Router({
        '/hello': {
            '/(\\w+)': {
                on: function(who){ console.log(who); }
            }
        }
    });

//当URL传入'#/hello/world/johny/appleseed'，则回调函数的a=johny,b=applesee
var router = Router({
  '/hello': {
    '/world/?([^\/]*)\/([^\/]*)/?': function (a, b) {
      console.log(a, b);
    }
  }
});

路由的递归匹配

　全局配置中的recurse参数决定了路径在路由表中的命中方式以及命中顺序。命中方式包括递归命中和精确命中；命中顺序包括正序，反序和中断。

　　当参数设定为“forward、backward”时，表明路由的命中方式是递归命中，并按照规定的顺序命中，forward为正序，backward为反序。路由如果定义了多个路由片段，则它们对应的回调函数均可命中，也就是说一个路径可以命中多个函数。

　　当没有特别指定该参数的值时（即默认值"false"），则标明路由的命中方式为精确命中，需要完全匹配整个路径后才可以命中，也就是说一个路径只能命中一个函数。

　　当URL传入"#/dog/angry"时，路由表注册如下：

 var routes = {
    '/dog': {
      '/angry': {
        on: growl
      },
      on: bark
    }
  };

当没有指定递归匹配的方式时，仅命中growl方法。

　　当指定递归匹配参数的值为backward时，首先命中growl方法，然后再命中bark方法，按照路径的注册顺序反序命中。如下：

var router = Router(routes).configure({ recurse: 'backward' });

　当指定递归匹配参数的值为forward时，首先命中bark方法，然后再命中growl方法，按照路径的注册顺序正序命中。如下：

var router = Router(routes).configure({ recurse: 'forward' });

　当指定了递归匹配参数后，如果命中的函数中使用了"return false;"的语句返回，则会中断递归命中，直接返回。如下：

var routes = {
    '/dog': {
      '/angry': {
        on: function() { return false; }
      },
      on: bark
    }
  };
var router = Router(routes).configure({ recurse: 'backward' });

无中断时，首先会命中angry下的方法，然后命中bark方法；但是在使用return false语句之后，执行完angry命中的方法后将不再递归命中别的方法（bark）。

资源参数

全局配置中的resource参数仅在客户端应用中可用，它是一个文本对象，其中的文本属性值主要用来定义路由匹配命中后的回调方法名。它可以为程序提供更好的封装性，以便更好的进行结构设计。

 var router = Router({
    '/hello': {
      '/usa': 'americas',
      '/china': 'asia'
    }
  }).configure({ resource: container }).init();

  var container = {
    americas: function() { return true; },
    china: function() { return true; }
  };

posted @ 2016-05-25 16:01 stephenykk 阅读(2724) 评论(0) 编辑收藏举报

刷新页面返回顶部

stephenykk