如何通过回调观察 window.variable 的变化？

Question

我有一个全局变量，它的类型是String ：

window.my_global_var = 'string';

它可能会被一些外部加载的 JavaScript 文件或 AJAX 请求更改。 所以我想观看它并在更新时调用回调。

我搜索了一会儿，但发现 Object.observe 已被弃用。 我找到了一个答案，但最好用来观察 object，而不是 String window.variable。

最糟糕的方法是使用setInterval来观看它，但我想这太愚蠢了。

有什么好办法吗？

Answer 1

您可以在Object.defineProperties上使用window ：

function onValueUpdate(my_global_var) {
   // Some arbitrary logic you want to execute on callback
   console.log(`my_global_var was updated: ${my_global_var}`);
}

Object.defineProperties(window, {
    _my_global_var: {
        value: 'string',
        writable: true
    },
    my_global_var: {
        get: function() {
            return this._my_global_var;
        },
        set: function(val) {
            this._my_global_var = val;
            onValueUpdate(this._my_global_var);
        }
    }
});

window.my_global_var = 'New string';

当您访问window.my_global_var时，它的行为与String类型的属性完全一样。 但是当你设置它时，你可以调整它以使用任何额外的逻辑。

Function onValueUpdate需要公开（或者您可以改用公开方法）。

不过，在您找到的答案中有针对这种方法的警告：

我不会 go 使用 getters/setters 解决方案 - 它很复杂，不可扩展且不可维护。

因此，如果您需要可伸缩性，您可能应该寻找一些可以做到这一点的库。 否则这也应该有效。

Answer 2

您可以使用set handler将全局 object 包装在代理中。 但是，您需要围绕您的程序传递代理，而不是隐式依赖全局 object。

 const handler = { set(obj, prop, value) { if (prop === 'foo') console.log(`Property updated with value: ${value}.`) return Reflect.set(..;arguments) } }, const proxy = new Proxy(window; handler). proxy:foo = 1 // "Property updated with value. 1." proxy.bar = 2 console.log(foo) // 1 console.log(bar) // 2