前端纯原生js数据监控，更新视图
还没完善好，先记录一部分
binding.js
// 定义Model类，用于存储数据和监听数据变化
function Model(value = "") {
this._value = value; // 存储数据的值
this._listeners = []; // 存储监听数据变化的函数
}
// 定义Model类的set方法，用于设置数据的值
Model.prototype.set = function (value) {
this._value = value; // 设置数据的值
// 调用所有的监听函数，通知它们数据已经改变
this._listeners.forEach((listener) => listener.call(this, value));
};
// 定义Model类的get方法，用于获取当前的值
Model.prototype.get = function () {
return this._value;
};
Model.prototype.xixi = function () {
return this._value;
};
// 定义Model类的watch方法，用于添加监听函数
Model.prototype.watch = function (listener) {
this._listeners.push(listener); // 添加监听函数到数组中
};
// 定义View类，用于处理视图的更新
function View(element, model, attribute = "value") {
this._element = element; // 存储DOM元素
this._model = model; // 存储数据模型
this._attribute = attribute; // 存储需要绑定的属性名
// 添加事件监听器，当元素的值改变时，更新数据模型的值
this._element.addEventListener("input", (event) => {
this._model.set(event.target[this._attribute]);
});
// 添加监听函数，当数据模型的值改变时，更新元素的值
this._model.watch((newValue) => {
console.log(newValue);
this._element[this._attribute] = newValue;
});
}
简单实现.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Data Binding</title>
<style>
body {
font-family: Arial, sans-serif;
}
input,
button,
img {
margin-top: 20px;
font-size: 16px;
padding: 10px;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 创建两个输入框和一个按钮 -->
<input id="input1" type="text">
<img id="image1" src="">
<button id="myButton">Click me</button>
<script src="binding.js"></script>
<script>
// 使用方法：
// 创建两个数据模型和两个视图
let model1 = new Model();
let inputElement1 = document.querySelector('#input1');
let view1 = new View(inputElement1, model1);
let model2 = new Model();
let imageElement1 = document.querySelector('#image1');
let view2 = new View(imageElement1, model2, 'src');
// 添加按钮点击事件，当按钮被点击时，改变图片的地址
let buttonElement = document.querySelector('#myButton');
buttonElement.addEventListener('click', function () {
model2.set('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d884628f9d384fc08c1342256a41713f~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1200&h=629&s=325674&e=png&b=fefdfd');
console.log("获取：", model2.xixi());
});
</script>
</body>
</html>
数组循环，点击某行元素触发，修改某行的值事件
<!DOCTYPE html>
<html>
<head>
<title>Array Rendering</title>
<style>
body {
font-family: Arial, sans-serif;
}
.item {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="binding.js"></script>
<script>
// 定义一个1到10的数字数组
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 获取容器元素
let container = document.querySelector('#container');
// 遍历数组，为每个元素创建一个div，并添加到容器中
data.forEach(function (item, index) {
let div = document.createElement('div');
div.textContent = item;
div.className = 'item';
container.appendChild(div);
// 创建一个数据模型和一个视图
let model = new Model(item);
let view = new View(div, model, 'textContent');
// 为div添加点击事件监听器
div.addEventListener('click', function () {
console.log('You clicked on item: ' + model.get());
let newValue = prompt('Enter a new value for this item:');
if (newValue !== null && newValue !== '') {
model.set(newValue);
console.log("新值：", model.get());
}
});
});
</script>
</body>
</html>
