数据监听的简单实现

复习前端犀牛书,看到了订阅者发布者模式;有感而发,谢了一个小demo,实现了简单的数据监听

function Observer(data) {
    this.data = data;
    this.addMethod(data);
}

Observer.prototype.addMethod = function (obj) { // 枚举传入对象的所有属性
    var val = null;
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            val = obj[i];
            typeof obj[i] === 'object' ? new Observer(obj[i]) : null; // 如果是引用类型,递归
            this.convert(val, i);
        }
    }
};

Observer.prototype.convert = function (value, key) { // 对属性进行配置
    Object.defineProperty(this.data, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            return value;
        },
        set: function (newValue) {
            if (newValue === value) return false; // 忽略不改变值的赋值操作
            if ('' === newValue) { // 空值一律赋值为undefined
               value = undefined;
            } else {
               value = newValue;
            }
            emitFn(key, newValue); // 值改变的后续操作
        },
    })
};

function emitFn(key, value) {
    emitFNObj[key](value)
}

var emitFNObj = {
    name: function (value) { // name属性改变后触发
        alert('name is change to ' + value);
    },
};

var app = new Observer({ // 实例化
    name: undefined,
});

app.data.name = 'Eric'; // 触发弹窗

吐个槽,这个富文本好难受啊,复制粘贴的时候,还有空格