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

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

 更新時間:2015年02月03日 10:14:54   作者:Hito''s Blog  
這篇文章主要介紹了director.js實現(xiàn)前端路由使用實例,director.js是最純粹的路由注冊/解析器,它在不刷新頁面的情況下,利用“#”符號組織不同的URL路徑,需要的朋友可以參考下

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

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

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

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

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

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

<!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)前時間"></a>
<script>
 //定義路由
 var route = {
 "/time":nowtime,
 "/baidunews":[showframe,getbaidunew]
 }
 
 //初始化路由
 var router = Router(route)
 router.init();
 //定義顯示當(dāng)前時間的回調(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)在時間\n"+y+"年"+m+"月"+d+"日 "+h+"時"+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ā)。上面的例子只是一個非常簡單的實例,director.js能夠?qū)崿F(xiàn)更加復(fù)雜、龐大的功能,它可以通過ajax和服務(wù)端數(shù)據(jù)交互,可以和其它js類庫并存,是一個web應(yīng)用開發(fā)利器。

director.js對SEO有影響嗎?

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

參考資料:director.js

相關(guān)文章

最新評論