图１　ＭＶＣ模式架构图
MVC架构模式中，各部分之间的通信过程为：到Controller；Controller完成业务逻
图２　ＭＶＶＭ模式架构图
MVVM架构如图2所示。其中Model仅仅只是代表应用程序所需的数据信息，它不关注任何行为；View
与用户进行直接交互的部分，它需要响应ViewModel
并格式化数据，不负责控制应用的状态；ViewModel
装业务逻辑层，这点类似于MVC模式中的控制器，它控制的很多显示逻辑，它可以把数据模型的变化传递给视图，也可以把视图中数据的变化传递给数据模型，即在
之间建立了双向绑定。
ＭＶＶＭ框架的运行原理
本章将以Vue.js为例，讲解前端MVVM框架的实现原理。
是目前前端开发领域很火的一个框架，它是对
架构模式的一个实现，通过双向数据绑定连接视图层和数据
易剑波（1990-），男，湖北钟祥人，硕士。研究方向：云计算、计算机软件与理论。
web前端开发技术第三版pdf
图３　Ｖｕｅ．ｊｓ结构图
在Vue.js的架构图中，Observer相当于观察者模式中订阅者对象的代理，它的主要作用是监听数据模型的变化，并将数据变化通知给订阅者；Compile是一个编译器，它的作用是对视图（Web前端中即HTML元素）中绑定的指令编译解析，根据定义的动态模板将指令替换为最终展示给用户真实数据，同时它还用于绑定界面对应的更新函数；Watcher 是订阅-发布模式中订阅者的实现，它的作用是订阅数据变化的通知来执行指令所绑定的回调函数，同时Watcher还充当了连接Observer和指令编译器Compile的桥梁；Dep的角相当于一个消息订阅器，它的主要作用是维护订阅者Watcher的信息，当系统中的数据发生变化时出发通知函数（notify）并调用Watcher的更新方法（update）来进行视图的更新。
当新建一个Vue对象时，框架进入初始化阶段。Vue在初始化阶段主要执行两个操作：一是遍历系统中数据的所有属性，来对各个属性的变化添加监听；第二个操作是利用指令编译器Compile对视图中绑定的指令进行扫描进行视图的初始化，然后订阅Watcher来更新视图，此时Watcher会将自己添加到消息订阅器Dep中。至此，Vue的初始化过程结束。
在系统运行过程中，一旦系统中的数据模型发生了变化，观察者Observer的setter访问器属性就会被触发，此时消息订阅中心Dep会遍历它所维护的所有订阅者，对于每一个订阅了该数据的对象，向它发出一个更新通知，订阅者收到通知后就会对视图进行相应的更新。以上过程不断往复循环，这就是MVVM模式在Vue.js中的运行原理。
３　前端ＭＶＶＭ框架实现的关键技术
前一章节中以目前比较火的框架Vue.js为例介绍了前端领域中MVVM模式的实现原理，本章将针对上述原理图，深入分析前端MVVM框架实现的关键技术。主要包含以下几点。
（1）数据变化的监听。
在Web前端中，数据变化的监听主要通过对象的访问器属性来实现。访问器属性是通过Object.defineProperty()方法
图４　数组为１　０００　０００个Ｉｎｔｅｇｅｒｓ元素的排序
当数据规模增至1 000 000个元素时，同样是“尾部元素随机数据”测试用例对于优化快速排序算法的病态状况已更加明显地呈现，它和普通快速排序一样，其测试值被忽略。如图4所示，当数组长度增加时，与普通快速排序相比，优化快速排序的效率提升也更加明显。而且，归并排序在此情况下表现较好。
（上接第77页）
阅者订阅同一个发布者发布的主题，当发布者的主题发生变化时，对外发送一个通知，所有订阅了该主题的订阅者都会接收到更新的消息。因此，观察者模式定义的是一种一对多的关系。
可以看到，发布-订阅模式非常适合于MVVM双向绑定中多个视图绑定到同一个数据模型的情形。通过将视图看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。