npm 包 emiya-js-utils 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常需要使用一些常用的工具函数来完成常规的开发任务。对于这些常用的工具函数，我们可以封装成一个 npm 包来方便重复使用和共享给其他开发者。现在就让我们来介绍一个实用的 npm 包 emiya-js-utils，并为大家提供使用教程。

emiya-js-utils 介绍

emiya-js-utils 是一个轻量级、高效的 JavaScript 工具类库，其中包含了多个常用的工具函数，可以用于浏览器端和 Node.js 环境。该工具包分为不同的模块并且代码全部开源，支持 ES Module 和 CommonJS 两种导入方式。全部工具函数都是纯函数，不涉及任何副作用，因此使用时不需要担心副作用带来的问题。

emiya-js-utils 安装与导入

在使用 emiya-js-utils 之前，我们需要先安装该包。可以使用 npm 命令来安装：

npm install emiya-js-utils --save

然后在需要使用的文件中，通过 ES Module 或 CommonJS 来导入工具函数：

// ES Module
import { arrayUtils } from 'emiya-js-utils';

// CommonJS
const arrayUtils = require('emiya-js-utils').arrayUtils;

emiya-js-utils 使用教程

下面介绍 emiya-js-utils 中几个常用模块的使用方法。

arrayUtils 模块

arrayUtils 模块提供了多个数组操作的工具函数。可以使用 ES6 的 import 语法导入该模块：

import { arrayUtils } from 'emiya-js-utils';

该模块中常用的函数及其用法如下：

remove(arr, ele)：从数组 arr 中删除指定元素 ele，返回删除后的数组。

const arr = ['a', 'b', 'c'];
const result = arrayUtils.remove(arr, 'b'); // ["a", "c"]

removeRepeat(arr)：从数组 arr 中移除重复的元素，返回包含不重复元素的新数组。

const arr = ['a', 'b', 'b', 'c', 'c'];
const result = arrayUtils.removeRepeat(arr); // ["a", "b", "c"]

chunk(arr, size)：将数组 arr 拆分成大小为 size 的多个数组块，并返回这些数组块的集合。

const arr = ['a', 'b', 'c', 'd', 'e'];
const result = arrayUtils.chunk(arr, 2); // [["a", "b"], ["c", "d"], ["e"]]

dateUtils 模块

dateUtils 模块提供了多个有关日期和时间操作的工具函数。可以使用 ES6 的 import 语法导入该模块：

import { dateUtils } from 'emiya-js-utils';

该模块中常用的函数及其用法如下：

formatDate(date, fmt)：将日期 date 格式化成指定格式 fmt 的字符串。

const date = new Date(2021, 0, 1);
const result = dateUtils.formatDate(date, 'yyyy-MM-dd'); // '2021-01-01'

getWeekday(date)：获取日期 date 是星期几，返回一个数字（0-6）表示星期几。

const date = new Date(2021, 0, 1); // 星期五
const result = dateUtils.getWeekday(date); // 5

diffDate(date1, date2)：计算两个日期之间相差的天数，date1 和 date2 是 Date 类型的实例。

const date1 = new Date('2021-01-01');
const date2 = new Date('2021-02-01');
const result = dateUtils.diffDate(date1, date2); // 31

domUtils 模块

domUtils 模块提供了多个操作 DOM 元素的工具函数。可以使用 ES6 的 import 语法导入该模块：

import { domUtils } from 'emiya-js-utils';

该模块中常用的函数及其用法如下：

addClass(element, className)：给元素添加一个 CSS 类名。

const element = document.getElementById('my-element');
domUtils.addClass(element, 'my-class');

hasClass(element, className)：判断元素是否有指定的 CSS 类名。

const element = document.getElementById('my-element');
if (domUtils.hasClass(element, 'my-class')) {
  // 存在指定的 CSS 类名
}

isInViewPort(element, offset)：判断元素是否在浏览器视窗中出现，并返回 true 或 false。offset 表示视窗的偏移量，默认为 0。

const element = document.getElementById('my-element');
if (domUtils.isInViewPort(element, 50)) {
  // 元素 (偏移量 -50)px 到 (视窗高度 +50)px 之间或以内时为 true
}

总结

通过本文的介绍，现在大家对于 emiya-js-utils 这个 npm 包有了一个更全面的了解，包括什么是 emiya-js-utils、如何安装和导入、以及部分常用的使用方法。希望能够帮到各位前端开发工程师，提升工作效率和开发体验。

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