There are many articles, guides to learn JavaScript in general and the techniques for using JavaScript effecitvely over the years. But the author of this post just suggests 6 advanced JavaScript techniques that you should use when work with this programming language, and this is just a personal opinion of the author, you can talk about other techniques in comment section.

• Demo
• Enlarge
• Reload
• New window

4. Using Namespaces to Prevent Conflicts

If you're doing an extensive amount of raw JavaScript coding and suspect that additions could be made to the same pages you're working on, you can prevent any future conflicts with your code by giving your code its own namespace.

Object-oriented JavaScript implements namespace-like principles due to the fact that properties and methods are declared inside of objects, thus there are less likely to be conflicts. A conflict could arise, however, through object names. And very likely, the conflict will occur "silently", thus you may not be alerted to the issue immediately.

You can prevent all conflicts by creating a unique namespace. Let's use the showStatistics function to demonstrate how we can encapsulate code into its own namespace:

if (typeof MY == "undefined") {
  MY = new Object();
  MY.CUSTOM = new Object();
}

MY.CUSTOM.namespace = function() {
  function showStatistics(args) {
    document.write("<p><strong>Name:</strong> " + args.name + "<br />");
    document.write("<strong>Team:</strong> " + args.team + "<br />");
    if (typeof args.position === "string") {
      document.write("<strong>Position:</strong> " + args.position + "<br />");
    }
    if (typeof args.average === "number") {
      document.write("<strong>Average:</strong> " + args.average + "<br />");
    }
    if (typeof args.homeruns === "number") {
      document.write("<strong>Home Runs:</strong> " + args.homeruns + "<br />");
    }
    if (typeof args.rbi === "number") {
      document.write("<strong>Runs Batted In:</strong> " + args.rbi + "</p>");
    }
  }

  showStatistics({
    name: "Mark Teixeira",
    team: "New York Yankees",
    position: "1st Base",
    average: .284,
    homeruns: 32,
    rbi: 101
  });
}
MY.CUSTOM.namespace();  

The first few lines create the namespace by checking to see if the "MY" object already exists. This object can be whatever you want it to be. Just pick a name that you don't think will ever be used again. After the MY object is created, we are then able to create the "CUSTOM" object as a property of the MY object. Then our namespace function becomes a method of the MY.CUSTOM object. Keep in mind that "MY", "CUSTOM" and "namespace" can each be your own custom names. I chose these for demonstration purposes. They could be CHEESEBURGER.ONIONS.pickles if you want!

The showStatistics function is exactly the same as in the example earlier that utilizes an object literal to pass in the values. But in this case, the entire function, including the object literal, is encapsulated inside my.custom.namespace. The last line invokes the entire function using dot notation, and the function runs exactly the same as it normally would, except that it is protected from conflicting with another function called "showStatistics".

Further Reading:

• Object Oriented JavaScript: Namespaces (About.com)
• Namespacing your JavaScript (Dustin Diaz)

5. Hybrid Application Development

You can create powerful JavaScript applications if you use a combination of a JavaScript library and raw JavaScript code. Many JavaScript libraries are used to implement "pretty" animations and other customizable effects-sometimes via plugins- that often don't require much to be added to them other than some custom values.

On the other hand, there may be situations where you'll want to accomplish something specificly requested by a client. Maybe it's something not available in a library and that requires extensive coding, possibly utilizing Ajax and a variety of DOM methods.

There is no point in reinventing the wheel. You can implement your favorite JavaScript library and take advantage of its simplified Ajax calls, DOM methods, and normalization of browser differences. Thus, you can have the advantages of the library, while still creating custom scripts that are specific to your project.

Further Reading:

• List of JavaScript libraries at Wikipedia
• 40 Useful JavaScript Libraries (Smashing Magazine)
• JavaScript Libraries: A directory of tools shaping the new web

6. Rendering Readable HTML

Finally, this is a technique to use in situations that require dozens of lines of HTML code being generated dynamically via JavaScript. Take the following example:

var pageContainer = document.getElementById("container");
var pageTitle = "Content Title";
var authorBio = "Mr. Lorum Ipsum";
var pageContent = "Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here.";
var footerContent = "Copyright 2009";
var HTMLCode = '\n<h1>' + pageTitle + '</h1>\n
               <div id="content">\n
               <p>' + pageContent + '</p>\n
               <div id="author_bio">\n
               <p>' + authorBio +'</p>\n
               </div>\n
               </div>\n
               <div id="footer">
               <p>' + footerContent + '</p>\n
               </div>\n';

pageContainer.innerHTML = HTMLCode;  

The line to take note of above is the one that declares the value of the HTMLCode variable. It renders just find in the generated source code, since it utilizes the "new line" character, so it looks like perfectly good HTML. But if this line of code were any longer it would be extremely difficult to read and maintain in the .js file.

Here is the same code as above, but implementing a much more organized method of displaying the HTML:

var pageContainer = document.getElementById("container");
var pageTitle = "Content Title";
var authorBio = "Mr. Lorum Ipsum";
var pageContent = "Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here. Lorum ipsum line text here.
                   Lorum ipsum line text here.";
var HTMLCode = 	'\n' +
                '<h1>' + pageTitle + '</h1>\n'
                '<div id="content">\n' +
                  '<p>' + pageContent + '</p>\n' +
                  '<div id="author_bio">\n' +
                    '<p>' + authorBio + '</p>\n' +
                  '</div>\n'		        '</div>\n' +
                '<div id="footer">' +
                  '<p>' + footerContent + '</p>\n' +
                '</div>\n';

pageContainer.innerHTML = HTMLCode;

Now the code is much more readable, and conforms to the manner in which HTML is rendered in an actual HTML page. It even includes proper HTML indenting, and still uses the new line character to properly format the outputted HTML.

Conclusion

Although I didn't provide a detailed explanation of every concept dealt with in this collection, I hope this list provided beginning and intermediate JavaScript coders with an overview of a few fairly advanced practical techniques that they can implement in future projects or experiments.

Please feel free to comment on any of the techniques I've mentioned and some specific ways that you have used them in your own applications.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New