@mm-custom/method

@mm-custom/Method

一个功能丰富的JavaScript/TypeScript工具库，提供日常开发中常用的工具函数集合

特性

• 类型安全: 完全使用TypeScript编写，提供完整的类型定义
• 模块化设计: 按功能模块组织，支持按需导入
• 浏览器友好: 所有浏览器相关功能都包含环境检测
• 详细文档: 每个函数都有完整的JSDoc注释和示例
• 高度可配置: 支持丰富的配置选项，满足不同场景需求

安装

npm install @mm-custom/method
# 或
yarn add @mm-custom/method
# 或
pnpm add @mm-custom/method

快速开始

完整导入

import * as Method from '@mm-custom/method';

// 使用数组交集函数
const result = Method.intersectionArrays(null, [1, 2, 3], [2, 3, 4]);
console.log(result); // [2, 3]

按需导入

import {
  intersectionArrays,
  unionArrays,
  getCssVar,
  setCssVar,
  MediaDeviceManager
} from '@mm-custom/method';

// 使用数组函数
const intersection = intersectionArrays(null, [1, 2], [2, 3]);
const union = unionArrays(null, [1, 2], [2, 3]);

// 使用CSS变量函数
setCssVar('--primary-color', '#007bff');
const color = getCssVar('--primary-color');

// 使用媒体设备管理器
const deviceManager = new MediaDeviceManager({
  enableDeviceDeduplication: true,
  autoRequestPermission: true
});

模块概览

Array (数组操作)

• intersectionArrays - 多个数组取交集
• unionArrays - 多个数组取并集
• differenceArrays - 多个数组取差集

Browser (浏览器检测)

• isBrowser - 检测是否在浏览器环境
• browserInfo - 获取详细的浏览器信息
• browserVersion - 获取浏览器名称和版本号
• MediaDeviceManager - 媒体设备管理器（摄像头、麦克风、扬声器）

CSS (CSS变量操作)

• getCssVar - 获取CSS变量值
• setCssVar - 设置CSS变量值
• observeCssVar - 监听CSS变量变化

Date (日期处理)

• formatDate - 日期格式化
• parseDate - 日期解析
• dateDiff - 日期差值计算

Element (DOM元素操作)

• createElement - 创建DOM元素
• addClass / removeClass - 类名操作
• getElementPosition - 获取元素位置

Event (事件处理)

• useIdleCallback - 空闲回调执行
• useAnimationFrame - 动画帧执行
• runNumerousTasks - 批量任务执行

File (文件操作)

• downloadFile - 文件下载
• getFileInfo - 获取文件信息
• convertFile - 文件格式转换

Function (函数工具)

• debounce - 防抖函数
• throttle - 节流函数
• memoize - 记忆化函数

GIS (地理信息)

• convertDegree - 经纬度格式转换
• parseDMS - 度分秒解析
• formatDMS - 度分秒格式化

Number (数字处理)

• formatNumber - 数字格式化
• keepDecimal - 保留小数位数
• randomNumber - 生成随机数

Object (对象操作)

• deepClone - 深拷贝
• deepReplace - 深度替换
• mergeObjects - 对象合并

Regexp (正则表达式)

• 常用正则模式（邮箱、手机号、IP地址等）
• createRegExp - 创建正则表达式
• testRegExp - 正则测试

Session (会话存储)

• setSessionItem - 设置会话存储
• getSessionItem - 获取会话存储
• removeSessionItem - 删除会话存储

String (字符串处理)

• formatToString - 字符串格式化
• transformCase - 命名风格转换
• splitString - 字符串分割

Type (类型判断)

• returnType - 返回数据类型
• isString / isNumber / isObject - 类型守卫
• judgeType - 类型判断

Video (视频处理)

• captureVideoFrame - 视频帧捕获
• drawTextOnCanvas - 画布文字绘制
• addWatermark - 添加水印

详细示例

数组操作示例

import { intersectionArrays, unionArrays, differenceArrays } from '@mm-custom/method';

// 数组交集
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const arr3 = [3, 4, 5];

const intersection = intersectionArrays(null, arr1, arr2, arr3);
console.log(intersection); // [3]

// 数组并集
const union = unionArrays(null, arr1, arr2);
console.log(union); // [1, 2, 3, 4]

// 自定义比较函数（对象数组）
const customizer = (a: any, b: any) => a.id === b.id;
const objIntersection = intersectionArrays(customizer, 
  [{id: 1}, {id: 2}], 
  [{id: 2}, {id: 3}]
);
console.log(objIntersection); // [{id: 2}]

日期处理示例

import { formatDate, parseDate, dateDiff } from '@mm-custom/method';

// 日期格式化
const now = new Date();
console.log(formatDate(now, 'YYYY-MM-DD HH:mm:ss')); // 2024-01-01 12:00:00

// 日期解析
const dateStr = '2024-01-01';
const parsedDate = parseDate(dateStr);
console.log(parsedDate); // Date对象

// 日期差值计算
const start = new Date('2024-01-01');
const end = new Date('2024-01-10');
const diff = dateDiff(start, end, 'days');
console.log(diff); // 9

CSS变量操作示例

import { getCssVar, setCssVar, observeCssVar } from '@mm-custom/method';

// 设置CSS变量
setCssVar('--primary-color', '#007bff');
setCssVar('--border-radius', '8px');

// 获取CSS变量
const primaryColor = getCssVar('--primary-color');
const borderRadius = getCssVar('--border-radius');

// 监听CSS变量变化
const unsubscribe = observeCssVar('--theme-color', (newValue, oldValue) => {
  console.log(`主题色从 ${oldValue} 变为 ${newValue}`);
});

// 取消监听
unsubscribe();

防抖节流示例

import { debounce, throttle } from '@mm-custom/method';

// 防抖函数
const debouncedSearch = debounce((query: string) => {
  console.log(`搜索: ${query}`);
}, 300);

// 节流函数
const throttledScroll = throttle(() => {
  console.log('滚动事件');
}, 100);

// 使用
window.addEventListener('scroll', throttledScroll);
input.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

媒体设备管理示例

import { MediaDeviceManager } from '@mm-custom/method';

// 创建媒体设备管理器实例
const manager = new MediaDeviceManager({
  enableDeviceDeduplication: true,  // 启用设备去重
  autoRequestPermission: true       // 自动请求权限
});

// 检查浏览器支持
if (!manager.isSupported()) {
  console.log('当前浏览器不支持媒体设备 API');
}

// 监听设备变化事件
manager.on('devices.change', (devices) => {
  console.log('设备列表已更新:');
  console.log('摄像头:', devices.videoinput);
  console.log('麦克风:', devices.audioinput);
  console.log('扬声器:', devices.audiooutput);
});

// 监听权限变化事件
manager.on('permission.change', (permissions) => {
  console.log('权限状态已更新:');
  console.log('摄像头权限:', permissions.camera);
  console.log('麦克风权限:', permissions.microphone);
});

// 获取当前设备列表
const devices = manager.getCurrentGroupedDevices();
console.log('当前摄像头设备:', devices.videoinput);

// 获取权限状态
const permissions = manager.getMediaPermissions();
console.log('摄像头权限:', permissions.camera);

// 请求权限
await manager.requestMediaPermissions({ video: true, audio: true });

// 动态切换去重功能
await manager.setDeduplicationEnabled(false);

// 销毁实例
manager.destroy();

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

开发

构建

npm run build

类型检查

npm run check-tsconfig

许可证

ISC License

版本历史

2.2.0

• 新增数组操作模块（交集、并集、差集）
• 新增CSS变量操作模块
• 新增日期处理模块
• 新增DOM元素操作模块
• 新增事件处理模块
• 新增文件操作模块
• 新增函数工具模块
• 新增GIS地理信息模块
• 新增数字处理模块
• 新增对象操作模块
• 新增正则表达式模块
• 新增会话存储模块
• 新增字符串处理模块
• 新增类型判断模块
• 新增视频处理模块
• 新增媒体设备管理模块（MediaDeviceManager）
  • 支持摄像头、麦克风、扬声器设备查询
  • 支持权限状态查询和自动请求
  • 支持设备去重功能
  • 支持设备变化和权限变化事件监听
  • 完整的 TypeScript 类型定义和 JSDoc 文档

贡献

欢迎提交Issue和Pull Request来改进这个工具库！

联系方式

• 作者: maomao
• 项目地址: [GitHub Repository]