快捷導(dǎo)航

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

更新時(shí)間：2015年02月03日 10:14:54 作者：Hito''s Blog

這篇文章主要介紹了director.js實(shí)現(xiàn)前端路由使用實(shí)例,director.js是最純粹的路由注冊(cè)/解析器,它在不刷新頁(yè)面的情況下,利用“#”符號(hào)組織不同的URL路徑,需要的朋友可以參考下

做過(guò)后端開發(fā)，尤其是使用過(guò)類似Django或者express對(duì)服務(wù)器端的路由功能應(yīng)該都比較熟悉，國(guó)外流行的博客系統(tǒng)wordpress也是非常經(jīng)典的路由實(shí)現(xiàn)案例。那么，究竟什么的路由呢，下面通過(guò)wordpress來(lái)簡(jiǎn)單講一下。

理解wordpress重寫規(guī)則的的都是知道，實(shí)際上任何一條url的訪問(wèn)都是基于wordpress安裝目錄下的index.php（除了服務(wù)器上已經(jīng)存在文件的訪問(wèn)），當(dāng)wordpress的固定鏈接是模式設(shè)置是會(huì)很明顯，例如文章的url是index.php?p=id，分類頁(yè)面的url是index.php?cat=id。

在這里，index.php就充當(dāng)了路由器的功能，請(qǐng)看下圖：

也就是說(shuō)，不管你訪問(wèn)的是什么地址，所有的請(qǐng)求最終都會(huì)重定向到index.php，程序會(huì)根據(jù)訪問(wèn)url的特征，確定你需要的是哪個(gè)類型的頁(yè)面，然后向數(shù)據(jù)庫(kù)作出查詢，最終把html內(nèi)容返回給瀏覽器。

上面說(shuō)的是web后端路由，那么前端的路由是什么呢？實(shí)際上現(xiàn)在前端路由技術(shù)應(yīng)用非常廣泛，有很多開源的js類庫(kù)都支持前端路由，如angularJS，ember.js， director.js等等。前端路由和后端路由原理一樣，是讓所有的交互和展現(xiàn)在一個(gè)頁(yè)面運(yùn)行以達(dá)到減少服務(wù)器請(qǐng)求，提高客戶體驗(yàn)的目的，越來(lái)越多的網(wǎng)站特別是web應(yīng)用都用到了前端路由。

director.js是最純粹的路由注冊(cè)/解析器，它在不刷新頁(yè)面的情況下，利用“#”符號(hào)組織不同的URL路徑，并根據(jù)不同的URL路徑來(lái)匹配不同的回調(diào)方法。director.js不僅可以應(yīng)用在客戶端，在使用node.js的后臺(tái)，它也能夠?qū)崿F(xiàn)前面說(shuō)的后端路由功能。來(lái)看下面關(guān)于前端路由實(shí)現(xiàn)的例子
需要設(shè)計(jì)一下類似web QQ上的web桌面應(yīng)用，桌面上有很多小圖標(biāo)，每一個(gè)小圖標(biāo)是一個(gè)功能應(yīng)用，類似電腦桌面。桌面上有一個(gè)百度新聞的按鈕，點(diǎn)擊它在當(dāng)前頁(yè)面彈出一個(gè)窗口，能夠查看百度新聞，另外一個(gè)圖標(biāo)，點(diǎn)擊可以查看當(dāng)前時(shí)間，下面是一個(gè)簡(jiǎn)單的示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
<style>
 * {margin:0;padding:0}
 body {width:100%;height:100%;background:#3d72b8}
 #baidunews {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
 #tweibo {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
</style>
</head>
<body>
 <a href="#/baidunews" id="baidunews" title="百度新聞"></a>
 <a href="#/time" id="tweibo" title="當(dāng)前時(shí)間"></a>
<script>
 //定義路由
 var route = {
 "/time":nowtime,
 "/baidunews":[showframe,getbaidunew]
 }
 
 //初始化路由
 var router = Router(route)
 router.init();
 //定義顯示當(dāng)前時(shí)間的回調(diào)函數(shù)
 function nowtime(){
 var now=new Date();
 var y=now.getFullYear();
 var m=now.getMonth()+1;
 var d=now.getDate();
 var h=now.getHours();
 var mi=now.getMinutes();
 var s=now.getSeconds();
 alert("現(xiàn)在時(shí)間\n"+y+"年"+m+"月"+d+"日 "+h+"時(shí)"+mi+"分"+s+"秒");
 
 }
 //定義顯示瀏覽器框架的函數(shù)
 function showframe(){
 var f=document.createElement("div");
 f.style.width="985px";
 f.style.height="500px";
 f.style.position="absolute";
 f.style.top="50px";
 f.style.left="200px";
 f.style.background="white";
 f.style.border="2px solid #ccc";
 //關(guān)閉按鈕
 var close=document.createElement("span");
 close.style.position="absolute";
 close.style.right="5px";
 close.style.cursor="pointer";
 close.style.marginRight="5px";
 close.onclick=function(){
  document.body.removeChild(f);
 }
 close.innerHTML="X";
 //加載站外的iframe
 var win=document.createElement("iframe");
 win.id="myiframe";
 win.frameBorder=0;
 win.style.width="100%";
 win.style.height="100%";
 f.appendChild(close);
 f.appendChild(win);
 document.body.appendChild(f);
 }
 //定義加載百度新聞網(wǎng)頁(yè)的函數(shù)
 function getbaidunew(){
 document.getElementById("myiframe").src="http://news.baidu.com/";
 }
</script>
</body>
</html>

從上面的代碼可以看出，director.js利用頁(yè)面中的“#”進(jìn)行路由轉(zhuǎn)發(fā)。上面的例子只是一個(gè)非常簡(jiǎn)單的實(shí)例，director.js能夠?qū)崿F(xiàn)更加復(fù)雜、龐大的功能，它可以通過(guò)ajax和服務(wù)端數(shù)據(jù)交互，可以和其它js類庫(kù)并存，是一個(gè)web應(yīng)用開發(fā)利器。

director.js對(duì)SEO有影響嗎？

客戶端的director.js對(duì)SEO有影響，因?yàn)閿?shù)據(jù)所有數(shù)據(jù)只在一個(gè)頁(yè)面，有些數(shù)據(jù)的存儲(chǔ)方式不利于搜索引擎蜘蛛的抓取，如果你需要對(duì)SEO友好，說(shuō)明你需要構(gòu)造的是一個(gè)”web頁(yè)面”而不是“web應(yīng)用”，不推薦使用director.js。

參考資料：director.js

您可能感興趣的文章: