前端工程化的浅析

什么是前端工程化

大体的来说，前端工程化有两层含义：

1.广义的前端工程化

前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现高效开发，有效协同，质量可控。

2.狭义的前端工程化

前端工程是指将开发阶段的代码转变成生产环境的代码的一系列步骤。主要包括构建 , 分支管理 , 自动化测试, 部署等。

简单总结一下就是：

广义的前端工程是一个系统工程，需要从软件生命周期的各个方面入手，本质上属于管理科学的方法论。

狭义的前端工程是前端开发流程中的一部分，本质上属于软件技术的范畴和开发的最佳实践。我们平时提到的前端，如果特别说明，一般指的就是狭义上的前端工程。

为什么要前端工程化？

Web前端页面的开发避免不了与dom的交互操作。前端框架的一次次变化，从提升效率的阶段，慢慢走向改善性能的阶段。

1.DOM操作时代

对于开发者来说，所有数据内容都可以通过DOM结构来组织和展示的。数据的处理和操作的核心其实就是DOM的处理和操作。DOM api可以分为：节点查询型、节点创建型、节点修改型、节点关系型、节点属性型和内容加载型。

随着AJAX技术盛行，SPA（Single Page Application，单页面应用）开始广泛被认可。其基本思路：将整个应用内容都在一个页面中实现并完全通过异步交互来根据用户操作加载不同的内容。在这期间，DOM操作和事件绑定将变得十分混乱，不便于管理，于是MV*框架应运而生。

**2.MV*交互模式**

MVC模式

将页面DOM相关的内容抽象成数据模型、视图、事件控制器Model、View、Controller三部分。各部分之间的通信方式如下：

·View 传送指令到 Controller
·Controller 完成业务逻辑后，要求 Model 改变状态
·Model 将新的数据发送到 View，用户得到反馈
·Model

Model管理应用程序的数据。不涉及用户界面，也不涉及表示层，而是代表应用程序可能需要的独特形式的数据。当Model改变时，它通常会通知它的观察者(如View)。一个Model模型可能有多个观察它的View。
总而言之，Model主要与业务数据有关。

View

View是Model的可视化表示。一个View通常检测一个Model，并在Model更改时进行通知，使View本身能够相应地更新。
用户可以和View进行交互，包括读取和编辑Model。由于View是表示层，通常我们能够以一种更友好的方式进行编辑和更新。而更新Model的实际任务其实是在Controller上的。

Controller

Controller是Model和View之间的中介，当用户操作View时，它通常负责更新Model。

MVC的优点
MVC的关注点分离有利于进一步简化应用程序功能的模块化，并能够实现：

·整体维护更容易。
·解耦Model和View，意味着它能够更直接地编写业务逻辑的单元测试
·这种模块性可以让负责核心逻辑和负责用户界面的开发人员同时工作。

MVP模式

MVP是MVC的一种衍生模式，专注于改进表示逻辑。
MVP中的P代表表示器。这是一个包含用于View的用户界面业务逻辑的组件。

1、各部分之间的通信，都是双向的。

2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为“被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVP与MVC
MVP适用于有非常复杂的View和大量用户交互的应用程序。
这样的程序如果用MVC的话意味这要极度依赖于多个控制器。而在MVP中，所有这些复杂的逻辑可以封装在一个表示器中，大大简化维护工作。

MVVM模式

MVVM 模式将 Presenter 改为 ViewModel，基本与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

View与ViewModel
MVVM中的View是主动而不是被动的。
被动View只输出显示并不接受任何用户输入。
而MVVM中的View和ViewModel之间通过数据绑定和事件进行信。
优点：
·MVVM使得UI和为UI提供驱动的行为模块的并行开发变得更容易。
·MVVM使View抽象化，从而减少代码背后所需的业务逻辑量。
·ViewModel在单元测试中的使用更容易

缺点：
·对于简单的UI来说，使用MVVM有些大材小用
·数据绑定难以调试

vue是典型的MVVM框架，它实现双向数据绑定的技术是数据劫持结合发布者-订阅者模式的方式。通过 Object.defineProperty() 方法来劫持(监控)各属性的 getter 、setter ，并在数据(对象)发生变动时通知订阅者，触发相应的监听回调

3.Virtual DOM交互模式

react 基于 Virtual DOM 的数据更新与UI同步机制：

初始渲染时，首先将数据渲染为 Virtual DOM，然后由 Virtual DOM 生成 DOM。

数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

Virtual DOM 作为数据结构，需要能准确地转换为真实 DOM，并且方便进行对比。

4.前端MNV*时代

使用JavaScript调用原生控件或事件绑定来生成应用程序的交互模式称为前端MNV*开发模式。如果说Virtual DOM减少了DOM的交互次数，那么MNV*想要做的就是完全抛弃使用DOM。这种模式仅适用于移动端Hybrid应用，因为需要依赖原生应用控件的调用支持。将JSBridge和DOM编程的方式进行结合，让前端快速构建开发原生页面的引用，从而脱离DOM的交互模式。
综上所述，前端开发在前端发展的过程中，随着前端技术的更新，前端工程化的核心特点：模块化、组件化、自动化、规范化得以形成和显现。

前端工程化是大趋势

为什么前端工程化是趋势？总结原因大概如下：

1、前端工作范畴不断扩大。

以前的前端只需适配桌面浏览器，现在需适配不同类型和不同尺寸的设备，包括移动端网页、app应用等。

2、前后端分离。

早期的前端只是后端MVC框架的一层模板，现在则是获取数据、编写处理逻辑，各类前端MV*框架也得到普遍应用。

3、模块化开发的出现。

现在的前端不再试从零写起，重复造轮子，而是会引用大量内部和外部的组件和模块，这也导致前端必须进行模块管理。

4、转码器的盛行

为了提高效率，前端工程往往不会直接写html,css,和js代码，而是改用其他格式书写，再用工具编译为目标格式。比如用Jade 写HTML，用less／sass／stylus 编写CSS,用ES6/Typescript/.. 编写JavaScript。

5、开发流程和团队

早期的前端团队往往只有几个人，而现在的前端团队可以扩展到几十人，甚至上百人。每个人只负责自己的一块内容。所以，如何协调多人多团队的工作，保证沟通顺畅，保证权限管理，越来越成为一大问题。
此外，像webpack等工具的成熟和广泛使用，也在间接支持前端工程化的稳步前进和发展。

小结

前端工程化的本质是将可以用工具来完成的事情用工具来完成。前端工程化在目前的开发中是不可逆的趋势，每一个身处工作岗位的前端，都应该确立前端工程化的开发思维和开发方法，如此，才能更好更快的完成繁重的开发任务写出更有时代感更健壮更可靠的代码。

来自：米么骚客，作者：李秋橙

链接: https://www.fly63.com/article/detial/1149