用js寫的一個(gè)路由(簡(jiǎn)單實(shí)例)
前幾天在網(wǎng)上看了一個(gè)大牛用js寫了一個(gè)路由的,有一句代碼一直不知道怎么回事,后來(lái)就自己寫了一個(gè),寫的比較的粗糙,我覺(jué)得把面向?qū)ο蟮乃枷攵几愕脕y七八糟的,不過(guò)功能實(shí)現(xiàn)了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js實(shí)現(xiàn)路由</title> </head> <body> < a href=" " >white</ a> < a href="#/green" >green</ a> < a href="#/blue" >blue</ a> < a href="#/yellow" >yellow</ a> </body> </html> <script> function Route(){ } Route.prototype.open=function(route,callback){ var arr={}; arr[route]=callback; window.addEventListener('hashchange',function(){ var temp=window.location.hash; for(var i in arr){ if(i==temp.slice(1,temp.length)){ arr[i](); } } }) } window.Route=new Route(); function change(color){ var body=document.getElementsByTagName('body')[0]; body.style.backgroundColor=color; console.log(color); } Route.open('/',function(){ change(''); }); Route.open('/green',function(){ change('green'); }); Route.open('/blue',function(){ change('blue'); }); Route.open('/yellow',function(){ change('yellow'); }); </script>
以上就是小編為大家?guī)?lái)的用js寫的一個(gè)路由(簡(jiǎn)單實(shí)例)的全部?jī)?nèi)容了,希望對(duì)大家有所幫助,多多支持腳本之家~
相關(guān)文章
js停止冒泡和阻止瀏覽器默認(rèn)行為的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js停止冒泡和阻止瀏覽器默認(rèn)行為的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-05-05Javascript中valueOf與toString區(qū)別淺析
Javascript中valueOf與toString區(qū)別淺析,需要的朋友可以參考一下2013-03-03JavaScript Array擴(kuò)展實(shí)現(xiàn)代碼
最近看了一下developer.mozilla.org里的東西,發(fā)現(xiàn)它為Array對(duì)象添加了不少generic method,趕得上Prototype的熱心程度。2009-10-10webpack自動(dòng)打包功能實(shí)現(xiàn)
webpack是前端項(xiàng)目構(gòu)建工具打包工具,本文通過(guò)實(shí)例代碼給大家介紹webpack自動(dòng)打包功能實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-02-02cropper js基于vue的圖片裁剪上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了cropper js基于vue的圖片裁剪上傳功能的相關(guān)資料,需要的朋友可以參考下2018-03-03