baidu-动态数据绑定(1)

　　　　　function Event() {
            this.events = {};
        }

        Event.prototype.on = function(attr, callback) {
            if(this.events[attr]) {
                this.events[attr].push(callback);
            } else {
                this.events[attr] = [callback];
            }
        }

        Event.prototype.off = function(attr) {
            for(let key in this.events) {
                if(this.events.hasOwnProperty(key) && key === attr) {
                    delete this.events[key];
                }
            }
        }

        Event.prototype.emit = function(attr, ...arg) {
            this.events[attr] && this.events[attr].forEach(function(item) {
                item(...arg);
            })
        }
            // 观察者构造函数
        function Observer(data) {
            //暂不考虑数组
            this.data = data;
            this.makeObserver(data);
            this.eventsBus = new Event();
        }

        Observer.prototype.setterAndGetter = function(key, val) {
            let _this = this;
            Object.defineProperty(this.data, key, {
                enumerable: true,
                configurable: true,
                get: function() {
                    console.log('你访问了' + key);
                    return val;
                },
                set: function(newVal) {
                    console.log('你设置了' + key);
                    console.log('新的' + key + '=' + newVal);
                    //触发$watch函数
                    _this.eventsBus.emit(key, val, newVal);
                    val = newVal;
                    //如果newval是对象的话
                    if(typeof newVal === 'object') {
                        new Observer(val);
                    }
                }
            })
        }

        Observer.prototype.makeObserver = function(obj) {
            let val;
            for(let key in obj) {
                if(obj.hasOwnProperty(key)) {
                    val = obj[key];
                    //深度遍历
                    if(typeof val === 'object') {
                        new Observer(val);
                    }
                }
                this.setterAndGetter(key, val);
            }
        }

        Observer.prototype.$watch = function(attr, callback) {
            this.eventsBus.on(attr, callback);
        }

        let app = new Observer({
            name: 'liujianhuan',
            age: 25,
            company: 'Qihoo 360',
            address: 'Chaoyang, Beijing'
        })

        app.$watch('age', function(oldVal, newVal) {
            console.log(`我的年龄变了，原来是: ${oldVal}岁，现在是：${newVal}岁了`)
        })

        app.$watch('company', function(oldVal, newVal) {
            console.log(`啊啊啊啊啊`)
        })

 

 

转载于:https://www.cnblogs.com/xianyuyuyu/p/6524301.html