业务无痛更换前端组件库

前言

我一直在考虑一个问题。当下,前端组件库层出不穷,发展非常快速。但当我们在业务中使用某个组件库后。
业务与三方组件库就变成了紧耦合,试想如果几年后,有更优秀的组件库出现,我们想替换的话,就会有两个显著的问题:

  • 业务代码耦合部分需要重构
  • 业务开发人员要熟悉新的组件库

那么,如何让业务代码在无感知的情况下,去进行组件库的替换呢?或者换句话:业务如何应对前端组件快速变化的风险呢。我们可以通过组件代理的方式来解决

组件代理

什么是组件代理:

  1. 不是重新造轮子,而是开源组件的整合
  2. 是组件名称的统一
  3. 是组件方法的固化
  4. 是业务页面的唯一依赖
image.png

通过图可以看到,我们让业务代码依赖组件代理,所有的变化都封装在代理里面,写后端的会比较了解,就是一个代理模式。通过组件代理,我们对业务提供统一的标签,统一的API。当我们要替换组件库的时候,只需要修改组件代理。业务代码更新npm包重新编译发布一次即可。

实现

  • 固定名称
    我们在使用三方组件会带有特定前缀。比如element是el-select,vant是van-select。
    我们可以固定一个业务相关的名字,比如pc-select,mobile-select。
    可以用类似下面的方式简化实现
    components.forEach(function (item) {
      Vue.component(item.name.replace('El','Tp'), item);
    });
    
  • 固定API
    这个工作量就会必须大,需要每一个组件都进行代理。比如element的select组件,参数如下:


    image.png

我们可以定义一个pc-select.vue,在其中定义的props包含上图所有内容,并传递给组件


image.png

由于内容较多,就不一一列举

如果更换组件库

  • 组件名称都已经固化,写在业务代码中的部分不用动
  • API上依然保持已经声明的props中的参数,如果新组件不具备或者名称不同,我们需要在pc-select.vue中
    进行代理或装饰,有必要时需要修改三方组件源码。

小结

其实这篇文章并没有太多的技术细节,更多的是一种思路。
目的就是业务代码能最小代价的享受技术进步的红利

你可能感兴趣的:(业务无痛更换前端组件库)