• Choose a category
• All
• Classic-Fiction

var name = $('input#name').val();

var age = $('input#age').val();

var data = {

type: 'person',

id: id,

name: name,

age: age

}

With the data all wrapped up, we’re able to easily pass it around and use it however we like. To access any one of an object’s values, we simply need to type the object’s name, followed by a period (.), followed by the key associated with that value we wish to access. For example, given the data object defined above, if you wanted to check to see if the type property contained the string 'person', and alert the name property if so, you’d write:

if (data.type == 'person') {

alert('Hello ' + data.name);

}

Namespacing Your Code

Even the nicest of libraries still lets you write the nastiest of spaghetti code—and jQuery is no exception. Sorting through 20 pages of hover and toggle commands will end up driving you crazy, so to save your sanity you’ll want to group logical chunks of code together.

We already had a go at doing this in the section called “Advanced Tooltips” in Chapter 5—and if you go back and have a look at that example, you’ll notice that almost all of the code is wrapped up in an object named TT. This object is much the same as the data object above (and all the object literals we’ve been working with so far), except that it also contains functions, as well as static variables.

So when we wrote setTips: function() { … }, we were assigning that function to the setTips property of the TT object. Once that’s done, we can write TT.setTips() to execute the function. Now every function we write that has to do with tooltips can be contained inside TT. Because the only object we’re declaring in the global scope (more on this in a second) is TT, we can rest assured that none of our functions or variables will conflict with other JavaScript code on the page. We refer to this technique as namespacing, and refer to all our TT variables and methods as being part of the TT namespace.

Our namespace object can be given any name so long as it’s a valid variable name. This means it can start with a dollar sign, underscore, or any alphabetical character—lowercase or uppercase.

Additionally, the more unique, short, and helpful the name is, the more successful it will be. We’re looking to avoid clashes in function names, so making namespaces that are likely to clash will only escalate the problem.

TRKR would be a good choice for StarTrackr! It’s short, helpful in that it alludes back to our site name, and fairly unique.

Here’s what we’re looking to avoid. Say you have a function named exclaim:

function exclaim () {

alert("hooray");

}

exclaim();// hooray

It’s not especially inspired as function names go, but there you have it. Trouble is, some third-party code that you want to put in your site also has a function named exclaim:

function exclaim () {

alert("booooo");

}

exclaim();// booooo

Now, when you expect the alert to show “hooray,” you instead see a disheartening “booooo.” Rather than simply picking another function name and risking the same result, let’s put our method inside the TRKR namespace:

var TRKR = {};

TRKR.exclaim = function () {

alert("hooray");

};

There’s no limit now to what we can do with the methods and properties of our namespace:

var TRKR = {};

TRKR.namespaces = "cool";

TRKR.boolean = true;

TRKR.pi = 3.14159;

TRKR.css = {

"color": "#c0ffee",

"top": 0

};

TRKR.exclaim = function () {

alert("hooray");

};

Now we can still let out a buoyant “hooray,” but there’s much less chance of other code stepping on our toes:

TRKR.exclaim (); // hooray

TRKR.namespaces; // “cool”

exclaim(); // boooooo

Namespacing code this way also means that it can be easily reused on other pages. All we need to do is plunk the TRKR object down in another page, and we’ll have access to all our juicy functions. Now that’s quality code!

Once you’ve set up your namespace, you can either add your properties one by one after declaring the object, as we did above, or you can include them all inside the object literal, like this:

var TRKR