前端组件化和模块化有什么区别?

2020-11-9 13:15 [< 20mins]

什么是组件?

具体讲比如轮播图, 你自己写了一套或使用框架提供的轮播图组件,这就是组件,组件的细粒度很小,独立性很强,最主要就是体现复用性

什么是组件库?

有许多组件组成对库就叫组件库,组件库的作用就是方便模块去调用组件,这里列举图例,如图2所示:

图2
如图2中所示,可以看到模块A可以是用组件库中任意组件,而模块B也可以同样做到,这样组件的优势就体现出来了,达到了复用性.

什么是组件化?

就是你在写代码的时候,写一个功能比如说是复选框,写着写着发现许多地方也需要使用到,所以你就将其抽离出来放在某个文件夹下,哪个地方需要就复用即可,所以组件化就是: 将重复的代码抽离成可以复用的组件 [面试会有]

什么是模块?

说得通熟易懂点,你在高中读书的时候,有化学,生物,物理.那么这些书的排版都是类似的. 文字和图片.于是这本书可以算是一个组件, 但是严格上来说,组件还有下一层区别.因为不可能说所有的组件内容都是一样.
所以这里就出来了模块化.所谓模块就是说某同学物理成绩差,但是再差也不会影响到他高分的化学.所以模块的特点就是相互独立且不相互影响的组件的别称了

什么是模块划分?

模块的划分可以根据页面/功能/其他因素来划分,位于业务框架层.

什么是模块化?

我这里先放一个图作为例子: 如图1所示

图1: 组件化和模块化
从图1中,你可以看到4个模块分别是会员,物流,充值,运动. 这四个模块的功能类似,有时候使用的组件是一样的.所以你会发现组件化和模块化是密不可分的,大多数情况,你可以理解为模块化就是给组件起了个名字,然后去满足不同的业务需求而做了一些功能修改.所以模块化是分属同一功能/业务的代码进行隔离(分装)成独立的模块,独立运行/管理,每个模块有很多接口,可供调用.

组件化模块化优点

开发调试效率高、可维护性强、避免阻断、版本管理更容易

总结

  • 组件: 复用性的组件代码且独立性强
  • 组件化: 将可以复用的代码封成组件
  • 模块: 类似组件的一个名称,但是这个组件可以独立管理
  • 模块化: 给同一个功能业务的代码起一个模块名,然后负责对应的部分.
  • 组件化模块化优点: 开发调试效率高、可维护性强、避免阻断、版本管理更容易
  • 组件化是对于页面,模块范围更广 [来自大神的回复]

2020-11-9 13:43 [ 27mins] 参考链接: 组件化和模块化
这样对前端组件化和模块化就有一个大致的理论上的理解了,后面可以去看相应的代码联系. 在vue.js的书中有涉及到.
又要更新一下了, 感觉对组件和模块化对认识有了更好对认识 2020-11-9 16:06 [ < 15 mins], 基本就更新到这里了,以后有更多实战再回来 2020-11-9 16:24 [ 18 mins]

猜你喜欢

转载自blog.csdn.net/qq_25953937/article/details/109575707