欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Proxy和Object.defineProperty实现简单的数据绑定

程序员文章站 2022-07-12 22:57:11
...

简单实现数据绑定

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

备注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

语法
Object.defineProperty(obj, prop, descriptor)
参数
obj

要定义属性的对象。

prop

要定义或修改的属性的名称或 Symbol 。

descriptor

要定义或修改的属性描述符

简单实现
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Object.defineProperty简单实现数据绑定</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <input type="text" id="model">
    <p id="word"></p>
</body>
</html>
<script>
let obj = {}
let model = document.getElementById('model')
let word = document.getElementById('word')
Object.defineProperty(obj, 'txt', {
	get () {
		return obj
	},
	set (newVal) {
		model.value = newVal
		word.textContent = newVal
	}
})
model.addEventListener('keyup', (e) => {
	obj.txt = e.target.value
})
</script>

Proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

语法
const p = new Proxy(target, handler)
参数
target

要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler

一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

简单实现
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Proxy简单实现数据绑定</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <input type="text" id="model2">
    <p id="word2"></p>
</body>
</html>
<script>
let obj = {}
let model2 = document.getElementById('model2')
let word2 = document.getElementById('word2')
let newProxy = new Proxy(obj, {
    get (target, property, receiver) {
        return 
    },
    set (target, property, value, receiver) {
        if (property === 'txt') {
            model2.value = value
            word2.textContent = value
        }
        return
    }
})
model2.addEventListener('keyup', (e) => {
	newProxy.txt = e.target.value
})
</script>
handler.get() 方法用于拦截对象的读取属性操作。
语法
var p = new Proxy(target, {
  	get: function(target, property, receiver) {
  	}
});
参数

target
目标对象。
property
被获取的属性名。
receiver
Proxy或者继承Proxy的对象

handler.set()方法是设置属性值操作的捕获器。
语法
const p = new Proxy(target, {
  	set: function(target, property, value, receiver) {
  	}
});
参数

target
目标对象。
property
将被设置的属性名或 Symbol。
value
新属性值。
receiver
最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）。

相关标签： js javascript Proxy defineProperty 数据绑定 js 代理

上一篇： Active Record: Sexy migrations

下一篇： 寒假每日一题_AcWing1113.红与黑--Java代码

推荐阅读