当前位置: 首页 > Web前端 > CSS

模块化和组件化的理解

时间:2023-03-31 01:11:32 CSS

模块化和组件化是一种开发思路,是开发思路上的解决方案。如果我们大多数人对这个概念没有深刻的理解,就会有一种模棱两可的感觉。模块化和组件化的感觉就是会有一种想用模块化和组件化来实现项目却不知如何下手的感觉。事实上,只要记住模块化只是一种想法,而不是具体的解决方案。在项目中,我们可能会使用类似bootstrap的组件(按钮)。我们把这些组件理解为组件开发的实现。有意识地,我们大多数人都会刻意区分组件化和模块化。其实这只是我们区分中英文模型,只是一种解决方案。不同的是需求不同,实现的代码效果也不同。比如bootstrap中的button组件有一个独立的可执行成员,直接引用它,你会看到页面上出现一个button按钮,也就是所谓的颗粒化,而对于bootstrap中的grid系统,你可以'只需引用网格系统的样式类,页面就会显示出具体的效果。还需要依赖特定的html标签或者其他组件,但是按钮组件不需要依赖其他组件什么的,人们会惯性的理解按钮是一个组件,网格系统是一个模块,因为按钮是独立的。其实都是一样的,只是需求不同而已,都是采用模块化的方案。button的需求是开发一个ui组件,grid系统是开发一个排版布局的布局方案。其实模块化(组件化和模块化统称为模块化,不做区分)在我们实际的项目开发中是非常常用的。下拉框通用组件这样的封装组件的开发难度是很容易理解的。我理解的是定义margin边距的一系列属性样式集合,比如margin:10,margin:20,margin:30等,这也是一个模块,定义了满足不同边距要求的模块实现.当然,模块化是一种思路,不仅体现在具体的代码逻辑上,还体现在文件管理、页面布局等方面,比如在webpack模块化管理工具上实现的多入口的配置,压缩整合js/css图片根据页面或页面中不同的模块区域。根据不同的页面展示和不同的模块区域展示导入不同的文件,这也是一种模块化的思想。以上是小客对模块化的理解。如有错误请指正。嘻嘻~一起交流,一起成长吧~