继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

个人对前端工程化的理解

Qyouu
关注TA
已关注
手记 471
粉丝 87
获赞 413

现在前端er在讨论什么,模块化,组件化,工程化无疑是逃不掉的话题。在前端向全端转变的路上,我们一定要理解这些东西,对自己的项目和工作会有很大的帮助。

模块化和组件化

很多人会混淆模块化开发和组件化开发。但是严格来讲,组件(component)和模块(module)应该是两个不同的概念。两者的区别主要在颗粒度方面。

简单讲,module侧重的是对属性的封装,重心是在设计和开发阶段,不关注runtime的逻辑。module是一个白盒;而component是一个可以独立部署的软件单元,面向的是runtime,侧重于产品的功能性。component是一个黑盒,内部的逻辑是不可见的。(用我自己的话来说就是模块是在文件层面上,对代码和资源的拆分,比如js模块,css模块。组件是在UI层面上的拆分,比如页头,页脚,评论区等)

借用大牛@张云龙的一张图,解释如下:
模块化中的模块一般指js模块,比如一个用来格式花时间的模块。
而从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。比如vue组件包含了template,style,script。它的script可以由许多js模块组成。

https://img1.mukewang.com/5d2dcac800011d6506360396.jpg

组件和模块


还有一张图,解释了js模块,css模块,UI组件等概念。


https://img.mukewang.com/5d2dcacc0001891207090365.jpg

前端工程化
概念如下:前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理(曾经的前端开发可不是这样的,不然为什么要说工程"化"呢?)。
这里顺带说下软件工程的概念:应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科
前端工程化包含如下:
1.代码规范: 保证团队所有成员以同样的规范开发代码。
2.分支管理: 不同的开发人员开发不同的功能或组件,按照统一的流程合并到主干。
3.模块管理: 一方面,团队引用的模块应该是规范的;另一方面,必须保证这些模块可以正确的加入到最终编译好的包文件中。(以上两点可以总结为模块化或者组件化开发。)
4.自动化测试:为了保证和并进主干的代码达到质量标准,必须有测试,而且测试应该是自动化的,可以回归的。
5.构建:主干更新以后,自动将代码编译为最终的目标格式,并且准备好各种静态资源,
6.部署。 将构建好的代码部署到生产环境。

当前端向大前端发展的时候,我们的岗位也就从web前端工程师->web全栈工程师

最后放个大招;一张图让你明白什么是大前端!


https://img4.mukewang.com/5d2dcad0000181c207080579.jpg

前端技术栈

参考链接:
1.https://zhuanlan.zhihu.com/p/30122317
2.http://www.cnblogs.com/ihardcoder/p/5378290.html
侵删。



作者:从小就很瘦
链接:https://www.jianshu.com/p/171996f5b12c

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP