码迷,mamicode.com
首页 > 其他好文 > 详细

TypeScript之defineProperty实现数据绑定

时间:2020-04-13 22:42:15      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:cal   prope   OLE   string   最大   简单   return   call   jpg   

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

标签:cal   prope   OLE   string   最大   简单   return   call   jpg   

原文地址:https://blog.51cto.com/aonaufly/2487010

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!