JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法
本文實(shí)例講述了JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
var wawa = {};
wawa.Router = function(){
function Router(){
}
Router.prototype.setup = function(routemap, defaultFunc){
var that = this, rule, func;
this.routemap = [];
this.defaultFunc = defaultFunc;
for (var rule in routemap) {
if (!routemap.hasOwnProperty(rule)) continue;
that.routemap.push({
rule: new RegExp(rule, 'i'),
func: routemap[rule]
});
}
};
Router.prototype.start = function(){
console.log(window.location.hash);
var hash = location.hash, route, matchResult;
for (var routeIndex in this.routemap){
route = this.routemap[routeIndex];
matchResult = hash.match(route.rule);
if (matchResult){
route.func.apply(window, matchResult.slice(1));
return;
}
}
this.defaultFunc();
};
return Router;
}();
var router = new wawa.Router();
router.setup({
'#/list/(.*)/(.*)': function(cate, id){
console.log('list', cate, id);
},
'#/show/(.*)': function(id){
console.log('show', id);
}
}, function(){
console.log('default router');
});
router.start();
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 用director.js實(shí)現(xiàn)前端路由使用實(shí)例
- director.js實(shí)現(xiàn)前端路由使用實(shí)例
- vue.js使用watch監(jiān)聽路由變化的方法
- VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
- AngularJS路由實(shí)現(xiàn)頁(yè)面跳轉(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)文章
學(xué)習(xí)JavaScript設(shè)計(jì)模式之單例模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的單例模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
一個(gè)簡(jiǎn)單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹
頁(yè)面滾動(dòng)條處于低端,點(diǎn)擊回到頂部,并且隱藏掉,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-06-06
js實(shí)現(xiàn)圖片切換(動(dòng)畫版)
本文主要對(duì)javascript實(shí)現(xiàn)圖片切換(動(dòng)畫版)的方法進(jìn)行步驟分析、實(shí)例介紹,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12
微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
基于JS實(shí)現(xiàn)EOS隱藏錯(cuò)誤提示層代碼
本文給大家分享一段代碼基于js實(shí)現(xiàn)EOS隱藏錯(cuò)誤提示層,對(duì)eos隱藏提示層的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-04-04
原生JS實(shí)現(xiàn)網(wǎng)頁(yè)手機(jī)音樂播放器 歌詞同步播放的示例
下面小編就為大家分享一篇原生JS實(shí)現(xiàn)網(wǎng)頁(yè)手機(jī)音樂播放器 歌詞同步播放的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02
bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrapTable+ajax加載數(shù)據(jù),以及refresh更新數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
js或css實(shí)現(xiàn)滾動(dòng)廣告的幾種方案
今天無(wú)事逛網(wǎng),突然發(fā)現(xiàn)了一個(gè)很有趣的事情,(也許只有我覺得有趣).我看到一圖片竟然在我拖動(dòng)滾動(dòng)條的時(shí)候沒有動(dòng),也許你會(huì)說(shuō)我少見多怪,不信你去找個(gè)這樣的我看看,很少有的,一般的都是一拖動(dòng)圖片就在那跳得厲害。2010-01-01
輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了js輕松實(shí)現(xiàn)彈框顯示選項(xiàng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09

