两种简单的双向数据绑定

最新推荐文章于 2024-05-21 09:59:04 发布

weixin_34138377

最新推荐文章于 2024-05-21 09:59:04 发布

阅读量398

点赞数

文章标签： c/c++ javascript ViewUI

原文链接：https://juejin.im/post/5afd465e6fb9a07a9e4d7067

版权

两种简单的双向数据绑定

一.Object.defineProperty（es5）实现

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

obj：必需。目标对象 prop：必需。需定义或修改的属性的名字 descriptor：必需。目标属性所拥有的特性

描述：

该方法允许精确添加或修改对象的属性。一般情况下，我们为对象添加属性是通过赋值来创建并显示在属性枚举中（for...in 或 Object.keys 方法），但这种方式添加的属性值可以被改变，也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。例如，默认情况下，使用 Object.defineProperty() 增加的属性值是不可改变的。

4.参考：Object.defineProperty

二. proxy（es6）实现

语法： var proxy = new Proxy(target,handle)
参数说明：

target：必需。目标对象，可以为一个空对象即（target={}），也可以是一个含有属性和方法的对象（target={foo:1,bar:2}）； handle：必需。实际运行的处理方法，Proxy的handle一共有13种方法，以最简单常用的get/set方法为例。

描述：

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

4.参考：proxy

三.既然简单，那就上代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>双向数据绑定</title>
</head>

<body>
	<div>
		<h1>双向数据绑定</h1>
		<h2>1.Object.defineProperty</h2>
		<input type="text" name="textInput1">
		<input type="text" name="textInput1">
		<span id="infoShow1"></span>
	</div>
	<div>
		<h2>2.es6 proxy</h2>
		<input type="text" name="textInput2">
		<input type="text" name="textInput2">
		<span id="infoShow2"></span>
	</div>

	<script type="text/javascript">
		// 1.Object.defineProperty
		var infoShow1 = document.getElementById('infoShow1'),
			textInputs1 = document.getElementsByName('textInput1');

		var obj1 = {
			name: 'caoyx'
		};
		Object.defineProperty(obj1, 'newName', {
			get: function () {
				return this.name;
			},
			set: function (newValue) {
				this.name = newValue;
			}
		});
		function show1() {
			infoShow1.innerText = obj1.name;
			textInputs1[0].value = obj1.name;
			textInputs1[1].value = obj1.name;
		}
		// init
		show1();
		// change
		textInputs1.forEach(function (item) {
			item.addEventListener('input', function () {
				obj1.newName = this.value;
				show1();
			});
		});

		// 2.es6 proxy
		var infoShow2 = document.getElementById('infoShow2'),
			textInputs2 = document.getElementsByName('textInput2');
		var nameProxy = new Proxy({
			name: 'cyx'
		}, {
			get: function (target, key, value) {
				return target[key];
			},
			set: function (target, key, value) {
				target[key] = value;
			}
		});
		function show2() {
			infoShow2.innerText = nameProxy.name;
			textInputs2[0].value = nameProxy.name;
			textInputs2[1].value = nameProxy.name;
		};
		// init
		show2();
		// change
		textInputs2.forEach(function (item) {
			item.addEventListener('input', function () {
				nameProxy.name = this.value;
				show2();
			});
		});

	</script>
</body>

</html>
复制代码

484很好玩！！！

转载于:https://juejin.im/post/5afd465e6fb9a07a9e4d7067

weixin_34138377

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
两种简单的双向数据绑定

两种简单的双向数据绑定一.Object.defineProperty（es5）实现语法： Object.defineProperty(obj, prop, descriptor)参数说明：obj：必需。目标对象prop：必需。需定义或修改的属性的名字descriptor：必需。目标属性所拥有的特性描述：该方法允许精确添加或修改对象的属性。一般情况下，我们为...
复制链接

扫一扫