JS實(shí)現(xiàn)前端路由功能示例【原生路由】
本文實(shí)例講述了JS實(shí)現(xiàn)前端路由功能。分享給大家供大家參考，具體如下：
路由就是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面，早期路由的概念是在后端出現(xiàn)的，通過服務(wù)器端渲染后返回頁面，隨著頁面越來越復(fù)雜，服務(wù)器端壓力越來越大。后來ajax異步刷新的出現(xiàn)使得前端也可以對(duì)url進(jìn)行管理，此時(shí)，前端路由就出現(xiàn)了。
單頁面就是有前端路由來實(shí)現(xiàn)的，也就是說網(wǎng)站只有一個(gè)頁面，點(diǎn)擊導(dǎo)航會(huì)顯示不同的內(nèi)容，對(duì)應(yīng)的url也在發(fā)生改變。在這個(gè)過程中，js會(huì)實(shí)時(shí)檢測(cè)url的變化，從而改變顯示的內(nèi)容。
路由實(shí)現(xiàn)的原理：window綁定了監(jiān)聽函數(shù)，當(dāng)url的hash值發(fā)生變化的時(shí)候會(huì)觸發(fā)hashchange回調(diào)，在回調(diào)中進(jìn)行不同的操作，馬上刷新頁面，從而顯示不同的頁面。
下面是一個(gè)前端路由的簡(jiǎn)單實(shí)現(xiàn)：通過路由實(shí)現(xiàn)url的切換、頁面內(nèi)容的改變。
index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>前端路由測(cè)試</title> <script src='https://www.jq22.com/jquery/jquery-3.3.1.js'></script> <style> *{margin:0;padding: 0; } .content{width: 500px;height: 300px;margin-top: 30px;margin:20px auto 0; } #click_btn{width: 500px;height: 50px;margin:100px auto 0; } #click_btn a{display: block;background: #333;color: #fff;text-decoration: none;line-height: 50px;text-align: center;float: left;margin-right: 15px;padding: 0px 15px; } #click_btn a:hover{background: #666; } </style> </head><body><div id='click_btn'> <a href='http://www.baoyu77737.com/bcjs/14619.html#/one' rel='external nofollow' >第一個(gè)頁面</a> <a href='http://www.baoyu77737.com/bcjs/14619.html#/two' rel='external nofollow' >第二個(gè)頁面</a> <a href='http://www.baoyu77737.com/bcjs/14619.html#/three' rel='external nofollow' >第三個(gè)頁面</a></div><div class='content'></div> <script src='http://www.baoyu77737.com/bcjs/router.js'></script><script src='http://www.baoyu77737.com/bcjs/test.js'></script> </body></html>
router.js
//構(gòu)造函數(shù)function Router() { this.routes = {}; this.currentUrl = ’’;}Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){};//給不同的hash設(shè)置不同的回調(diào)函數(shù)};Router.prototype.refresh = function() { console.log(location.hash.slice(1));//獲取到相應(yīng)的hash值 this.currentUrl = location.hash.slice(1) || ’/’;//如果存在hash值則獲取到，否則設(shè)置hash值為/ // console.log(this.currentUrl); if(this.currentUrl&&this.currentUrl!=’/’){ this.routes[this.currentUrl]();//根據(jù)當(dāng)前的hash值來調(diào)用相對(duì)應(yīng)的回調(diào)函數(shù) } };Router.prototype.init = function() { window.addEventListener(’load’, this.refresh.bind(this), false); window.addEventListener(’hashchange’, this.refresh.bind(this), false);}//給window對(duì)象掛載屬性window.Router = new Router();window.Router.init();
test.js
Router.route(’/one’, function () { $('.content').html('<p>路由就是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面，早期路由的概念是在后端出現(xiàn)的，通過服務(wù)器端渲染后返回頁面，隨著頁面越來越復(fù)雜，服務(wù)器端壓力越來越大。后來ajax異步刷新的出現(xiàn)使得前端也可以對(duì)url進(jìn)行管理，此時(shí)，前端路由就出現(xiàn)了。</p>');});Router.route(’/two’, function () { $('.content').html('<h3>單頁面就是有前端路由來實(shí)現(xiàn)的，也就是說網(wǎng)站只有一個(gè)頁面，點(diǎn)擊導(dǎo)航會(huì)顯示不同的內(nèi)容，對(duì)應(yīng)的url也在發(fā)生改變。在這個(gè)過程中，js會(huì)實(shí)時(shí)檢測(cè)url的變化，從而改變顯示的內(nèi)容。</h3>');});Router.route(’/three’, function () { $('.content').html('<img src=’https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp’ width=’500’/>');});
注意：router.js要在test.js之前進(jìn)行調(diào)用，不然會(huì)先加載test.js從而找不到，出現(xiàn)router.js未被定義。
上面router對(duì)象實(shí)現(xiàn)主要提供了三個(gè)方法
1.init監(jiān)聽瀏覽器url的hash值更新事件。
2.route存儲(chǔ)路由更新時(shí)的回調(diào)到回調(diào)數(shù)組routes中，回掉函數(shù)將負(fù)責(zé)對(duì)頁面進(jìn)行更新。
3.refresh執(zhí)行當(dāng)前url的回調(diào)函數(shù)，更新頁面。
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)2. Jsp servlet驗(yàn)證碼工具類分享3. Jsp+Servlet實(shí)現(xiàn)文件上傳下載 文件列表展示（二）4. ASP將數(shù)字轉(zhuǎn)中文數(shù)字(大寫金額)的函數(shù)5. jscript與vbscript 操作XML元素屬性的代碼6. 基于PHP做個(gè)圖片防盜鏈7. XML在語音合成中的應(yīng)用8. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁9. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解10. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)
網(wǎng)公網(wǎng)安備