浅谈前端工程化、模块化、组件化

1、前端工程化，是一种思维而不是技术。前端工程化就是用做工程的思维来开发自己的项目,而不是一个页面接着一个页面来开发。

2、前端模块化，前端工程化是一个高层次的思维,而模块化和组件化是在工程化思维下相对较具体的开发方式,可以简单的认为模块化和组件化是工程化的表现形式。

模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

模块化开发的好处：避免变量污染，命名冲突；提高代码复用率； 提高维护性；依赖关系的管理。

那具体什么是模块化呢？

举个例子,假设要写一个实现A功能的JS代码,这个功能在项目其他位置也需要用到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,同理在写样式的时候,如果我们需要某种特殊的样式,会在很多地方应用,那么我们也可以采用一定的方式进行CSS的模块化,具体说来,JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。

总体而言,模块化不难理解,重点是要学习相关的技术并且灵活运用。

3、前端组件化，组件化也是工程化的表现形式。

①页面上的每个独立的、可视/可交互区域视为一个组件;
②每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
③由于组件具有独立性,因此组件与组件之间可以 自由组合;
④页面只不过是组件的容器,负责组合组件形成功能完整的界面;
⑤当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

组件化将页面看作为一个容器,页面上各个独立部分（头部、导航、焦点图、侧边栏、底部）等视为独立组件,不同的页面根据内容的需要,去放相关组件就可组成完整的页面。

    总之，模块化和组件化一个最直接的好处就是复用。