引言
在前端开发中，数据与展示的耦合常常会导致代码难以维护和扩展。本文将介绍自定义封装函数，它通过巧妙的数据解耦方式，提升了代码的可维护性、复用性和扩展性。
实现思路
核心目标
dataDecouple 函数的主要目标是将状态映射和表格列配置进行封装，实现数据与展示的解耦。这样做的好处在于，当状态或表格配置发生变化时，只需修改函数内部的代码，而不会影响到其他部分的业务逻辑。
具体实现步骤
- 状态映射定义：创建一个
statusMap对象，将数字状态码映射为对应的文本描述和标签类型。这样在表格展示状态时，可以根据状态码快速获取相应的信息。 - 表格列配置：定义一个
columns数组，每个元素代表表格的一列。对于状态列，使用formatter和tagType函数，根据statusMap动态生成显示文本和标签类型。 - 封装返回：将
statusMap和columns封装在一个对象中返回，方便在不同的组件或页面中复用。
函数定义
dataDecouple.js
Apply
/**
* 数据解耦函数，返回状态映射和表格列配置
* @returns {Object} 包含 statusMap 和 columns 属性的对象
*/
function dataDecouple() {
// 定义状态映射对象，将数字状态码映射为文本描述和标签类型
const statusMap = {
0: { text: "正常", tag: 'success' },
1: { text: "禁用", tag: 'danger' },
2: { text: "封停", tag: 'warning' },
};
// 返回包含状态映射和表格列配置的对象
return {
statusMap,
columns: [
{ props: "userId", label: "ID", width: 80 },
{ props: "userAccount", label: "账号" },
{ props: "nickname", label: "昵称" },
{ props: "phone", label: "电话" },
{
prop: "status",
label: "状况",
width: 80,
/**
* 根据行数据的状态码获取对应的文本描述
* @param {Object} row - 行数据对象
* @returns {string} 状态文本描述
*/
formatter: (row) => statusMap[row.status]?.text || "未知",
/**
* 根据行数据的状态码获取对应的标签类型
* @param {Object} row - 行数据对象
* @returns {string} 标签类型
*/
tagType: (row) => statusMap[row.status]?.tag || "",
},
{
prop: "createTime",
label: "创建的时间"
}
]
};
}
返回值
返回一个包含以下属性的对象：
statusMap：状态映射对象，键为数字状态码，值为包含text和tag属性的对象。columns：表格列配置数组，每个元素为一个对象，包含props、label、width等属性，状态列还包含formatter和tagType函数。
使用示例
javascript
Apply
// 调用 dataDecouple 函数获取配置
const config = dataDecouple();
// 使用 statusMap
const statusText = config.statusMap[0].text;
console.log(statusText); // 输出: 正常
// 使用 columns 配置表格
// 假设这里有一个表格组件，接收 columns 作为配置
const tableColumns = config.columns;
// 渲染表格...
优势总结
- 可维护性：状态映射和表格列配置集中管理，修改时只需在函数内部操作，无需在多个地方查找和修改代码。
- 复用性：返回的配置对象可以在多个组件或页面中复用，避免重复编写代码。
- 扩展性：新增状态或表格列时，只需在函数内部添加相应的配置，不会影响现有功能。
- 解耦性：数据与展示分离，不同模块可以专注于自己的功能，降低模块间的耦合度。
通过 dataDecouple 函数的实践，我们可以看到数据解耦在前端开发中的重要性和实际效果。
