zoukankan      html  css  js  c++  java
  • MVVM

    1.第一阶段,直接用JavaScript操作DOM节点,使用浏览器提供的原生API:

    var dom = document.getElementById('name');
    dom.innerHTML = 'Homer';
    dom.style.color = 'red';

    第二阶段,由于原生API不好用,还要考虑浏览器兼容性,jQuery横空出世,以简洁的API迅速俘获了前端开发者的芳心:

    $('#name').text('Homer').css('color', 'red');

    第三阶段,MVC模式,需要服务器端配合,JavaScript可以在前端修改服务器渲染后的数据。

    现在,随着前端页面越来越复杂,用户对于交互性要求也越来越高,想要写出Gmail这样的页面,仅仅用jQuery是远远不够的。MVVM模型应运而生。

    MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。

    把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

    ViewModel如何编写?需要用JavaScript编写一个通用的ViewModel,这样,就可以复用整个MVVM模型了。

    这就是MVVM的设计思想:关注Model的变化,让MVVM框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来!

    2.MVC简介

    Model——数据模型。

    View——页面视图

    Controller——页面控制器,负责处理View和Model的事件。

    数据关系

    • View 接受用户交互请求
    • View 将请求转交给Controller
    • Controller 操作Model进行数据更新
    • 数据更新之后,Model通知View更新数据变化
    • View 更新变化数据

    方式

    所有方式都是单向通信

    结构实现

    View :使用 Composite模式 (混合模式)
    View和Controller:使用 Strategy模式 (策略者模式)
    Model和 View:使用 Observer模式同步信息(观察者模式)

    2.MVP

    mvp的全称为Model-View-Presenter,Model提供数据,View负责显示,Controller/Presenter负责逻辑的处理。MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller。

    数据关系

    • View 接收用户交互请求
    • View 将请求转交给 Presenter
    • Presenter 操作Model进行数据更新
    • Model 通知Presenter数据发生变化
    • Presenter 更新View数据

    MVP的优势

    1. Model与View完全分离,修改互不影响
    2. 更高效地使用,因为所有的逻辑交互都发生在一个地方—Presenter内部
    3. 一个Preseter可用于多个View,而不需要改变Presenter的逻辑(因为View的变化总是比Model的变化频繁)。
    4. 更便于测试。把逻辑放在Presenter中,就可以脱离用户接口来测试逻辑(单元测试)

    方式

    各部分之间都是双向通信

    3.MVVM简介

    ViewModel: 相比较于MVC新引入的视图模型。是视图显示逻辑、验证逻辑、网络请求等代码存放的地方。

    4.MVVM框架

    MVVM框架主要包括三个部分Model、View和ViewModel
    Model指的是数据部分,对应到前端就是一些Javascript对象
    View指的视图部分,对应到前端就是DOM
    ViewModel就是连接数据和视图的中间件
    在MVVM的框架下视图和数据是不能直接通信的,它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者
    当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,
    而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,
    这实际上就实现了数据的双向绑定

    MVVM框架的主要应用场景

    1)针对具有复杂交互逻辑的前端应用
    
    2)提供基础的架构抽象
    
    3)通过Ajax数据持久化,保证前端用户体验
    
    好处就是当前后端进行一些数据交互的时候,前端可以通过Ajax请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据和内容,
    特别是对于移动端应用场景,刷新页面的代价太昂贵,会重新加载很多资源,虽然有些资源会被缓存,但是页面的DOM、JS、CSS都会被浏览器重新解析一遍,
    因此,移动端页面经常会做成SPA单页应用,在这个基础上就诞生了很多MVVM框架,如Angular、React、Vue

    Vue.js的核心思想

    Vue.js的核心思想包括两个方面:数据驱动和组件化

    数据驱动:DOM是数据的一种自然映射,在vue.js中只需要操作数据,vue.js通过directives指令去对DOM做一层封装,当数据发生变化,会通知指令去修改对应的DOM,数据驱动DOM变化,DOM是数据的一种自然映射,vue.js还会对操作做一些监听,当我们修改视图的时候,vue.js监听到这些变化,从而去改变数据,这样就实现了数据的双向绑定。
    
      组件化的目的是扩展HTML元素,封装可重用的代码
    
      组件设计原则:
    
      1)页面上每个独立的可视/可交互区域视为一个组件,
    
      2)每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护,
    
      3)页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面。

    MVVM设计模式的优点
    1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的”View”上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
    2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
    3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,生成xml代码。
    4. 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。
     
     
  • 相关阅读:
    Silverlight+WCF 新手实例 象棋 介绍四(三十一)
    python 抓包(转)
    Python字符集编码和文件读写 [转]
    python操作Excel读写使用xlrd(转)
    Wing IDE 中文显示方法
    Python使用win32gui.SetWindowPos置顶窗口(转)
    python url格式解析(转)
    TCP/IP 某些最常见的错误原因码 (errno)列表(转)
    WinPcap过滤串表达式的语法
    python读取注册表值(转)
  • 原文地址:https://www.cnblogs.com/lixiaodou/p/9558438.html
Copyright © 2011-2022 走看看