cc-tools-utils 0.0.1

package/lib/js/bus.ts

@@ -0,0 +1,24 @@
+class MyBus {
+  busList = {};
+
+  constructor() {}
+
+  $on(fnName, fn) {
+    if (this.busList[fnName]) throw console.error("事件名称重复!");
+    this.busList[fnName] = fn;
+  }
+
+  $emit(fnName) {
+    const args = [...arguments].slice(1);
+    this.busList[fnName](...args);
+  }
+
+  $off(fnName) {
+    if (!this.busList[fnName]) return;
+    delete this.busList[fnName];
+  }
+}
+
+let bus = new MyBus();
+
+export { bus };

package/lib/js/tools.ts

@@ -0,0 +1,238 @@
+/**
+ * 动画工具函数
+ */
+import TweenMax from "./Anima.js";
+
+/**
+ * Tween动画函数
+ * @param begin - 起始状态对象
+ * @param end - 结束状态对象
+ * @param time - 动画持续时间（秒）
+ * @param onUpdate - 更新回调函数
+ * @param onComplete - 完成回调函数
+ * @returns Tween动画实例
+ */
+export const anima = (
+  begin: Record<string, any>,
+  end: Record<string, any>,
+  time: number,
+  onUpdate?: (data: any) => void,
+  onComplete?: () => void,
+) => {
+  const newBegin = { ...begin };
+  const tween = new TweenMax(newBegin, time, end)
+    .eventCallback("onUpdate", () => onUpdate && onUpdate(newBegin))
+    .eventCallback("onComplete", () => {
+      onComplete && onComplete();
+      TweenMax?.killTweensOf(tween);
+    });
+  return tween;
+};
+
+/**
+ * 防抖函数
+ * @param time - 延迟时间（毫秒）
+ * @param fn - 要执行的函数
+ * @returns 防抖后的函数
+ */
+export const debounce = <T extends (...args: any[]) => any>(
+  time: number,
+  fn: T,
+): ((...args: Parameters<T>) => void) => {
+  let timeoutID: NodeJS.Timeout | null = null;
+  return function (...args: Parameters<T>) {
+    if (timeoutID) clearTimeout(timeoutID);
+    timeoutID = setTimeout(() => {
+      fn.apply(this, args);
+      timeoutID = null;
+    }, time);
+  };
+};
+
+/**
+ * 节流函数
+ * @param time - 节流时间间隔（毫秒）
+ * @param fn - 要执行的函数
+ * @returns 节流后的函数
+ */
+export const throttle = <T extends (...args: any[]) => any>(
+  time: number,
+  fn: T,
+): ((...args: Parameters<T>) => void) => {
+  let isGong = true;
+  return function (...args: Parameters<T>) {
+    if (!isGong) return;
+    isGong = false;
+    const timer = setTimeout(() => {
+      fn.apply(this, args);
+      isGong = true;
+      clearTimeout(timer);
+    }, time);
+  };
+};
+
+/**
+ * 蒙版渐隐动画
+ * @param parentDom - 父级DOM元素
+ */
+export const maskAnima = (parentDom: Element): void => {
+  const fn = () => {
+    const mask = document.createElement("div");
+    parentDom.appendChild(mask);
+    mask.style.width = `100%`;
+    mask.style.height = `100%`;
+    mask.style.position = `absolute`;
+
+    anima(
+      { color: 0 },
+      { color: 1 },
+      2,
+      (data) => {
+        mask.style.backgroundColor = `rgba(0,0,0,${data.color})`;
+      },
+      () => {
+        anima(
+          { color: 1 },
+          { color: 0 },
+          2,
+          (data) => {
+            mask.style.backgroundColor = `rgba(0,0,0,${data.color})`;
+          },
+          () => {
+            parentDom.removeChild(mask);
+          },
+        );
+      },
+    );
+  };
+
+  debounce(2000, fn);
+};
+
+// 递归调用 promise数组函数
+export const callPromises = (arr) => {
+  let index = 0;
+
+  function recursiveCall() {
+    if (index >= arr.length) {
+      return Promise.resolve(); // 递归结束，返回一个已解决的Promise
+    }
+
+    const currentPromise = arr[index](); // 调用当前的Promise函数
+
+    index++;
+
+    return currentPromise.then(recursiveCall); // 递归调用下一个Promise函数
+  }
+
+  return recursiveCall();
+};
+
+// 递归  调用数组中的函数
+export const callFunctions = (arr) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (typeof arr[i] === "function") {
+      arr[i](); // 调用函数
+    } else if (Array.isArray(arr[i])) {
+      callFunctions(arr[i]); // 递归调用数组中的函数
+    }
+  }
+};
+
+// 获取id dom元素
+export const getIdDom = (idName: string) => {
+  return document.querySelector(`#${idName}`);
+};
+
+// 获取class dom元素
+export const getClassDom = (className: string) => {
+  return document.querySelector(`.${className}`);
+};
+
+// 检测某个元素是否聚焦
+export const hasFocus = (el) => el === document.activeElement;
+
+// 获取某个元素所有的兄弟元素
+export const a = (el) =>
+  [].slice.call(el.parentNode.children).filter((child) => child !== el);
+
+// 获取当前选择的文本
+export const getSelectedText = () => window.getSelection().toString();
+
+// 返回上一个页面
+export const goBack = () => history.go(-1);
+
+// 将 URL 参数转换为对象
+export const getUrlParams = (query) =>
+  Array.from(new URLSearchParams(query)).reduce(
+    (p, [k, v]) =>
+      Object.assign({}, p, {
+        [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v,
+      }),
+    {},
+  );
+
+// 检测是否为暗模式
+export const isDarkMode =
+  window.matchMedia &&
+  window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+// 比较两个数组
+export const isEqualArray = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+// 将数组转为对象
+export const arrayToObject = (arr, key) =>
+  arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});
+
+// 将数组按照属性计数
+export const countBy = (arr, prop) =>
+  arr.reduce(
+    (prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev),
+    {},
+  );
+
+// 判断数组是否不为空
+export const arrayIsNotEmpty = (arr) =>
+  Array.isArray(arr) && Object.keys(arr).length > 0;
+
+// 展开多维数组
+export const flat_entries = (arr) => [].concat(...arr);
+
+// 获取数组最后一个元素
+export const lastItem = (arr) => arr.slice(-1)[0];
+
+// 检测多个对象是否相等
+export const isEqualString = (...objects) =>
+  objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));
+
+// 从对象数组中提取属性值
+export const pluck = (objs, property) => objs.map((obj) => obj[property]);
+
+// 反转对象的 key value
+export const invert = (obj) =>
+  Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});
+
+// 从对象中删除值为 null 和 undefined 的属性
+export const removeNullAndUndefined = (obj) =>
+  Object.entries(obj).reduce(
+    (a, [k, v]) => (v == null ? a : ((a[k] = v), a)),
+    {},
+  );
+
+// 按照对象的属性对对象排序
+export const sort = (obj) =>
+  Object.keys(obj)
+    .sort()
+    .reduce((p, c) => ((p[c] = obj[c]), p), {});
+
+// 检测对象是否为数组
+export const isArray = (obj) => Array.isArray(obj);
+
+// 检测对象是否为 Promise
+export const isPromise = (obj) =>
+  !!obj &&
+  (typeof obj === "object" || typeof obj === "function") &&
+  typeof obj.then === "function";
+
+// 交换两个对象
+export const exchange = (a, b) => ([a, b] = [b, a]);

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "cc-tools-utils",
+  "version": "0.0.1",
+  "description": "A collection of useful JavaScript utilities including animation tools, image processing, and event bus",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.dev.js",
+    "dev": "webpack --config webpack.dev.js --mode development"
+  },
+  "keywords": [
+    "utilities",
+    "tools",
+    "animation",
+    "image-processing",
+    "event-bus",
+    "javascript",
+    "typescript"
+  ],
+  "author": "chencheng",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/chen-cheng-1998/learn_own.git"
+  },
+  "files": [
+    "dist",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.5.11",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "vue": "3.2.13",
+    "vue-loader": "^17.4.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@types/node": "^22.7.5",
+    "babel-loader": "^8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4",
+    "webpack": "^5.65.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-parallel-uglify-plugin": "^2.0.0"
+  }
+}