上面代码中加入MVVM思想
时间: 2023-05-28 20:03:52 浏览: 78
以下是加入MVVM思想的代码:
// Model
class UserModel {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// ViewModel
class UserViewModel {
constructor(model) {
this.model = model;
}
get name() {
return this.model.name;
}
set name(name) {
this.model.name = name;
}
get age() {
return this.model.age;
}
set age(age) {
this.model.age = age;
}
}
// View
const nameInput = document.getElementById('name-input');
const ageInput = document.getElementById('age-input');
const submitButton = document.getElementById('submit-button');
const result = document.getElementById('result');
// ViewModel initialization
const userModel = new UserModel('', '');
const userViewModel = new UserViewModel(userModel);
// Bind ViewModel to View
nameInput.value = userViewModel.name;
nameInput.addEventListener('input', (event) => {
userViewModel.name = event.target.value;
});
ageInput.value = userViewModel.age;
ageInput.addEventListener('input', (event) => {
userViewModel.age = event.target.value;
});
submitButton.addEventListener('click', () => {
result.innerHTML = `Name: ${userViewModel.name}, Age: ${userViewModel.age}`;
});
// End of code.
在这里,我们将模型(Model)和视图(View)之间的交互通过一个视图模型(ViewModel)来实现。视图模型是一个中介层,它包装了模型,并提供了一些属性和方法来访问和修改模型。视图模型与视图之间的交互是通过数据绑定来实现的,这样就可以避免直接操作DOM元素,从而提高了代码的可维护性和可测试性。
在这个例子中,我们将用户输入绑定到了视图模型中的属性,当用户输入发生变化时,视图模型会自动更新模型中的数据。当用户提交表单时,视图模型会将模型中的数据渲染到视图中。这种方式使得代码更加清晰、易于维护,同时也可以避免一些常见的错误。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)