MVVM(Model View ViewModel)是一种基于MVC和MVP的架构模式，它试图将用户界面（UI）从业务逻辑和行为中更加清晰地分离出来。
MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="userList">
id: <input type="text" id="id"> <br>
name: <input type="text" id="name"> <br>
age: <input type="text" id="age"> <br>
<button id="add">添加</button>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>operation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
function UserManager(data,table){
this.data = data;
this.table = table;
this.render = function() {
let tbody = this.table.getElementsByTagName("tbody")[0];
if(tbody){
tbody.remove();
}
tbody = document.createElement("tbody");
this.data.forEach((user) => {
let trElement = document.createElement("tr");
for(u in user){
let input = document.createElement("input");
let tdElement = document.createElement("td");
input.value = user[u];
input.name = u;
input.setAttribute("disabled","disabled");
tdElement.appendChild(input);
trElement.appendChild(tdElement);
trElement.addEventListener('dblclick',(e)=>{
input.removeAttribute("disabled");
});
}
let tdButtonElement = document.createElement("td");
//delete
let deleteButton = document.createElement("button");
deleteButton.textContent = "delete";
deleteButton.addEventListener('click',(e)=>{
this.deleteUser(user);
});
tdButtonElement.appendChild(deleteButton);
//update
let updateButton = document.createElement("button");
updateButton.textContent = "update";
updateButton.addEventListener('click',(e)=>{
let inputEles = e.target.parentElement.parentElement.getElementsByTagName("input");
let data = {};
for(let i = 0; i < inputEles.length; i++){
data[inputEles[i].name] = inputEles[i].value;
}
this.updateUser(user,data);
});
tdButtonElement.appendChild(updateButton);
trElement.appendChild(tdButtonElement);
tbody.appendChild(trElement);
});
document.querySelector("#userList table").appendChild(tbody);
};
this.deleteUser = function(u){
let index = this.data.indexOf(u);
this.data.splice(index,1);
this.render();
};
this.addUser = function(u){
this.data.splice(this.data.length,0,u);
this.render();
};
this.updateUser = function (u,data) {
let index = this.data.indexOf(u);
this.data.splice(index,1,data);
this.render();
}
}
window.onload=function () {
let data = [{id: 1, name: 'john', age: 100}, {id: 2, name: 'john', age: 100}, {id: 3, name: 'john', age: 100}];
let userManager = new UserManager(data,document.querySelector("#userList table"));
userManager.render();
let addButton = document.querySelector("#add");
addButton.addEventListener('click',(e) =>{
let u = {id:document.querySelector("#id").value,name: document.querySelector("#name").value, age:document.querySelector("#age").value};
userManager.addUser(u);
})
}
</script>
</body>
</html>这样我们改变JavaScript对象的状态，会导致DOM结构作出对应的变化。这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态。