一、简介
MVVM借鉴了MVC，成为了前端非常流行的软件架构模式。在MVVM中，
- View职责：简单理解为界面
- Model职责：简单理解为数据
- ViewModel职责：
1.把Model的数据同步到View显示出来，
2.把View的修改同步回Model
二、例子
这里代码讨论如何做到 把Model的数据同步到View显示出来，如下图：
view部分：一个p元素
mode部分：变量model
viewModel部分：Object.defineProperty以及render函数处理
其他：利用setInterval定时器模拟数据变化(每秒)
<!DOCTYPE html>
<html>
<div id="container">
<!-- view 部分 (model.text表示取model.text的数据) -->
<p id="p" data="{{model.text}}"><p>
</div>
<script>
/** model 部分 **/
let model = {
text: '',
}
// 监听model.text数据变化(重点)
Object.defineProperty(model, 'text', {
set: (value) => {
// model.text变化，新的值是value
render() // 重新render p 元素 (把Model的数据同步到View显示出来)
},
get: () => randomStr
})
// 模拟数据变化(每秒)
let randomStr = ''
setInterval(() => {
// 设置一个随机数
randomStr = Math.floor(Math.random() * 10000) + ''
model.text = randomStr
}, 1000)
// DIY 一个render方法：模拟渲染p元素(根据p元素的属性data的模板语法)
const render = () => {
const p = document.querySelector('#container p');
const expression = /\{\{([^{}]*)\}\}/.exec(p.getAttribute('data'))[1]; // model.text
// 根据模板变量，修改p的文本
p.innerText = eval(expression);
}
</script>
</html>
另一部分是把View的修改同步回Model，同理，可以在把view部分换成input，监听输入，改变model.text的值即可。(也就是替换上面代码的setInterval部分，原本是每秒变化，改为用户输入即可)。
（完）
网友评论