MVC是Web开发中应用非常广泛的一种架构模式,之后又演变成了MVVM模式。
随着JavaScript的发展,渐渐显现出各种不和谐:组织代码混乱,业务与操作DOM杂合,所以引入了MVC模式。
在MVC模式中,M指模型(Model),是后端传递的数据;V指视图(View),是用户所看到的页面;C指控制器(Controller),是页面业务逻辑。MVC模式示意图如图1-1所示。
图1-1 MVC模式示意图
使用MVC模式的目的是将Model和View的代码分离,实现Web应用系统的职能分工。MVC模式是单向通信的,也就是View和Model需要通过Controller来承上启下。
随着网站前端开发技术的发展,又出现了MVVM模式。不少前段框架采用了MVVM模式,例如当前比较流行的Angular和Vue.js。
MVVM是Model-View-ViewModel的简写。其中MV和MVC模式中的意思一样,VM指ViewModel,是视图模型。
MVVM模式示意图如图1-2所示。
图1-2 MVVM模式示意图
ViewModel是MVVM模式的核心,是连接View和Model的桥梁。它有两个方向:
(1)将模型转化成视图,将后端传递的数据转化成用户所看到的页面。
(2)将视图转化成模型,即将所看到的页面转化成后端的数据。
在Vue.js框架中,这两个方向都实现了,就是Vue.js中数据的双向绑定。