80

Currently I am working on a legacy web page that uses a ton of JavaScript, jQuery, Microsoft client JavaScript, and other libraries. The bottom line - I cannot rewrite the entire page from scratch as the business cannot justify it. So... it is what it is. Anyway, I need to pollute (I really tried not too) the global namespace with a variable. There are the three options I was thinking about -

  1. Just store/retrieve it using a normal JavaScript declaration - var x = 0;

  2. Use jQuery to store/retrieve the value in a DOM tag - $("body").data("x", 0);

  3. Use a hidden form field, and set/retrieve the value with jQuery - $("whatever").data("x", 0);

Is there a better way? I looked at the existing pile of code, and I do not believe the variable can be scoped in a function.

6 Answers 6

100

You can create a namespace inside the jQuery object, like so:

$.mynamespace = { 
    myVar : "something", 
    myVar2 : "somethingElse" 
}; 

or:

$.mynamespace = {};
$.mynamespace.myVar = "something";
$.mynamespace.myVar2 = "somethingElse";

Bear in mind, any plugin method named 'mynamespace' will be overwritten so be sure to use a sensible name.

Sign up to request clarification or add additional context in comments.

7 Comments

why should the namespace variable declared as an attribute of jQuery?!
@Pedro - It does not need to be. I was just pointing this out as one possibility.
If I want to use this, where have I to declare it? All my javascript code is in a JS file. I don't want to mix JavaScript code with HTML code.
this is a silly solution that it is prone to name clashes between the declared namespaces and the variables and methods of the jQuery Object. I don't understand the value of this solution. For me, It isn't good.
i can use this global variable across all iframe form parent?
|
40

For me the best way to handle this situation is to define an object in the window object:

window.my_config =
{
    my_var1 : 1,
    my_var1 : 2,
    my_var1 : 3
};

This would keep your scope neat and clean. And whenever you would access the global using window.my_config anyone looking at the code would know that a global is being accessed.

1 Comment

this makes more sense to me than using jquery namespace. Is there any reason this way would not work just as well or better?
6

You can create a hash in the global scope and use it as a namespace:

MyNamepace={}
MyNamespace.newvar = 'value'
// MyNamespace.newvar => 'value'

3 Comments

This is a silly solution that it is prone to name clashes between the declared namespaces and other global variables and methods. I don't understand the value of this solution. For me, It sucks.
You do have control over which names exist in the global scope, while you don't have control over the methods and variable names that might be added to jQuery on update. This is one of the strong reasons why namespaces do explicitly exist in many languages. When they do not, names start to be strange (i.e.: Smalltalk-systems class-names)
Not always. There's nothing stopping some rogue library from overriding your hash. In essence, you can't avoid the problem without explicit namespacing. This is why the jQuery module authoring documentation recommends a single hash in the jQuery object for namespacing purposes, because the jQuery namespace is de facto restricted to popular plugins.
2

Just sharing my practice with you, I would make a global object/var in the required JavaScript file with a sensible prefix, as in if I am working on a page where this object will be a text box then I would name it:

g_TxtMyValue = 'value';    // g_ specifies it to be a global variable, it is one
                           // of the many conventions used

If you have more than one global variable, you can also have a namespace such as:

my_txt = {};  // For a real site I would use a prefix relative to the project
              // name instead of "my".

my_txt.testValueOne = 'Value one';
my_txt.testValueOne = 'Value two';

These variables will be available to you throughout the website, after they have been initialized.

I hope this helps.

Comments

0

Use underscore isEmpty().

_.isEmpty('') will return true.

Comments

0

Just a short notice:

Is the fancybox doing AJAX (meaning: if it loads within an iFrame, you should add "parent" to the close method), like this:

parent.$.fancybox.close();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.