JavaScript使用Object.defineProperty方法实现双数据绑定
2017-05-04 13:45
921 查看
Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的。
本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助。
* 需要要定义的属性名或方法的名字
* 目标属性所拥有的特性 - descriptor (之后讲解下面案例不包括)
注意事项:如果使用了(value和writable)就不能使用(get和set),他们可以理解为两组参数。如果同时使用就会报错。
另外如果参数中设置configurable 又设置了value,writable,configurable,将会以value,writable,configurable中设置的值为准。
JavaScript源码
本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助。
开始使用
Object.defineProperty接收三个参数
* 目标对象* 需要要定义的属性名或方法的名字
* 目标属性所拥有的特性 - descriptor (之后讲解下面案例不包括)
代码实例
var User = {}; Object.defineProperty(User, 'info', { value: 123 }); console.log(User.info);
descriptor
descriptor接收6个参数注意事项:如果使用了(value和writable)就不能使用(get和set),他们可以理解为两组参数。如果同时使用就会报错。
另外如果参数中设置configurable 又设置了value,writable,configurable,将会以value,writable,configurable中设置的值为准。
var User = {}; Object.defineProperty(User, "info", { // value: 123, // 属性的值 // writable: false, // 默认为false 如果值为false那么属性的值就不能被重写,只能读取。 configurable: false,//默认false 如果值为false 就不能再设置或修改他的(value,writable,configurable) enumerable: false,// 默认false 如果值为false就不能再for..in循环中遍历和 Object.keys() 中被枚举。 // 调用时不传参执行的方法 get: function () { return 'get' }, //调用时传参执行的方法 set: function (set) { return set } }); console.log(User.info);//调用get方法输出 get console.log(User.info = 'aaa');//调用 set 方法 输出 aaa
值的修改
注意事项: configurable=false,但只要是设置了writable 值还是会修改的,如果writable=false,那么两次输出的结果都会是123。var User = {}; Object.defineProperty(User, "info", { value: 123, writable: true, configurable: false }); console.log(User.info); // 输出 123 User.info = 456; console.log(User.info); // 输出 456
enumerable
注意事项如果enumerable=false,那么输出就会是一个空数组、var User = {}; Object.defineProperty(User, "info", { value: 123, enumerable: true, }); console.log(Object.keys(User)); //输出['info']
实战小案例实现双向数据绑定
html源码<p>今天天气 : <span id='state'>晴天</span></p> <div id="clothes"></div>
JavaScript源码
var UserInfo = {}; Object.defineProperty(UserInfo, "state", { get: function () { return document.getElementById('state').innerHTML; }, set: function (nick) { document.getElementById('state').innerHTML = nick; } }); Object.defineProperty(UserInfo, "clothes", { get: function () { return document.getElementById('clothes').innerHTML; }, set: function (clothes) { document.getElementById('clothes').innerHTML = clothes; } }); console.log(UserInfo.state); //输出晴天 UserInfo.clothes = "适合穿短袖";//修改html中的数据
相关文章推荐
- 使用Object.defineProperty实现简单的js双向绑定
- vue 数据绑定实现的核心 Object.defineProperty()
- 使用Object.defineProperty实现简单的js双向绑定
- 利用object.defineProperty实现数据与视图绑定
- 双向数据绑定实现之Object.defineProperty
- JS中的双向数据绑定及Object.defineProperty方法
- JS中的双向数据绑定及Object.defineProperty方法
- vue 数据绑定实现的核心 Object.defineProperty()
- 极简使用Object.defineProperty实现双向绑定
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
- Object.defineproperty实现数据和视图的联动
- JavaScript实现LI列表数据绑定的方法
- 浅谈vue实现数据监听的函数 Object.defineProperty
- javascript中的Object.defineProperty()与getOwnPropertyNames ()方法
- 利用defineProperty实现数据的双向绑定
- Object.defineproperty实现数据和视图的联动
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
- JavaScript Object.defineProperty()方法详解
- vue.js利用defineProperty实现数据的双向绑定