使用 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。