我在M2公司做架构之组件化

一、什么是组件化？组件化的目的是什么？

我在从单体架构到分布式微服务架构的思考这篇文章提到过。

组件化是一种高效的处理复杂应用系统，更好的明确功能模块作用的方式。

组件化的目的是为了解耦，把复杂系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。

二、组件化的优缺点

1.组件化的优点

• 代码的可复用性；
• 代码的可读性；
• 代码的独立性(隔离性)；
• 代码的可扩展性。

体现上面四点得到非常大的改善。这样的改善会促使整体系统朝着最优方面前进。

2.组件化的缺点(三个增加)

• 代码的冗余增加；
• 开发人员的学习成本增加；
• 项目的复杂性增加。

三、我在组件化方面的实践有哪些？

• 基于代码功能组件化(Excel导入/导出、文件上传/下载、MyBatis-Plus分页/MyBatis分页、占位符模板、跨域、事务、接口文档自动化、邮件、爬虫、多数据源、多线程、API通信、文件转换、日期、配置文件读取等，我制定并落地了统一的方案并将这些方案以粗粒度组件的形式存在在公共模块中，这是我在M2公司的实践)；
• 基于前端UI组件化(弹窗、分页列表、表单、按钮、文件上传、树组件、选项卡、菜单、Ajax异步通信等抽取为一个统一的公共js中，只需引用该js调用对应的方法就能实现对应的功能，这是我在创业公司的实践)。

四、组件化方面的实践，我遇到了哪些问题？

分两个层面来看:

1.后端层面

• 由于沟通没到位，大家各行其是，导致了一套系统中存在多种相同功能的组件，功能重复性问题；
• 组件依赖冲突，指Maven依赖冲突导致一些报错，需要排除对应的依赖；
• 没有统一的讲解对应的公共组件在实际中的使用和注意事项，导致团队成员在实际应用中出现了很多问题，以至于改动组件，影响其它引用该组件的代码模块，造成一些报错问题等。

2.前端层面

• 前端引用的框架太多，如bootstrap、layui、easyui、jquery ui等，导致公共js即便引用了，但如果不引用上述的js，最终造成报错导致页面不可用，框架引用混乱问题；
• 前端库目录管理不规范且非常混乱，只有四个目录，一个存图片，一个存js，一个存css，一个存html，没有按照组件化目录进行划分。

这些问题最终都得到了解决，不少人不愿意大动，觉得怕万一动错了，岂不是无用功，而我在深思熟虑的前提下制定了计划并结合了版本控制工具，确保改动的过程中不影响总体功能的正常，最终成功落地了组件化方案。过程虽然很艰辛，但是收获也很多。