现在前端er在讨论什么,模块化,组件化,工程化无疑是逃不掉的话题。在前端向全端转变的路上,我们一定要理解这些东西,对自己的项目和工作会有很大的帮助。
模块化和组件化
很多人会混淆模块化开发和组件化开发。但是严格来讲,组件(component)和模块(module)应该是两个不同的概念。两者的区别主要在颗粒度方面。
简单讲,module侧重的是对属性的封装,重心是在设计和开发阶段,不关注runtime的逻辑。module是一个白盒;而component是一个可以独立部署的软件单元,面向的是runtime,侧重于产品的功能性。component是一个黑盒,内部的逻辑是不可见的。(用我自己的话来说就是模块是在文件层面上,对代码和资源的拆分,比如js模块,css模块。组件是在UI层面上的拆分,比如页头,页脚,评论区等)
借用大牛@张云龙的一张图,解释如下:
模块化中的模块一般指js模块,比如一个用来格式花时间的模块。
而从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。比如vue组件包含了template,style,script。它的script可以由许多js模块组成。
还有一张图,解释了js模块,css模块,UI组件等概念。
前端工程化
概念如下:前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理(曾经的前端开发可不是这样的,不然为什么要说工程"化"呢?)。
这里顺带说下软件工程的概念:应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科
前端工程化包含如下:
1.代码规范: 保证团队所有成员以同样的规范开发代码。
2.分支管理: 不同的开发人员开发不同的功能或组件,按照统一的流程合并到主干。
3.模块管理: 一方面,团队引用的模块应该是规范的;另一方面,必须保证这些模块可以正确的加入到最终编译好的包文件中。(以上两点可以总结为模块化或者组件化开发。)
4.自动化测试:为了保证和并进主干的代码达到质量标准,必须有测试,而且测试应该是自动化的,可以回归的。
5.构建:主干更新以后,自动将代码编译为最终的目标格式,并且准备好各种静态资源,
6.部署。 将构建好的代码部署到生产环境。
当前端向大前端发展的时候,我们的岗位也就从web前端工程师->web全栈工程师
最后放个大招;一张图让你明白什么是大前端!
参考链接:
1.https://zhuanlan.zhihu.com/p/30122317
2.http://www.cnblogs.com/ihardcoder/p/5378290.html
侵删。