认识达内从这里开始

我们在前几期的文章中给大家简单介绍了web前端工程化技术发展都经历了哪些发展阶段等内容，而本文我们就继续来了解和学习一下，前端工程化生命周期基础知识分享。

前端工程化是一个非常广泛的议题，包含的技术和解决方案也是非常丰富的。一个前端工程的生命周期可以大致划分为这四个过程：

前端工程的生命周期

任何在这四个过程中应用的系统化、严格约束、可量化的方法都可以称之为工程化。工程化的程度越高，在工作中因人的个体差异性导致的缺陷或者短板就会越少，项目质量可以得到更有效的保障。对上面四个过程的工程化并不是完全分隔的，而是相辅相成，比如开发阶段的优化也会对测试、部署和维护产生很大的影响。

下面从模块化、组件化、规范化和自动化这四个方面进行具体介绍。

模块化

模块化可以对复杂逻辑进行有效分割，每个模块更关注自身的功能，模块内部的数据和实现是私有的，通过向外部暴露一些接口来实现各模块间的通信。

组件化

初，网页开发一般都会遵循一个原则”关注点分离”，各个技术只负责自己的领域，不能混合在一起，形成耦合。HTML只负责结构，CSS负责样式，JS负责逻辑和交互，三者完全隔离，不提倡写行内样式(inlinestyle)和行内脚本(inlinescript)。React的出现打破了这种原则，它的考虑维度变成了一个组件，要求把组件相关的HTML、CSS和JS写在一起，这种思想可以很好地解决隔离的问题，每个组件相关的代码都在一起，便于维护和管理。

规范化

规范化是保障项目质量的一个重要环节，可以很好地降低团队中个体的差异性。

1.代码规范

代码规范是一个老生常谈的话题，我们需要制定一些原则来统一代码风格，虽然不遵守规范的代码也是可以运行的，但是这会对代码的维护带来很多麻烦。

2.文档规范

高质量的项目文档可以提高团队协作效率，便于后期优化维护。

3.流程规范

当团队在开发时，通常会使用版本控制系统来管理项目，常用的有svn和git，如何合并代码、如何发布版本都需要相应的流程规范，这可以让我们规避很多问题，比如合并代码后出现代码丢失，又或者将别人未经测试的代码发布出去等等。

自动化

自动化是前端工程化的一个重要组成部分，可以减少重复的工作，提高工作效率。

1.构建

在前端项目开发中我们使用了模块化的方案，有可能还引入了组件化的机制，依赖一些开发框架，这个时候就需要对项目进行构建，构建一般可以包括这几个步骤：

代码转换：允许使用更高级的JavaScript语法，比如ES6、TypeScript等等，这对代码的开发和可维护性来说是非常有好处的。

模块合并：按模块化开发的代码需要进行打包合并。

文件优化：常见的有代码压缩和CodeSplitting，使用ES6module的模块化机制的还可以考虑构建工具的TreeShaking功能，进一步减少代码体积。

自动刷新：在开发过程中支持filewatch和HMR都是可以很好地提升开发效率。

2.测试

在软件的生命周期中，不同的测试阶段，针对的测试问题是不一样的：

单元测试：确保每个组件/模块正常工作

集成测试：在单元测试的基础上，确保组装成模块、子系统或系统的过程中各部分正常合作

系统测试：在集成测试的基础上，确保整个应用运行正常

验收测试：也称交付测试，是针对用户需求、业务流程进行的正式的测试，以保证达到验收标准

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。