zoukankan      html  css  js  c++  java
  • Object.defineproperty实现数据和视图的联动

    Object.defineproperty语法

    在一个对象上定义新的属性

    var o = {}; // 创建一个新对象
    // Example of an object property added with defineProperty with a data property descriptor
    Object.defineProperty(o, "a", {value : 37,
                                   writable : true,
                                   enumerable : true,
                                   configurable : true});
    // 对象o拥有了属性a,值为37
    
    // Example of an object property added with defineProperty with an accessor property descriptor
    var bValue;
    Object.defineProperty(o, "b", {get : function(){ return bValue; },
                                   set : function(newValue){ bValue = newValue; },
                                   enumerable : true,
                                   configurable : true});
    o.b = 38;

    数据和视图联动

    给对象o定义新的属性b,并且定义属性b的get和set方法,当o.b的时候会调用b属性的get方法,给b属性赋值的时候,会调用set方法,这就是修改数据的时候,视图会自动更新的关键

    前端获取数据后,需要根据数据操作dom,视图变化后,需要修改不少代码,有没有方法将数据和dom操作隔离,看一个例子

    显示用户信息的html模版

    <div>
        <p>你好,<span id='nickName'></span></p>
        <div id="introduce"></div>
    </div>      
    //视图控制器
    var
    userInfo = {}; Object.defineProperty(userInfo, "nickName", { get: function(){ return document.getElementById('nickName').innerHTML; }, set: function(nick){ document.getElementById('nickName').innerHTML = nick; } }); Object.defineProperty(userInfo, "introduce", { get: function(){ return document.getElementById('introduce').innerHTML; }, set: function(introduce){ document.getElementById('introduce').innerHTML = introduce; } })
    //数据
    //
    todo 获取用户信息的代码 .... userInfo.nickName = "xxx"; userInfo.introduce = "我是xxx,我来自云南,..."

    设置userInfo的nickName属性时会调用set方法,更新dom节点的html

    移动端兼容性

    FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
    Basic support 4.0 (2) (Yes) ? 11.50 (Yes)

    参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

  • 相关阅读:
    Angular之filter学习
    Jupyter notebook 安装,初步使用
    Python排序算法
    获取相对于控件的鼠标坐标
    使用PYTHON实现docx文档的读写
    MATLAB 物体识别算法说明:vision.ForegroundDetector, vision.BlobAnalysis
    MATLAB 例子研究 Motion-Based Multiple Object Tracking
    MATLAB 图像处理——Contrast Enhancement Techniques
    MATLAB 图像操作基础
    MATLAB 图像分类 Image Category Classification Using Bag of Features
  • 原文地址:https://www.cnblogs.com/oceanxing/p/3938443.html
Copyright © 2011-2022 走看看