diff --git a/router.js b/router.js index d8926ea..ee0295b 100644 --- a/router.js +++ b/router.js @@ -1,32 +1,74 @@ function Router(routes, defaultRoute) { - //TODO + this.init(routes, defaultRoute); } //初始化,可多次初始化 -Router.prototype.init = function(routes, defaultRoute) { - //TODO - this.currentRoute - this.oldRoute -} +Router.prototype.init = function (routes, defaultRoute) { + this.routes = routes; + this.currentRoute = routes.find((r) => r.id === defaultRoute); + this.oldRoute = routes.find( + (r) => r.id === window.location.href.split("#")[1] || "" + ); + + const self = this; + + function onHashChange() { + const newHash = location.hash ? location.hash.split("#")[1] : ""; + self.changePage(newHash); + } + + // clear previous listener first + removeEventListener("hashchange", this.listener); + + // register hash change listener event + const listener = addEventListener("hashchange", onHashChange); + this.listener = listener; + + // first render + window.location.hash = this.currentRoute.id; +}; //切换路由 -Router.prototype.push = function(route, callback) { - //TODO -} +Router.prototype.push = function (route, callback) { + this.oldRoute = this.currentRoute; + this.currentRoute = this.routes.find((r) => r.id === route); + + window.location.hash = this.currentRoute.id; + return callback?.(); +}; + +Router.prototype.replace = function (route, callback) { + this.currentRoute = this.routes.find((r) => r.id === route); + + window.location.hash = this.currentRoute.id; + return callback?.(); +}; //前进 Router.prototype.forward = function () { history.forward(); -} +}; //后退 Router.prototype.back = function () { - history.back(); -} + this.currentRoute = this.oldRoute; + + window.location.hash = this.currentRoute.id; +}; //切换页面:route为字符串,为空则隐藏所有路由 -Router.prototype.changePage = function(route) { - //TODO -} +Router.prototype.changePage = function (route) { + // hide non current routes + this.routes.forEach((r) => { + if (r.id && r.id !== route) { + document.querySelector(`#${r.id}`).style.display = "none"; + } + }); + + // show current route + if (route) { + document.querySelector(`#${route}`).style.display = "initial"; + } +}; -module.exports = Router \ No newline at end of file +module.exports = Router; diff --git a/test/index.spec.js b/test/index.spec.js index 27b7c39..6a99e72 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,84 +1,104 @@ -describe('初始化路由', () => { - it('default route', () => { +const Router = require("../router.js"); + +describe("初始化路由", () => { + it("default route", () => { //路由表 - var routes = [{ - id: '' - }, { - id: 'index', - title: '首页' - }, { - id: 'next', - title: '下一页' - }] + var routes = [ + { + id: "" + }, + { + id: "index", + title: "首页" + }, + { + id: "next", + title: "下一页" + } + ]; //路由器 - var router = new Router(routes, 'next'); - expect(router.currentRoute).toMatchObject({ id: 'next', title: '下一页' }) + var router = new Router(routes, "next"); + expect(router.currentRoute).toMatchObject({ id: "next", title: "下一页" }); }); - it('route push', () => { + it("route push", () => { //路由表 - var routes = [{ - id: '' - }, { - id: 'index', - title: '首页' - }, { - id: 'next', - title: '下一页' - }] + var routes = [ + { + id: "" + }, + { + id: "index", + title: "首页" + }, + { + id: "next", + title: "下一页" + } + ]; //路由器 - var router = new Router(routes, 'index'); - const res = router.push('next', () => { return 'push next'; }); - expect(res).toBe('push next'); + var router = new Router(routes, "index"); + const res = router.push("next", () => { + return "push next"; + }); + expect(res).toBe("push next"); expect(router.currentRoute).toMatchObject({ - id: 'next', - title: '下一页' + id: "next", + title: "下一页" }); }); - it('route back', () => { + it("route back", () => { //路由表 - var routes = [{ - id: '' - }, { - id: 'index', - title: '首页' - }, { - id: 'next', - title: '下一页' - }] + var routes = [ + { + id: "" + }, + { + id: "index", + title: "首页" + }, + { + id: "next", + title: "下一页" + } + ]; //路由器 - var router = new Router(routes, 'index'); - router.push('next'); + var router = new Router(routes, "index"); + router.push("next"); router.back(); expect(router.currentRoute).toMatchObject({ - id: 'index', - title: '首页' + id: "index", + title: "首页" }); }); - it('route replace', () => { + it("route replace", () => { //路由表 - var routes = [{ - id: '' - }, { - id: 'index', - title: '首页' - }, { - id: 'next', - title: '下一页' - }] + var routes = [ + { + id: "" + }, + { + id: "index", + title: "首页" + }, + { + id: "next", + title: "下一页" + } + ]; //路由器 - var router = new Router(routes, 'index'); - router.push('next'); - router.replace('index'); + var router = new Router(routes, "index"); + router.push("next"); + router.replace("index"); expect(router.currentRoute).toMatchObject({ - id: 'index', - title: '首页' + id: "index", + title: "首页" }); }); -}); \ No newline at end of file +});