码迷,mamicode.com
首页 > 其他好文 > 详细

Object.defineproperty实现数据和视图的联动

时间:2014-08-27 00:21:16      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:des   android   style   blog   http   color   java   io   ar   

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

 

Object.defineproperty实现数据和视图的联动

标签:des   android   style   blog   http   color   java   io   ar   

原文地址:http://www.cnblogs.com/oceanxing/p/3938443.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!