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

背景

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

问题

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

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

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

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

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

1、定制

2、 标准化

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

二、 标准化组件的方案

标准化组件有两个疑问:

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

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

无痛升级和降级

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

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

技术方案

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

例如:

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

目前现状:

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

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

缺点:

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

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

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

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

新方案:

具体流程如下:

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

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

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

vite编译插件

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

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

js 复制代码
// ...
<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码用于组件配置。

部分代码展示如下:

js 复制代码
// 提取标签及代码控制
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插件匹配组件,还原标准组件进行打包,即可保证功能,又可去除与项目无关的功能代码。

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

相关推荐
逐·風1 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果4 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询