MVC
MVC 是 Model View Controller 的缩写
-
Model：模型层，数据相关的操作
-
View：视图层，用户界面渲染逻辑
-
Controller：控制器，数据模型和视图之间通信的桥梁
view
<div> <span id="container">0</span> <button id="btn">+</button> </div>model
function add (node) { // 业务逻辑处理 const currentValue = parseInt(node.innerText); const newValue = currentValue + 1; // 更新视图 node.innerText = current + 1; }controller
const button = document.getElementById('btn'); // 响应视图指令 button.addEventListener('click', () => { const container = document.getElementById('container'); // 调用模型 add(container); }, false);
MVVM
MVVM 可以写成 MV-VM，是 Model View - ViewModel 的缩写，ViewModel 把 View 和 Model 做了自动关联，框架替应用开发者实现数据变化后的视图更新
view
<div id="test">
<!-- 数据和视图绑定 -->
<span>{{counter}}</span>
<button v-on:click="counterPlus">+</button>
</div>
model
function add (num) {
return num + 1;
}
viewmodel
new Vue({
el: '#test',
data: {
counter: 0
},
methods: {
counterPlus: function () {
// 只需要修改数据，无需手工修改视图
this.counter = add(this.counter);
}
}
})
- Observer 监听器：用来监听属性的变化通知订阅者
- Watcher 订阅者：收到属性的变化，然后更新视图
- Compile 解析器：解析指令，初始化模版，绑定订阅者