浅谈前端组件化

什么是前端工程化、模块化、组件化？

前端工程化

工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术)

再用一句通俗的话来概括前端工程化:前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写

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

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

模块化开发的4点好处：

　　1 避免变量污染，命名冲突

　　2  提高代码复用率

　　3 提高维护性

　　4 依赖关系的管理

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

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

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

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

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

PS:模块化和组件化一个最直接的好处就是复用,同时我们也应该有一个理念,模块化和组件化除了复用之外还有就是分治,我们能够在不影响其他代码的情况下按需修改某一独立的模块或是组件,因此很多地方我们及时没有很强烈的复用需要也可以根据分治需求进行模块化或组件化开发。