Object.defineproperty实现数据和视图的联动
2014-08-26 23:18
405 查看
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
移动端兼容性
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.0 (2) | (Yes) | ? | 11.50 | (Yes) |
相关文章推荐
- Object.defineproperty实现数据和视图的联动
- Object.defineproperty实现数据和视图的联动
- Object.defineproperty实现数据和视图的联动
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
- 利用object.defineProperty实现数据与视图绑定
- 双向数据绑定实现之Object.defineProperty
- JavaScript使用Object.defineProperty方法实现双数据绑定
- vue 数据绑定实现的核心 Object.defineProperty()
- vue 数据绑定实现的核心 Object.defineProperty()
- 浅谈vue实现数据监听的函数 Object.defineProperty
- 使用Object.defineProperty实现简单的js双向绑定
- Object.defineProperty()/ vue数据绑定原理
- 利用defineProperty实现数据的双向绑定
- 应用defineProperty简单实现vue的双向数据绑定
- Object.defineProperty 接口浏览器实现的bug.和疑惑
- 极简使用Object.defineProperty实现双向绑定
- Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
- JS中的双向数据绑定及Object.defineProperty方法
- Vue源码解读——实现一个双向绑定(Object.defineProperty与observe)