Js实现双向绑定

Dc弟弟菜

已于 2022-11-08 19:01:53 修改

阅读量270

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-11-08 19:00:48 首次发布

本文链接：https://blog.csdn.net/weixin_46626037/article/details/127756516

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		输入姓名：<input type="text" class="name">
		<br>
		输入年龄：<input type="text" class="age">
		<div>
			<p>姓：<span></span> </p>
			<p>名：<span></span> </p>
			<p>年龄：<span></span> </p>
		</div>
		<script src="./js/model.js"></script>
		<script>
			// Dom元素对象
			var doms = {
				// 获取所有span标签
				sp: document.querySelectorAll('span'),
				// 获取姓名输入框元素
				name: document.querySelector('.name'),
				// 获取年龄输入框元素
				age: document.querySelector('.age')
			}
			// 用户信息对象
			var user = {
				name: '张三',
				age: 18
			}
			// 监听输入框变化
			doms.name.addEventListener('change',function(){
				// 将输入框内容赋值给user对象
				user.name = this.value
			})
			doms.age.addEventListener('change',function(){
				user.age = this.value
			})
			// 用upDate方法，为对象的每一个属性添加get和set方法
			upDate(user)
			// 用getFunc方法执行函数，获取依赖属性的函数
			getFunc(setFirstName)
			getFunc(setLastName)
			getFunc(setAge)
			// setFirstName()
			// setLastName()
			// setAge()
			// 设置姓
			function setFirstName(){
				doms.sp[0].innerText = user.name.substr(0,1)
			}
			// 设置名
			function setLastName(){
				doms.sp[1].innerText = user.name.substr(1)
			}
			// 设置年龄
			function setAge(){
				doms.sp[2].innerText = user.age
			}
		</script>
	</body>
</html>

// 传入对象
function upDate(obj){
	// 遍历对象的每一个属性
	for(const key in obj ){
		// 获取对象的值
		let internalValue = obj[key]
		// 存放依赖该属性的方法
		let funcList = []
		Object.defineProperty(obj,key,{
			// 获取该属性时执行的函数
			get(){
				// 判断是否有函数使用了该属性和函数列表是否已经存在此函数
				if(window._foo && !funcList.includes(window._foo)){
					// 将函数放入函数数组
					funcList.push(window._foo)
				}
				// 返回该属性的值
				return internalValue
			},
			// 设置该属性时执行的方法：参数是设置的新值
			set(val){
				// 将属性的值变为新值
				internalValue = val
				// 循环遍历执行每一个依赖该属性的函数
				for (var i = 0; i < funcList.length; i++) {
					funcList[i]()
				}
			}
		})
	}
}
// 搜集依赖属性的函数
function getFunc(fn){
	// 将函数赋值给window全局变量
	window._foo = fn
	// 执行函数
	fn()
	// 将全局变量设置为null
	window._foo = null
}