crootfast/template/apps/react18/src/common/utils/tools.js

大前端工程化命令行脚手架

import { message } from "antd";
import { debounce } from "lodash-es";

// 检查接口是否通过
export function verifySuccess(code) {
  return code === "000000";
}

// 抛出错误
export function postMessage(msg = "", type = "error") {
  message[type](msg || "接口异常请检查");
}

export function uuid() {
  return Math.random().toString(16).substring(2);
}

/**
 * 每一个 x，它生成一个 0 到 15 之间的随机数。
 * 每一个 y，它生成一个 8、9、A 或 B 中的一个值（根据 UUID v4 的规范）。
 */
export function uuidv4() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

export function isEmptyValue(value) {
  if (value === undefined || value === null || value === "") {
    return true;
  }
  if (typeof value === "object" && !Object.keys(value).length) {
    return true;
  }
  if (Array.isArray(value) && !value.length) {
    return true;
  }
  return false;
}

// 安全的JSONparse，避免报错导致白屏。
export function safeJSONparse(value, defaultValue) {
  try {
    if (typeof value === "string") {
      return JSON.parse(value);
    }
  } catch (e) {
    console.log("JSON解析错误:", e);
    // 返回默认值或执行其他错误处理
    return defaultValue;
  }
}
// 修改element元素的style属性
export function getElementStyle(options = {}) {
  let styles = Object.entries(options)
    .map(([key, value]) => `${key}:${value}`)
    .join("; ");

  return styles;
}

// 创建递归 Proxy 来监听对象的深度变化
export function createDeepProxy(obj, onChange) {
  const handler = {
    get(target, property, receiver) {
      const value = Reflect.get(target, property, receiver);
      if (value && typeof value === "object") {
        return new Proxy(value, handler);
      }
      return value;
    },
    set(target, property, value) {
      const oldValue = target[property];
      if (Object.is(oldValue, value)) {
        return true; // 如果新旧值相同，则不执行任何操作
      }
      const result = Reflect.set(target, property, value);
      onChange(); // 当属性变化时触发回调
      return result;
    }
  };
  return new Proxy(obj, handler);
}

// 检查是否为代理对象
export function isProxy(obj) {
  try {
    Object.isExtensible(obj);
    return false;
  } catch (e) {
    return true;
  }
}

export function requestTimeout(callback, delay) {
  const start = performance.now();
  let handle = null;

  function loop(currentTime) {
    if (currentTime - start >= delay) {
      callback();
    } else {
      handle = requestAnimationFrame(loop);
    }
  }

  handle = requestAnimationFrame(loop);
  return handle;
}

export function clearRequestTimeout(handle) {
  cancelAnimationFrame(handle);
}

export function requestIdleCallback(callback, options = { timeout: 1000 }) {
  if (window.requestIdleCallback) {
    return window.requestIdleCallback((deadline) => {
      // while
      if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
        // && tasks.length > 0
        // 执行空闲任务
        callback &&
          callback({
            didTimeout: deadline.didTimeout,
            timeRemaining: deadline.timeRemaining()
          });
      }
      // if (tasks.length > 0) {
      //   requestIdleCallbackShim(doIdleWork);
      // }
    }, options);
  } else {
    // 使用 requestTimeout 来模拟 requestIdleCallback
    const start = Date.now();
    return requestTimeout(() => {
      callback &&
        callback({
          didTimeout: false,
          timeRemaining: function () {
            return Math.max(0, 50 - (Date.now() - start));
          }
        });
    }, 1); // 使用 1ms 延迟尽量模拟 '空闲' 状态
  }
}

export function cancelIdleCallback(id) {
  if (window.cancelIdleCallback) {
    window.cancelIdleCallback(id);
  } else {
    clearRequestTimeout(id);
  }
}

// 从后往前遍历，类似find的方法
export function findLast(array, predicate) {
  for (let i = array.length - 1; i >= 0; i--) {
    if (predicate(array[i], i, array)) {
      return array[i];
    }
  }
  return undefined;
}

// 监听DOM是否出现
export function nextTick(element, onMutation, debounceTime = 300) {
  if (!element) {
    return;
  }
  // 防抖回调
  const debouncedOnMutation = debounce(onMutation, debounceTime);

  // 内置的回调函数
  const callback = (mutationsList) => {
    // observer
    if (mutationsList.length > 0) {
      debouncedOnMutation();
    }
  };

  // 默认配置
  const config = {
    childList: true,
    attributes: true,
    subtree: true
  };

  // 创建 MutationObserver 实例
  const observer = new MutationObserver(callback);

  // 开始观察
  observer.observe(element, config);

  // 返回一个停止观察的函数
  return () => observer.disconnect();
}

// 改变元素的尺寸
export function observeSize(element, callback, debounceTime = 300) {
  const debouncedCallback = debounce(callback, debounceTime);

  const resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      debouncedCallback(entry.contentRect);
    }
  });

  resizeObserver.observe(element);

  return () => {
    resizeObserver.unobserve(element);
    debouncedCallback.cancel();
  };
}