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

背景

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

问题

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

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

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

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

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

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 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript