zoukankan      html  css  js  c++  java
  • 关于前端mvc或mvvm框架数据跟踪变化实现dom双向绑定的原理

    一:最早的框架如backbone,实现对数据的变化监测是通过设置数据模型api。

      比如其model对象管理的是数据,而修改这些数据就是通过固定的方法(set)来触发事件从而更新dom,

    <p id="dom">1</p>
    var Model={
          a:1,
          b:2
    }
    var trigger=function(value){
          document.getElementById('dom').html(value)  //更新dom操作  
    }
    var set=function(data,value){
          trigger(value)  
    }    
    set(Model.a,0)

    二:angular框架,采用脏检查机制,当在dom中使用{{data}}绑定数据时就为此数据添加了一个观察器。

      当只要有数据更新时,就会遍历所有的观察器,如果该数据更新,就更新相应的dom。

    三:react框架,原理是当某项数据发生更新时,按照新数据生成一个完整的虚拟dom,

      此时就有旧dom和新dom,然后使用它的差异算法计算出两个dom中不同的部分,最后在现实的dom中更新差异。

    四:vue框架,原理和第一种很类似,不过通过一些方法使得最后的使用效果和angular以及react类似。

      当在注册Vue实例时,vue会将所有注册到data中的数据转换为set/get样式,转化的方式是通过Object.fefineProperty()实现的。

    var vm=new Vue({
          data:{
                  value:'value'         
          }
    })
    Object.defineProperty(vm.$data,value,{
           set(newValue){
                   console.log('我要变了');
                   //通知该数据所有订阅者watcher更新,然后更新dom
           },
           get(){
                   console.log('正在取值');
                   //添加该数据的订阅者watcher
           }
    })        

      

  • 相关阅读:
    求字符串中最大的递增子序列
    分析函数改写自关联
    收集统计信息让SQL走正确的执行计划
    利用case when 减少表扫描次数
    利用查询提示优化SQL
    利用SQL进行推理
    查找字段连续相同的最大值
    优化有标量子查询的SQL
    将部分相同的多行记录转成一行多列
    .net 测试工具类
  • 原文地址:https://www.cnblogs.com/zhaozhipeng/p/6882312.html
Copyright © 2011-2022 走看看