TypeScript之defineProperty实现数据绑定

一:绑定类

class CommonTools {
    public static watch<T>(obj: Object, name: string, callback: ($data: T) => void, init: boolean = true): void {
        let $value: T = obj[name] as T;
        Object.defineProperty(obj, name, {
            get() { return $value },
            set($newValue) {
                if ($value != $newValue) {
                    $value = $newValue;
                    callback($value);
                }
            }
        });
        init && callback($value);
    }
}

二:测试

class M {
    private k: number = 10;
}

window["a"] = new M();
CommonTools.watch<number>(window["a"], "k", ($data: number) => {
    console.log(`aaaa : ${$data}`);
}, true);
window["a"].k = 12;

CommonTools.watch<number>(window["a"], "k", ($data: number) => {
    console.log(`bbb : ${$data}`);
}, true);
window["a"].k = 13;

三: 结果

TypeScript之defineProperty实现数据绑定

四:结论

此种方案非常简单, 但是只能由一个观察者(这是最大的坑)

上一篇:定时器的应用 盒子的移动


下一篇:优化用户体验