个人对前端工程化的理解

作者: 从小就很瘦 | 来源:发表于2018-06-23 16:06 被阅读168次

    现在前端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
    侵删。

    相关文章

      网友评论

      • 淘淘笙悦:写的很好,感谢分享。
        我也经常在公众号「淘淘笙悦」上分享自己前端的学习经验,
        感兴趣的可以关注一波哦,
        让我们在前端的路上一起学习进步。

      本文标题:个人对前端工程化的理解

      本文链接:https://www.haomeiwen.com/subject/dorkyftx.html