背景
自从换了新部门,该部门是以组态产品为基座,以各种不同组件为物料,物料又分为页面组件与原子组件,而我们部门主要针对项目上的定制页面组件,来满足客户需求。
问题
有什么方案来解决各个项目之间组件共用问题?
如何利用技术来解决业务问题
一、 项目组件标准化的界定
对于项目来说,不同场景下,所对应的组件千差万别,很多组件(一个功能页面代表一个组件)也千差万别,为了更好的维护标准化组件和后续迭代,采用新的方案去维护标准化组件,以便在未来迭代支持中,更好的发展。
组件标准化分为两个阶段:
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;
}
通过两者结合,一方面可以从代码层面增量或者减少组件大小,另外一方面直接可以满足业务需求,无需过多开发与干涉。
优点:
-
开发友好
-
无感升级与降级
-
各个功能模块代码之间无耦合,功能独立
-
可迁移,组件无迁移成本,无插件时,仍然可编译,不影响原有功能,标准组件全量展示。
-
标准组件增加新功能时,仍可按照该方式开发,无需做其他处理。
-
支持导出所有组件直接进行开发,无需copy代码,标准组件统一维护。
-
支持在线导出可部署的项目(待确定)
标准组件-差异化:
需求变动较大时,将变动较大的地方进行抽象,整理成功能2,原有的功能1组件保持不变,同样在组件功能配置界面进行配置,通过vite插件匹配组件,还原标准组件进行打包,即可保证功能,又可去除与项目无关的功能代码。
差异化的地方由功能版本控制,相同的地方共用,满足在不同场景下的横向扩展能力。