首页 > 代码库 > Object.defineproperty实现数据和视图的联动
Object.defineproperty实现数据和视图的联动
Object.defineproperty语法
在一个对象上定义新的属性
var o = {}; // 创建一个新对象// Example of an object property added with defineProperty with a data property descriptorObject.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 descriptorvar bValue;Object.defineProperty(o, "b", {get : function(){ return bValue; }, set : function(newValue){ bValue =http://www.mamicode.com/ 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
移动端兼容性
| Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 4.0 (2) | (Yes) | ? | 11.50 | (Yes) |
参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
Object.defineproperty实现数据和视图的联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。