npm 包 bussi 使用教程

简介

bussi 是一个用于前端开发的 npm 包，它提供了丰富的实用工具和方法，包括但不限于：

• 时间处理
• 字符串处理
• 数组处理
• 函数式编程
• DOM 操作

在使用 bussi 之前，需要先确保已经安装了 Node.js 和 npm。

安装

通过 npm 安装 bussi：

npm install bussi

时间处理

formatDate(date: Date, fmt: string)

将日期对象格式化为指定的字符串格式。

import { formatDate } from 'bussi';

const now = new Date();
console.log(formatDate(now, 'yyyy-MM-dd hh:mm:ss')); // 2021-06-23 12:34:56
console.log(formatDate(now, 'yyyy/MM/dd')); // 2021/06/23

parseDate(str: string)

将字符串解析为日期对象。

import { parseDate } from 'bussi';

const dateStr = '2021-06-23 12:34:56';
const date = parseDate(dateStr);
console.log(date.getFullYear()); // 2021
console.log(date.getMonth()); // 5 (注意：月份从 0 开始计数，因此 5 表示六月)
console.log(date.getDate()); // 23

字符串处理

toCamelCase(str: string)

将字符串转换为驼峰式命名。

import { toCamelCase } from 'bussi';

console.log(toCamelCase('hello-world')); // helloWorld
console.log(toCamelCase('good-night-sweet-prince')); // goodNightSweetPrince

toDashCase(str: string)

将字符串转换为连字符分隔式命名。

import { toDashCase } from 'bussi';

console.log(toDashCase('helloWorld')); // hello-world
console.log(toDashCase('goodNightSweetPrince')); // good-night-sweet-prince

toUnderscoreCase(str: string)

将字符串转换为下划线分隔式命名。

import { toUnderscoreCase } from 'bussi';

console.log(toUnderscoreCase('helloWorld')); // hello_world
console.log(toUnderscoreCase('goodNightSweetPrince')); // good_night_sweet_prince

数组处理

chunk(arr: T[], size: number)

将数组按指定大小进行切割，并返回切割后的二维数组。

import { chunk } from 'bussi';

const arr = [1, 2, 3, 4, 5];
console.log(chunk(arr, 2)); // [[1, 2], [3, 4], [5]]
console.log(chunk(arr, 3)); // [[1, 2, 3], [4, 5]]

difference(arr1: T[], arr2: T[])

返回两个数组之间的差异。

import { difference } from 'bussi';

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
console.log(difference(arr1, arr2)); // [1]
console.log(difference(arr2, arr1)); // [4]

uniq(arr: T[])

返回去重后的数组。

import { uniq } from 'bussi';

const arr = [1, 1, 2, 2, 3, 4, 4, 5];
console.log(uniq(arr)); // [1, 2, 3, 4, 5]

函数式编程

pipe<T>(fns: Function[], init: T)

将多个函数组合起来，依次执行并返回结果。

import { pipe } from 'bussi';

const add = (x: number, y: number) => x + y;
const multiply = (x: number, y: number) => x * y;
const divide = (x: number, y: number) => x / y;
const fns = [add, multiply, divide];

console.log(pipe(fns, 1)(2, 3)); // 1 / 2 * 3 + 1 = 1.5

compose<T>(fns: Function[], init: T)

将多个函数组合起来，依次执行并返回结果（与 pipe 的区别在于函数执行的顺序相反）。

import { compose } from 'bussi';

const add = (x: number, y: number) => x + y;
const multiply = (x: number, y: number) => x * y;
const divide = (x: number, y: number) => x / y;
const fns = [add, multiply, divide];

console.log(compose(fns, 1)(2, 3)); // 1 * 2 / 3 + 1 = 1.6666666666666665

DOM 操作

$(selector: string | HTMLElement, el?: HTMLElement)

查询 DOM 元素。

import { $ } from 'bussi';

const container = document.getElementById('container');
const element = $('li.selected', container);

addClass(el: HTMLElement, className: string)

为 DOM 元素添加 CSS 类。

import { addClass } from 'bussi';

const element = $('li.selected');
addClass(element, 'highlight');

removeClass(el: HTMLElement, className: string)

从 DOM 元素中移除 CSS 类。

import { removeClass } from 'bussi';

const element = $('li.selected');
removeClass(element, 'highlight');

结语

bussi 提供了很多实用的工具和方法，可以大幅提高开发效率。希望本篇文章能够对读者有所帮助。如果你有任何疑问或建议，欢迎在评论区留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde552e