关于数据绑定
在前端开发中使用MV*模型的时候，M—model，指的是模型，即指的是数据，V—view指的是视图，就是页面展示的部分。
通常所说的数据的双向绑定就是
- model（数据）改变时，view（视图）也会变化
- view（视图）变化时，model（数据）也会变化
本文参考： - 剖析Vue原理&实现双向绑定MVVM
- Vue 双向数据绑定原理分析
关于框架中常用的数据绑定做法
- 发布者-订阅者模式（backcone.js)
- 脏值检测（angular.js）
- 数据劫持（vue.js）
思路整理
vue使用数据劫持+发布者-订阅者模式进行双向数据绑定，其中最核心的方法就是通过Object.defineProperty()实现数据的劫持，达到监听数据的变动的目的。
整理一下vue进行数据绑定的思路：
- 实现一个数据监听器Observer,能够进行数据对象的属性监听和更新。
- 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，并且根据指令进行绑定值的提取。
- 实现一个Watcher作为连接Observer和Compile的桥梁，并可以接受到属性的变动，进行相应属性的更新，从而实现视图的更新。
- 使用Vue入口函数，整合三者。
实现双向绑定
- 入口函数Vue编写
function Vue(options) {//options就是new Vue传递对象参数
this.data = options.data;
this.id = options.el;
Observer(this.data, this);//进行数据劫持和更新
var app = document.getElementById(this.id);//div
var dom = nodeToFragment(app, this);//进行虚拟DOM操作
app.appendChild(dom);//将虚拟DOM插入文档中
}
- 数据劫持函数Observer
function Observer(data, vm) {
Object.keys(data).forEach(function (key) {//循环遍历出每一个值进行数据劫持
defineReactive(vm, key, data[key]);
})
}
function defineReactive(vm, key, val) {
Object.defineProperty(vm, key, {//当数据发生变化时调用set进行更新，获取数据时使用set
get: function () {
return val;
},
set: function (newVal) {
if (newVal === val) {
return;
}
val = newVal;
}
})
return val;
}
- 指令解析函数Compile
function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
Compile(child, vm);
flag.appendChild(child);
}
return flag;
}
function Compile(node, vm) {
var reg = /\{\{(.*)\}\}/;
if (node.nodeType === 1) {
var attr = node.attributes;
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName === 'v-model') {
var name = attr[i].nodeValue;
node.value = vm[name];
node.removeAttribute('v-model');
}
}
}
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1;
node.nodeValue = vm[name];
}
}
}
- node.nodeType
- 元素节点 =1
- 属性节点=2
- 文本节点= 3
- 注释节点= 8
- node.attributes属性
用法：
document.getElementsById("app").attributes;
node.attributes
描述
attributes 属性返回指定节点的属性集合，即 NamedNodeMap。
提示：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。
- 订阅者-发布者模式Watcher
Watcher订阅者作为Observer和Compile之间的桥梁，主要做一下工作：
- 编写属性订阅器Dep，可以调用notice进行Watcher的更新，和添加订阅者
- 自身有一个update()方法
- 当属性调用notice()方法时可以进行调用update()方法
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub);//增加订阅者
},
notify: function () {
this.subs.forEach(function (sub) {
sub.update();
})
}
}
function watcher(vm, node, name, nodeType) {
Dep.target = this;
this.vm = vm;
this.node = node;
this.name = name;
this.nodeType = nodeType;
this.update();
Dep.target = null;
}
watcher.prototype = {
update: function () {
this.get();
if (this.nodeType == 'text') {
this.node.nodeValue = this.value;
}
if (this.nodeType == 'input') {
this.node.value = this.value;
}
},
//获取data中属性
get: function () {
this.value = this.vm[this.name];
}
}
- 最后
- 进行Vue的声明
var App = new Vue({
el: 'app',
data: {
title: 'hello'
}
})
- 在Compile中进行事件触发,以及watcher的调用
node.addEventListener('input', function (e) {
vm[name] = e.target.value;
})
new Watcher(vm, node, name);
- 数据劫持时添加dep
function defineReactive(vm, key, val) {
var dep = new Dep();
Object.defineProperty(vm, key, {
get: function () {
if (Dep.target) {
dep.addSub(Dep.target);
}
return val;
},
set: function (newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
}
})
return val;
}