组件化和模块化对比

项目里面组件化开发和模块化开发都是常用手段,关于两者的区别有必要进行一下梳理。

 

概念:

组件:把重复的代码提取出来合并成为组件,功能相对单一,主要目的是重用。位于框架最底层,可供不同功能使用/依赖,独立性强。

模块:按功能/业务来进行隔离(分装)成独立的模块,在划分时需要把控颗粒度(界定模块的功能范围)。不同模块之间也会存在依赖关系(单向依赖,如module A依赖于module B,那么B不能依赖A),基本都是业务性的跳转,从地位上来说它们都是平级的。

优点:

组件:组件化的重点就是重用,提炼出一个个功能组件给不同的功能使用。由于组件自身独立性强,具有低耦合的特点。

模块:从概念中我们可以知道模块化的目的是对功能/业务进行隔离/封装,从而达到高内聚、低耦合的效果。同时,单一模块可以独立编译运行安装到用户的手机上,方便模块单独开发调试。单一模块生成的apk相对于整体APP体积小,编译时间快,能有效提升开发效率。

加深理解: 

我们模拟一个可以看直播的购物项目,运用组件化和模块化来对项目分层:

宿主层: 主要负责集成业务模块,组装成完整的APP。
业务模块层: 一般一个module对应项目中一个大的功能模块,一个项目可以按大功能拆分成多个单独的module。
业务组件层: 梳理与业务有关联,且需要多处使用的功能,将其抽离出来作为基础业务组件进行复用。比如在该购物软件中,主会场、榜单都需要用到商品搜索功能,以及分享好友的功能,这时在两个模块中都实现商品搜索和分享就会多出很多重复代码,且同样的功能变动要多处维护。
功能组件层: 项目中常用的功能库,如图片加载、网络请求等
底层SDK: 从公司项目中长期积累出来的底层类库。

总结:

类别目的特点成果架构定位
组件重用、解耦高重用、低耦合基础库、基础组件纵向分层
模块隔离/封装高内聚、低耦合业务框架、业务模块横向分块

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的组件实现原理基于Vue的核心概念——虚拟DOM(Virtual DOM)。组件是指将页面拆分为多个独立、可复用的组件,每个组件都有自己的模板、样式和行为。Vue通过提供组件系统来支持这种开发方式。 在Vue中,我们可以使用Vue.component()方法创建一个全局组件,或者使用components选项在一个父组件中注册子组件。 当组件被创建时,Vue会根据组件的模板生成一个虚拟DOM树。在数据变时,Vue会对比新旧虚拟DOM树的差异,并通过最小地修改真实DOM来更新页面。 组件的模板通常使用Vue的模板语法来描述,包括插值表达式、指令、事件绑定等。当组件被渲染时,模板中的表达式会被动态地计算和更新。 组件还可以定义自己的样式和行为。样式可以使用普通的CSS或CSS预处理器编写,并通过scoped属性限定作用域,确保样式只应用于当前组件组件之间可以通过props属性和自定义事件进行通信。props属性用于父组件向子组件传递数据,子组件可以通过props选项声明接收的数据类型和默认值。自定义事件则用于子组件向父组件发送消息,子组件可以通过$emit方法触发事件,并传递数据给父组件。 通过组件开发,我们可以将页面拆分为多个独立的组件,使代码更加模块化、可复用和易于维护。同时,通过虚拟DOM的高效更新机制,Vue能够在数据变时高效地更新页面,提升性能和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值