随着前端技术的快速发展，越来越多的开发者需要使用 npm 包来提高工作效率。其中，wago-common 是一个非常实用的 npm 包，适用于在 Web 前端开发中进行通用组件编写和处理数据等任务。本篇文章将详细介绍 wago-common 的使用方法，并提供示例代码，以供读者学习和参考。
安装 wago-common
在开始使用 wago-common 前，我们需要先在本地安装该 npm 包。打开终端并输入以下命令：
npm install wago-common --save
其中，--save 选项是将该包作为项目的依赖记入 package.json 文件中，方便日后维护。
安装成功后，我们就可以开始研究如何使用 wago-common。
wago-common 的主要功能
wago-common 提供了许多通用的组件和方法，包括：
ArrayUtil：用于处理数组的工具类；DateUtil：用于处理日期时间的工具类；DomUtil：用于处理 DOM 节点的工具类；StringUtil：用于处理字符串的工具类；EventEmitter：事件触发器；PromiseUtil：处理 Promise 的工具类；CookieUtil：用于设置和获取 cookie 的工具类。
我们将分别介绍这些工具类和方法的使用方法。
ArrayUtil
ArrayUtil 工具类提供了一系列用于处理数组的方法，包括：
chunk(arr, len)：将数组 arr 按照指定长度 len 分成多个数组，返回一个二维数组；compact(arr)：去除数组 arr 中的所有假值；concat(arr1, arr2)：将数组 arr2 拼接到数组 arr1 的末尾，返回一个新数组；difference(arr1, arr2)：返回数组 arr1 中不包含在数组 arr2 中的所有元素的新数组；findIndex(arr, fn)：查找数组 arr 中第一个符合条件 fn 的元素的下标；flatten(arr)：将多维数组展开，返回一个一维数组；groupBy(arr, fn)：将数组 arr 按照指定条件 fn 进行分组，返回一个以条件值为键的对象；indexOf(arr, val)：查找数组 arr 中指定值 val 的第一个下标；intersection(arr1, arr2)：返回数组 arr1 和数组 arr2 中都包含的元素组成的新数组；last(arr)：返回数组 arr 中的最后一个元素；remove(arr, fn)：删除数组 arr 中符合条件 fn 的每个元素，并返回一个新数组；sum(arr)：计算数组 arr 的所有数值类型元素的和；uniq(arr)：返回数组 arr 中去重后的元素组成的新数组；zip(arrs)：将多个数组 arrs 按照相同位置进行组合，返回一个二维数组。
下面是一些示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ------------- ----- --- - --- -- --- ------ ----- ---------- ---- -- -- ----- ----------------------------------- -- ------- --- -- --------------------------------- --- --- --- --------- -- ------- --- -- -- -- -- ----------------------------- -- -- -- ---- -- ------- -- ------------------------------- ---- ----- --- -- ---- -- ------- ------ --- ----- --- ----- ---
DateUtil
DateUtil 工具类提供了一些有用的方法，用于处理日期和时间。例如：
format(date, fmt)：将日期对象 date 格式化为指定格式 fmt 的字符串；getMonthDays(date)：返回指定日期对象 date 所在月份的天数；getWeekDay(date)：返回指定日期对象 date 所在星期的第几天；isLeapYear(year)：判断指定年份 year 是否为闰年。
下面是一些示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- ------------- ----- --- - --- ------ -------------------------------- ----------- ----------- -- ------- ----------- --------- --------------------------------------- -- ------- -- ------------------------------------- -- ------- - --------------------------------------------------- -- ------- -----
DomUtil
DomUtil 工具类提供了一些方法，用于处理 DOM 节点。例如：
addClass(el, className)：在指定节点 el 中添加一个 CSS 类名 className；hasClass(el, className)：判断指定节点 el 中是否含有 CSS 类名 className；insertAfter(newEl, targetEl)：在节点列表中的目标节点 targetEl 后面添加一个新节点 newEl；removeEl(el)：从 DOM 树中移除指定节点 el。
下面是一些示例代码：
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- -- - ------------------------------ -------------------- ----------- -------------------------------- ------------ -- ------- ---- ----- ----- - ----------------------------- --------------- - ---- -------- -------------------------- --- --------------------
StringUtil
StringUtil 工具类提供了一些方法，用于处理字符串。例如：
camelize(str)：将字符串 str 转换为驼峰式命名（每个单词首字母大写，去掉下划线）；capitalize(str)：将字符串 str 的首字母大写；padStart(str, len, padChar)：在字符串 str 前面填充指定长度 len 的字符 padChar；truncate(str, len, ellipsis)：将字符串 str 截断至指定长度 len，并在结尾添加省略号 ellipsis。
下面是一些示例代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------- --------------------------------------------- -- ------- ---------- ---------------------------------------- -------- -- ------- ------ ------ ---------------------------------------- -- ----- -- ------- ---------- --------------------------------------- ------- -- ------- -- ------- ------- ----
EventEmitter
EventEmitter 是一个可以触发事件的工具类。我们可以通过它向指定的事件注册监听器，当该事件被触发时，所有注册的监听器都将被调用。例如：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------- ----- ------- - --- -------------- -- - -------- ------- -------------------- ------- -- - ------------------ -------- ---------- -- -- -- -------- -- ---------------------- ---
PromiseUtil
PromiseUtil 工具类提供了一些方法，用于处理 Promise。例如：
delay(ms)：返回一个 Promise，经过指定时间后将状态改为 resolved；finally(promise, callback)：返回一个 Promise，无论原始 Promise 的状态如何，都会在回调函数 callback 执行后将该 Promise 的状态改为 resolved；timeout(promise, ms)：返回一个 Promise，若原始 Promise 在指定时间 ms 内未完成，则该 Promise 的状态被改为 rejected。
下面是一些示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------------
--------------------
------------------------------- -- -
-------------- ------ -------
--
------------------
----------------------- ----------------- ------- -- -
------------- -- -
---------------
-- -----
--- -----
-------------- -- -
-------------------
--
------------ -- -
-------------------------
--CookieUtil
CookieUtil 工具类提供了一些方法，用于设置和获取 cookie。例如：
setCookie(name, value, expires, path, domain, secure)：设置 cookie；getCookie(name)：获取指定名称的 cookie 的值。
下面是一些示例代码：
import { CookieUtil } from 'wago-common'
CookieUtil.setCookie('name', 'Tom', '2022-12-31', '/', '.example.com', true)
console.log(CookieUtil.getCookie('name'))
// Output: "Tom"总结
wago-common 是一个非常实用的 npm 包，包含了很多通用的组件和方法。在本文中，我们介绍了它包含的所有工具类和方法，并提供了示例代码以供读者学习和参考。相信通过这篇文章的介绍，读者们已经掌握了 wago-common 的使用方法，并可以在日后的前端开发中运用它来提高自己的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5a81e8991b448e5dea