Object.defineProperty 与数据绑定的简单实现
对象是一个属性集合,对象的基本特征是属性名(name)和属性值(value)。ES5 增加了属性描述符,包括数据属性描述符(configurable enumerable writable value)和存取描述符(configurable enumerable get set)。两类描述符中的configurable和enumerable作用写法都一样。
通常用 Object.defineProperty / Object.defineProperties 来定义属性,不过只能定义数据属性描述符或者存取描述符中的一种,而不能同时定义两个,如:不能既定义value,又定义get/set方法。通过设置对象的setter,就可以根据数据的变化触发DOM的更新,实现简单的数据绑定。
数据属性描述符
var person = {
name: "Jack"
} /** 等价于如下定义方法 **/
var person = {};
Object.defineProperty(person, "name", {
value: "Jack",
writable: true, //为true时,该属性才能被“=”重新赋值,默认为false
enumerable: true, //为true时,该属性才能被for in枚举,默认为false
configurable: true //为true时,该属性才能被删除和修改描述符,默认为false
})
存取描述符
set是给属性提供 setter 的方法,即给对象属性设置值时调用的函数,接受唯一参数,并将该参数的新值分配给该属性。
get是给属性提供 getter 的方法,即访问对象属性时调用的函数,返回值就是当前属性的值。
当使用了getter或setter方法,就不允许使用writable和value这两个属性。
var person = {};
Object.defineProperty(person, "name", {
get: function() {
console.log("do get");
return "Hello " + this.value
},
set: function(newValue) {
console.log("do set");
this.value = "Mr " + newValue;
}
}) person.name = "Jone"; // do set,实际设置的值变成"Mr Jone" person.name // do get,实际得到"Hello Mr Jone"
数据绑定实例
假设下面的p显示的文本要与js中person的name绑定,要求name变化时,p的文本自动变化。
<p id="person">show person name</p>
var person = {};
var dom = document.getElementById("person");
Object.defineProperty(person, "name", {
get: function() {
return this.value;
},
set: function(newValue) {
dom.innerHTML = newValue;
this.value = newValue;
}
}) person.name = "Jone";
setTimeout(function(){
person.name = "Jack"
},2000)
执行代码,p首先显示Jone,2秒后自动变成Jack。
Object.defineProperty 与数据绑定的简单实现的更多相关文章
- Object.defineProperty实现数据绑定
1.Object.defineProperty方法 Object.defineProperty(obj, prop, descriptor); (1)参数: obj:目标对象 prop:需要定义的属 ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
- 双向数据绑定实现之Object.defineProperty
vue.js利用的是es5的 defineproperty 特性实现的双向数据绑定,了解一下基本原理. 举例 var person= {}; Object.defineProperty(person, ...
- vue双向数据绑定的原理-object.defineProperty() 用法
有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...
- 17: VUE数据绑定 与 Object.defineProperty
VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
- 20+行代码使用es5 Object.defineProperty 实现简单的watch功能
/** * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效 */ $watch=function(myObject,callback){ function in ...
- vue实现双向数据绑定之Object.defineProperty()篇
前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...
- JavaScript使用Object.defineProperty方法实现双数据绑定
Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 O ...
随机推荐
- 5、xamarin.android 中如何对AndroidManifest.xml 进行配置和调整
降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 我们在翻看一些java的源码经常会说我们要在AndroidManifest.xml 中添加一些东西.而我们使用xamari ...
- MySQl资料链接
原文:http://www.uml.org.cn/sjjm/sjjm-MySql.asp MySQl MySQL高可用数据库内核深度优化的四重定制 MySQL数据表存储引擎类型及特性 My ...
- EF基础知识小记一
1.EF等ORM解决方案出现的原因 因为软件开发中分析和解决问题的方法已经接近成熟,然后关系型数据库却没有,很多年来,数据依然是保存在表行列这样的模式里,所以,在面相对象和高度标准化的数据库中产生了一 ...
- java-多线程future等待返回
多线程中需要返回值, java中有个fork/join模型, 没有细研究, 简单实用callable进行了返回 Thread1 package com.iwhere.easy.travel.test. ...
- Oracle相关
where 条件中使用=进行限制时,可以返回一个记录集,即可以返回多个记录集
- 破解栅栏密码python脚本
今天遇到一个要破解的栅栏密码,写了个通用的脚本 #!/usr/bin/env python # -*- coding: gbk -*- # -*- coding: utf_8 -*- # Author ...
- [转]Configure Network Drive Visible for SQL Server During Backup and Restore Using SSMS
本文转自:https://mytechmantra.com/LearnSQLServer/Configure-Network-Drive-Visible-for-SQL-Server-During-B ...
- MVC登陆认证简单设置
首先,弄个基类 /// <summary> /// 所有控制器基类,里面重写了OnActionExecuted方法 /// </summary> public class Ba ...
- iOS 网络请求数据缓存
1. NSURLCache简介: iOS对NSURLRequest提供了7种缓存策略:(实际上能用的只有4种) NSURLRequestUseProtocolCachePolicy // 默认的缓存策 ...
- Syntax error on token "Invalid Regular Expression Options", no accurate corr
今天导入项目一个js文件报这个错 Syntax error on token "Invalid Regular Expression Options", no accurate c ...