注:director.js的官网 https://github.com/flatiron/director

director.js是什么?

理解:前端的route框架,director.js客户端的路由注册/解析器,在不刷新的情况下,利用“#”号组织不同的URL路径,并根据不同的URL路径进行不同的方法调用。意思就是有什么样的路径就有什么样的方法。

场合:客户端浏览器和node.js的服务器应用。非常适合用来开发不需要刷新的单页面应用程序以及node.js应用。

兼容性:不依赖与任何库。例如jquery等。但它又和jquery能很好的融合在一起; 
客户端的路由: 
客户端的路由 (也称为哈希路由) 允许您指定一些关于使用URL应用状态的信息,当用户指定固定的URL,进行相应的页面显示。

简单例子

1. 单独使用

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Gentle Introduction</title>
<script
src="https://rawgit.com/flatiron/director/master/build/director.min.js">
</script>
<script>
var author = function () { console.log("author"); };
var books = function () { console.log("books"); };
var viewBook = function (bookId) {
console.log("viewBook: bookId is populated: " + bookId);
};
var routes = {
'/author': author,
'/books': [books, function() {
console.log("An inline route handler.");
}],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
</script>
</head>
<body>
<ul>
<li><a href="#/author">#/author</a></li>
<li><a href="#/books">#/books</a></li>
<li><a href="#/books/view/1">#/books/view/1</a></li>
</ul>
</body>
</html>

2当与jquery相结合

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Gentle Introduction 2</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script
src="https://rawgit.com/flatiron/director/master/build/director.min.js">
</script>
<script>
$('document').ready(function() {
//
// create some functions to be executed when
// the correct route is issued by the user.
//
var showAuthorInfo = function () { console.log("showAuthorInfo"); };
var listBooks = function () { console.log("listBooks"); };
var allroutes = function() {
var route = window.location.hash.slice(2);
var sections = $('section');
var section;
section = sections.filter('[data-route=' + route + ']');
if (section.length) {
sections.hide(250);
section.show(250);
}
};
//
// define the routing table.
//
var routes = {
'/author': showAuthorInfo,
'/books': listBooks
};
//
// instantiate the router.
//
var router = Router(routes);
//
// a global configuration setting.
//
router.configure({
on: allroutes
});
router.init();
});
</script>
</head>
<body>
<section data-route="author">Author Name</section>
<section data-route="books">Book1, Book2, Book3</section>
<ul>
<li><a href="#/author">#/author</a></li>
<li><a href="#/books">#/books</a></li>
</ul>
</body>
</html>

Director支持commond的书写方式

例子如下:

 var director = require('director');
var router = new director.cli.Router();
router.on('create', function () {
console.log('create something');
});
router.on(/destroy/, function () {
console.log('destroy something');
});
// You will need to dispatch the cli arguments yourself
router.dispatch('on', process.argv.slice(2).join(' '));

初始化及路由器的注册

 var router = Router(routes);

  另外,构造方法中传入的routes参数是一个路由对象,它是一个具有键值对结构的对象,可以被多层的嵌套。键对对应的URL中传入的路径,一般一个键值对应按照分割符切割后的某一部分;而键值对的值对应的该路径的需要触发的回调函数名。回调函数要在路由表对象使用前先声明,否则js会报错。 
  另外,回调函数除非特殊情况,一般不推荐使用匿名函数,请尽量先声明后使用。

  var routes = {
'/dog': bark,
'/cat': [meow, scratch]
};

这里的的url是#dog和#cat 
声明Router对象后,需要调用init()方法进行初始化,如:

router.init();

路由的事件

路由事件是路由注册表中一个有固定命名的属性,是指当路由方法router.dispatch()被调用时,路由匹配成功的时定义的需要触发的回调方法(允许定义多个回调方法)。上文即时注册功能里的"on"方法就是一个事件。具体信息如下:  

on :当路由匹配成功后,需要执行的方法 
before:在触发“on”方法之前执行的方法 
  仅在客户端有效的方法:

after:当离开当前注册路径时,需要执行的方法 
once: 当前注册路径仅执行一次的方法

director.js实现前端路由的更多相关文章

  1. js 实现前端路由的方法

    js 实现前端路由的方法 前端路由原理 History API https://developer.mozilla.org/en-US/docs/Web/API/History_API https:/ ...

  2. director.js:客户端的路由---简明中文教程

    1.引子 最近学用director.js,那是相当的简单易学易使用.不过开始学的时候,搜搜过后,却没有发现相关的中文教程.于是决定硬啃E文,翻译备用的同时也当是给自己上课并加深对它的理解. direc ...

  3. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

  4. 前端路由、后端路由——想要学好vue-router 或者 node.js 必须得明白的两个概念

    前端路由和后端路由的概念讲解 引言 正文 一.路由的概念 二.后端路由 三.前端路由 四.其他知识 结束语 引言 无论你是正在学习vue 还是在学习node, 你一定会碰到前端路由和后端路由这两个概念 ...

  5. 原生JS实现一个简单的前端路由(原理)

    说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...

  6. 一个类似backbone路由的纯净route ( 前端路由 客户端路由 backbone路由 )

    大家用backbone.angular,可能都习惯了内置的路由,这两个框架的路由都是非常优秀的,强大而简单. 客户端(浏览器)路由原理其实比较简单,其实就是监听hash的变化. 在之前的架构探讨中,说 ...

  7. director.js教程

    directive.js 初始化和注册路由 director.js 的主要对象是Router对象,构造方法如下: var router = new Router(routes); //routes为路 ...

  8. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

  9. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

随机推荐

  1. ubuntu 下使用polipo转换HTTP代理

    ***默认是用Socks5协议的,对于Terminal的get,wget等走http协议的地方是无能为力的,所以需要转换成http代理,加强通用性,这里使用的转换方法是基于Polipo的. sudo ...

  2. windows svchost.exe 引起的出现的莫名其妙的窗口失去焦点

    我不知道你们遇到没,反正我是遇到了,现在我就把解决方法给你们,当然都是从网上整理下来的 这个失去焦点可以分为两种,一种是病毒,一种是系统自带的问题 首先你得知道自己的窗口被什么给挤掉了焦点 先看看这篇 ...

  3. Hibernate: 数据持久层框架

    Hibernate 是一种Java语言下的对象关系映射解决方案. 它是使用GNU宽通用公共许可证发行的自由.开源的软件.它为面向对象的领域模型到传统的关系型数据库的映射,提供了一个使用方便的框架.Hi ...

  4. ios NavigationViewController跳转以及返回传值

    (一)使用NavigationViewController进行页面跳转时,应该使用pushViewController方法来跳转至下一页面.这种话.下一页面相同在NavigationViewContr ...

  5. 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

    1.贝塞尔曲线与CAShapeLayer的关系    1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环.   ...

  6. lua 元表是个啥?

    function readOnly(t) local proxy = {} local mt = { __index = t, __newindex = function(t,k,v) error(& ...

  7. 一些blog地址总结整理:

    女神 python之路-网络编程初版:https://www.cnblogs.com/Eva-J/articles/8066842.html python之路-网络编程(重点看这个,更细致):http ...

  8. GTK+重拾--07 GTK+中的事件

    (一):写在前面 在这一个小节中,我们主要是学习GTK+2.0中最重要的部分.就是信号和事件.GTK+函数工具库是基于"事件"系统的.全部的GUI应用都是基于"事件&qu ...

  9. Linux根目录下重要文件夹

    bin存放系统命令的目录,普通用户和超级用户都可以执行,不过放在这里的命令在单用户模式下也可以执行 sbin保存和系统环境设置相关的命令,只有超级用户可以使用这些命令进行系统环境的设置,但有些命令可以 ...

  10. 利用tomcatserver配置https双向认证

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/luo201227/article/details/36897387 首先请保证已经安装好jdk,而且 ...