Popular posts

Using AMD (Asynchronous Module Definition)

Libraries like RequireJS and CommonJS will help to you keep our code modularized. AMD allows you to explicitly state what your code depends on and call it on demand. You will have to include only one javascript in your HTML and the necessary modules will get executed after its dependencies got loaded. That way global variable pollution will be completely gone (if done properly).

Modules

Using the Module Pattern or Revealing Module Pattern brings sanity to every spaghetti code. Addy Osmani explains greatly the two patterns in his Learning JavaScript Design Patterns:

• Module Pattern
• Revealing Module Pattern

Script configurations

Things that should be customized, will be separated in it's own configuration object literal. That way other developers won't need to go through the whole code to find what they need to change. Chirstian Heilmann (from whom I've learned about this approach) wrote:

There’s a clear separation of “change what you need to change here” and “only touch this if you know what you are doing” – allowing more developers to use your code.

Here is a simple example:

var module = function(){
  // configuration, change things here
  var config = {
    CSS:{
     classes:{
       hover:'hover',
       active:'current',
       jsEnabled:'js'
     },
     ids:{
       container:'maincontainer'
     } 
    },
    timeout:2000,
    userID:'chrisheilmann'
  };

  // start of main code 
  function init(){
     ...
  };
  // ... more methods and other code ...

  // make init a public method
  return {
    init:init
  };
}();
module.init();

You can read more about the topic here - Providing Script Configuraton In-line and programatically