lyb-js 1.6.10 → 1.6.13

package/Base/LibJsResizeWatcher.d.ts

@@ -9,7 +9,7 @@ export declare class LibJsResizeWatcher {
     private _listeners;
     /** 当前适配模式 */
     private _mode;
-    constructor(mode: "h" | "v" | "hv");
+    constructor(mode?: "h" | "v" | "hv");
     /**
      * @description 注册一个窗口尺寸变化的监听器
      * @param cb 回调函数，参数为当前窗口宽度和高度

package/Base/LibJsResizeWatcher.js

@@ -1,10 +1,8 @@
 /** @description 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听 */
 export class LibJsResizeWatcher {
-    constructor(mode) {
+    constructor(mode = "hv") {
         /** 存储所有监听器及其是否需要立即执行的标志 */
         this._listeners = [];
-        /** 当前适配模式 */
-        this._mode = "hv";
         /** @description 内部 resize 回调函数，调用所有注册的监听器 */
         this._handleResize = () => {
             const w = window.innerWidth;

package/Data/libJsPickUnique.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description 从候选数组中随机取一个未使用的元素
+ * @param pool 全部候选数组
+ * @param used 已使用数组
+ * @returns 未使用的随机元素，若无可用则返回 undefined
+ */
+export declare const libJsPickUnique: <T>(pool: T[], used?: T[]) => T | undefined;

package/Data/libJsPickUnique.js

@@ -0,0 +1,14 @@
+import { libJsRandom } from "../Random/LibJsRandom";
+/**
+ * @description 从候选数组中随机取一个未使用的元素
+ * @param pool 全部候选数组
+ * @param used 已使用数组
+ * @returns 未使用的随机元素，若无可用则返回 undefined
+ */
+export const libJsPickUnique = (pool, used = []) => {
+    const usedSet = new Set(used);
+    const available = pool.filter((item) => !usedSet.has(item));
+    if (available.length === 0)
+        return undefined;
+    return available[libJsRandom(0, available.length - 1)];
+};

package/Misc/LibJsPullUpLoad.d.ts

@@ -0,0 +1,21 @@
+import { LibJsClassObservable } from "./LibJsClassObservable";
+interface PullUpLoadObservable {
+    /** 当前加载状态文案 */
+    statusText: string;
+    /** 加载状态 */
+    loadStatus: "idle" | "loading" | "noMore" | "empty";
+}
+interface PullUpLoadParams {
+    /** 滚动容器 */
+    scrollEl: HTMLElement;
+    /** 加载状态元素 */
+    loadStatusEl: HTMLElement;
+    /** 触发加载回调 */
+    onLoad: () => void;
+}
+/** @description 上拉加载 */
+export declare class LibJsPullUpLoad extends LibJsClassObservable<PullUpLoadObservable> {
+    constructor(params: PullUpLoadParams);
+    private checkAutoLoad;
+}
+export {};

package/Misc/LibJsPullUpLoad.js

@@ -0,0 +1,47 @@
+import { LibJsClassObservable } from "./LibJsClassObservable";
+/** @description 上拉加载 */
+export class LibJsPullUpLoad extends LibJsClassObservable {
+    constructor(params) {
+        super({
+            statusText: "加载中...",
+            loadStatus: "idle",
+        });
+        const { scrollEl, loadStatusEl, onLoad } = params;
+        this.checkAutoLoad(onLoad, scrollEl);
+        this.onValue("loadStatus", (v) => {
+            if (v === "idle") {
+                this.checkAutoLoad(onLoad, scrollEl);
+            }
+        });
+        /** @description 滚动触发 */
+        scrollEl.addEventListener("scroll", () => {
+            //如果所有数据已加载完毕，则不再触发加载
+            if (["noMore", "empty", "loading"].includes(this.getValue("loadStatus")))
+                return;
+            const y = scrollEl.scrollTop;
+            //获取距离加载触发像素值
+            const loadDistance = scrollEl.scrollHeight -
+                scrollEl.clientHeight -
+                y -
+                loadStatusEl.offsetHeight;
+            if (loadDistance <= 0) {
+                this.setValue("loadStatus", "loading");
+                this.setValue("statusText", "加载中...");
+                setTimeout(() => {
+                    onLoad();
+                }, 500);
+            }
+        });
+    }
+    // 1. 新增方法
+    checkAutoLoad(onLoad, scrollEl) {
+        if (!["noMore", "empty", "loading"].includes(this.getValue("loadStatus")) &&
+            scrollEl.scrollHeight <= scrollEl.clientHeight) {
+            this.setValue("loadStatus", "loading");
+            this.setValue("statusText", "加载中...");
+            setTimeout(() => {
+                onLoad();
+            }, 500);
+        }
+    }
+}

package/README.md

@@ -363,6 +363,10 @@ const newArr = libReverseArrayFromIndex([1, 2, 3, 4, 5], 1);
 console.log(newArr); // [1, 2, 5, 4, 3]
 ```
 
+### libJsPickUnique-随机选择未使用元素
+
+> 从候选数组中随机取一个未使用的元素
+
 ## File-文件
 
 ### LibJsDownloadImageLink-图片下载

package/libJs.d.ts

@@ -1,6 +1,7 @@
 import { LibJsNumberStepper } from "./Misc/LibJsNumberStepper";
 import { LibJsClassObservable } from "./Misc/LibJsClassObservable";
 import { LibJsResizeWatcher } from "./Base/LibJsResizeWatcher";
+import { LibJsPullUpLoad } from "./Misc/LibJsPullUpLoad";
 /** @description 基础方法 */
 export declare const Base: {
     /**
@@ -112,6 +113,8 @@ export declare const Data: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibReverseArrayFromIndex-数组定位翻转
      */
     libReverseArrayFromIndex: <T>(arr: T[], index: number) => T[];
+    /** @description 随机选择未使用元素 */
+    libJsPickUnique: <T>(pool: T[], used?: T[]) => T | undefined;
 };
 /** @description 文件相关方法 */
 export declare const File: {
@@ -278,6 +281,8 @@ export declare const Misc: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsClassObservable-类属性监听器
      */
     LibJsClassObservable: typeof LibJsClassObservable;
+    /** @description 上拉加载 */
+    LibJsPullUpLoad: typeof LibJsPullUpLoad;
 };
 /** @description 随机相关方法 */
 export declare const Random: {

package/libJs.js

@@ -43,6 +43,8 @@ import { LibJsNormalizeInRange } from "./Math/LibJsNormalizeInRange";
 import { LibJsClassObservable } from "./Misc/LibJsClassObservable";
 import { libJsCopy } from "./Browser/LibJsCopy";
 import { LibJsResizeWatcher } from "./Base/LibJsResizeWatcher";
+import { LibJsPullUpLoad } from "./Misc/LibJsPullUpLoad";
+import { libJsPickUnique } from "./Data/libJsPickUnique";
 /** @description 基础方法 */
 export const Base = {
     /**
@@ -151,6 +153,8 @@ export const Data = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibReverseArrayFromIndex-数组定位翻转
      */
     libReverseArrayFromIndex,
+    /** @description 随机选择未使用元素 */
+    libJsPickUnique,
 };
 /** @description 文件相关方法 */
 export const File = {
@@ -290,6 +294,8 @@ export const Misc = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsClassObservable-类属性监听器
      */
     LibJsClassObservable,
+    /** @description 上拉加载 */
+    LibJsPullUpLoad,
 };
 /** @description 随机相关方法 */
 export const Random = {

package/lyb.js

@@ -3501,9 +3501,8 @@ ${log3.label}：`, log3.value];
     }
   };
   class LibJsResizeWatcher {
-    constructor(mode) {
+    constructor(mode = "hv") {
       this._listeners = [];
-      this._mode = "hv";
       this._handleResize = () => {
         const w = window.innerWidth;
         const h = window.innerHeight;
@@ -3555,6 +3554,51 @@ ${log3.label}：`, log3.value];
       };
     }
   }
+  class LibJsPullUpLoad extends LibJsClassObservable {
+    constructor(params) {
+      super({
+        statusText: "加载中...",
+        loadStatus: "idle"
+      });
+      const { scrollEl, loadStatusEl, onLoad } = params;
+      this.checkAutoLoad(onLoad, scrollEl);
+      this.onValue("loadStatus", (v) => {
+        if (v === "idle") {
+          this.checkAutoLoad(onLoad, scrollEl);
+        }
+      });
+      scrollEl.addEventListener("scroll", () => {
+        if (["noMore", "empty", "loading"].includes(this.getValue("loadStatus")))
+          return;
+        const y = scrollEl.scrollTop;
+        const loadDistance = scrollEl.scrollHeight - scrollEl.clientHeight - y - loadStatusEl.offsetHeight;
+        if (loadDistance <= 0) {
+          this.setValue("loadStatus", "loading");
+          this.setValue("statusText", "加载中...");
+          setTimeout(() => {
+            onLoad();
+          }, 500);
+        }
+      });
+    }
+    // 1. 新增方法
+    checkAutoLoad(onLoad, scrollEl) {
+      if (!["noMore", "empty", "loading"].includes(this.getValue("loadStatus")) && scrollEl.scrollHeight <= scrollEl.clientHeight) {
+        this.setValue("loadStatus", "loading");
+        this.setValue("statusText", "加载中...");
+        setTimeout(() => {
+          onLoad();
+        }, 500);
+      }
+    }
+  }
+  const libJsPickUnique = (pool, used = []) => {
+    const usedSet = new Set(used);
+    const available = pool.filter((item) => !usedSet.has(item));
+    if (available.length === 0)
+      return void 0;
+    return available[libJsRandom(0, available.length - 1)];
+  };
   const Base = {
     /**
      * @description 返回数据类型
@@ -3659,7 +3703,9 @@ ${log3.label}：`, log3.value];
      * @param index 开始索引
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibReverseArrayFromIndex-数组定位翻转
      */
-    libReverseArrayFromIndex
+    libReverseArrayFromIndex,
+    /** @description 随机选择未使用元素 */
+    libJsPickUnique
   };
   const File$1 = {
     /** @description 下载图片链接
@@ -3794,7 +3840,9 @@ ${log3.label}：`, log3.value];
     /** @description 类属性监听器
      * @link 使用方法：https://www.npmjs.com/package/lyb-js#LibJsClassObservable-类属性监听器
      */
-    LibJsClassObservable
+    LibJsClassObservable,
+    /** @description 上拉加载 */
+    LibJsPullUpLoad
   };
   const Random = {
     /** @description 百分比概率结果

package/package.json

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