Home > Articles > Open Source > Ajax & JavaScript

  • Print
  • + Share This
Like this article? We recommend Summary

Summary

This article has illustrated how you can simplify HTML markup and its corresponding JavaScript code by using the jQuery library, with its rich selectors and DOM navigation capabilities.

Although you might be tempted to approach a refactoring project from a minimalist perspective, you'll gain much more if you'll take a wider look and try to implement reusable modules:

  • Try to implement semantically rich markup. In the scenario in this article, we've replaced the nested DIV tags with definition lists.
  • Remove inline CSS and replace it with structured hierarchical stylesheets.
  • Use JavaScript progressive enhancement to apply the JavaScript-dependent CSS styling to the markup. The contents of the page (or the menu, in our example) should be presented to all visitors, even those with disabled JavaScript.
  • Remove all inline JavaScript calls and event handlers, binding them to the objects after the document has been loaded into the browser.
  • Use relative DOM navigation in your event handlers to make them as versatile as possible. Our JavaScript code identified the menu by searching for the ancestor DIV tag, rather than a DIV tag with a specific ID or class.
  • + Share This
  • 🔖 Save To Your Account