A JavaScript module pattern-a component mode of JavaScript

Source: http://yuiblog.com/blog/2007/06/12/module-pattern/
Translation: Frank
Global variables are a curse. In Yui, we only use two global variables Yahoo and yahoo_config. All Yui objects access members or variables belonging to this member from the Yahoo object level. We recommend that you follow this practice in your program.
Douglas crockford has taught us how to use singletion pattern to implement this mode, and I think it is interesting to apply it to build a Yui-based model. Douglas calls this "" to see how he did it?

1,Create a namespace object: If you use Yui, you can use the Yahoo. namespace () method:

JS Code
 
 

  
  

  
  
Yahoo. namespace ("myproject ");
 
 


This assigns an empty myproject object, which is a member of Yahoo (but does not overwrite myproject if it already exists ). Now we can join the Yahoo. myproject member.

 

2,Returns a value from an anonymous function and assigns it to a namespace object.

JS Code

2. Yahoo. myproject. mymodule = function (){
3. Return {
4. Mypublicproperty: "I'm accessible as Yahoo. myproject. mymodule. mypublicproperty .";
5. Mypublicmethod: function (){
6. Yahoo. Log ("I'm accessible as Yahoo. myproject. mymodule. mypublicmethod .");
7. }
8. };
9. } (); // Here, brackets are used to execute the anonymous function and return

Note that the bottom line ending with curly braces is followed by a pair of parentheses (). This symbol means to immediately execute the anonymous function and return an object containing mypublicproperty and mypublicmethod. As long as the anonymous function can return, the returned object can be accessed using Yahoo. myproject. mymodule.
3. Add "private" methods and variables (before return) to anonymous functions first ).
So far, all we have done is to directly allocate mypubilcproperty and mypublicmethod to Yahoo. myproject. mymodule. In addition, this mode allows us to execute some code before return:

 

 
Private variables such as myprivateproperty and myprivatemethod can only be accessed by anonymous functions or members of returned objects. Although anonymous functions are executed and terminated immediately, they are retained. With the power of closure, as long as Yahoo. myproject. mymodule needs them, so our two variables will not be destroyed.
4. Practice this modeLet's take a look at the practical application of module pattern. If you have a list, some items in the list can be dragged. The dragged item has a draggable CSS class.
 
 

  
  
<! -- This script file except des all of the Yui utilities: -->
  
  
<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 (){
  
  

  
  
// Reference the abbreviation of Yui utilities:
  
  
VaR Yue = Yahoo. util. event,
  
  
Yud = Yahoo. util. Dom;
  
  

  
  
// Private Method
  
  
VaR getlistitems = function (){
  
  

  
  
// Note that we use other private variables, including the abbreviation of "Yud"
  
  
VaR ellist = Yud. Get ("mylist ");
  
  
VaR alistitems = Yud. getelementsbyclassname (
  
  
"Draggable", // get the item with only the "draggable" CSS class
  
  
"Li", // only returns the list item
  
  
Ellist // restrict the children of the element to be searched
  
  
);
  
  
Return alistitems;
  
  
};
  
  

  
  
// The returned object becomes Yahoo. myproject. mymodule:
  
  
Return {
  
  

  
  
Adragobjects: [], // save dd objects for external access
  
  

  
  
Init: function (){
  
  
// Wait until the Dom is fully loaded before creating the list item:
  
  
Yue. ondomready (this. makelisdraggable, this, true );
  
  
},
  
  

  
  
Makelisdraggable: function (){
  
  
VaR alistitems = getlistitems (); // these elements can be dragged.
  
  
For (VAR I = 0, j = alistitems. length; I <j; I ++ ){
  
  
This. adragobjects. Push (new Yahoo. util. dd (alistitems [I]);
  
  
}
  
  
}
  
  

  
  
};
  
  
} (); // Here, brackets are used to execute the anonymous function and return
  
  

  
  
// The above code is executed, so we can access init
  
  
Yahoo. myproject. mymodule. INIT ();
  
  
</SCRIPT>
 
 
XML Code
This is a simple example, which is especially complicated. If we do this, we believe that we can write more compact code. However, the scaling mode will increase with the complexity of the project, and the API will become larger and larger. This method avoids the global namespace and supports public access to API methods. It supports protection or "private" data.
 
 
JS Code
 
 

  
  

  
  
Yahoo. myproject. mymodule = function (){
  
  
// "Private variable ":
  
  
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 );
  
  
}
  
  
};
  
  
} (); // Here, brackets are used to execute the anonymous function and return
 
 

In the above Code, an object containing two members is returned from an anonymous function. You can use this. mypublicproperty and this. mypublivmethod to access the Yahoo. myproject. mymodule. Outside yahoo. myproject. mymodule, these announcement members can access Yahoo. myproject. mymodule. mypublicproperty and Yahoo. myproject. mymodule. mypublicmethod.