likes
comments
collection
share

前端标准化组件下的业务思考

作者站长头像
站长
· 阅读数 9

背景

自从换了新部门，该部门是以组态产品为基座，以各种不同组件为物料，物料又分为页面组件与原子组件，而我们部门主要针对项目上的定制页面组件，来满足客户需求。

问题

有什么方案来解决各个项目之间组件共用问题？

如何利用技术来解决业务问题

一、  项目组件标准化的界定

对于项目来说，不同场景下，所对应的组件千差万别，很多组件(一个功能页面代表一个组件)也千差万别，为了更好的维护标准化组件和后续迭代，采用新的方案去维护标准化组件，以便在未来迭代支持中，更好的发展。

组件标准化分为两个阶段：

1、定制

2、  标准化

新项目需求进来后，针对所需要的功能进行开发，此为定制化，当该功能组件二次开发时，转为标准化组件进行迭代。

二、  标准化组件的方案

标准化组件有两个疑问：

1、  如何针对组件进行标准化，如何无痛升级和降级

2、  标准化组件下，当需求变动过大时，无法进行标准化升级改造，如何处理

无痛升级和降级

初始版本为标准化组件的准版本，理想情况下，升级的功能不影响主功能，根据需求进行组装升级或降级，如下图所示

前端标准化组件下的业务思考

标准化组件可以独立存在，也可和其他功能并存，当选择不同的功能进行组合后，其代码自动注入标准化组件中，其他功能组件不受其影响。

技术方案

所有的标准化组件统一维护，整合成一个组件管理系统，通过针对不同的项目，将各种不同的组件进行管理整合。

前端标准化组件下的业务思考

例如：

项目中，针对相同组件，需要在其组件之上进行迭代。

目前现状：

需要我们通过拷贝之前写过的代码进行升级迭代，当迭代n个版本之后，原有的版本相对当前的版本相差巨大。

优点：迭代快，无需考虑组件影响，只需要针对当前需求进行迭代更新

缺点：

1、组件管理混乱，无法统一维护

2、  多版本，多分支，多仓库并存，难以维护

3、  每次新需求进来，需要在不同项目中copy代码，处理不同代码中的兼容问题，效率低下。

4、  开发人员使用混乱，多版本容易造成组件混淆，没有统一规范，无法区分。

新方案：

具体流程如下：

前端标准化组件下的业务思考

通过在组件管理界面中，根据业务需求选择所需要的标准组件，将标准组件添加到组件管理界面，

通过配置该组件功能，给该组件模块增加功能，类似于插件的能力，如下图所示：

前端标准化组件下的业务思考

根据所选功能会生成一份配置。

vite编译插件

编写vite插件解决组件无感升级和降级的问题

代码层面： 抽象功能，将一个组件根据新增的功能，组件化，通过特定的字符控制（xx-if-code="cs-btn-add"），控制是否显示此功能

// ...
<div class="header">
      <el-form :inline="true" :model="form" style="height: 50px">
        <el-form-item>
          <el-input
            cs-if-code="cs-btn-add"
            v-model="form.productID"
            placeholder="请输入关键字"
            class="person-input-key"
            clearable
          />
        </el-form-item>
      </el-form>
  </div>//...

原理：

在编译之前，匹配所有vue组件中的字符串，当匹配到上述具有xx-if-code的标签时，根据导出配置，判断是否移除标签中的代码。

编译时，导出code码用于组件配置。

部分代码展示如下：

// 提取标签及代码控制
function extractCsIfCodeWithFullTagAndValue(htmlString) {
  const pattern = /<[^>]+\s+cs-if-code=['"]([^'"]+)['"][^>]*>([\s\S]*?)</[^>]+>/g;
  const matches = [];
  
  let match;
  while ((match = pattern.exec(htmlString)) !== null) {
    const csIfCodeValue = match[1];
    const fullTag = match[0];
    matches.push({ csIfCodeValue, fullTag });
  }

  return matches;
}

通过两者结合，一方面可以从代码层面增量或者减少组件大小，另外一方面直接可以满足业务需求，无需过多开发与干涉。

优点：

1.  开发友好

2.  无感升级与降级

3.  各个功能模块代码之间无耦合，功能独立

4.  可迁移，组件无迁移成本，无插件时，仍然可编译，不影响原有功能，标准组件全量展示。

5.  标准组件增加新功能时，仍可按照该方式开发，无需做其他处理。

6.  支持导出所有组件直接进行开发，无需copy代码，标准组件统一维护。

7.  支持在线导出可部署的项目

标准组件-差异化：

前端标准化组件下的业务思考

需求变动较大时，将变动较大的地方进行抽象，整理成功能2，原有的功能1组件保持不变，同样在组件功能配置界面进行配置，通过vite插件匹配组件，还原标准组件进行打包，即可保证功能，又可去除与项目无关的功能代码。

差异化的地方由功能版本控制，相同的地方共用，满足在不同场景下的横向扩展能力。