用director.js实现前端路由使用实例


Posted in Javascript onJanuary 27, 2017

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: 当前注册路径仅执行一次的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
Vue3.0的优化总结
Oct 16 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 #Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 #Javascript
js监听input输入框值的实时变化实例
Jan 26 #Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 #Javascript
Jquery实时监听input value的实例
Jan 26 #Javascript
jquery实时获取时间的简单实例
Jan 26 #Javascript
You might like
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
功能强大的php分页函数
2016/07/20 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python 错误和异常代码详解
2018/01/29 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python爬取网易云音乐评论
2018/11/16 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python如何实现word批量转HTML
2020/09/30 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
自荐信格式范文
2013/10/07 职场文书
项目投资意向书
2014/04/01 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
建议书的格式
2014/05/12 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年度物流工作总结
2015/04/30 职场文书
葬礼主持词
2015/07/02 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
使用scrapy实现增量式爬取方式
2022/06/21 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android