From 56d087dbe9c3c016c2a2b8a2d81de297f05463f2 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 14 Aug 2023 18:18:41 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAhistory=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- src/router/index.js | 3 +- src/router/modern-router.js | 71 ++++++++++--------- .../{hash-router.js => router-engine.js} | 11 ++- 4 files changed, 48 insertions(+), 41 deletions(-) rename src/router/{hash-router.js => router-engine.js} (95%) diff --git a/package.json b/package.json index 48db3e4..e990cfc 100644 --- a/package.json +++ b/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:es6": "esbuild src/index.js --minify --bundle --format=esm --target=es6 --outfile=dist/index.es6.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 --external:wkit --format=esm --target=es6 --outfile=dist/index.es6.js", "build": "npm run build:next && npm run build:es6" }, "repository": { diff --git a/src/router/index.js b/src/router/index.js index de93b84..e3a9a21 100644 --- a/src/router/index.js +++ b/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 createWebHistory from './modern-router.js' +import { createWebHashHistory, createWebHistory } from './router-engine.js' import './router-components.js' export { createWebHashHistory, createWebHistory } diff --git a/src/router/modern-router.js b/src/router/modern-router.js index d511f92..dc96c1b 100644 --- a/src/router/modern-router.js +++ b/src/router/modern-router.js @@ -4,30 +4,33 @@ * @date 2017-04-14 21:04:50 * */ -import { bind } from 'wkit' -import { hideProp, targetIsThisWindow } from '../utils.js' +import { bind, fire } from 'wkit' +import { + noop, + targetIsThisWindow, + query2object, + object2query +} from '../utils.js' //hash前缀正则 -const PREFIX_REGEXP = /^(#!|#)[\/]?/ -const TRIM_REGEXP = /(^[/]+)|([/]+$)/g -const DEFAULT_OPTIONS = { - mode: 'hash', // hash | history - allowReload: true //连续点击同一个链接是否重新加载 -} -const LINKS = [] -const RULE_REGEXP = - /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g +const PREFIX_REGEXP = /^(#!|#)[\/]+?/ +const RULE_REGEXP = /(\/[^/]*)(:[A-Za-z0-9_]+)(\?)?/g class Router { - constructor(options) { - hideProp(this, 'table', []) - hideProp(this, 'last', '') - hideProp(this, 'path', '') - hideProp(this, 'pathArr', []) - hideProp(this, 'ready', false) - hideProp(this, 'noMatch', null) - hideProp(this, 'options', Object.assign({}, DEFAULT_OPTIONS, options)) - this.__listen__() + type = 'history' + + #tables = new Map() + #views = new Set() + + #targets = new Map() + + #ready = false + #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) { - if (Array.isArray(rule)) { - rule.forEach(it => { - this.__add__(it, callback) - }) - } else { - this.__add__(rule, callback) - } - // 因为先初始化,才开始监听路由规则 - // 所以会导致wondow load的时候, 规则还没生效, 而生效之后,load已经结束 - // 所以这里需要手动再触发一次load - Anot.fireDom(window, 'load') + addRoute(routes) { + // if (Array.isArray(routes)) { + // routes.forEach(it => { + // this.#add(it) + // }) + // } else { + // this.#add(routes) + // } + // // 初始化后再添加路由, 手动执行一次回调 + // if (this.#ready) { + // this.#hashchange() + // } } } export default function () { - return new Router() + return () => new Router() } diff --git a/src/router/hash-router.js b/src/router/router-engine.js similarity index 95% rename from src/router/hash-router.js rename to src/router/router-engine.js index e3665ba..fb2ac6f 100644 --- a/src/router/hash-router.js +++ b/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 () { - return () => new Router() +export function createWebHashHistory() { + return () => new Router('hash') +} + +export function createWebHistory() { + return () => new Router('history') }