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