网上有许多讲组件化开发、模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误。
想分清这两个概念我觉得结合一下软件的渐进式开发场景更容易理解。但是下面的篇幅会比较长,所以我先说结论,不耐烦的同学可以先看:
概念区别
对比
说明
l 组件:最初的目的是代码重用,功能相对单一或者独立。在整个系统的代码层次上位于最底层,被其他代码所依赖,所以说组件化是纵向分层。
l 模块:最初的目的是将同一类型的代码整合在一起,所以模块的功能相对复杂,但都同属于一个业务。不同模块之间也会存在依赖关系,但大部分都是业务性的互相跳转,从地位上来说它们都是平级的。
因为从代码组织层面上来区分,组件化开发是纵向分层,模块化开发是横向分块,所以模块化并没有要求一定组件化。也就是说你可以只做模块化开发,而不做组件化开发。那这样的结果是什么样的呢?就是说你的代码完全不考虑代码重用,只是把相同业务的代码做内聚整合,不同模块之间还是存在大量的重复代码。这样的成果也算是做到了模块化,只不过我们一般不会这样而已。
和组件模块近似的一对概念是库和框架。库的概念偏近于代码的堆集,是分层的概念,所以对应组件化。框架是结构化的代码,所以应用于模块化。框架是骨,模块化是肉。
讲到这给大家介绍一个快速开发平台:力软快速开发平台(配置型快速开发平台,内含代码生成器、工作流、APP开发、移动端等多种功能)
举例
下面我们举例来说明。
组件化就比如公共的alert框,最初在许多页面都有使用,后面提取出一份相同的代码,其实就是基于代码复用的目的。
模块化就比如一个资讯功能,它本身只在这一个地方使用,没有复用的需求,但系统启动的时候要初始化它的数据,首页显示的时候要展示它的数据,显示红点的时候要拉取它的未读数。这样一来应用中就有很多地方涉及到它的代码。如果我们将它看做一个整体,那么资讯模块和主应用的耦合性就非常高了。所以我们也要把它封装成模块,把相关的代码放到独立的单元文件里,并提供公共方法,这就是高内聚的要求。
渐进式开发过程
当然这几个概念在服务端开发和客户端开发领域有些微差别,我下面的例子就从移动端开发的角度上进行辨析。
首先我们定义一个虚拟的产品——一款知识类应用,包含咨询、问答、学院、直播等功能。
接下来我们逐步拆分这个产品。
如果开发时没有考虑任何组件化模块化开发,那么此应用的所有功能都是堆积在一起的,总结起来就是高耦合,低内聚,无重用。
1.组件
那么代码重构的第一步是什么呢?
将重复的代码合并成为一份,也就是重用。
我们来看组件化开发的定义,它的着重点就是重用,那这一步最后的结果就是提炼出一个个组件给不同的功能使用。
这里我们可以看一下依赖关系,是具体功能依赖提炼出来的组件,组件本身之间可能也有依赖关系,但一般不多。所以我们总结组件化开发的原则就是高重用,低依赖。当然这只是相对而言。
基于这样的认识,我们甚至于可以把资讯、问答、学院、直播等功能封装成组件,只不过这些组件比较大,依赖可能多些,不过本质上没有多少区别,而且实际上网上许多文章说所的模块化开发其实就是这种组件化的“模块”。
2.模块
下面再说模块,按照模块的定义,它是以关注点进行划分的,关注点说到底就是功能,也就是说根据我们上面的例子,资讯、问答、学院、直播可以分成不同的模块。
我们最开始定义这个虚拟产品的时候说,它有三个特点——高耦合、低内聚、无重用。而第一点组件化开发主要是解决了重用问题,提升了部分内聚,而耦合问题则没有涉及。
所以说我们上面可以将这个产品在逻辑上划分为资讯、问答、学院、直播四个模块,但在代码层面上它们却不是四个模块,因为它们的代码都是混杂在一起的。比如产品首页,可能推荐了部分资讯、显示了热门问答、推送了目前的直播,而这些功能的代码则是写在一起的;再比如程序启动的时候,这四个模块都需要初始化一些数据,而初始化数据的代码也是写在一起的;再比如程序需要显示未读消息数,而这几个模块都有自己的未读消息数逻辑。
如果未进行模块化开发的拆分,那么很多时候不同模块的同一类的代码都是直接写在一起的,比如系统启动的时候,我们会在启动方法里直接写多个模块的初始化代码。
而模块化开发就是为了解决这一问题,即提高内聚,将分属同一模块代码放到一起;降低耦合,将不同模块间的耦合程度弱化。
高内聚是目标,但是现状是有许多地方会用到多个模块,比如启动的时候会调用四个模块,首页会展示三个模块的界面。如果要高内聚,那么必然需要这些模块为不同的场景提供相同的方法,这就是说所有模块要实现同一套多个接口。这样主应用和模块之间的重耦合就变成了主应用和接口耦合,接口和模块耦合这样的松耦合。
但这样的简单模块只是轻模块,统一接口较少。而统一定义的接口越多,模块和统一接口的耦合就越高,也便是重模块。
而我们一般讲的路由问题其实只是解决模块间耦合的问题,并不是模块化开发的必然需求,更多时候是基于产品上的动态化要求,只不过我们一般都会在这个时间考虑这一事情而已,就像我们不会只做模块化开发同时不做组件化开发一样。
讲到这里,模块和组件的区别就已经很明显了。
相关推荐
1、MVC框架 : 使用简单(结合DataBinding更好用) 2、MVP框架 : 高解耦、提高维护效率、类文件多(View、Data、IPresenter、IContract) 3、MVVM框架: 一般般
ios组件化开发顺序分享,文档步骤详尽。学习组件化开发的手册
组件化开发实例,包含协议组件化、注册url组件化、动态创建
原生HTML通过JS(ES6、JQuery)引入公共模块(header,footer,menu等)实现模块化以及组件化,实现父子组件传值,其次通过基于...简单的模拟了vue和react之类前端开发框架的开发流程体验,实现模块组件化的原生组件开发。
Web前端工程化与组件化开发实践
组件化开发 随着APP版本不断的迭代,新功能的不断增加,业务也会变的越来越复杂,APP业务模块的数量有可能还会继续增加, 而且每个模块的代码也变的越来越多,这样发展下去单一工程下的APP架构势必会影响开发效率,...
iOS 组件化开发项目架构设计,结合 MVVM 设计模式 + RAC 数据绑定 + Pod 组件管理, 实现一套实战性的iOS组件化架构iOS 组件化开发项目架构设计,结合 MVVM 设计模式 + RAC 数据绑定 + Pod 组件管理, 实现一套实战...
Angular框架基于组件化开发.pptx
2012阿里技术嘉年华的嘉宾演讲PPT__大规模组件的模块化开发
使用javapoet完成组件化架构设计,纯java代码,兼容性高
Uni-App模块化开发的组件封装
组件式开发MEF入门简单代码实例。可通过MEF实现功能封装,实现功能模块化。本资源仅作为第一次接触MEF学习使用,已接触过MEF的可以飘过。
PJ Blog 是一个开源的博客系统,结合了 Laravel 5.3 和 Vue 2.1 组件化开发。后台 SPA 带来更好的操作体验。 预览功能用户管理、文章管理、讨论管理以及文件管理等分类文章多标签内容审核评论系统Markdown 编辑器...
万绿测试工具组件化开发平台"是编写驱动模块程序的新方式,可以实行测试工具插件设计,快速开发,界面统一。 插件设计:任何人开发的测试工具将无缝连接到平台中,可以即插即用; 快速开发:插件设计采用定制...
在AndroidSDK一文中,我们谈到模块化和组件化,现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发以下高能,请做好心理准备,看不懂请发私信来交流.本文不推荐新手阅读,...
组件化开发全新思路!实践微信小程序高阶段开发+项目案例实战课程 附素材和源码
ExtJS的组件化开发,描述如何通过将ExtJS组装成组件供项目组调用
iOS模块化、组件化解耦方案。iOS modularization
AndroidStudio项目组件化,便于大型项目团队并行开发。项目中集成路由框架,友盟统计,腾讯Bugly日志,
Android Flutter、架构、组件化、模块化、插件化文章大全.zip,Android架构文章大全