IT技术互动交流平台

到底是什么是前端工程化 模块化 组件化

作者:碧霄中游  发布日期:2016-12-19 20:32:14

引言

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

本文重点介绍思想不涉及过多直接的技术,如果新手同学们理解了思想以后可以多多蚂蚁软件相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。

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

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

前端组件化

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

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

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

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

Tag标签: 前端  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
秒速时时彩说明 吉林快3哪个网址 贵州快3app 甘肃快3充值 秒速时时彩游戏 秒速赛车是什么彩票 甘肃快3能赢钱吗 甘肃快3怎样压注稳赢 甘肃快3怎么样 贵州快3是什么彩票