理解javascript中的MVVM开发模式

          MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3]
WindowsPresentation Foundation (WPF),
Silverlight 和 t
ZK frameworkAdobe Flex

          对这种模式的实现,大部分都是通过在view层声明数据绑定来和其他层分离的,这样就方便了前端开发人员和后端开发人员 的分工,前端开发人员在html标签中写对viewmodel的绑定数据,model和viewmodel是后端开发人员通过开发应用的逻辑来维护这两层。

          最近几年,mvvm模式在javascript中开始有人实现,目前比较成熟的框架有KnockoutJS,
Kendo MVVMKnockback.js,下面我们就以KnockoutJS为例看下MVVM模式中个部分的具体职责和实例代码,同时理解使用这种模式开发的优点和缺点。

Model

          同其他的mv*家族成员一样,Model代表特定领域的数据或者应用所需的数据,一个典型的特定领域的数据如用户信息【用户名,头像,email,电话】,或者一首音乐的信息【歌曲名,发行年份,专辑】;

          Model仅仅关注数据信息,不关心任何行为;她不格式化数据或者影响数据在浏览器中的展现,这些不是他的职责;格式化数据是view层的任务,同时业务逻辑层被封装在viewmodel中,用来和model进行交互。

          在Model层做的一个比较意外的行为是对数据的验证,比如当用户输入email的时候,判断email的格式是否正确。

          在KnockoutJS中,Model基本是按照上面的定义来实现的,但是会有通过ajax调用服务器服务来进行读写Model数据。

View

          View是指应用中和用户直接交互的部分,他是一个交互式的UI来表示ViewModel的状态,View被认为是主动的,而不是被动的?这句话的意思是说被动的View在应用中不关心model的领域,model的领域在controller中维护;MVVM的主动式的View包含数据绑定,事件和需要理解model和viewmodel的行为,尽管这些行为可以和属性对应,view仍然需要响应viewmodel的事件,同时View不负责控制状态。

          KnockoutJS的view层就是一个简单的html文档,它里面会有关联到viewmodel的数据声明,同时KnockoutJS的view层显示从ViewModel中获取的数据,传递命令给viewmodel,并且更新viewmodel改变的状态。

ViewModel

          可以认为ViewModel是一个专门用于数据转换的Controller,它可以把Model中的信息转换为View中的信息,同时从View专递命令给Model;

从这个意义上来说,ViewModel看上去更像一个Model,但是它控制着View的很多显示逻辑,同时ViewModel也暴漏一些方法用来维护view的状态,根据View的行为和事件来更新model;

          综上,ViewModel位于UI层的后面,暴漏数据给View,可以认为是View层的数据和行为的源;

          KnockoutJS把ViewModel解释为数据的展现和表现在UI上的行为,他不是ui需要持久化的数据模型,但是他可以持有用户存储的数据;Knockout的 ViewModels是采用javascript对象实现的,不用关心html标签,这种抽象的方法可以使它们的实现保持简单。

优点:

  1. MVVM使并行开发更加容易,使前端开发和后端开发人员互不影响。
  2. 抽象化View层,减少了代码中的业务逻辑
  3. ViewModel比事件驱动更容易测试
  4. ViewModel的测试不用关心uI的自动化和交互

缺点:

  1. 对于简单的ui,使用MVVM有点太重
  2. 声明式的数据绑定不利于调试,因为命令式的代码可以和容易的设置断点,这种模式就不利于设置这样的断点
  3. 在不挑剔(non-trivial)的应用里数据绑定可以创建大量的簿记(book-keeping)。你也不想结束于绑定比被绑定的对象更复杂的情况。
  4. 在大的应用中,在获取大量的概要(generalization)前很难设计视图-模型层

上一篇文章中我们了解了mvc的开发的模式,这两种开发有什么不同呢,我们会在下篇文章中做一个具体的分析。 

时间: 2024-09-09 01:25:16

理解javascript中的MVVM开发模式的相关文章

深入理解Javascript中的this关键字

 这篇文章主要介绍了深入理解Javascript中的this关键字,本文讲解了方法调用模式.函数调用模式.构造器调用模式.apply调用模式中this的不同之处,需要的朋友可以参考下     自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底是何方神圣? 理解this this是一个与执行上下文(execution context,也就是作用域)相

如何理解 JavaScript 中的 Promise 机制

本文讲的是如何理解 JavaScript 中的 Promise 机制, Promise 的世界 原生 Promises 是在 ES2015 对 JavaScript 做出最大的改变.它的出现消除了采用 callback 机制的很多潜在问题,并允许我们采用近乎同步的逻辑去写异步代码. 可以说 promises 和 generators ,代表了异步编程的新标准.不论你是否用它,你都得 必须 明白它们究竟是什么. Promise 提供了相当简单的 API ,但也增加了一点学习曲线.如果你以前从没见过

深入理解JavaScript中为什么string可以拥有方法_javascript技巧

引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

AJAX入门之深入理解JavaScript中的函数

ajax|javascript|函数 概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var f

新手入门:理解JavaScript中函数的使用

javascript|函数 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-} var func2=function(-){-}; var func3=function func4(-){-}; var func5

深入理解JavaScript中的对象

  这篇文章主要介绍了深入理解JavaScript中的对象,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript是一种面向对象编程(OOP)语言.一种编程语言可以被称为面向对象的,它为开发者提供了四种基本功能: 封装 - 存储相关的信息,无论是数据或方法,还是对象 聚合 - 存储一个对象到另一个对象的内部 继承 - 类的能力依赖于另一个类(或类数),用于其部分的属性和方法 多态性 - 编写函数或者方法,在各种不同的方式工作 对象是由属性.如果属性包含一个函数,它被认为是一个对象

C#中 使用CodeFirst开发模式有什么好处,和先建数据库有什么区别

问题描述 C#中 使用CodeFirst开发模式有什么好处,和先建数据库有什么区别 C#中 使用**CodeFirst**开发模式有什么好处,和先建数据库有什么区别 解决方案 谈不上什么好处坏处,萝卜白菜各有所爱,你能说萝卜比白菜好在哪里,萝卜白菜有什么区别么? 如果你感受不到codefirst的好处,那说明对于你来说,codefirst没有好处.这很正常.就像有些开发者偏好于通过代码来进行领域建模而不是数据库他们觉得cf比通过数据库建模要好一样.这只是一种偏好(perference),

深入理解JavaScript中的call、apply、bind方法的区别_javascript技巧

在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply.call apply:应用某一对象的一个方法,用另一个对象替换当前对象 call:调用一个对象的一个方法,以另一个对象替换当前对象 function pers

深入理解Javascript中的自执行匿名函数_基础知识

格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 来个带参数的例子: (function(arg){ alert(arg+100); })(20); // 这个例子返回120. 回来看看jquery的插件编写 (function($) { // Code goes here })(jQuery