简介
@beisen-cmps/italent-functional-zone 是用于后端开发人员方便开发和维护前端应用的一个工具类库。该库提供了一些高阶函数和工具函数，用来快速构建表单、表格、模态框等常见业务模块。
安装
你可以通过 npm 下载并使用 @beisen-cmps/italent-functional-zone。执行以下命令即可：
npm install @beisen-cmps/italent-functional-zone
使用
引入
在使用 @beisen-cmps/italent-functional-zone 之前，需要先引入它。有两种引入方式：
- 作为全局变量使用：
import iFunctionalZone from '@beisen-cmps/italent-functional-zone'; // ES6
// 或者
const iFunctionalZone = require('@beisen-cmps/italent-functional-zone').default; // CommonJS- 作为组件使用:
import { SizeInput } from '@beisen-cmps/italent-functional-zone'功能说明
@beisen-cmps/italent-functional-zone 提供的功能主要分为如下几类：
- UI 组件：提供了一些基础组件，方便业务模块的开发；
- 高阶函数：对于一些通用的业务操作，提供了一些高阶函数，以减少代码重复性；
- 工具函数：提供了一些方便操作的工具函数。
UI 组件说明
SizeInput
SizeInput 是一个可输入数字的组件，支持设置大小范围。
<SizeInput defaultValue={5} min={1} max={10} onChange={val => console.log(val)} />
高阶函数说明
withPagination
withPagination 是一个高阶函数，在分页时可以使用它，减少代码重复性。
-- -------------------- ---- ------- ----- ----- - --- ----- ----------- - -- ----- ------ --------------- - --------------------- ----- ------------ -------------- - ---------- --------- ------ -------- ------------ --- ----- ------- - ------------------ -- - --------------------- --------------- -------------- -------- ---- --- -- ---- ----- ------- - -------------- -- - ------ ---------------------------- ------- -- ------------- -------- ----- ------- - --------------------------------- -- ------- -- ------- ------------
withModal
withModal 是一个高阶函数，在使用模态框时可以使用它，减少代码重复性。
-- -------------------- ---- ------- ----- -------- - ---------------------------- ----- ----------- - -- -- - ----- ----- - ---------- --------- -- -- - -------------- -- ----- ----------- -- - ----------------------- -------------- -- --- --
工具函数说明
createColumns
createColumns 可以生成 Ant Design 的表格列配置对象，方便操作表格。
-- -------------------- ---- ------- ----- ------- - ------------------------- - ---- ------- ---------- ------- ------ ----- -- - ---- ------ ---------- ------ ------ ----- -- - ---- ---------- ---------- ---------- ------ ----- -- ---
示例代码
以下为一段使用 @beisen-cmps/italent-functional-zone 后的代码示例：
-- -------------------- ---- -------
------ ------ - ------------ --------- --------- - ---- --------
------ ---------------- - --------------- ---------- -------------- --------- - ---- ---------------------------------------
------ - ------ ------ - ---- -------
------ ------- ---- ------------
------ ---------------- ---- ---------------------
-- -- ------- -------
----- ------------- - -- -- -
----- ----- - ---
----- ----------- - --
----- ------ --------------- - ---------------------
----- ------------ -------------- - ----------
--------- ------
-------- ------------
---
----- ------- - ------------------ -- -
---------------------
--------------- -------------- -------- ---- ---
-- ----
----- ------- - -------------- -- -
------ ---------------------------- -------
-- ------------- --------
----- ------- - ---------------------------------
------ ------ -------- ------------
--
-- -- -------------------------
----- ------------ - -- -- -
----- -------- - ----------------------------
----- ----------- - -- -- -
----- ----- - ----------
--------- -- -- -
--------------
--
----- ----------- -- -
-----------------------
--------------
--
---
--
------ ------------
--
----- -------- - -- -- -
----- ------ -------- ----------- - ----------------
----- ----------- - ---------------
------------ -- -
----------
-- --------------
----- ------- - -------------------------
-
---- -------
---------- -------
------ -----
--
-
---- ------
---------- ------
------ -----
--
-
---- ----------
---------- ----------
------ -----
--
-
---- ------------
---------- -----
------ -----
------- ---- ------- -- -
------- ---------------------------------
--
--
---
------ -
--
---------- ---------------------------------- ------- -------- --------------- -- --------------- -------------- --------- --- --- --
------
-----------------
-----------------
-----------------------
-------------- -- --------
--
---
--
--
------ ------- ---------结语
@beisen-cmps/italent-functional-zone 是一个实用的前端库，它提供了一些常用工具函数和高阶函数，可以快速开发业务模块并提高代码的复用性。在日常前端开发中，我们可以善用这些工具提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-cmps-italent-functional-zone