浅谈前端⼯程化、模块化、组件化
1、前端⼯程化，是⼀种思维⽽不是技术。前端⼯程化就是⽤做⼯程的思维来开发⾃⼰的项⽬,⽽不是⼀个页⾯接着⼀个页⾯来开发。
2、前端模块化，前端⼯程化是⼀个⾼层次的思维,⽽模块化和组件化是在⼯程化思维下相对较具体的开发⽅式，可以简单的认为模块化和组件化是⼯程化的表现形式。
模块化开发，⼀个模块就是⼀个实现特定功能的⽂件，有了模块我们就可以更⽅便的使⽤别⼈的代码，要⽤什么功能就加载什么模块。
模块化开发的好处：避免变量污染，命名冲突；提⾼代码复⽤率； 提⾼维护性；依赖关系的管理。
那具体什么是模块化呢？
举个例⼦，假设要写⼀个实现A功能的JS代码，这个功能在项⽬其他位置也需要⽤到，那么我们就可以把这个功能看成⼀个模块采⽤⼀定的⽅式进⾏模块化编写，既能实现复⽤还可以分⽽治之，同理在写样式的时候，如果我们需要某种特殊的样式，会在很多地⽅应⽤，那么我们也可以采⽤⼀定的⽅式进⾏CSS的模块化，具体说来,JS模块化⽅案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发⼤多是在less、sass、stylus等预处理器的import/mixin特性⽀持下实现的。
总体⽽⾔，模块化不难理解，重点是要学习相关的技术并且灵活运⽤。
3、前端组件化，组件化也是⼯程化的表现形式。
①页⾯上的每个独⽴的、可视/可交互区域视为⼀个组件;
②每个组件对应⼀个⼯程⽬录，组件所需的各种资源都在这个⽬录下就近维护;
③由于组件具有独⽴性，因此组件与组件之间可以 ⾃由组合;
js制作简单的焦点图效果
④页⾯只不过是组件的容器，负责组合组件形成功能完整的界⾯;
⑤当不需要某个组件，或者想要替换组件时，可以整个⽬录删除/替换。
组件化将页⾯看作为⼀个容器，页⾯上各个独⽴部分（头部、导航、焦点图、侧边栏、底部）等视为独⽴组件，不同的页⾯根据内容的需要，去放相关组件就可组成完整的页⾯。
总之，模块化和组件化⼀个最直接的好处就是复⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。