微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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实现数据绑定

四:结论

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐