前端工程化，组件化，模块化，层次化
Posted fron-tend
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端工程化，组件化，模块化，层次化相关的知识，希望对你有一定的参考价值。
个人认为：前端发展最终的导向是前端工程化，智能化，模块化，组件化，层次化。
一个项目的开发在未来人工智能+物联网的时代，必定走向以下的五化
原因: Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。
1.前端工程化。
前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同，质量开发。
具体是：
a.Node服务，提供数据代理，路由，服务器渲染。
b.Web应用开发，专注于web交互体验。
c.前端运维：构建，测试，部署，监控。
2.前端模块化(页面模块化开发+基础模块化)。
（1）基础模块化：
A. CommonJS————同步加载、服务器端的模块化规范，采用案列：Node.js
实现原理：
一个单独的文件就是一个模块；
加载模块采用同步方式，加载完成后才能执行后面的操作；
加载模块使用require方法，该方法读取一个文件并执行，最后返回内部的exports对象；
特点：
比较适合运用于服务器的编程，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载
B. AMD————异步加载，采用案例：require.js
实现原理：
异步模块定义，通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性；
返回一个新函数(模块)；推崇依赖前置，依赖的模块提前执行；
采用依赖注入方式加载模块；注入依赖模块后，执行异步回调函数；
特点：
异步加载，不会产生异步阻塞，适合浏览器网络环境
C. CMD————异步加载、异步执行依赖，案例：Seal.JS
CMD 与 AMD 类似；都是采用异步加载，
不同点主要有一下几点:
- 对依赖模块的执行时机：CMD延迟执行，AMD提前执行
- 依赖位置：CMD推崇依赖就近，按需加载；AMD推崇依赖前置；
- API:CMD推崇职责单一，AMD里面require分局部和全局方式；
（2）页面模块化：
1.将整个项目前端部分，拆分为单一多个页面
2.将每个页面划分为多个模块，对每个模块开发，封装组件等（例如：header，nav，centent，persion，footer等）
3.将每个模块页面组件存放组件库，便于后续各个页面的调用
4.将每个模块页面引入当前主页面page，组成整个页面。（例如：main主页面由header，nav，centent，persion，footer等多个模块组成，通过项目框架指定的调用方式：$$header)
3.前端层次化。
前端层次化是指项目结构目录清晰，树状分布，层次化分明，多个文件夹嵌套，页面，样式，框架，组件，模块，脚本等独立划分，相互调用联系。（例如：css样式全部归于css文件夹等等）
4.前端智能化。
前端智能化是指通过人工智能AI的方式开发前端，将前端与python相结合从项目评估选取最优的模式，框架，库，组件等到项目打包上线应用，形成高效有序，包括语音识别，刷脸支付，智能检测等。在此过程中采用 scrum 敏捷开发模式。
5.前端组件化。
前端的发展延伸出来很多前端框架和库，例如：Vue，React，Jquery，Angular，Element，Layout，Iview，Ogma，Echarts等等，主要用来封装业务组件，架构项目结构，样式布局，路由通讯等，一个项目由多个组件组成。往往项目经理与架构师，研发工程师商定评估选取最优的方案，进行开发，基于最底层的框架服务，形成了多个框架库的同时引用，相互嵌套实现某些项目的需求，优势互补，高效开发的方式。
总结：前端的开发，一定要规范化，代码规范，分支管理，模块管理，自动化测试，最后部署；规范化有利于以后项目的重构，二次开发，版本迭代，前端上手。
具体为：1.重命名，对类，接口，方法，属性重命名。
2.抽取代码，将方法内代码抽取其他地方调用。
3.封装字段，类字段换属性。
4.删除参数，重排参数。
备注：源于自身前端的实践经验和自我学习了解，总结的前端概况，如有不当之处，请同行指正，非常感谢，多多交流。
以上是关于前端工程化，组件化，模块化，层次化的主要内容，如果未能解决你的问题，请参考以下文章