创建history路由

package.json

@@ -7,8 +7,8 @@
     "dist/*"
   ],
   "scripts": {
-    "build:next": "esbuild src/index.js --minify --bundle --format=esm --target=esnext --outfile=dist/index.js",
+    "build:next": "esbuild src/index.js --minify --bundle --external:wkit --format=esm --target=esnext --outfile=dist/index.js",
-    "build:es6": "esbuild src/index.js --minify --bundle --format=esm --target=es6 --outfile=dist/index.es6.js",
+    "build:es6": "esbuild src/index.js --minify --bundle --external:wkit --format=esm --target=es6 --outfile=dist/index.es6.js",
     "build": "npm run build:next && npm run build:es6"
   },
   "repository": {

src/router/index.js

@@ -4,8 +4,7 @@
  * @date 2023/08/10 10:10:06
  */
 import { Component } from 'wkit'
-import createWebHashHistory from './hash-router.js'
+import { createWebHashHistory, createWebHistory } from './router-engine.js'
-import createWebHistory from './modern-router.js'
 import './router-components.js'
 
 export { createWebHashHistory, createWebHistory }

src/router/modern-router.js

@@ -4,30 +4,33 @@
  * @date    2017-04-14 21:04:50
  *
  */
-import { bind } from 'wkit'
+import { bind, fire } from 'wkit'
-import { hideProp, targetIsThisWindow } from '../utils.js'
+import {
+  noop,
+  targetIsThisWindow,
+  query2object,
+  object2query
+} from '../utils.js'
 
 //hash前缀正则
-const PREFIX_REGEXP = /^(#!|#)[\/]?/
+const PREFIX_REGEXP = /^(#!|#)[\/]+?/
-const TRIM_REGEXP = /(^[/]+)|([/]+$)/g
+const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g
-const DEFAULT_OPTIONS = {
-  mode: 'hash', // hash | history
-  allowReload: true //连续点击同一个链接是否重新加载
-}
-const LINKS = []
-const RULE_REGEXP =
-  /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
 
 class Router {
-  constructor(options) {
+  type = 'history'
-    hideProp(this, 'table', [])
+
-    hideProp(this, 'last', '')
+  #tables = new Map()
-    hideProp(this, 'path', '')
+  #views = new Set()
-    hideProp(this, 'pathArr', [])
+
-    hideProp(this, 'ready', false)
+  #targets = new Map()
-    hideProp(this, 'noMatch', null)
+
-    hideProp(this, 'options', Object.assign({}, DEFAULT_OPTIONS, options))
+  #ready = false
-    this.__listen__()
+  #route = Object.create(null)
+
+  #beforeEach
+
+  constructor() {
+    // bind(window, 'popstate', this.#hashchange.bind(this))
   }
 
   // 事件监听
@@ -172,7 +175,7 @@ class Router {
   }
 
   // 跳转到路由
-  go(path, forceCleanHash = false) {
+  go2(path, forceCleanHash = false) {
     path = path.trim().replace(TRIM_REGEXP, '')
     let { mode } = this.options
 
@@ -196,21 +199,21 @@ class Router {
   }
 
   // 绑定路由事件
-  on(rule, callback) {
+  addRoute(routes) {
-    if (Array.isArray(rule)) {
+    // if (Array.isArray(routes)) {
-      rule.forEach(it => {
+    //   routes.forEach(it => {
-        this.__add__(it, callback)
+    //     this.#add(it)
-      })
+    //   })
-    } else {
+    // } else {
-      this.__add__(rule, callback)
+    //   this.#add(routes)
-    }
+    // }
-    // 因为先初始化,才开始监听路由规则
+    // // 初始化后再添加路由, 手动执行一次回调
-    // 所以会导致wondow load的时候, 规则还没生效, 而生效之后,load已经结束
+    // if (this.#ready) {
-    // 所以这里需要手动再触发一次load
+    //   this.#hashchange()
-    Anot.fireDom(window, 'load')
+    // }
   }
 }
 
 export default function () {
-  return new Router()
+  return () => new Router()
 }

src/router/router-engine.js

@@ -24,7 +24,8 @@ class Router {
 
   #beforeEach
 
-  constructor() {
+  constructor(type = 'hash') {
+    this.type = type
     bind(window, 'popstate', this.#hashchange.bind(this))
   }
 
@@ -222,6 +223,10 @@ class Router {
   }
 }
 
-export default function () {
+export function createWebHashHistory() {
-  return () => new Router()
+  return () => new Router('hash')
+}
+
+export function createWebHistory() {
+  return () => new Router('history')
 }