什么是前端工程化

什么是前端工程化

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提升效率和下降成本，即提升开发过程当中的开发效率，减小没必要要的重复工做时间，而前端工程本质上是软件工程的一种，所以咱们应该从软件工程的角度来研究前端工程。

前端工程化就是为了让前端开发可以“自成体系”，我倾向于认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

模块化

模块化就是将一个大文件拆分红相互依赖的小文件，再进行统一的拼装和加载。

AMD : require.js
CMD : sea.js( 弃用了 )
COMMON.js ： node.js

组件化

从UI拆分下来的每一个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，咱们称之为组件。

组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。

组件化其实是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。

因此咱们除了封装组件自己，还要合理处理组件之间的关系，好比 （逻辑）继承、（样式）扩展、（模板）嵌套和包含等，这些关系均可以归为依赖。

规范化

规范化实际上是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

（1）目录结构的制定
目录结构的合理设定，能为项目带来不少优势：

• 有助于提升项目的逻辑结构合理性；
• 对应扩展和合做；
• 方便资源的统必定位管理。

（2）编码规范
制定一套良好的编码规范能够加强团队开发协做、提升代码质量。
推荐参考凹凸实验室打造的前端代码规范。

（3）文档规范

（4）组件管理

（5）git分支管理

（6）commit描述规范

（7）视觉图标规范

自动化

前端工程化的不少脏活累活都应该交给自动化工具来完成。须要秉持的一个理念是:

任何简单机械的重复劳动都应该让机器去完成。

• 图标合并

• 持续集成

• 自动化构建
  -gulp，grunt

• 自动化部署

• 自动化测试 集成单元测试，提升代码可靠性。前端较为流行的单元测试 mocha，qunit 等