欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)/解析器,它在不刷新頁面的情況下,利用“#”符號(hào)組織不同的URL路徑,需要的朋友可以參考下

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

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

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

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

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

director.js是最純粹的路由注冊(cè)/解析器,它在不刷新頁面的情況下,利用“#”符號(hào)組織不同的URL路徑,并根據(jù)不同的URL路徑來匹配不同的回調(diào)方法。director.js不僅可以應(yīng)用在客戶端,在使用node.js的后臺(tái),它也能夠?qū)崿F(xiàn)前面說的后端路由功能。來看下面關(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)前頁面彈出一個(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)頁的函數(shù)
 function getbaidunew(){
 document.getElementById("myiframe").src="http://news.baidu.com/";
 }
</script>
</body>
</html>

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

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

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

參考資料:director.js

相關(guān)文章

最新評(píng)論