前端工程化、模块化、组件化看法

前端每每不少人的映像就是入门简单,HTML、CSS加一块儿一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各类特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,作惯了切图、布局、扣特效的前端新同窗在向前发展的路上愈来愈以为吃力,而做为前端从业人员咱们须要有编程思想和软件开发基础。

 

提到前端每每不少人的映像就是入门简单,HTML、CSS加一块儿一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各类特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,作惯了切图、布局、扣特效的前端新同窗在向前发展的路上愈来愈以为吃力,而没有任何编程思想和软件开发基础不少人对前端工程化、组件化、模块化、MVC这些“高大上”的词汇云里雾里。
本文用最简单的语言介绍一下我对工程化、组件化、模块化的理解,面向的对象是前端新手,因此我用最好理解的方式去说,不免会有不少“幼稚”的表述,请大神们轻喷。

前端工程化

 

还记得我在最先期写前端代码时,每每一个页面就是一个文件搞定,HTML/CSS/JS所有写在一块儿,后来知道应该把结构、样式和动做分离,我想这是我接触到最先的前端工程化的思想了,所谓前端工程化我认为就是：

将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提升的目的

前面我说接触最先的工程化思惟就是“结构、样式和动做分离”,在只有若干个页面的小型项目咱们只须要用这些简单的作法就能把项目很好的组织起来,可是在一个大型web项目中每每有更加复杂的结构和很是多的页面须要不少人甚至是多个团队配合才能把项目作完,咱们须要有更加严谨和复杂的工程化思惟去组织结构。从更高层面的项目组织来看咱们要作项目的各类规范、技术选型、项目构建优化等等,在代码层面咱们还须要用到JS/CSS模块机、UI组件化等开发方式。

前端模块化

前面咱们提到在组织代码的时候会用到模块化和组件化,你们应该理解到,前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式,所以能够简单的认为模块化和组件化是工程化的表现形式。

那具体什么是模块化呢,仍是举简单的例子,咱们要写一个实现A功能的JS代码,这个功能在项目其余位置也须要用到,那么咱们就能够把这个功能当作一个模块采用必定的方式进行模块化编写,既能实现复用还能够分而治之,同理在写样式的时候,若是咱们须要某种特殊的样式,会在不少地方应用,那么咱们也能够采用必定的方式进行CSS的模块化,具体说来,JS模块化方案不少有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大可能是在less、sass、stylus等预处理器的import/mixin特性支持下实现的,具体技术你们自行学习。

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

前端组件化

前文中咱们提到过,组件化也是工程化的表现形式,那么到底什么是前端组件化呢

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

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

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