databinding 双向绑定demo 双向数据绑定代码

vue中v-module双向数据绑定理解：我们可以简单分为四个过程

　　实现一个监听器Observer：对数据对象进行遍历，包括子属性对象的属性，利用Object.definePropery()对属性都加上setter和getter。这样的话，给这个对象的每个值赋值，就回触发setter，那么就能监听到数据变化。

 

　　实现一个解析器Compile：解析Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

 

　　实现一个订阅者Watcher：Watcher订阅者是Observer和Compile之间的通信桥梁，主要的任务是订阅Observer中的属性值变化的消息，当收到属性变化的消息时，触发解析器Compile中对应的更新函数。

 

　　实现一个订阅器Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者Watcher，对监听器Observer和订阅者Watcher进行统一管理。　

　　　　

js代码：

class Dep{
　　constructor() {
　　this.listenFunc = []
　　}
　　addFunc(obj) {
　　　　this.listenFunc.push(obj);
　　}
　　changeWatch() {
　　　　this.listenFunc.forEach(val => {
　　　　　　val.sendVal()
　　　　})
　　}
}
 
Dep.target = null;
const dep = new Dep()
 
class Watcher{
　　constructor(data, key, cbk) {
　　// 每一次实例watcher的时候，均会把当前实例赋值给Dep的target静态属性
　　Dep.target = this;
　　this.data = data;
　　this.key = key;
　　this.cbk = cbk;
　　// 每一次的实例都会调用该函数
　　this.init()
　　}
　　// 获取对应key的值
　　init() {
　　　　// 获取对应key的值
　　　　this.value = utils.getValue(this.data, this.key);
　　　　Dep.target = null;
　　　　return this.value;
　　}
　　sendVal() {
　　　　let newVal = this.init()
　　　　this.cbk(newVal)
　　}
}
 
class Observer{
　　constructor(data) {
　　　　if (!data || typeof data !== 'object') {
　　　　　　return;
　　　　}
　　　　this.data = data;
　　　　this.init()
　　}
　　init() {
　　　　Object.keys(this.data).forEach(val => {
　　　　　　this.observer(this.data, val, this.data[val])
　　　　})
　　}
　　observer(obj, key, value) {
　　　　// 通过递归实现每个属性的数据劫持
　　　　new Observer(obj[key])
　　　　Object.defineProperty(obj, key, {
　　　　　　// 添加劫持之后的属性获取方法
　　　　　　get() {
　　　　　　　　if (Dep.target) {
　　　　　　　　　　// 给dep实例属性listenFunc添加一个watcher实例
　　　　　　　　　　dep.addFunc(Dep.target)
　　　　　　　　}
　　　　　　　　return value
　　　　　　},
　　　　　　// 添加劫持之后的属性设置方法
　　　　　　set(newValue) {
　　　　　　　　if (value === newValue) {
　　　　　　　　　　return;
　　　　　　　　}
　　　　　　　　value = newValue;
　　　　　　　　// 触发每一个listenFunc里面的watcher实例
　　　　　　　　dep.changeWatch();
　　　　　　　　// 为了兼容新值为一个对象的时候，该对象的属性也得添加劫持
　　　　　　　　new Observer(value);
　　　　　　}
　　　　})
　　}
}
 
const utils = {
　　setValue(node, data, key) {
　　　　node.value = this.getValue(data, key)
　　},
　　getValue(data, key) {
　　　　if (key.indexOf('.') > -1) {
　　　　　　let arr = key.split('.');
　　　　　　for(let i = 0; i < arr.length; i++) {
　　　　　　　　data = data[arr[i]]
　　　　　　}
　　　　　　return data
　　　　} else {
　　　　　　return data[key]
　　　　}
　　},
　　getContent(node, key, data) {
　　　　node.textContent = this.getValue(data, key)
　　},
　　// 2.在input事件发生之后，改变对应的属性值
　　changeKeyVal(data, key, newVal) {
　　　　if (key.indexOf('.') > -1) {
　　　　　　let arr = key.split('.');
　　　　　　for(let i = 0; i < arr.length - 1; i++) {
　　　　　　　　data = data[arr[i]]
　　　　　　}
　　　　　　data[arr[arr.length - 1]] = newVal
　　　　} else {
　　　　　　data[key] = newVal
　　　　}
　　}
}
 

// 实现双向数据绑定
class Mvvm{
    　　constructor({el, data}) {
        　　　　this.el = el;
        　　　　this.data = data;
        　　　　// 初始化执行数据绑定实例对象的过程（以及数据劫持）
        　　　　this.init();
        　　　　// 替换文本中的属性为真实的数据
        　　　　this.initDom();
    　　}
    　　init() {
        　　　　Object.keys(this.data).forEach(val => {
            　　　　　　this.observer(this, val, this.data[val])
        　　　　})
        　　　　// 给当前数据集合的每一个属性添加劫持
        　　　　new Observer(this.data)
    　　}
    　　observer(obj, key, value) {
        　　　　Object.defineProperty(obj, key, {
            　　　　　　get() {
                　　　　　　　　return value
            　　　　　　},
            　　　　　　set(newValue) {
                　　　　　　　　value = newValue
            　　　　　　}
        　　　　})
    　　}
    　　initDom() {
        　　　　this.$el = document.getElementById(this.el);
        　　　　// 文本碎片--> 避免因为操作DOM而导致浏览器的多次重绘（操作完成之后可把整个碎片添加进去，浏览器课一并识别渲染）
        　　　　let newFargment = this.createFragment();
        　　　　// 根据nodeType来替换对应的属性值
        　　　　this.compiler(newFargment);
        　　　　this.$el.appendChild(newFargment);
    　　}
    　　createFragment() {
        　　　　let newFragment = document.createDocumentFragment();
        　　　　let firstChild;
        　　　　while(firstChild = this.$el.firstChild) {
            　　　　　　newFragment.appendChild(firstChild);
        　　　　}
        　　　　return newFragment;
    　　}
    　　compiler(node) {
        　　　　if (node.nodeType === 1) {
            　　　　　　let attributes = node.attributes;
            　　　　　　Array.from(attributes).forEach(val => {
                　　　　　　　　if (val.nodeName === 'v-model') {
                    　　　　　　　　　　// 1.捕捉input输入框的修改事件
                    　　　　　　　　　　node.addEventListener('input', (e) => {
                        　　　　　　　　　　　　utils.changeKeyVal(this.data, val.nodeValue, e.target.value)
                    　　　　　　　　　　})
                    　　　　　　　　　　utils.setValue(node, this.data, val.nodeValue)
                　　　　　　　　}
            　　　　　　})
        　　　　} else if (node.nodeType === 3) {
            　　　　　　let contentVal = node.textContent.indexOf("{{") > -1 && node.textContent.split('{{')[1].split('}}')[0];
            　　　　　　contentVal && utils.getContent(node, contentVal, this.data);
            　　　　　　// 添加属性监听
            　　　　　　contentVal && new Watcher(this.data, contentVal, (newVal) => {
                　　　　　　　　node.textContent = newVal
            　　　　　　})
        　　　　}
        　　　　// 通过递归的形式保证每一级的文本都可获取到并替换
        　　　　if (node.childNodes && node.childNodes.length > 0) {
            　　　　　　node.childNodes.forEach(val => {
                　　　　　　　　this.compiler(val)
            　　　　　　})
        　　　　}
    　　}
}