lyb-js 1.6.2 → 1.6.4

package/Base/LibJsResizeWatcher.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @description 用于监听浏览器窗口尺寸变化的类
+ * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsResizeWatcher-窗口监听
+ */
+type Listener = (w: number, h: number) => void;
+/** @description 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听 */
+export declare class LibJsResizeWatcher {
+    /** 存储所有监听器及其是否需要立即执行的标志 */
+    private _listeners;
+    constructor();
+    /**
+     * @description 注册一个窗口尺寸变化的监听器
+     * @param cb 回调函数，参数为当前窗口宽度和高度
+     * @param immediate 是否在注册时立即执行一次回调，默认为 true
+     * @returns 一个函数，用于移除该监听器
+     */
+    on(cb: Listener, immediate?: boolean): () => void;
+    /** @description 内部 resize 回调函数，调用所有注册的监听器 */
+    private _handleResize;
+}
+export {};

package/Base/LibJsResizeWatcher.js

@@ -0,0 +1,30 @@
+/** @description 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听 */
+export class LibJsResizeWatcher {
+    constructor() {
+        /** 存储所有监听器及其是否需要立即执行的标志 */
+        this._listeners = [];
+        /** @description 内部 resize 回调函数，调用所有注册的监听器 */
+        this._handleResize = () => {
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            this._listeners.forEach(({ cb }) => cb(w, h));
+        };
+        //初始化时绑定窗口 resize 事件
+        window.addEventListener("resize", this._handleResize);
+    }
+    /**
+     * @description 注册一个窗口尺寸变化的监听器
+     * @param cb 回调函数，参数为当前窗口宽度和高度
+     * @param immediate 是否在注册时立即执行一次回调，默认为 true
+     * @returns 一个函数，用于移除该监听器
+     */
+    on(cb, immediate = true) {
+        const item = { cb, immediate };
+        this._listeners.push(item);
+        if (immediate)
+            cb(window.innerWidth, window.innerHeight);
+        return () => {
+            this._listeners = this._listeners.filter((l) => l !== item);
+        };
+    }
+}

package/Browser/LibJsPathParams.js

@@ -7,7 +7,8 @@ export const libJsPathParams = (path) => {
     if (!url)
         return {};
     const params = url.split("&").reduce((pre, cur) => {
-        const [k, v] = cur.split(/=(.+)/);
+        const [k, v] = cur.split(/=(.+)/).map(decodeURIComponent);
+        ;
         return (pre[k] = v), pre;
     }, {}) || {};
     return params;

package/Browser/libJsParseQueryString.js

@@ -2,4 +2,4 @@
  * @param query URL参数
  * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsParseQueryString-URL参数转对象
  */
-export const libJsParseQueryString = (query) => Object.fromEntries(new URLSearchParams(query));
+export const libJsParseQueryString = (query) => Object.fromEntries(new URLSearchParams(decodeURIComponent(query)));

package/README.md

@@ -64,6 +64,8 @@ console.log(t); //"string"
 
 \- [LibJsPromiseTimeout-延时执行](#LibJsPromiseTimeout-延时执行)
 
+\- [LibJsResizeWatcher-窗口监听](#LibJsResizeWatcher-窗口监听)
+
 
 ### Browser-浏览器
 
@@ -202,6 +204,18 @@ libJsPromiseTimeout(3000, () => {
 });
 ```
 
+### LibJsResizeWatcher-窗口监听
+
+> 监听窗口变化，内部只注册一次`resize`事件，调用监听自身可取消监听
+
+```ts
+const libJsResizeWatcher = new LibJsResizeWatcher();
+
+const off = libJsResizeWatcher.on((w,h)=>{})
+
+off()
+```
+
 ## Browser-浏览器
 
 ### LibJsColorConsole-有色打印

package/libJs.d.ts

@@ -1,5 +1,6 @@
 import { LibJsNumberStepper } from "./Misc/LibJsNumberStepper";
 import { LibJsClassObservable } from "./Misc/LibJsClassObservable";
+import { LibJsResizeWatcher } from "./Base/LibJsResizeWatcher";
 /** @description 基础方法 */
 export declare const Base: {
     /**
@@ -15,6 +16,8 @@ export declare const Base: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsPromiseTimeout-延时执行
      */
     libJsPromiseTimeout: (delay?: number, fn?: () => void) => Promise<void>;
+    /** @description 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听 */
+    LibJsResizeWatcher: typeof LibJsResizeWatcher;
 };
 /** @description 浏览器相关方法 */
 export declare const Browser: {

package/libJs.js

@@ -42,6 +42,7 @@ import { LibJsLerp } from "./Math/LibJsLerp";
 import { LibJsNormalizeInRange } from "./Math/LibJsNormalizeInRange";
 import { LibJsClassObservable } from "./Misc/LibJsClassObservable";
 import { libJsCopy } from "./Browser/LibJsCopy";
+import { LibJsResizeWatcher } from "./Base/LibJsResizeWatcher";
 /** @description 基础方法 */
 export const Base = {
     /**
@@ -57,6 +58,8 @@ export const Base = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsPromiseTimeout-延时执行
      */
     libJsPromiseTimeout,
+    /** @description 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听 */
+    LibJsResizeWatcher,
 };
 /** @description 浏览器相关方法 */
 export const Browser = {

package/lyb.js

@@ -92,7 +92,7 @@ ${log3.label}：`, log3.value];
     if (!url)
       return {};
     const params = url.split("&").reduce((pre, cur) => {
-      const [k, v2] = cur.split(/=(.+)/);
+      const [k, v2] = cur.split(/=(.+)/).map(decodeURIComponent);
       return pre[k] = v2, pre;
     }, {}) || {};
     return params;
@@ -3507,6 +3507,32 @@ ${log3.label}：`, log3.value];
       fallbackCopy(text);
     }
   };
+  class LibJsResizeWatcher {
+    constructor() {
+      this._listeners = [];
+      this._handleResize = () => {
+        const w = window.innerWidth;
+        const h = window.innerHeight;
+        this._listeners.forEach(({ cb }) => cb(w, h));
+      };
+      window.addEventListener("resize", this._handleResize);
+    }
+    /**
+     * @description 注册一个窗口尺寸变化的监听器
+     * @param cb 回调函数，参数为当前窗口宽度和高度
+     * @param immediate 是否在注册时立即执行一次回调，默认为 true
+     * @returns 一个函数，用于移除该监听器
+     */
+    on(cb, immediate = true) {
+      const item = { cb, immediate };
+      this._listeners.push(item);
+      if (immediate)
+        cb(window.innerWidth, window.innerHeight);
+      return () => {
+        this._listeners = this._listeners.filter((l) => l !== item);
+      };
+    }
+  }
   const Base = {
     /**
      * @description 返回数据类型
@@ -3520,7 +3546,9 @@ ${log3.label}：`, log3.value];
      * @param fn 延时执行函数
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsPromiseTimeout-延时执行
      */
-    libJsPromiseTimeout
+    libJsPromiseTimeout,
+    /** @description 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听 */
+    LibJsResizeWatcher
   };
   const Browser = {
     /** @description console颜色打印

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-js",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "自用JS方法库",
   "license": "ISC",
   "type": "module",