javascript - Should i put variables in window.document or use global context? - Stack Overflow

admin管理员组

文章数量:1327928

I have a variable api in which I have more methods that I want to use in test variable and both are in global context.

I think it would be better if I put them on window.document and I wonder what other options could be.

var api = (function(){

  this.run= function(){
    console.log("run api");
  };

  return this;

})();

// test is in separate file

var test = (function(one_){

  this.as = function(){
    console.log(one_.run());
  };


  return this;

})(one);


test.as();

I have a variable api in which I have more methods that I want to use in test variable and both are in global context.

I think it would be better if I put them on window.document and I wonder what other options could be.

var api = (function(){

  this.run= function(){
    console.log("run api");
  };

  return this;

})();

// test is in separate file

var test = (function(one_){

  this.as = function(){
    console.log(one_.run());
  };


  return this;

})(one);


test.as();

• javascript
• api

Share Improve this question Follow edited Mar 7, 2014 at 11:54 Lain 2,22644 gold badges2626 silver badges5151 bronze badges asked Apr 22, 2013 at 11:57 MihaiMihai 65911 gold badge1414 silver badges3232 bronze badges 2

• Never put something on the document object. Global scope (== window object) as you currently have it is fine. – Bergi Commented Apr 22, 2013 at 12:34
• the document object isn't cleaned after each refresh or entering on a new page ? that's why i wanted to use the document – Mihai Commented Apr 24, 2013 at 7:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

var pany = pany || {} ;

pany.doSomething = function() {
};

pany.test = {};
pany.test.submodule = {};
pany.test.submodule.doSomething = function() {};

pany.api = {};
pany.api.submodule = {};

You should generally avoid defining variables globally. For clear maintainable code, use objects as namespaces and avoid polluting the global namespace.

This also greatly enhances default JS functionality. If you are really keen on it, add something like require.js to your projects and you will get a very nice Java-like functionality.

So with require.js, your pany.api and pany.test can be placed in different files and require each other, just like you would do an import pany.test with a Java package.

Namespacing is a very efficient practice. You get:

1. Readability(the most important thing in the world!!).
2. Maintainability.
3. Faster debugging.
4. Faster upgrades.
5. Efficient division of logic and functionality.
6. Prevents IE window vs global object bugs.
7. Makes working in a team possible and pleasant.
8. Speeds up development A LOT. Most IDEs will index and autofill your namespace objects.
9. You can effectively use jsDoc tags to document your JavaScript code.

Important

It it also fairly dangerous to use this in static contexts. JavaScript naming conventions dictate that static will be named starting with lower-case char and classes will be defined starting with an uppercase char, use camelCase of course.

Again, a very powerful and useful convention. It tells a developer that something is static or a class in the blink of an eye. So for instance, if you have:

pany.test.submodule.doSomething = function() {
    // this is a static function. It's a normal property, it's not nested under the prototype.
};

Instead if you want to make a class, you can use the this reference in the correct way.

   // Notice Person starts with uppercase P.
pany.test.subModule.Person = function(name) {
    this.name = name;
    this.numberOfEyes = 2;
};
pany.test.subModule.Person.prototype.cryMeARiver = function() {
    console.log(this.name + " can cry a river.");
};

Now inside whatever other function, you can do:

pany.api.someSubModule.peopleCryRivers = function() {
    // this is again a static context.
    var bodgan = new pany.test.subModule.Person("Bogdan");
    var andreea = new pany.test.subModule.Person("Andreea");
    bodgan.cryMeARiver();// will output "Bogdan can cry a river."
    andreea.cryMeARiver();// will output "Andreea can cry a river."
    // etc..
};

There's little difference IMHO between dropping stuff in the global namespace (i.e. window) and window.document.

Sometimes (particularly when accessing variables from multiple source modules) you just have to create a global variable, so when you do, use namespaces to encapsulate your variables, leaving the namespace itself as the only leaked variable:

Module 1:

var BOGDAN = BOGDAN || {};
BOGDAN.api = ...

Module 2:

var BOGDAN = BOGDAN || {};
BOGDAN.test = ...

Attaching variables to window.document doesn't make sense to me, while attaching them to window is the same as declaring in the global namespace.

You can create (a global) variable as a namespace and attach your other variables to this.

var APP = {};
APP.api = ...

This of course runs the risk of conflicting with another object named 'APP'.

Another option is the simply wrap your variables within an Immediately Invoked Function Expression.

(function() {
    var api = ...
}();

This will scope them within the IIFE, where they cannot create conflicts. It also means that as your variables go out of scope they will be eligible for garbage collection.

本文标签： javascriptShould i put variables in windowdocument or use global contextStack Overflow