temp

src/page.ts

@@ -1,5 +1,5 @@
 import { getPathKey } from '@/utils/path-key.ts';
-import { match } from 'path-to-regexp';
+import * as pathToRegexp from 'path-to-regexp';
 import deepEqual from 'fast-deep-equal';
 
 const generateRandom = () => {
@@ -7,8 +7,17 @@ const generateRandom = () => {
   return crypto.randomUUID();
 };
 type PageOptions = {
+  /**
+   * 路径
+   */
   path?: string;
+  /**
+   * key
+   */
   key?: string;
+  /**
+   * basename
+   */
   basename?: string;
   isListen?: boolean;
 };
@@ -23,7 +32,9 @@ type CallbackInfo = {
   fn: CallFn;
   id: string;
 } & PageModule;
-let currentUrl = location.href;
+/**
+ * 根据basename,其中的path和key，来判断一个应用的模块。
+ */
 export class Page {
   pageModule = new Map<string, PageModule>();
   // pathname的第一个路径
@@ -33,19 +44,51 @@ export class Page {
   basename: string;
   isListen: boolean;
   callbacks = [] as CallbackInfo[];
+  ok = false;
   constructor(opts?: PageOptions) {
     const pathKey = getPathKey();
     this.path = opts?.path ?? pathKey.path;
     this.key = opts?.key ?? pathKey.key;
-    this.basename = opts?.basename ?? `/${this.path}/${this.key}`;
+    if (opts?.basename) {
+      this.basename = opts?.basename;
+    } else {
+      if (this.key) {
+        this.basename = `/${this.path}/${this.key}`;
+      } else {
+        const location = window.location;
+        this.basename = location.pathname;
+      }
+    }
+    this.clearEndSlash();
     const isListen = opts?.isListen ?? true;
     if (isListen) {
       this.listen();
     }
+    this.ok = !!this.key;
   }
-  popstate(event?: PopStateEvent, manualOpts?: { id?: string; type: 'singal' | 'all' }) {
-    const pathname = window.location.pathname;
-    console.log('popstate', event);
+  /**
+   * 清除路径的结尾斜杠，所有的最后的斜杠都删除
+   */
+  clearEndSlash() {
+    this.basename = this.basename.replace(/\/+$/, '');
+    return this;
+  }
+  /**
+   * 检查路径
+   */
+  checkPath() {
+    const pathKey = getPathKey();
+    const { path, key } = pathKey;
+    this.path = path || '';
+    this.key = key || '';
+    this.ok = !!this.key;
+    this.basename = `/${this.path}/${this.key}`;
+    this.clearEndSlash();
+    return this;
+  }
+
+  popstate(event?: PopStateEvent, manualOpts?: { id?: string; type: 'singal' | 'all'; pathname?: string }) {
+    const pathname = manualOpts?.pathname ?? window.location.pathname;
     if (manualOpts) {
       if (manualOpts.type === 'singal') {
         const item = this.callbacks.find((item) => item.id === manualOpts.id);
@@ -62,7 +105,17 @@ export class Page {
       result && item.fn?.(result.params, event.state, { event, manualOpts });
     });
   }
+  /**
+   * 调用callback中id或者pathname的函数, 其中id优先级高于pathname，若都没有，则从location.pathname中获取
+   * @param opts
+   */
+  call(opts?: { id?: string; pathname?: string }) {
+    this.popstate({ state: window.history.state } as any, { ...opts, type: 'all' });
+  }
   listen() {
+    if (this.isListen) {
+      return;
+    }
     this.isListen = true;
     window.addEventListener('popstate', this.popstate.bind(this), false);
   }
@@ -89,7 +142,7 @@ export class Page {
     });
   }
   /**
-   * 检查当前路径是否匹配
+   * 检查当前路径是否匹配, 如何提交pathname，则检查pathname
    * @param key
    * @param pathname
    * @returns
@@ -106,8 +159,12 @@ export class Page {
     }
     const location = window.location;
     const _pathname = pathname || location.pathname;
+    if (!_pathname.includes(this.basename)) {
+      // console.error(`PageModule ${key} not found`);
+      return false;
+    }
     const cur = _pathname.replace(this.basename, '');
-    const routeMatch = match(pageModule.path, { decode: decodeURIComponent });
+    const routeMatch = pathToRegexp.match(pageModule.path, { decode: decodeURIComponent });
     const result = routeMatch(cur);
     let params = {};
     if (result) {
@@ -124,20 +181,22 @@ export class Page {
    * @param opts
    * @returns
    */
-  subscribe(key: string, fn?: CallFn, opts?: { pathname?: string; runImmediately?: boolean; id?: string }) {
+  async subscribe(key: string, fn?: CallFn, opts?: { pathname?: string; runImmediately?: boolean; id?: string }) {
     const runImmediately = opts?.runImmediately ?? true; // 默认立即执行
     const id = opts?.id ?? generateRandom();
-    const path = this.pageModule.get(key)?.path;
-    if (!path) {
+    const pageModule = this.pageModule.get(key);
+    if (!pageModule) {
       console.error(`PageModule ${key} not found`);
       return () => {};
     }
+    const path = pageModule?.path || '';
     this.callbacks.push({ key, fn, id: id, path });
     if (runImmediately) {
       const location = window.location;
       const pathname = opts?.pathname ?? location.pathname;
       const result = this.check(key, pathname);
       if (result) {
+        // 如果是手动调用，则不需要检查是否相等，直接执行，而且是执行当前的subscribe的函数
         this.popstate({ state: window.history.state } as any, { id, type: 'singal' });
       }
     }
@@ -145,6 +204,9 @@ export class Page {
       this.callbacks = this.callbacks.filter((item) => item.id !== id);
     };
   }
+  getPathKey() {
+    return getPathKey();
+  }
   /**
    * 返回当前路径，不包含basename
    * @returns
@@ -157,12 +219,26 @@ export class Page {
   getAppPath() {
     return this.path;
   }
+  /**
+   * 返回当前key
+   * @returns
+   */
   getAppKey() {
     return this.key;
   }
+  /**
+   * 解码路径
+   * @param path
+   * @returns
+   */
   decodePath(path: string) {
     return decodeURIComponent(path);
   }
+  /**
+   * 编码路径
+   * @param path
+   * @returns
+   */
   encodePath(path: string) {
     return encodeURIComponent(path);
   }
@@ -170,7 +246,7 @@ export class Page {
    * 如果state 和 pathname都相等，则不执行popstate
    * @param path
    * @param state
-   * @param check
+   * @param check 是否检查, 默认检查
    * @returns
    */
   navigate(path: string | number, state?: any, check?: boolean) {
@@ -193,6 +269,12 @@ export class Page {
       this.popstate({ state } as any, { type: 'all' });
     }
   }
+  /**
+   * 替换当前路径
+   * @param path
+   * @param state
+   * @param check
+   */
   replace(path: string, state?: any, check?: boolean) {
     let _check = check ?? true;
     window.history.replaceState(state, '', this.basename + path);
@@ -200,10 +282,26 @@ export class Page {
       this.popstate({ state } as any, { type: 'all' });
     }
   }
+  /**
+   * 刷新当前页面
+   */
   refresh() {
     const state = window.history.state;
     this.popstate({ state } as any, { type: 'all' });
   }
+  /**
+   * 检查路径是否匹配
+   * @param path
+   * @param checkPath
+   * @returns
+   */
+  pathMatch(regexpPath: string, checkPath: string) {
+    return pathToRegexp.match(regexpPath, { decode: decodeURIComponent })(checkPath);
+  }
+  pathToRegexp = pathToRegexp;
+  static match(regexpPath: string, checkPath: string) {
+    return pathToRegexp.match(regexpPath, { decode: decodeURIComponent })(checkPath);
+  }
 }
 /**
  * 获取history state