vue---------Observer,Watcher,hsVue的封装

Observer-----------------订阅者,发布者

//订阅者搜集器  彩票站  watcher 是不是西相当 买彩票的人
function Dup() {
    //sub  wacther
    this.subs = [];
}
Dup.prototype = {
    add(sub){   //添加 订阅者
        this.subs.push(sub);
    },
    notify(){   //告诉你们 该更新  通知订阅者 跟新信息
        this.subs.map(function (sub, index) {
            console.log(sub);
            sub.update(); //每一个 watcher 是不是都要有一个  update
        })
    }
};

//发布者
function Observer(data){   //这里 data 必须是一个 object
    // null  0 false  ！  true  return
    if(typeof data !== 'object' || !data) return;
    //遍历数据  监听不同 key
    for(let key in data){
        let val = data[key];
        hsDefineProperty(data,key,val)
    }
}

function hsDefineProperty(data,key,val) {
    // arr val就是一个对象{}  aa    null {}
    Observer(val);  //递归
    let dup = new Dup();
    Object.defineProperty(data,key,{
        enumerable: true,
        configurable: true,
        set(nVal){   //重新设置 这个指定的属性的值  ---》触发set
            let oVal = val;
            if(nVal === oVal){
                console.log('数据一致 没有变化');
                return ;
            }
            val = nVal;
            //变化了把  通知所有用这个值的  Watcher 变化了
            dup.notify();
        },
        get(){   //一旦使用这个指定的属性的 值  ---》触发get
            //这里是不是代表 使用 数据  一旦使用就该新增一个 sub
            if(Dup.target){  //new Watcher  this
                dup.add(Dup.target);
            }
            return val;
        }
    });
}

Watcher

//data  对象
function Watcher(data,key,cb) {

    this.data = data;
    this.key = key;
    this.cb = cb;
    this.value = this.get();  //老值 oVal
}
Watcher.prototype = {
    update(){
        // if(lao zhi ===!  xinxzhi)
        //  data
        // let nVal = this.data[this.key];
        let nVal = this.get();
        let oVal = this.value;
        console.log(oVal,nVal);
        if(oVal !== nVal){   //数据不等 通知更新
            this.value = nVal;
            console.log('aaa');
            this.cb(this.data,nVal,oVal);
        }
    },
    get(){
        //给 集约器上 挂载一个 new Watcher
        Dup.target = this;
        // 会不会 触发 get  this.data[this.key]  === data.name
        let value = this.data[this.key];  //data.name //get
        Dup.target = null;   //回执 清空
        return value;
    }
};

hsVue

function hsVue(options) {
    //el  data
    this.data = options.data;
    this.el = options.el;
    //数据监听起来了
    Observer(this.data);
    //创建一个 订阅者
    var self = this;
    new Watcher(this.data,'name',function (data) {
        console.log('哈哈哈哈',data);
        //更新视图
        document.getElementById(self.el).innerHTML = data.name;
    })
}