[英]using javascript globalThis for state management
It seems like a crazy idea, but is there any problem if I use globalThis to store the global state of my browser only SPA.这似乎是一个疯狂的想法,但如果我使用 globalThis 来存储我的浏览器唯一 SPA 的全局 state 会有什么问题。
I am thinking of something like this我在想这样的事情
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);
This can be taken further by introducing proxies into the mix and create something like a light weight redux.这可以通过在混合中引入代理来进一步实现,并创建类似轻量级 redux 的东西。
I tested this in chrome, and it works (by works I mean chrome had no objection on me attaching my data to globalThis).我在 chrome 中对此进行了测试,它可以工作(我的意思是 chrome 不反对我将我的数据附加到 globalThis)。
My question is, is it a crazy idea and should not be used in a production app because of some standards that I might be violating in ignorance?我的问题是,这是一个疯狂的想法,不应该在生产应用程序中使用,因为我可能在无知中违反了一些标准?
Or perhaps, behaviour of globalThis is gonna change over time and browsers will not allow user-attached attributes to this specific object?或者,globalThis 的行为会随着时间而改变,浏览器将不允许用户附加属性到这个特定的 object?
EDIT: This question is about pure vanilla JS and not about redux or react or even typescript.编辑:这个问题是关于纯香草 JS 而不是关于 redux 或反应甚至 typescript。
How to define global variable in Deno? 如何在 Deno 中定义全局变量? will be the closest match to the current query
将是与当前查询最接近的匹配项
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 throw Compile Time Error.. Don't do this in production as it'd be very bad in the long run.. One of them is conflicting property names & there are many problem that will arise. 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抛出编译时错误..不要在生产中这样做,因为从长远来看它会非常糟糕..其中之一是属性名称冲突并且会出现很多问题。 I don't know each & every one of them but you can easily read some medium books/articles about this behavior.我不知道其中的每一个,但您可以轻松阅读一些关于这种行为的中型书籍/文章。 Also that's why modern npm packages doesn't touch these objects as
globalThis
doesn't allow the idea of modules
... Try using globalThis
/ window
as read-only
objects.. Don't mutate the props of it..这也是为什么现代 npm 包不接触这些对象的原因,因为
globalThis
不允许modules
的想法......尝试使用globalThis
/ window
作为read-only
对象.. 不要改变它的道具..
Hope you understand what I said..希望你明白我说的..
It is generally not recommended to modify globalThis (or window) for the following reasons:一般不建议修改globalThis(或window),原因如下:
So, in all honesty, you can probably get away with using global state and not face any of those negative consequences.因此,老实说,您可以使用全局 state 并且不会面临任何这些负面后果。 I don't want to just tell you not to use it simply because that's the recommended advice.
我不想仅仅因为这是推荐的建议就告诉您不要使用它。 In fact, back in the day, it used to be more common for websites to put all of their data and modules into one giant global hierarchy.
事实上,在过去,网站将所有数据和模块放入一个巨大的全球层次结构中更为常见。 However , I would still recommend avoiding global state for one other reason - A better solution exists that's less magical.
但是,出于另一个原因,我仍然建议避免使用全局 state - 存在一种不那么神奇的更好解决方案。 Javascript now has a standard module system that can be used in place of global state.
Javascript 现在有一个标准模块系统,可以用来代替全局 state。 Just create a module to hold whatever shared state your application has.
只需创建一个模块来保存您的应用程序拥有的任何共享 state。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.