- M model 模型
起到连接服务器,和商业逻辑的形成 - V view 视图
前端的 HTML, CSS 和 与 HTML CSS 有关的JS代码 - VM view model 视图的模型 (模型与视图的连接者)
- P presenter 展示器
展示作用, 部分控制 - C controller 控制器
主体控制。比如读取 M 的数据,然后插入一个模块到 V 视图里 -
W whatever 随意
不分的那么具体。更为灵活。 由于我们本身使用大量框架和库,强制分离某些功能导致开发过程极其缓慢。
- 简单的说,ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。
- mvc(vm)框架都实现了单向数据绑定,双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。
Vue.js双向绑定的实现原理
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
function MVVM(options) {
this.$options = options;
var data = this._data = this.$options.data, me = this;
// 属性代理,实现 vm.xxx -> vm._data.xxx
Object.keys(data).forEach(function(key) {
me._proxy(key);
});
observe(data, this);
this.$compile = new Compile(options.el || document.body, this)
}
MVVM.prototype = {
_proxy: function(key) {
var me = this;
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
get: function proxyGetter() {
return me._data[key];
},
set: function proxySetter(newVal) {
me._data[key] = newVal;
}
});
}
};