hw12

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
+module.exports = Router;

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: "首页"
     });
   });
-});
+});