Why is it bad to make elements global variables in Javascript?

Why is it bad to make elements global variables in Javascript?

无边思念无边月 发布于 2021-11-27 字数 222 浏览 834 回复 4 原文

I've heard that it's not a good idea to make elements global in JavaScript. I don't understand why. Is it something IE can't handle?

For example:

    div = getElementById('topbar');

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

掐死时间 2022-06-07 4 楼

There shouldn't be any problem using global variables in your code as long as you are wrapping them inside a uniqe namespase/object (to avoid collision with scripts that are not yours)

the main adventage of using global variable in javascript derives from the fact that javascript is not a strong type language. there for, if you pass somes complex objects as arguments to a function, you will probebly lose all the intellisence for those objects (inside the function scope.)
while using global objects insteads, will preserve that intellisence.

I personally find that very usfull and it certainly have place in my code.

(of course, one should alwayse make the right balance between locales and globals variables)

非要怀念 2022-06-07 3 楼

I assume by "events" you mean the event-handling JavaScript (functions).

In general, it's bad to use more than one global variable in JS. (It's impossible not to use at least one if you're storing any data for future use.) That's because it runs into the same problem as all namespacing tries to solve - what if you wrote a method doSomething() and someone else wrote a method called doSomething()?

The best way to get around this is to make a global variable that is an object to hold all of your data and functions. For example:

var MyStuff = {};
MyStuff.counter = 0;
MyStuff.eventHandler = function() { ... };
MyStuff.doSomething = function() { ... };

// Later, when you want to call doSomething()...
MyStuff.doSomething();

This way, you're minimally polluting the global namespace; you only need worry that someone else uses your global variable.

Of course, none of this is a problem if your code will never play with anyone else's... but this sort of thinking will bite you in the ass later if you ever do end up using someone else's code. As long as everyone plays nice in terms of JS global names, all code can get along.

弃爱 2022-06-07 2 楼

Is it something IE can't handle?

No it is not an IE thing. You can never assume that your code will be the only script used in the document. So it is important that you make sure your code does not have global function or variable names that other scripts can override.

Refer to Play Well With Others for examples.

冷默言语 2022-06-07 1 楼

I don't think that's an implementation issue, but more a good vs bad practice issue. Usually global * is bad practice and should be avoided (global variables and so on) since you never really know how the scope of the project will evolve and how your file will be included.

I'm not a big JS freak so I won't be able to give you the specifics on exactly why JS events are bad but Christian Heilmann talks about JS best practices here, you could take a look. Also try googling "JS best practices"

Edit: Wikipedia about global variables, that could also apply to your problem :

[global variables] are usually
considered bad practice precisely
because of their nonlocality: a global
variable can potentially be modified
from anywhere, (unless they reside in
protected memory) and any part of the
program may depend on it. A global
variable therefore has an unlimited
potential for creating mutual
dependencies, and adding mutual
dependencies increases complexity. See
Action at a distance. However, in a
few cases, global variables can be
suitable for use. For example, they
can be used to avoid having to pass
frequently-used variables continuously
throughout several functions.

via http://en.wikipedia.org/wiki/Global_variable