Is this a good way to wrap up Javascript variables?

I was looking to this post Wrap up javascript global variables,

开发者_高级运维var Global_VARS = {
productId:10,
itemId:20,
commentId:30,
ratingId:20
}

Is this a good way of writing JavaScript variables?

The general rule you should always follow is to not clutter the Global namespace with global variables.

So you should keep the global variables as low as possible to avoid cluttering. Grouping all your variables in one unique object is a good idea rather than having them global.

Having them inside an anonimous function is also good, inside a function you can have as many variables as you want, they won't be avaiable externally. Then you can choose which one will be avaiable to the outside.

Having all of your common global variables wrapped up in a namespace is the start of a good idea. However, the problem the author is trying to solve is a much larger one - that of proper encapsulation. There are several different ways to approach this, that can be combined into many different patterns.

Each of these patterns enables or disables things:

• Variable shadowing: Can I update a particular variable in a particular context without updating the variable "globally" (i.e. throughout all the scopes in which that variable is accessible)?
• Globally accessible: Can I reach the value of that variable from any other scope in the code?

First is the containing-object pattern already mentioned here:

// `root_reference` is pseudo-code for `window` or `this`.
root_reference.GLOBAL_VARIABLES = {
    variable1: 1,
    variable2: 2,
    variable3: {data: 1, point: 2}
    // etc ...
}

• Variable shadowing: No. If you update GLOBAL_VARIABLES.variable1 in one place it is updated in every scope in which GLOBAL_VARIABLES is accessible.
• Globally accessible: Yes. In every scope that has access to the global object (which is every scope, with the solitary exception (I believe) of code loaded by a module loader like node.js or Require.js) I can reach root_reference.GLOBAL_VARIABLES.variable1.

The advantage to this pattern is that you can easily reach the variable from almost anywhere in your code. The disadvantage to this pattern is that you can easily update this variable from almost anywhere in your code, but you cannot count on rollback anywhere.

The second pattern is the scope pattern, which makes use of var:

var variable1 = 1, variable2 = 2, variable3 = {data: 1, point: 2};

function display_vars(one, two, three) {
    console.log("Variable 1", one);
    console.log("Variable 2", two);
    console.log("Variable 3", three);
}

display_vars(variable1, variable2, variable3) // 1, 2, {data: 1, point: 2}

// Immediately Executed Function Expression
(function(old_var_1, old_var_2, old_var_3){
    var var variable1 = 12, variable2 = 21, variable3 = {data: 11, point: 21};
    // We have now shadowed the variables in this scope:

    display_vars(variable1, variable2, variable3)  // 12, 21, {data: 11, point: 21}

   // But we also have access to the old ones:
   console.log(old_var_1, old_var_2, old_var_3);
})(variable1, variable2, variable3);

// And they are unchanged outside of the new scope
display_vars(variable1, variable2, variable3) // 1, 2, {data: 1, point: 2}

• Variable shadowing: Yes.
• Globally accessible: No. You need to manually pass in references to variables from the outer scope to be certain of having access to them (If the variables have been defined on the root_reference they will always be globally accessible, but if they have been defined in an intermediate scope, they will need to be manually passed to the innermost scope).

Sure, but you can also write:

var productId = 10,
    itemId = 20,
    commentId = 30,
    ratingId = 20;

That way you do not have to do Global_VARS.productId, you can just use productId

yes, that's how you do it if you only need one instance of an object. Think of it like a namespace.

if you want to wrap them totally, define them in an anonymous function (as well as the rest of your code) and call it

(function(){
  var x = ..., ... ...;
  // do stuff
})();