我们在日常开发的时候，往往会对项目中常用到的UI组件，例如弹框、文字省略号处理、提醒、广告位、拖拽等，以及一些通用的业务逻辑组件，例如表格、表单、筛选过滤条件、带有下拉刷新上拉加载功能的列表等进行封装。

　　有的时候是借助一些工具来进行封装，有的时候是对组件库或者其他第三方组件进行二次的封装。

　　无论是哪一种封装，首要考虑的就是，封装的组件的具体用处、能提供的基本能力、可供使用者定制调整的能力。

　　例如我们在封装一个刷新加载列表的时候，就会考虑这样几个问题：

　　1. 1.

　　列表的UI基础表现以及是否可以调控（例如每行几个、最多展示几个等）

　　2. 2.

　　列表的UI表现是否可由使用者决定

　　3. 3.

　　列表中的逻辑动作，如数据交互等，内部封装的时候要考虑留出哪些口子

　　4. 4.

　　列表应该提供哪些方法，使用者可以通过调用这些方法来操控列表

　　再具体实现上，就要从上面几个问题中考虑列表组件应该接受哪些属性，通过属性来控制UI表现和逻辑控制，例如：column来控制每行几个，max来控制一页最多展示几个，url或者getData方法来控制列表的数据获取、data来直接传入列表数据等等，当然也可以考虑传入一些方法或者通过为组件绑定事件的形式，在某些时刻进行触发， 比如加载的时候，刷新的时候，为使用者留出一些某些时刻的监控能力，需要注意的是，要做好属性的默认值设置和验证。

　　再考虑UI表现层面，是否应该由插槽相关的使用方法对列表来进行自由选控，自定义选择列表头部、item等。

　　最后再暴露出一些方法，例如refresh刷新、backTop等方法，当外部通过ref获取组件实例就可以直接调用。

　　有时候在封装一个图表组件的时候，我们也会根据图表的功能进行多次封装，比如先实现一个基本的CommonChart，然后再其基础上再封装一个带有时间操控能力的TimeChart等等这样，将逻辑通过不同的组件来分化处理。

　　我们在工作中其实更多的还是对现有的组件库中的组件或者第三方能力组件进行二次的封装，这个时候我们不太可能会对其源码进行改造，因为可能会带来以后版本更新的麻烦，所有更多的是在选择组件上多花心思，找到适合我们的组件，然后再对样式方面进行处理，比如覆盖样式等。最后，就可以将一些逻辑和属性的传递封装到这个被二次封装的组件中，以简化它的使用，注意要也要考虑属性默认值和验证，以及其他属性需要透传的情况。

上一篇

自己有封装过ajax或者axios吗

下一篇

协商缓存和强缓存区别