快捷導(dǎo)航

用director.js實(shí)現(xiàn)前端路由使用實(shí)例

更新時(shí)間：2017年01月27日 13:23:05 作者：diamajing

本篇文章主要介紹了director.js實(shí)現(xiàn)前端路由，在不刷新的情況下，利用“#”號(hào)組織不同的URL路徑，并根據(jù)不同的URL路徑進(jìn)行不同的方法調(diào)用。有興趣的了解一下。

director.js是什么？

理解：前端的route框架，director.js客戶端的路由注冊(cè)/解析器，在不刷新的情況下，利用“#”號(hào)組織不同的URL路徑，并根據(jù)不同的URL路徑進(jìn)行不同的方法調(diào)用。意思就是有什么樣的路徑就有什么樣的方法。

場(chǎng)合：客戶端瀏覽器和node.js的服務(wù)器應(yīng)用。非常適合用來(lái)開發(fā)不需要刷新的單頁(yè)面應(yīng)用程序以及node.js應(yīng)用。

兼容性：不依賴與任何庫(kù)。例如jquery等。但它又和jquery能很好的融合在一起；

客戶端的路由：

客戶端的路由（也稱為哈希路由）允許您指定一些關(guān)于使用URL應(yīng)用狀態(tài)的信息，當(dāng)用戶指定固定的URL，進(jìn)行相應(yīng)的頁(yè)面顯示。

簡(jiǎn)單例子

1. 單獨(dú)使用

<!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當(dāng)與jquery相結(jié)合

<!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(' '));

初始化及路由器的注冊(cè)

 var router = Router(routes);

另外,構(gòu)造方法中傳入的routes參數(shù)是一個(gè)路由對(duì)象，它是一個(gè)具有鍵值對(duì)結(jié)構(gòu)的對(duì)象，可以被多層的嵌套。鍵對(duì)對(duì)應(yīng)的URL中傳入的路徑，一般一個(gè)鍵值對(duì)應(yīng)按照分割符切割后的某一部分；而鍵值對(duì)的值對(duì)應(yīng)的該路徑的需要觸發(fā)的回調(diào)函數(shù)名?；卣{(diào)函數(shù)要在路由表對(duì)象使用前先聲明，否則js會(huì)報(bào)錯(cuò)。

另外，回調(diào)函數(shù)除非特殊情況，一般不推薦使用匿名函數(shù)，請(qǐng)盡量先聲明后使用。

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

這里的的url是#dog和#cat

聲明Router對(duì)象后，需要調(diào)用init()方法進(jìn)行初始化，如：

router.init();

路由的事件

路由事件是路由注冊(cè)表中一個(gè)有固定命名的屬性，是指當(dāng)路由方法router.dispatch()被調(diào)用時(shí)，路由匹配成功的時(shí)定義的需要觸發(fā)的回調(diào)方法（允許定義多個(gè)回調(diào)方法）。上文即時(shí)注冊(cè)功能里的"on"方法就是一個(gè)事件。具體信息如下：　　

on ：當(dāng)路由匹配成功后，需要執(zhí)行的方法

before：在觸發(fā)“on”方法之前執(zhí)行的方法

僅在客戶端有效的方法：

after：當(dāng)離開當(dāng)前注冊(cè)路徑時(shí)，需要執(zhí)行的方法

once: 當(dāng)前注冊(cè)路徑僅執(zhí)行一次的方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: