zoukankan      html  css  js  c++  java
  • 双向数据绑定

    是什么:
          基本含义就是数据的操作反映到数据,数据的改变实时展现到界面。
    原理 :
    实现响应式或双向数据绑定分三个步骤:
        1)View中UI元素和Model中的data中的数据绑定
        2)当UI元素内容变化时,data中的数据同步变化。即View ==>Model
        3)当Model中的data数据变化时,View中的UI元素同步变化。即Model ==>View。
     
    实现方式:
    • 观察者模式(backbone.js)
    • 脏值检测(angular.js)
    • 数据劫持(vue.js)
     
    观察者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value)。
    在backbone中,Model到View的数据传递,是在View中监听Model中的属性的chang事件。当Model的更新时触发View重现render。而 View 到 Model的数据传递,可以监听View 对应的 DOM 元素的各种事件,在检测到 View 状态变更后,将变更的数据发送到Model。
     
    脏值检测: Angularjs内部会维护一个序列,将所有需要监控的属性放在这个序列中,当发生某些特定事件时(这里非定时器而是由某些特殊事件触发),Angularjs会调用 $digest 方法遍历所有的watcher, 对被监控的属性做对比前后属性值是否发生变化;发生变化,则调用对应的handler。
    特定事件大致如下:
    • DOM事件,譬如用户输入文本,点击按钮等。( ng-click ) 
    • XHR响应事件 ( $http ) 
    • 浏览器Location变更事件 ( $location ) 
    • Timer事件( $timeout , $interval ) 
    • 执行 $digest() 或 $apply() 
     
    数据劫持: vue.js 采用数据劫持结发布者-订阅者模式的方式,通过Object.defineProperty(ECMAScript5.1)来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。(部分还不支持 Object.defineProperty 低级浏览器采用VBScript作了完美兼容)
     
    实现mvvm的双向绑定,就必须要实现以下几点:
    1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
    2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
    3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
    4、mvvm入口函数,整合以上三者
     
    才疏学浅,希望对大家的学习有帮助,有错误之处麻烦指出。
  • 相关阅读:
    CentOS7 安装jdk8
    CentOS7 安装和配置 mysql5.7
    CentOS7 安装和配置Tomcat
    vi编辑器设置行号可见
    前端基础-css(2)
    前端基础-css(1)
    前端基础-html(3)
    前端基础-html(2)
    前端基础-html(1)
    IO多路复用、协程
  • 原文地址:https://www.cnblogs.com/nokelong/p/7930345.html
Copyright © 2011-2022 走看看