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入口函数,整合以上三者
     
    才疏学浅,希望对大家的学习有帮助,有错误之处麻烦指出。
  • 相关阅读:
    Centos 7环境下配置MySQL 5.7读写分离
    Centos 7环境下安装配置MySQL 5.7
    Hadoop 2.8集群安装及配置记录
    ASP.NET Core 1.1版本之Hello word
    Hadoop版Helloworld之wordcount运行示例
    SSH配置免密登陆设置汇总
    最小安装模式下Centos7.*网卡启动配置
    骚扰式管理
    项目团队之分工协作
    利用微软AntiXss Library过滤输出字符,防止XSS攻击
  • 原文地址:https://www.cnblogs.com/nokelong/p/7930345.html
Copyright © 2011-2022 走看看