简单路由器实现附带详细说明

发布于 2022-03-18 12:39:36 字数 1257 浏览 1038 评论 0

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;
// 知识点:hasOwnProperty 这个怎么用?
that.routemap.push({
rule: new RegExp(rule, 'i'),
func: routemap[rule] // 路由函数
}); 
}
};
Router.prototype.start = function(){
console.log(window.location.hash);
// 知识点:location.hash --- 监听浏览器的 hash 改变 ie8 版本为分割点 关于 onhashchange 的实现(原谅我不分大小写)
var hash = location.hash, route, matchResult;
for (var routeIndex in this.routemap){
route = this.routemap[routeIndex];
matchResult = hash.match(route.rule);
// 知识点:match 返回的是一个还是多个
if (matchResult){
route.func.apply(window, matchResult.slice(1));
// call 和 apply 的区别 关于改变函数 this 的事 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();

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文