您好, 访客   登录/注册

基于vue的MVVM框架的研究与分析

来源:用户上传      作者:

  摘要:互联网的不断发展,前端开发人员一直致力于开发更加高效的代码,由于前期网速以及前端语言的限制,始终得不到解决,近年来,这些问题得到解决后,越来越多的前端框架诞生,这些框架都趋向于工程化,不断提高前端开发者的开发效率以及用户的体验度。该文就近年来出现的MVVM框架中的Vue做出一些深入的研究,解析MVVM框架的原理及实现。
  关键词:MVVM;VUE;前端
  中图分类号:TP311 文献标识码:A
  文章编号:1009-3044(2019)11-0097-02
  Abstract: With the continuous development of the Internet, front-end developers have been devoting themselves to developing more efficient code. Because of the limitations of network speed and front-end language, they have not been solved. In recent years, after these problems have been solved, more and more front-end frameworks have been born. These frameworks tend to be engineering, and constantly improve the development efficiency of front-end developers and user experience. This paper makes some in-depth research on Vue in MVVM framework, which appears in recent years, and analyses the principle and implementation of MVVM framework.
  Key words: MVVM; VUE; Front-end
  1 背景
  从早期的静态HTML页面,所有的逻辑运算都由后端进行,到1995年网景推出的JavaScript,逐步在客户端进行部分的逻辑运算,到1999年XMLHTTPRequest的诞生,浏览器异步传输、局部刷新的实现,再到jQuery的出现,浏览器的开发逐步从后端走向前端,到今天,各种MVVM框架顺应时代发展的潮流,引导前端技术走向工程化。
  2 MVVM框架的产生
  前端的飞速发展,以及互联网时代的到来,一个大型web网站项目需要成千上万个HTML界面组成。前后端的未分离,以及JavaScript与HTML的混合使用,对于网站维护人员来说,无从下手,增加了不必要的难度。web开发者一直寻求属于前端的模块化框架,2009年,AngularJS的诞生,到2011年React和Ember,再到2014年Vue.js的出现,标志著属于前端的工程化框架正在取代以往的开发模式。
  3 MVVM框架的组成
  MVVM,全名Model-View-ViewModel,前端开发者只用关注数据,使用数据的变化改变DOM,也就是视图的变化,以往的开发模式是开发者在数据改变的时候,手动去操作DOM,这样的开发模式不仅费时费力,维护时更是难上加难。MVVM通过数据的双向绑定,当数据发生变化时,局部界面自动重新渲染,解耦View层,也就是视图层。
  3.1 Model
  Model层,也就是数据层,用于逻辑处理以及数据的处理。这一层,前端开发者无需关注后端的数据的处理,只需要后端暴露接口,通过后端返回的数据格式,前端开发人员进行相应的数据处理。
  3.2 View
  视图层,用于展示用户界面,不负责数据的处理,用于数据绑定的声明,指令的声明,事件绑定的声明。
  3.3 ViewModel
  负责Model层与View层的交互,是其中最重要的一环,将Model的数据进行监听,当数据发生改变时,及时更新视图。这一层由框架封装完成,网站开发人员只需关注Model中数据的处理,实现数据驱动视图。
  4 MVVM的优点
  1) 低耦合。View层与Model层相互联系,又可以相互独立,数据可以双向绑定又可以单向传递。
  2) 组件化。模块化的应用,出现组件的重复利用,同样的视图模板,开发人员可以重复利用,提高开发效率,后期更容易维护。
  3) 易于开发。由于数据驱动视图,开发人员更多的重心放在数据的处理与业务逻辑,极大地提高开发效率。
  5 实现分析
  5.1 发布/订阅者模式
  发布/订阅者模式是Vue使用的开发模式,通过订阅者订阅不同的需求,也就是相应的数据处理,发布者将Dep中订阅者依次遍历执行,执行对应的回调函数。
  Vue使用Observer监听new Vue()实例对象,通过Watcher添加对应的订阅者,Dep收集这些订阅者,当Data发生改变时,Observer通知Dep,当前数据绑定的Dep收集器中的订阅者依次执行,实现数据双向绑定。Compile指令解析器解析HTML模板中的指令,将对应的解析函数添加进Dep中,数据发生改变时,相应的解析函数会更新视图。
  5.2 Observer的实现
  Vue支持IE9及以上,Observer数据监听器使用数据劫持的方式进行数据监听,通过Object.defineProperty()来重新定义属性的getter和setter。   Object.defineProperty(data,key,{
  get:function(){},
  set:function(){}
  })
  当对应的数据需要相应的对调函数时,在getter中添加对应的订阅者,getter中不再做其他操作,只用来添加对应的数据依赖。
  在setter中,其中做了一部分判断,当数据未发生改变时,不做任何操作,提高程序的运算效率,当数据发生改变时,通知Dep(订阅收集器),执行dep.notify(),notify为dep中定义的一个函数,主要用于遍历Dep中的所有订阅者,并执行所有订阅者的回调函数,更新相应的视图。这个过程是Vue的设计核心,在这里通过数据拦截完成订阅者的订阅,发布者在数据改变后,通知所有订阅者。
  5.3 Dep的实现
  Dep(订阅收集器),顾名思义,用于收集对应的订阅者,它其中主要由subs,addSub,notify以及相应的sub.update组成。
  Subs为一个数组,保存所有的订阅者,当添加订阅者时,subs.push(sub)依次添加,每个sub(订阅者)是独立的,它具有相应的update函数,用于更新视图和对应的自定义回调函数。addSub方法用于添加sub,当然需要一个调用这些sub的函数方法,notify方法用于遍历subs,这个方法在数据的setter方法中执行,保证只有数据发生改变,才去通知所有的订阅者。
  5.4 Watcher的实现
  Dep中已经实现添加订阅者,具体的每个订阅者的实现由Watcher实现。在Observer的getter方法中,执行相应的添加方法,但是如何触发getter方法,保证订阅者只添加一次,Vue在Watcher中做了详细的操作。
  function Watcher(vm, exp, cb) {
  this.cb = cb;
  this.vm = vm;
  this.exp = exp;
  this.value = this.get(); // 将自己添加到订阅器的操作
  }
  Watcher.prototype={
  update:function(){},
  run:function(){},
  get:function(){}
  }
  通過new Watcher(),首先缓存自己,保证在Observer的getter方法执行时,将自己添加到Dep中,当添加完成之后,释放自己,当前属性再次获取时,不会二次添加进Dep中。由于传入到Observer的是当前new Watcher()实例,在Dep收集器中的每个sub(订阅者)都是一个new Watcher()实例对象,每个实例定义它的回调函数update,在update中执行当前订阅者的需求。到这一步,基本实现了数据拦截,数据改变驱动订阅者方法的执行。
  5.5 Compile的实现
  Compile(指令解析器),以上已经实现了双向绑定,但是整个过程并没有去改变DOM,只是实现了数据的双向绑定,界面并没有发生实际的改变。所以需要一个Compile来解析和绑定DOM。
  首先需要获取当前的DOM对象,由于操作DOM过于频繁会影响浏览器的渲染速度,在Vue出现了虚拟DOM,它主要是将对应的DOM对象转为js对象,首先去改变js对象,当js对象发生改变时,再去操作DOM改变。
  接下来需要遍历虚拟DOM中的各个节点,这里我们只负责研究它的双向绑定,对其中的{{}}进行解析,对其中的数据进行new Watcher()操作,并给Watcher更新视图的回调函数。这样,数据的双向绑定就完成了,当界面的input内容发生改变时,js数据也发生改变,同理,数据发生改变时,界面也同时发生渲染。
  6 结束语
  前端的发展已经是趋势,MVVM框架已经占据了大部分市场,前端开发者不再去写重复的HTML元素,不用一遍又一遍获取DOM,操作DOM,既提高了开发效率,又提高了用户的使用体验。SPA(单页面)应用越来越多,HTML5的跨终端性,让现在MVVM框架走向移动开发,资源只需加载一次,不仅仅是PC,它在逐渐替代传统的APP,未来的前端越来越趋向于大前端。
  参考文献:
  [1] 孙连山, 李云倩. MVVM框架在Web前端的应用研究[D]. 上海: 复旦大学, 2014.
  [2] 刘立. MVVM 模式分析与应用[J]. 微型电脑应用, 2012, 28(12): 57-60.
  [3] 何焕春, 杨怿. 基于MVVM构架的Web前端框架研究[J]. 电脑知识与技术, 2017, 13(24):59-60.
  [4] 莫文水. Web前端中MVVM框架的应用研究[J]. 网络安全技术与应用, 2017(4): 64.
  [5] 易剑波. 基于MVVM模式的WEB前端框架的研究[J]. 信息与电脑: 理论版, 2016(19): 76-77, 84.
  【通联编辑:谢媛媛】
转载注明来源:https://www.xzbu.com/8/view-14769869.htm