A JavaScript Module Pattern » Yahoo! User Interface Blog

A JavaScript Module Pattern » Yahoo! User Interface Blog
1. Create a namespace object:

YAHOO.namespace("myProject");

2. Assign the return value of an anonymous function to your namespace object:

YAHOO.myProject.myModule = function () {

 return  {
  myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.";
  myPublicMethod: function () {
   YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
  }
 };

}(); // the parens here cause the anonymous function to execute and return

3. Add “private” methods and variables in the anonymous function prior to the return statement.

YAHOO.myProject.myModule = function () {

 //"private" variables:
 var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

 //"private" method:
 var myPrivateMethod = function () {
  YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
 }

 return  {
  myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
  myPublicMethod: function () {
   YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

   //Within myProject, I can access "private" vars and methods:
   YAHOO.log(myPrivateVar);
   YAHOO.log(myPrivateMethod());

   //The native scope of myPublicMethod is myProject; we can
   //access public members using "this":
   YAHOO.log(this.myPublicProperty);
  }
 };

}(); // the parens here cause the anonymous function to execute and return

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>

<ul id="myList">
 <li class="draggable">Item one.</li>
 <li>Item two.</li> <!--item two won't be draggable-->
 <li class="draggable">Item three.</li>
</ul>

<script>
YAHOO.namespace("myProject");
YAHOO.myProject.myModule = function () {

 //private shorthand references to YUI utilities:
 var yue = YAHOO.util.Event,
  yud = YAHOO.util.Dom;

 //private method:
 var getListItems = function () {

  //note that we can use other private variables here, including
  //our "yud" shorthand to YAHOO.util.Dom:
  var elList = yud.get("myList");
  var aListItems = yud.getElementsByClassName(
   "draggable", //get only items with css class "draggable"
   "li", //only return list items
   elList //restrict search to children of this element
  );
  return aListItems;
 };

 //the returned object here will become YAHOO.myProject.myModule:
 return  {

  aDragObjects: [], //a publicly accessible place to store our DD objects

  init: function () {
   //we'll defer making list items draggable until the DOM is fully loaded:
   yue.onDOMReady(this.makeLIsDraggable, this, true);
  },

  makeLIsDraggable: function () {
   var aListItems = getListItems(); //these are the elements we'll make draggable
   for (var i=0, j=aListItems.length; i<j; i++) {
    this.aDragObjects.push(new YAHOO.util.DD(aListItems[i]));
   }
  }

 };
}(); // the parens here cause the anonymous function to execute and return

//The above code has already executed, so we can access the init
//method immediately:
YAHOO.myProject.myModule.init();
</script>