如何使用director.js實現(xiàn)前端路由-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何使用director.js實現(xiàn)前端路由，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括比如網(wǎng)站建設(shè)、比如網(wǎng)站制作、比如網(wǎng)頁制作以及比如網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，比如網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到比如省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

director.js是什么？

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

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

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

客戶端的路由：

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

簡單例子

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

初始化及路由器的注冊

 var router = Router(routes);

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

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

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

這里的的url是#dog和#cat

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

router.init();

路由的事件

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

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

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

僅在客戶端有效的方法：

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用director.js實現(xiàn)前端路由”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：如何使用director.js實現(xiàn)前端路由-創(chuàng)新互聯(lián)
瀏覽路徑：http://bm7419.com/article42/cesoec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、全網(wǎng)營銷推廣、電子商務(wù)、網(wǎng)站策劃、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容