使用 javascript globalThis 進行 state 管理

Question

這似乎是一個瘋狂的想法，但如果我使用 globalThis 來存儲我的瀏覽器唯一 SPA 的全局 state 會有什么問題。

我在想這樣的事情

globalThis.state = {...initialStateData}; // attach a property to globalThis and initialize
//later in any component, mutate the value
globalThis.state.counter = 45;
//yet in some other area, access and display the value
console.log(globalThis.state.counter);

這可以通過在混合中引入代理來進一步實現，並創建類似輕量級 redux 的東西。

我在 chrome 中對此進行了測試，它可以工作（我的意思是 chrome 不反對我將我的數據附加到 globalThis）。

我的問題是，這是一個瘋狂的想法，不應該在生產應用程序中使用，因為我可能在無知中違反了一些標准？

或者，globalThis 的行為會隨着時間而改變，瀏覽器將不允許用戶附加屬性到這個特定的 object？

編輯：這個問題是關於純香草 JS 而不是關於 redux 或反應甚至 typescript。

如何在 Deno 中定義全局變量？ 將是與當前查詢最接近的匹配項

Answer 1

Modifying the globalThis or the window object of browser is quit non-conventional & it would create some issues that'd be hard to debug or fix.. Also this is one kind of object pollution & eslint/jshint will also complain about & typescript will拋出編譯時錯誤..不要在生產中這樣做，因為從長遠來看它會非常糟糕..其中之一是屬性名稱沖突並且會出現很多問題。 我不知道其中的每一個，但您可以輕松閱讀一些關於這種行為的中型書籍/文章。 這也是為什么現代 npm 包不接觸這些對象的原因，因為globalThis不允許modules的想法......嘗試使用globalThis / window作為read-only對象.. 不要改變它的道具..

希望你明白我說的..

Answer 2

一般不建議修改globalThis（或window），原因如下：

• 與第 3 方代碼的命名沖突：如果另一個腳本也修改了 globalThis 並選擇了相同的名稱，那么您就有麻煩了，盡管這更多地適用於庫而不是主頁的邏輯。
• 與 Javascript 的命名沖突：新的內置 javascript 實用程序往往會添加到全局 object - 如果他們曾經添加一個與您使用的名稱相同的庫，它會在您的頁面中使用問題，期望該實用程序在那里。 不過，只要你的名字足夠獨特，這真的不是什么大問題。
• 版本控制：如果您正在開發一個庫，不幸的是，您可能會同時加載同一個庫的多個版本。 如果他們使用全局 state，這是不可能的。 同樣，這並不真正適用於使用，因為您不是在開發庫。
• 可追溯性：很難知道是什么設置了全局 state 以及修改了它。

因此，老實說，您可以使用全局 state 並且不會面臨任何這些負面后果。 我不想僅僅因為這是推薦的建議就告訴您不要使用它。 事實上，在過去，網站將所有數據和模塊放入一個巨大的全球層次結構中更為常見。 但是，出於另一個原因，我仍然建議避免使用全局 state - 存在一種不那么神奇的更好解決方案。 Javascript 現在有一個標准模塊系統，可以用來代替全局 state。 只需創建一個模塊來保存您的應用程序擁有的任何共享 state。