模块与组件区别

组件和模块的区别

模块和组件都是封装特定功能一个集合。

模块是一个逻辑组织集合,用于管理代码的逻辑,把一个复杂系统代码组装成一个个模块,使代码逻辑清晰,易于维护扩展与复用。如财务模块,人力模块。

组件是一个物理上的组织集合,顾名思义,软件系统组件是系统的一个完整独立的部件。

例如,在下面的图中,我们展示了一组模块,其中每个模块嵌入了一组类:

在上图中,尽管类被分成多个模块,但它们并没有按照下面的截图进行物理分离。

例如,我们在应用服务器上部署了两个物理组件,

  1. MyWeb.war是Web层上的物理封装。
  2. MyEJB.jar是业务层上的物理封装。

软件抽象粒度层次结构

抽象的软件粒度层次如下:

想象一下,如果只是使用基本数据开发软件系统,代码是很难维护和阅读的。将小的、简单的、功能有限的、目的抽象的东西组合成更大的、更复杂的、功能更强的、目的更明确的东西。

将软件系统不同层次抽象出来使开发更容易,更快,更简单和更安全。

前端组件技术架构

软件组件化技术架构把复杂系统拆分成相互不依赖解耦的可复用的组件,不同团队或开发人员独立开发不同的组件,互不依赖,提高开发效率,降低维护难度。独立的组件自由组合就能形成一个完整的Web应用,降低了开发成本。

纵向组件

纵向组件关系是指从下到上的层级关系,下层组件服务于上层组件,上层组件引用了下层组件,上层组件包含下层组件子功能。例如表单组件,包含有下拉框组件、输入框组件、复选框组件。上下层次的组件是包含关系。

横向组件

横向组件是指把同层级的功能横向拆分成多个单一职责的独立组件。同层级的组件自由组合构成更大的功能。如考勤组件、审批组件、日程管理组件同一层次的组件横向组合成OA系统。同一层次的横向组件是同等关系。

前端组件库架构

如上图所示,类似化学中的有机物,原子组成分子,分子组成有机物。原子是化学变化中的最小粒子,分子是物质化学性质的最小粒子,有机物是有实际意义的物体。

目前比较流行组件库(Naive UI,Element,Ant Design)提供了上图中原子和分子的组件。原子有按钮、输入框、单选、标签等基础组件,分子有菜单、表格、列表、树等更大的组件。系统中有实际业务意义的组件包含了分子组件。

相关推荐
星栈独行30 分钟前
翻完 Pi 源码:它和 Codex、Claude Code 有何不同
开发语言·javascript·人工智能·程序人生
落落Plus1 小时前
浏览器缓存机制详解
javascript·缓存·浏览器缓存
浅水壁虎4 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥4 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
mONESY5 小时前
React useState 核心原理与最佳实践:从异步更新到性能优化全解
javascript
腻害兔5 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:CRM 客户关系模块深度解析——从线索到回款,一套完整的 B2B 销售闭环是怎么搭的?
java·前端·javascript·vue.js·产品经理·ai编程
gis开发之家6 小时前
《Vue3 从入门到大神37篇》Vue3 源码详解(七):watch 与 watchEffect 源码对比——副作用是如何被追踪的?
javascript·前端框架·vue3·vue3源码
bloglin999997 小时前
langchain 和 langgraph 和 react
javascript·react.js·langchain
触底反弹7 小时前
🚀 删了数据刷新又回来?3 组件 × 4 回调 × 3 坑讲透 React 父子通信
前端·javascript·react.js
会周易的程序员9 小时前
js-shm: 高性能 Node.js 共享内存模块
开发语言·javascript·c++·node.js·共享内存·shm