v-mode的实现原理

ベ远行ミ

已于 2022-03-15 15:32:04 修改

阅读量341

点赞数

文章标签： javascript 前端 vue.js

于 2022-03-15 15:31:16 首次发布

本文链接：https://blog.csdn.net/weixin_46463984/article/details/123503755

版权

v-mode的实现原理

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>v-mode的简单实现</title>
	</head>

	<body>
		<div id="app">
			<input id="input" type="text" v-mode="inputVal" />
			<br />
			<span id="span"> </span>
		</div>
	</body>
	<script>
		/***
		 *实现的思路：
		 * m - v   通过查找节点，匹配节点名称，将data中最新的值利用daom设置到网页上显示----->查找指令赋值
		 * v - m  通过监听输入框的事件 拿到最新的值赋值到data中即可--->事件监听
		 *
		 * */

		let data = {
			inputVal: 'v-mode的简单实现',
			age: 15,
		}
		const proxyReative = (data) => {
			observe(data)
			return new Proxy(data, {
				get(target, key) {
					return target[key]
				},
				set(target, key, newVal) {
					if (target[key] === newVal) return
					target[key] = newVal
					compile()
				},
			})
		}

		const observe = (data) => {
			Object.keys(data).forEach((key) => {
				if (typeof data[key] === 'object') {
					data[key] = proxyReative(data[key])
				}
			})
		}
		const vm = proxyReative(data)
		// 获取元素
		const appRef = document.getElementById('app')
		const inputRef = document.getElementById('input')
		const span = document.getElementById('span')
		span.innerText = data.inputVal
		const compile = () => {
			//拿到节点
			const childrenNodes = appRef.childNodes
			// 遍历节点
			childrenNodes.forEach((node) => {
				if (node.nodeType === 1) {
					const arrts = node.attributes
					Array.from(arrts).forEach((arrt) => {
						// console.log(arrt); v-mode="inputVal" nodeName:v-mode  nodeValue:inputVal
						if (arrt.nodeName === 'v-mode') {
							// 更新数据
							console.log('更新了', arrt.nodeValue)
							inputRef.value = data[arrt.nodeValue]
							span.innerText = data[arrt.nodeValue]
						}
					})
				}
			})
		}
		compile()
		// 监听输入框的变化
		inputRef.addEventListener('input', function (e) {
			data.inputVal = e.target.value
			span.innerText = data.inputVal
		})

		 
	</script>
</html>