javascript - 在前端中什么是组件化 什么是模块化

Answer 1

以现在的情况看，模块化更像是代码的组织方式，比如amd、commonjs等规范之类的，方便代码管理，本身对业务逻辑没什么影响，当然开发者可以自由进行模块划分。具体可以看看require.js、webpack或者nodejs这些。

组件化更像是对页面具体功能的划分，奉行单一职责原则，是不是很熟悉~ 具体实现可以看看react、vue.js这些。

这些技术本身都是为了解决具体问题而出现的，并不是为了oo而oo，为了抽象而抽象，有些甚至是无心插柳，所以如果自己要使用，还是要具体情况具体分析。

Answer 2

摘自知乎的一段话

组件化和模块化的价值都在于分治，web应用系统的复杂度不断提升，兼顾开发效率和产品实际运行效率，会在开发阶段运用组件化和模块化的手段分离关注点，结合构建工具合理打包。组件化更多关注的是UI部分，你看到的一个管理界面的弹出框，头部，内容区，确认按钮和页脚都可以是个组件，这些组件可以组成一个弹出框组件，跟其他组件组合又是一个新的组件。模块化侧重于功能或者数据的封装，一组相关的组件可以定义成一个模块，一个暴露了通用验证方法的对象可以定义成一个模块，一个全局的json配置文件也可以定义成一个模块。封装隔离来后，更重要的是解决模块间的依赖关系。babel作为现在最火的es6转换器，用babelify或者webpack的babel loader再或者基于task的构建系统插件都可以很方便用起来es6 modules

作者：vincenthou
链接：https://www.zhihu.com/question/37649318/answer/73319816
来源：知乎

Answer 3

个人理解啊，比较粗浅，比方你设计的网站中需要一个弹框，这个弹框需要三部分构成，js，css，html元素，这三个文件一起构成了弹框这个组件，这个弹框一些相关配置可以通过传递的参数实现，只要需要弹框的页面，在先关页面引入js，css，在加上html元素，配置一下参数，实现不同的弹出需求，感觉这就是一个小模块了吧，在延伸一下，表单验证，按钮，等等，以上希望对你有帮助