用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 相关文章推荐
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
jQuery实现增删改查
Dec 22 jQuery
详解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
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python中 logging的使用详解
2017/10/25 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
pymongo中group by的操作方法教程
2019/03/22 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python利用platform模块获取系统信息
2020/10/09 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
数控专业应届生求职信
2013/11/27 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
旷课检讨书3000字
2014/02/04 职场文书
法学自荐信
2014/06/20 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
我爱我班主题班会
2015/08/13 职场文书
《植树问题》教学反思
2016/03/03 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP