您好,登錄后才能下訂單哦!
小編給大家分享一下js中單頁hash路由原理的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
什么是路由?
通俗點(diǎn)說,就是不同的URL顯示不同的內(nèi)容
什么是單頁應(yīng)用?
單頁,英文縮寫為SPA( Single Page Application),就是把各種功能做在一個(gè)頁面內(nèi). 那所謂的單頁路由應(yīng)用就是:在一個(gè)頁面內(nèi),通過切換地址欄的URL來實(shí)現(xiàn)切換內(nèi)容的變化.
如何知道URL切換了呢?
當(dāng)url后面的錨文本發(fā)生變化時(shí), 會觸發(fā)onhashchange事件。通過這個(gè)事件,我們就可以對不同的URL 做出不同的處理。錨文本就是 URL中 #后面的內(nèi)容,比如:
#/html
#/css
#/javascript
<a href="#/html" rel="external nofollow" rel="external nofollow" >html課程</a> <a href="#/css" rel="external nofollow" rel="external nofollow" >css課程</a>
window.onload = function(){ //當(dāng)hash發(fā)生變化的時(shí)候, 會產(chǎn)生一個(gè)事件 onhashchange window.onhashchange = function(){ console.log( '你的hash改變了' ); //location對象是 javascript內(nèi)置的(自帶的) console.log( location ); } }
上例,我們已經(jīng)通過hash( 就是錨文本 ) 變化, 觸發(fā)了onhashchange事件, 就可以把hash變化 與 內(nèi)容 切換對應(yīng)起來,就實(shí)現(xiàn)了單頁路由的應(yīng)用!
接下來,我們通過一個(gè)小的彩票程序,來體驗(yàn)下單頁路由:
<input type="button" value="33選5"> <div></div>
window.onload = function(){ var oBtn = document.querySelector("input"); var oDiv = document.querySelector("div"); //33->max 5->num function buildNum( max, num ){ var arr = []; for( var i = 0; i < max; i++ ){ arr.push( i + 1 ); } var target = []; //從1-33這33個(gè)數(shù)字中 隨機(jī)選出5個(gè)數(shù) for( var i = 0; i < num; i++ ){ target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) ); } return target; } oBtn.onclick = function(){ var num = buildNum( 33, 5 ); oDiv.innerHTML = num; location.hash = num; } window.onhashchange = function(){ oDiv.innerHTML = location.hash.substring(1); } }
上例,我們通過1-33個(gè)數(shù)字,生成5個(gè)隨機(jī)數(shù),放入Div中, 每次生成一組隨機(jī)數(shù)就更新div的內(nèi)容, 最后通過瀏覽器的前進(jìn),后退按鈕,就可以感覺,所有的隨機(jī)切換內(nèi)容像是在切換不同的URL頁面, 實(shí)際的效果是沒有切換任何頁面,完全是在一個(gè)頁面中通過hash變化實(shí)現(xiàn)內(nèi)容切換.
最后,我們結(jié)合html5簡單的排版,利用hash來做一個(gè)選項(xiàng)卡切換的功能:
header, footer { height: 100px; background: #ccc; } section { width: 60%; height: 400px; background: #eee; float: left; } sidebar { width: 40%; height: 400px; background: #999; float: left; } .clear { clear: both; }
<header> 頭部 </header> <section> <ul> <li><a href="#/" rel="external nofollow" >全部</a></li> <li><a href="#/html" rel="external nofollow" rel="external nofollow" >html課程</a></li> <li><a href="#/css" rel="external nofollow" rel="external nofollow" >css課程</a></li> <li><a href="#/javascript" rel="external nofollow" >javascript課程</a></li> </ul> </section> <sidebar> 右邊 </sidebar> <div class="clear"></div> <footer> 底部 </footer>
(function(){ var Router = function(){ /* this.routes['/'] = function(){} this.routes['/html'] = function(){} */ this.routes = {};//用來保存路由 this.curUrl = ''; //獲取當(dāng)前的hash } Router.prototype.init = function(){ //監(jiān)聽路由變化 //call,apply window.addEventListener( 'hashchange', this.reloadPage.bind(this) ); } Router.prototype.reloadPage = function(){ this.curUrl = location.hash.substring(1) || '/'; this.routes[this.curUrl](); } Router.prototype.map = function( key, callback ){ //保存路由對應(yīng)的函數(shù) this.routes[key] = callback; // console.log( this.routes ); } window.Router = Router; })(); var oRouter = new Router(); oRouter.init(); oRouter.map( '/', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供html,css,javascript從0基礎(chǔ)到精通系列課程,只要會開關(guān)機(jī),就能學(xué)會'; }); oRouter.map('/html', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供html5從入門到精通的課程'; }); oRouter.map('/css', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供從入門到玩轉(zhuǎn)css3課程'; }); oRouter.map('/javascript', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = "ghostwu提供從0基礎(chǔ)到精通javascript系列課程"; });
以上是“js中單頁hash路由原理的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。