clxx 2.0.9 → 2.1.2

package/README.md

@@ -11,7 +11,7 @@
 - [`is`](./src/utils/is.ts)：一些简单的环境判断
 - [`jsonp`](./src/utils/jsonp.ts)：发送一个 jsonp 请求
 - [`GET，POST`](./src/utils/request.ts)：ajax 请求的简单封装
-- [`Tick`](./src/utils/tick.ts)：嘀嗒器，每帧都会执行
+- [`tick`](./src/utils/tick.ts)：嘀嗒器，每帧都会执行
 - [`uniqKey`](./src/utils/uniqKey.ts)：生成一个全局唯一的 key
 - [`waitUntil`](./src/utils/wait.ts)：执行某种检测，直接条件为真或者超时才返回
 

package/build/Effect/useTick.js

@@ -1,5 +1,5 @@
-import { Tick } from "../utils/tick";
-import { useEffect, useRef } from "react";
+import { tick } from '../utils/tick';
+import { useEffect, useRef } from 'react';
 /**
  * 逐帧执行的ticker
  * @param frame 帧函数
@@ -9,8 +9,7 @@ export function useTick(frame) {
     const framer = useRef(frame);
     framer.current = frame;
     useEffect(() => {
-        const tick = new Tick(() => framer.current());
-        tick.start();
-        return () => tick.destroy();
+        const stop = tick(() => framer.current());
+        return () => stop();
     }, []);
 }

package/build/index.d.ts

@@ -1,4 +1,4 @@
-export { Tick } from './utils/tick';
+export { tick } from './utils/tick';
 export { setContextValue, getContextValue } from './context';
 export { jsonp } from './utils/jsonp';
 export { uniqKey } from './utils/uniqKey';
@@ -11,6 +11,7 @@ export { is } from './utils/is';
 export { waitFor, waitUntil } from './utils/wait';
 export { normalizeUnit, splitValue, adaptive } from './utils/cssUtil';
 export { createApp, history, getHistory } from './utils/createApp';
+export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';
 export { useTick } from './Effect/useTick';
 export { Ago } from './Ago';

package/build/index.js

@@ -1,4 +1,4 @@
-export { Tick } from './utils/tick';
+export { tick } from './utils/tick';
 export { setContextValue, getContextValue } from './context';
 export { jsonp } from './utils/jsonp';
 export { uniqKey } from './utils/uniqKey';
@@ -11,6 +11,7 @@ export { is } from './utils/is';
 export { waitFor, waitUntil } from './utils/wait';
 export { normalizeUnit, splitValue, adaptive } from './utils/cssUtil';
 export { createApp, history, getHistory } from './utils/createApp';
+export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';
 export { useTick } from './Effect/useTick';
 export { Ago } from './Ago';

package/build/utils/Countdown.d.ts

@@ -1,4 +1,4 @@
-export type CountdownValueIndex = "d" | "h" | "i" | "s";
+export type CountdownValueIndex = 'd' | 'h' | 'i' | 's';
 export type CountdownValue = {
     [key in CountdownValueIndex]?: number;
 };

package/build/utils/Countdown.js

@@ -1,4 +1,4 @@
-import { Tick } from "./tick";
+import { tick } from './tick';
 export class Countdown {
     constructor(option) {
         /**
@@ -13,13 +13,13 @@ export class Countdown {
          * i：分
          * s：秒
          */
-        this.format = ["d", "h", "i", "s"];
-        if (typeof option.remain === "number" && option.remain >= 0) {
+        this.format = ['d', 'h', 'i', 's'];
+        if (typeof option.remain === 'number' && option.remain >= 0) {
             this.total = this.remain = option.remain;
         }
         // 倒计时需要展示的时间格式
-        if (typeof option.format === "string") {
-            const parts = option.format.split("");
+        if (typeof option.format === 'string') {
+            const parts = option.format.split('');
             const output = [];
             this.format.forEach((item) => {
                 if (parts.includes(item)) {
@@ -30,7 +30,7 @@ export class Countdown {
         }
         else {
             // 设置默认的倒计时格式
-            this.format = ["h", "i", "s"];
+            this.format = ['h', 'i', 's'];
         }
         this._onUpdate = option.onUpdate;
         this._onEnd = option.onEnd;
@@ -54,7 +54,7 @@ export class Countdown {
         (_d = this._onUpdate) === null || _d === void 0 ? void 0 : _d.call(this, this.formatValue());
         // 记录倒计时开启时的时间
         const start = Date.now();
-        const tickInstance = new Tick(() => {
+        this._stopTick = tick(() => {
             var _a, _b, _c, _d;
             // 获取倒计时已经持续的时间
             const duration = Math.floor((Date.now() - start) / 1000);
@@ -73,8 +73,6 @@ export class Countdown {
                 (_d = this._onUpdate) === null || _d === void 0 ? void 0 : _d.call(this, this.formatValue());
             }
         });
-        tickInstance.start();
-        this._stopTick = () => tickInstance.destroy();
     }
     // 停止倒计时
     stop() {
@@ -91,19 +89,19 @@ export class Countdown {
         const result = {};
         this.format.forEach((key) => {
             switch (key) {
-                case "d":
+                case 'd':
                     result.d = Math.floor(remainTime / 86400);
                     remainTime = remainTime - result.d * 86400;
                     break;
-                case "h":
+                case 'h':
                     result.h = Math.floor(remainTime / 3600);
                     remainTime = remainTime - result.h * 3600;
                     break;
-                case "i":
+                case 'i':
                     result.i = Math.floor(remainTime / 60);
                     remainTime = remainTime - result.i * 60;
                     break;
-                case "s":
+                case 's':
                     result.s = remainTime;
                     break;
                 default:

package/build/utils/tick.d.ts

@@ -1,13 +1,7 @@
+export type StopTick = () => void;
 /**
- * tick类，初始化后使用start开始tick，使用destroy终止tick
- * @constructor
- * @param {function} callback start后每一帧都会调用的回调函数
+ * 逐帧执行的工具函数，返回一个方法，调用该方法，停止执行
+ * @param callback
+ * @param interval
  */
-export declare class Tick {
-    callback?: (() => void) | undefined;
-    frameId: number | undefined;
-    isRun: boolean;
-    constructor(callback?: (() => void) | undefined);
-    start(): void;
-    destroy(): void;
-}
+export declare function tick(callback: () => void, interval?: number): StopTick;

package/build/utils/tick.js

@@ -1,32 +1,47 @@
 /**
- * tick类，初始化后使用start开始tick，使用destroy终止tick
- * @constructor
- * @param {function} callback start后每一帧都会调用的回调函数
+ * 逐帧执行的工具函数，返回一个方法，调用该方法，停止执行
+ * @param callback
+ * @param interval
  */
-export class Tick {
-    constructor(callback) {
-        this.callback = callback;
-        this.frameId = undefined;
-        this.isRun = true;
-    }
-    start() {
-        // 每一帧执行的任务
-        const frame = () => {
-            var _a;
-            if (!this.isRun)
+export function tick(callback, interval) {
+    // 执行状态，是否正在执行
+    let isRunning;
+    let frame;
+    let frameId;
+    // 设置了tick的间隔
+    if (interval && typeof interval === 'number') {
+        let lastTick = Date.now();
+        frame = () => {
+            if (!isRunning) {
                 return;
-            // 在回调执行之前预约下一帧
-            this.frameId = requestAnimationFrame(frame);
-            // 执行回调
-            (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+            frameId = requestAnimationFrame(frame);
+            const now = Date.now();
+            // 每次间隔频率逻辑上保持一致，即使帧频不一致
+            if (now - lastTick >= interval) {
+                // 本次tick的时间为上次的时间加上频率间隔
+                lastTick = lastTick + interval;
+                callback();
+            }
         };
-        // 执行起始帧
-        frame();
     }
-    destroy() {
-        if (typeof this.frameId === "number") {
-            cancelAnimationFrame(this.frameId);
-        }
-        this.isRun = false;
+    // 没有设置tick的间隔
+    else {
+        frame = () => {
+            if (!isRunning) {
+                return;
+            }
+            frameId = requestAnimationFrame(frame);
+            // 没有设置interval时，每帧都执行
+            callback();
+        };
     }
+    // 开始执行
+    isRunning = true;
+    frameId = requestAnimationFrame(frame);
+    // 返回一个可以立即停止的函数
+    return () => {
+        isRunning = false;
+        cancelAnimationFrame(frameId);
+    };
 }

package/build/utils/wait.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Tick } from "./tick";
+import { tick } from './tick';
 /**
  * 直接条件为真或者超时才返回结果
  *
@@ -21,27 +21,27 @@ export function waitUntil(condition, maxTime) {
         // 记录检测开始时间
         const start = Date.now();
         // 如果检测条件不为函数，直接返回结果
-        if (typeof condition !== "function") {
+        if (typeof condition !== 'function') {
             return !!condition;
         }
         // 设置默认检测时间的最大值，如果没有设置，则一直检测
-        if (!maxTime || typeof maxTime !== "number") {
+        if (!maxTime || typeof maxTime !== 'number') {
             maxTime = Infinity;
         }
         return new Promise((resolve) => {
-            const tick = new Tick(() => {
+            const stop = tick(() => {
                 const now = Date.now();
                 const result = condition();
                 // 超时返回false
                 if (now - start >= maxTime) {
-                    tick.destroy();
+                    stop();
                     resolve(false);
                     return;
                 }
                 // 处理结果
                 const handle = (res) => {
                     if (res) {
-                        tick.destroy();
+                        stop();
                         resolve(true);
                     }
                 };
@@ -53,7 +53,6 @@ export function waitUntil(condition, maxTime) {
                 // 普通一般的结果
                 handle(result);
             });
-            tick.start();
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.0.9",
+  "version": "2.1.2",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",