如何通過回調觀察 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