什么是 @june-www/core
@june-www/core 是一个用于前端开发的 NPM 包，它为我们带来了许多方便实用的工具函数和组件。这个包包含了诸如日期格式化、字符串操作、数组操作、DOM 操作和组件等功能。使用它可以提高我们的开发效率和代码质量。
安装和使用
我们可以使用 npm 或者 yarn 安装 @june-www/core
npm install @june-www/core # 或者 yarn add @june-www/core
然后我们就可以在项目里使用这个包提供的工具函数和组件了。使用时只需在相应的文件中引入需要的模块即可。比如：
import { formatDate } from '@june-www/core';这样就可以在代码中使用 formatDate 函数了。
工具函数
@june-www/core 提供了许多常用的工具函数，以下是一些常用的工具函数。
formatDate(date, fmt)
该函数用于将日期进行格式化。其中：
- date：表示需要格式化的日期对象或时间戳。如果不传，则默认为当前时间。
- fmt：表示格式化的样式字符串。其中，yyyy 表示年份，MM 表示月份，dd 表示日期，hh 表示小时，mm 表示分钟，ss 表示秒钟，SSS 表示毫秒。例如，yyyy-MM-dd hh:mm:ss
示例代码：
import { formatDate } from '@june-www/core';
console.log(formatDate()); // 2022-01-23 20:18:12
console.log(formatDate(new Date(), 'yyyy/MM/dd')); // 2022/01/23pad(num, n)
该函数用于将数字 num 的位数补充到 n 位。如果 num 的位数少于 n 位，则在前面补零。例如，pad(1, 2) 返回 '01'。
示例代码：
import { pad } from '@june-www/core';
console.log(pad(1, 2)); // 01
console.log(pad(12, 3)); // 012isObject(val)
该函数用于判断一个值是否是对象。
示例代码：
import { isObject } from '@june-www/core';
console.log(isObject({})); // true
console.log(isObject([])); // falseisArray(val)
该函数用于判断一个值是否是数组。
示例代码：
import { isArray } from '@june-www/core';
console.log(isArray([])); // true
console.log(isArray({})); // falseisEmptyObject(val)
该函数用于判断一个对象是否为空。
示例代码：
import { isEmptyObject } from '@june-www/core';
console.log(isEmptyObject({})); // true
console.log(isEmptyObject({ name: 'Tom' })); // falseisEmpty(val)
该函数用于判断一个值是否为空。如果是对象或数组，则判断其是否为空对象或空数组。
示例代码：
import { isEmpty } from '@june-www/core';
console.log(isEmpty('')); // true
console.log(isEmpty([])); // true
console.log(isEmpty({})); // trueomit(obj, keys)
该函数用于返回一个对象，该对象只包含原对象中指定的属性。其中：
- obj：表示需要处理的对象。
- keys：表示需要保留的属性名数组。
示例代码：
import { omit } from '@june-www/core';
const obj = { name: 'Tom', age: 18, gender: 'male' };
console.log(omit(obj, ['age'])); // { name: 'Tom', gender: 'male' }pick(obj, keys)
该函数用于返回一个对象，该对象只包含原对象中未被指定的属性。其中：
- obj：表示需要处理的对象。
- keys：表示需要剔除的属性名数组。
示例代码：
import { pick } from '@june-www/core';
const obj = { name: 'Tom', age: 18, gender: 'male' };
console.log(pick(obj, ['age'])); // { name: 'Tom', gender: 'male' }组件
@june-www/core 也提供了一些常用的组件，以下是一些常用的组件。
Modal
Modal 组件是一个弹出框组件。使用它可以轻松地创建弹出框。使用该组件时需要传入以下属性：
- visible：表示弹出框是否显示。
- title：表示弹出框的标题。
- onCancel：表示用户点击取消按钮时的回调函数。
- onOk：表示用户点击确定按钮时的回调函数。
示例代码：
-- -------------------- ---- -------
------ - ----- - ---- -----------------
----- ------- - -- -------- ------ --------- ---- -- -- -
------ ----------------- ------------- ------------------- ------------
------- -- - ----------
--------
--
----- --- - -- -- -
----- --------- ----------- - ----------------
----- -------- - -- -- -
------------------------
------------------
--
----- ------------ - -- -- -
------------------------
------------------
--
------ -
--
------- ----------- -- --------------------------------
--------
-----------------
-------------
---------------
-----------------------
--
---
--
--Table
Table 组件是一个表格组件。使用它可以轻松地创建数据表格。使用该组件时需要传入以下属性：
- dataSource：表示表格的数据源。
- columns：表示表格的列数据，其中每一项代表一列的属性。
- rowKey：表示每一行数据的唯一标识符。
示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- ----------------- ----- ---- - - - --- -- ----- ------ ---- --- ------- ------ -- - --- -- ----- ------- ---- --- ------- -------- -- - --- -- ----- ------- ---- --- ------- ------ -- -- ----- ------- - - - ------ ----- ---------- ----- ---- ---- -- - ------ ----- ---------- ------- ---- ------ -- - ------ ----- ---------- ------ ---- ----- -- - ------ ----- ---------- --------- ---- -------- -- -- ----- --- - -- -- - ------ ----------------- ----------------- ----------- -- --
总结
@june-www/core 是一个非常实用的 NPM 包，它提供了许多常用的工具函数和组件。使用它可以提高我们的开发效率和代码质量。通过本文的介绍，我们学会了如何安装和使用该包，同时也了解了一些常用的工具函数和组件以及它们的使用方法。希望大家能够在实际开发过程中加以应用，提高自己的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be481e8991b448d98d6