基于 getter 和 setter 撸一个简易的MVVM
Angular 和 Vue
在对Angular的学习中,了解到AngularJS 的两个主要缺点:
- 对于每一次界面时间,Ajax 或者 timeout,都会进行一个脏检查,而每一次脏检查又会在内部循环检查,当界面绑定的model 很多,就会造成严重的性能问题 。
- Angular 混乱的模块，并不能起到命名空间的作用，因而在大项目中组织模块又是一件头疼的事。
但是 Angular 开发中小型的应用是很棒的，也是将 MVC 引入到前端的开始。定一个目标，两年时间理解 《Build Your Own AngularJS》。
Vue 抛弃了Angular 中脏检查的方式，而使用 Javascript 中变量的setter 属性来截获数据变化，更加巧妙和机智。
在 MVVM 时代，浏览器自身属性变得更加重要起来。getter 和 setter 曾被认为是一个无太大用处的一个属性。
为了较为深入的理解 Vue， 自己撸了一个简易版 MVVM 。 先看效果吧 。
<input type="text" v-model="hello" value="">
<div id="template">
{{hello}}
</div>
<div class="template">
{{bind}}
</div>
<script src="app.js"></script>
var vue = new Vue({
ele: '#template',
});
var vue1 = new Vue({
ele: '.template',
data: {
bind: 'hey i am a vue lover'
}
})
开撸开撸
若有关于 getter 和 setter 问题 ，请先移步 MDN 。
申明Vue 对象
function Vue(option) {
this.init(option);
}
初始化
Vue.prototype.init = function(option) {
this._data = option.data || {};
this._method = option.method || {};
this.bingdings = {};
this.elements = typeof option.ele === "string" ? document.querySelectorAll(option.ele) : option.ele;
this.bind();
this.observe();
this.react();
this.initMvvM();
}
将界面上的模型数据绑定到后台
Vue.prototype.bind = function() {
for (var i = 0, length = this.elements.length; i < length; i++) {
var ele = this.elements[i],
html = ele.innerHTML,
spans, span, dataAttr;
html = html.replace(/\{\{(.*?)\}\}/g, function(a, b) {
var span = '<span v-data="' + b + '"></span>';
return span;
})
ele.innerHTML = html;
spans = ele.querySelectorAll('[v-data]');
for (var j = 0, l = spans.length; j < l; j++) {
span = spans[j];
dataAttr = span.getAttribute('v-data');
if (!this.bingdings[dataAttr]) {
this.bingdings[dataAttr] = { value: this._data[dataAttr] || '', ele: [] };
}
this.bingdings[dataAttr].ele.push(span);
span.innerHTML = this.bingdings[dataAttr].value;
span.removeAttribute('v-data');
}
}
}
// 核心部分，使用 setter 观测 _data
Vue.prototype.observe = function() {
var self = this,
eles;
for (var key in self.bingdings) {
Object.defineProperty(self._data, key, {
get: function() {
return self.bingdings[key].value;
},
set: function(newVal) {
if (newVal !== self.bingdings[key].value) {
self.bingdings[key].value = newVal;
eles = self.bingdings[key].ele;
for (var i = 0, l = eles.length; i < l; i++) {
eles[i].innerHTML = newVal;
}
}
}
})
}
}
到这里，_data_ 的赋值已经可以引起界面上dom 的变化。也就是说完成了 model 到view 的数据绑定和响应。
现在来完成 dom 到 view 的事件响应。
Vue.prototype.initMvvM = function() {
var self = this;
var models = document.querySelectorAll('[v-model]'),
model, dataModel;
for (var i = 0, l = models.length; i < l; i++) {
model = models[i];
dataModel = model.getAttribute('v-model');
self._data[dataModel] = model.value;
}
}
// 事件响应
Vue.prototype.react = function() {
var self = this;
var models = document.querySelectorAll('[v-model]'),
model, dataModel;
for (var i = 0, l = models.length; i < l; i++) {
model = models[i];
model.addEventListener('change', function(e) {
dataModel = this.getAttribute('v-model');
self._data[dataModel] = this.value;
})
model.addEventListener('keyup', function(e) {
dataModel = this.getAttribute('v-model');
self._data[dataModel] = this.value;
})
}
}
最后，更新init 函数。
Vue.prototype.init = function(option) {
this._data = option.data || {};
this._method = option.method;
this.bingdings = {};
this.elements = typeof option.ele === "string" ? document.querySelectorAll(option.ele) : option.ele;
this.bind();
this.observe();
this.react();
this.initMvvM();
}
总结
大功告成。
但是相比与真正的Vue还是差了很多，比如 这里的数据绑定仅支持基本类型，函数绑定也没有完成。在Vue 中，每一个监控的属性都会设置依赖，从而陷入避免和 Angular 中一样的循环检查。
另外，在Vue中，数据模版并不是这样使用插入一个span，而是创建一个 文本节点，然后append 到当前父元素上。
这只是一个简易版的，把所有的部分都放在Vue上，非常不合适。 后面会进行重构，把数据监控使用订阅和发布模式封装。
在这之前，需要进行模块化和依赖注入，所以，接下来要完成一个简易的requirejs，会提供三个api ,define, require 和 use。
代码托管到了 github(但是今天的网速不好,改天补充.),
如有错误，希望不吝赐教。
如果您有合适的前端工资机会，也期待您的邮件。
