sy-front-end-utils

V2.0.0 更新内容

common.js和ES模块都可使用

// CommonJS

const { formatDate } =require('sy-front-end-utils');

// ES Module

import { formatDate } from'sy-front-end-utils';

添加测试用例

运行所有测试： npm test

监视模式（在开发时很有用）： npm run test:watch

测试单个文件： npm test tests/utils.test.js

Jest 会生成测试覆盖率报告，你可以在 coverage 目录中查看详细报告。

安装

bash

npm install sy-front-end-utils

使用方法

javascript

// CommonJS

const { formatDate } =require('sy-front-end-utils');

// ES Module

import { formatDate } from'sy-front-end-utils';

API 文档

日期格式化 (formatDate)

将日期对象格式化为指定格式的字符串。 javascript formatDate(date, format = 'YYYY-MM-DD HH:mm:ss')

参数：

• date (Date): 日期对象
• format (string): 格式模板，默认为 'YYYY-MM-DD HH:mm:ss'

返回值：

• (string): 格式化后的日期字符串

示例： javascript const date = new Date('2024-01-08 14:30:00'); formatDate(date); // 返回: "2024-01-08 14:30:00"

深拷贝 (deepClone)

创建对象的深层副本。 javascript deepClone(obj)

参数：

• obj (any): 要复制的对象

返回值：

• (any): 深拷贝后的对象

示例： javascript const original = { a: 1, b: { c: 2 } }; const copy = deepClone(original); copy.b.c = 3; console.log(original.b.c); // 2 console.log(copy.b.c); // 3

防抖函数 (debounce)

创建一个防抖函数，延迟调用直到等待时间结束。 javascript debounce(func, wait = 300)

参数：

• func (Function): 要执行的函数
• wait (number): 等待时间（毫秒），默认 300ms

返回值：

• (Function): 防抖处理后的函数

示例： javascript const debouncedSearch = debounce(() => { // 搜索逻辑 }, 300); searchInput.addEventListener('input', debouncedSearch);

节流函数 (throttle)

创建一个节流函数，限制函数调用频率。 javascript throttle(func, limit = 300)

参数：

• func (Function): 要执行的函数
• limit (number): 时间间隔（毫秒），默认 300ms

返回值：

• (Function): 节流处理后的函数

示例： javascript const throttledScroll = throttle(() => { // 滚动处理逻辑 }, 300); window.addEventListener('scroll', throttledScroll);

随机整数生成 (randomInteger)

生成指定范围内的随机整数。 javascript randomInteger(min, max)

参数：

• min (number): 最小值
• max (number): 最大值

返回值：

• (number): 生成的随机整数

示例： javascript const num = randomInteger(1, 10); // 返回 1-10 之间的随机整数

邮箱验证 (isValidEmail)

验证邮箱地址格式是否有效。 javascript isValidEmail(email)

参数：

• email (string): 要验证的邮箱地址

返回值：

• (boolean): 是否是有效的邮箱地址

示例： javascript isValidEmail('[email protected]'); // true isValidEmail('invalid-email'); // false

URL参数获取 (getUrlParam)

从URL中获取指定参数的值。 javascript getUrlParam(name)

参数：

• name (string): 参数名称

返回值：

• (string|null): 参数值或null

示例： javascript // URL: https://example.com?id=123 getUrlParam('id'); // "123"

对象转查询字符串 (objectToQueryString)

将对象转换为URL查询字符串。 javascript objectToQueryString(obj)

参数：

• obj (Object): 要转换的对象

返回值：

• (string): 查询字符串

示例： javascript const params = { name: 'John', age: 30 }; objectToQueryString(params); // "name=John&age=30"

驼峰转短横线命名 (camelToKebabCase)

将驼峰命名转换为短横线命名。 javascript camelToKebabCase(str)

参数：

• str (string): 驼峰命名的字符串

返回值：

• (string): 短横线命名的字符串

示例： javascript camelToKebabCase('backgroundColor'); // "background-color"

短横线转驼峰命名 (kebabToCamelCase)

将短横线命名转换为驼峰命名。 javascript kebabToCamelCase(str)

参数：

• str (string): 短横线命名的字符串

返回值：

• (string): 驼峰命名的字符串

示例： javascript kebabToCamelCase('background-color'); // "backgroundColor"

许可证

MIT

函数介绍

防抖（Debounce）

防抖的核心思想是延迟执行函数，如果在延迟时间内函数被再次调用，则重新计时。

应用场景：

搜索框输入 窗口调整（resize） 按钮点击

节流（Throttle）

节流的核心思想是在一定时间内只执行一次函数，无论这个函数被调用多少次。

应用场景：

滚动事件处理 频繁点击按钮（如提交按钮） 游戏中的射击功能

防抖用于搜索框和窗口调整，确保只在用户停止输入或调整窗口大小后才执行操作，避免频繁的 API 调用或重排布局。 节流用于滚动事件和按钮点击，限制事件处理函数的执行频率，防止过于频繁的操作影响性能或导致意外行为。

测试用例使用方法：

运行所有测试： npm test

监视模式（在开发时很有用）： npm run test:watch

测试单个文件： npm test tests/utils.test.js

Jest 会生成测试覆盖率报告，你可以在 coverage 目录中查看详细报告。