使用 javascript globalThis 进行状态管理

Question

这似乎是一个疯狂的想法，但如果我使用 globalThis 来存储我的浏览器的全局状态，那么是否有任何问题。

我正在考虑这样的事情

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 的行为会随着时间的推移而改变，浏览器将不允许用户附加属性到这个特定对象？

编辑：这个问题是关于纯香草 JS 而不是关于 redux 或 react 甚至打字稿。

How to define global variable in Deno? 将是与当前查询最接近的匹配

Answer 1

修改浏览器的 globalThis 或 window 对象是非常规的，它会产生一些难以调试或修复的问题。这也是一种对象污染& eslint/jshint 也会抱怨 & typescript 会抛出编译时错误.. 不要在生产中这样做，因为从长远来看它会很糟糕.. 其中之一是冲突的属性名称 &会出现很多问题。我不知道他们中的每一个，但您可以轻松阅读一些关于这种行为的中等书籍/文章。这也是现代 npm 包不接触这些对象的原因，因为 globalThis 不允许 modules 的想法......尝试使用 globalThis/window 作为 {{1 }} 对象.. 不要改变它的道具..

希望你明白我说的话..

Answer 2

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

• 与第 3 方代码命名冲突：如果另一个脚本也修改了 globalThis 并选择了相同的名称，那么您就有麻烦了，尽管这更适用于库而不是主页的逻辑。
• 与 Javascript 命名冲突：新的内置 javascript 实用程序往往会添加到全局对象中 - 如果他们添加了与您使用的名称相同的实用程序，则会导致问题，无论是在您的页面中，还是在您使用的任何希望该实用程序存在的库中。 不过，只要你的名字足够独特，这真的不是什么大问题。
• 版本控制：如果您正在开发一个库，不幸的是，您可能会同时加载同一个库的多个版本。如果他们使用全局状态，这是不可能的。同样，这并不真正适用于使用，因为您不是在开发库。
• 可追溯性：很难知道是什么设置了全局状态以及是什么修改了它。

所以，老实说，您可能可以使用全局状态而不会面临任何负面后果。我不想仅仅因为这是推荐的建议就告诉您不要使用它。事实上，在过去，网站将所有数据和模块放入一个巨大的全球层次结构中曾经更为普遍。 然而，出于另一个原因，我仍然建议避免使用全局状态 - 存在一个更好的解决方案，但不那么神奇。 Javascript 现在有一个标准的模块系统，可以用来代替全局状态。只需创建一个模块来保存您的应用程序具有的任何共享状态。