director.js實現(xiàn)前端路由使用實例
做過后端開發(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)文章
JavaScript前端控制網(wǎng)絡(luò)并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請求的并發(fā)數(shù),即限制同一時間內(nèi)進(jìn)行處理的請求數(shù)量,是一種有效的策略,本文將詳細(xì)介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對大家有所幫助2023-12-12javascript 設(shè)計模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計模式之享元模式,結(jié)合實例形式詳細(xì)分析了javascript 設(shè)計模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項,需要的朋友可以參考下2020-04-04純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
這篇文章主要介紹了純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實現(xiàn)代碼,代碼中帶詳細(xì)注釋,需要的朋友可以參考下2015-03-03通過JS來動態(tài)的修改url,實現(xiàn)對url的增刪查改
本文主要介紹了通過JS來動態(tài)的修改url,實現(xiàn)對url的增刪查改,把代碼分享給大家,希望能有所幫助2014-09-09一些Javascript的IE和Firefox(火狐)兼容性的問題總結(jié)及常用例子
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子2009-05-05JS中的算法與數(shù)據(jù)結(jié)構(gòu)之字典(Dictionary)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之字典(Dictionary),結(jié)合實例形式詳細(xì)分析了javascript數(shù)據(jù)結(jié)構(gòu)中字典的概念、原理、定義與常見使用方法,需要的朋友可以參考下2019-08-08