简单路由器实现附带详细说明
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 技术交流群。
上一篇: CSS 题集 烧脑集合
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论