[Reactive] Run functions when data changes

function observe(obj) {
    for (const key in obj) {
        let internalValue = obj[key];
        const funs = new Set()
        Object.defineProperty(obj, key, {
            configurable: false,
            get: function () {
                if (window.__func) {
                    funs.add(window.__func)
                }
                return internalValue;
            },
            set: function (val) {
                internalValue = val;
                for (let i = 0; i < funs.size; i++) {
                    funs[i]()
                }
            },
        });
    }
}

function autorun(func) {
    window.__func = func
    func()
    window.__func = null
}

const user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20
}

observe(user)

function showFirstName() {
    console.log(user.firstName)
}

function showLastName() {
    console.log(user.lastName)
}

function showAge() {
    console.log(user.age)
}

autorun(showFirstName)
autorun(showLastName)
autorun(showAge)

 

posted @   Zhentiw  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2021-09-24 [SAP] CloudWatch
2018-09-24 [Analytics] Add Tealium debugger in Chrome
2017-09-24 [Javascript AST] 1. Continue: Write a simple Babel plugin
2017-09-24 [Javascript AST] 0. Introduction: Write a simple BabelJS plugin
2016-09-24 [Ember] Ember.js Templates
2016-09-24 [NodeJS] Deploy a Node Application with the Now CLI
2016-09-24 [Ramda] Filter, Reject and Partition
点击右上角即可分享
微信分享提示