首页 > 在前端中什么是组件化 什么是模块化

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

能具体说一下 或者说个例子吗 或者能给个写的代码的链接吗


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

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

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


摘自知乎的一段话

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

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


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

【热门文章】
【热门文章】