1. 原生 JavaScript 实现数据双向绑定

题目：原生 js 实现一个简单的 input 和 数据 obj.inputVal 的实时双向绑定,#inputShow 中显示数据变动

1.1 使用事件绑定和 setInterval( ) 定时对比数据是否更新

HTML

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>MVVM</title>
	</head>

	<body>
		<input id="dataInput" type="text" />
		<p id="inputShow"></p>
	</body>
</html>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

let obj = {
	inputVal: ''
};
var paragraph = document.getElementById('inputShow');
var input = document.getElementById('dataInput');
input.addEventListener('input', () => {
	clearInterval(tipInterval);
	stopInterval();
	paragraph.innerText = input.value;
	updateModelValue(input.value);
	console.warn(obj.inputVal);
	startInterval();
});

var interval,
	inputValueCopy = input.value;
function startInterval() {
	interval = setInterval(() => {
		if (inputValueCopy != obj.inputVal) {
			updateTemplateValue(obj.inputVal);
		}
	}, 1);
}
function stopInterval() {
	clearInterval(interval);
}
function updateTemplateValue(val) {
	input.value = val;
	paragraph.innerText = val;
}
function updateModelValue(val) {
	obj.inputVal = val;
	inputValueCopy = val;
}

startInterval();

//忽略以下代码
var tipArr = '请在此键入一些内容来体验数据双向绑定';
var index = 0;
var tipInterval = setInterval(() => {
	obj.inputVal += tipArr.charAt(index);
	index += 1;

	if (index == tipArr.length + 1) {
		index = 0;
		obj.inputVal = '';
	}
}, 500);