一、原理
- 双向数据绑定：数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
- 实现方法：通过Object.defineProperty()方法来实现；
Object.defineProperty()方法(JavaScript高级程序设计第三版P139)：
Object.defineProperty()这个方法接受三个参数 属性所在的对象，属性的名字以及一个描述符对象.
let book = {
_year: 2004,
edition: 1
}
Object.defineProperty(book, 'year', {
get: function() {
console.log('调用了get方法');
return this._year;
},
set: function(newvalue) {
if (this._year !== newvalue) {
console.log('调用了set方法');
this._year = newvalue;
this.edition += 1;
}
}
});
book.year; // 调用了get方法
book.year = 2021; // 调用了set方法二、双向数据绑定1.0
function Bind(options) {
this.el = options.el;
this.data = options.data;
getNode(this.el, this.data);
}
function getNode(el, data) {
let inputs = document.querySelector(el);
let children = inputs.children;
for (let i = 0; i < children.length; i++) {
compile(data, children[i]);
}
}
function compile(obj, data) {
let key = node.getAttribute('v-model');
define(data, key, data[key]);
}
function define(obj, key, val) {
Object.defineProperty(obj, key, {
get: function() {
return val;
},
set: function(newvalue) {
if (val !== newvalue) {
val = newvalue;
document.getElementsByClassName('insert')[0].innerHTML = newvalue;
}
}
})
}
let inputs = document.getElementsByTagName('input');
let vm = new Bind({
el: '#app',
data: {
name: '',
age: ''
}
});
function input1() {
vm.data.name = inputs[0].value;
}
function input2() {
vm.data.age = inputs[1].value;
}
这段代码虽然实现了实现了双向数据绑定，但也仅仅只是实现了这个功能，它还存在许多bug
比如：
- 代码整体看上去很混乱，并且复用性不强；
- 使用的是函数的方法来定义Bind，所以编写代码的时候就需要时时考虑this的指向问题；
- 在Bind()函数里面，如果options里面没有el这个属性，那么this.el就为null，后面在获取标签的时候也获取不了，后面也会跟着出错；compile()函数里面也没有判断key是否存在等等；
- 在input标签里面添加oninput事件来获取输入的数据；
......
三、双向数据绑定2.0
改进：
- 使用class来定义Bind；
- 使用 || 来防止参数options里面不存在el，data这些数据；
- 通过使用addEventListener来添加事件，并且考虑了兼容问题；
- 为Bind添加了errorList数组来记录绑定时和绑定之后的错误；
- 通过创建一个BindError对象，并采用轮询的方法，来对Bind进行监听；
index.js
class Bind {
constructor(options) {
this.el = options.el || "";
this.data = options.data || {};
this.errorList = [];
this.getNode();
}
getNode() {
this.rootNode = document.querySelector(this.el);
const children = this.rootNode ? Array.prototype.slice.call(this.rootNode.children) : [];
children.forEach((child) => {
this.complie(child);
})
}
complie(node) {
const key = node.getAttribute('v-model');
if (key) {
this.addEvent(node, 'input', (e) => {
const { value = 'error' } = e.target;
this.data[key] = value;
});
this.define(this.data, key, this.data[key]);
} else {
var div = document.createElement('div');
div.appendChild(node)
this.errorList.push(`${div.innerHTML} doesn't have attribute v-model! `);
}
}
addEvent(node, type, handler) {
if (node.addEventListener) {
node.addEventListener(type, handler)
} else if (node.attachEvent) {
node.attachEvent('on' + type, handler)
} else {
node[type] = null;
}
}
define(obj, key, val) {
Object.defineProperty(obj, key, {
get: function () {
return val;
},
set: function (newvalue) {
if (newvalue !== val) {
val = newvalue;
document.getElementsByClassName('insert')[0].innerHTML = val;
}
}
});
}
}
var error = new BindError();
var vm = new Bind({
el: '#app',
data: {
name: '',
age: ''
}
})
error.addListenerList(vm);error.js
class BindError {
constructor() {
this.listenerList = [];
}
addListenerList(obj) {
this.listenerList.push(obj);
}
interval = setInterval(()=>{
this.listenerList.forEach((obj)=>{
var { errorList } = obj;
var error = errorList.pop();
if(error){
throw new Error(error);
}
})
},1000);
}不足：使用轮询，容易造成资源浪费
双向数据绑定3.0
改进：不适用轮询，使用es6的Proxy来对Bind里面的errorList进行一个拦截；
class Bind {
constructor(options) {
this.el = options.el || "";
this.data = options.data || {};
this.errorList = new Proxy([], {
set(target, prop, value) {
Reflect.set(target, prop, value);
throw new Error(value);
}
});
this.getNode();
}
getNode() {
this.rootNode = document.querySelector(this.el);
const children = this.rootNode ? Array.prototype.slice.call(this.rootNode.children) : [];
children.forEach((child) => {
this.complie(child);
})
}
complie(node) {
const key = node.getAttribute('v-model');
if (key) {
this.addEvent(node, 'input', (e) => {
const { value = 'error' } = e.target;
this.data[key] = value;
});
this.define(this.data, key, this.data[key]);
} else {
var div = document.createElement('div');
div.appendChild(node)
this.errorList.push(`${div.innerHTML} doesn't have attribute v-model! `);
}
}
addEvent(node, type, handler) {
if (node.addEventListener) {
node.addEventListener(type, handler)
} else if (node.attachEvent) {
node.attachEvent('on' + type, handler)
} else {
node[type] = null;
}
}
define(obj, key, val) {
Object.defineProperty(obj, key, {
get: function () {
return val;
},
set: function (newvalue) {
if (newvalue !== val) {
val = newvalue;
document.getElementsByClassName('insert')[0].innerHTML = val;
}
}
});
}
}
var vm = new Bind({
el: '#app',
data: {
name: '',
age: ''
}
})