Javascript module Mode Analysis

Douglas Crockford has taught you a useful singleton pattern to implement this rule. I think his pattern is useful for your YUI-based applications. Douglas calls it module pattern ). It works as follows:

Create a namespace object: If you use YUI, you can use YAHOO. namespace () method: YAHOO. namespace ("myProject"); this is assigned an empty myProject object, which is a member of YAHOO (if myProject already exists, it will not be overwritten ). Now we can add members of YAHOO. myProject.
Assign an anonymous function return value to your namespace object:
YAHOO. myProject. myModule = function (){
Return {
MyPublicProperty: "I was accessed as YAHOO. myProject. myModule. myPublicProperty. ";
MyPublicMethod: function (){
YAHOO. log ("I was accessed as YAHOO. myProject. myModule. myPublicMethod. ");
}
};
} (); // This bracket causes anonymous functions to be executed and returned

Note that there are closed braces and the last line of the followed parentheses ()-This symbol causes immediate execution of anonymous functions and returns objects containing myPublicProperty and myPublicMethod. As soon as this anonymous function returns, the returned object is accessed as YAHOO. myProject. myModule.

Add the "private" method and variable before the return statement to the anonymous function. So far, we have allocated myPublicProperty and myPublicMethod directly to YAHOO. myProject. myModule. In addition, when we place some code before the return statement, this mode also supports the added utility.
YAHOO. myProject. myModule = function (){
// "Private" variable:
Var myPrivateVar = "I can only be accessed in YAHOO. myProject. myModule .";
// Private method:
Var myPrivateMethod = function (){
YAHOO. log ("I can only be accessed in YAHOO. myProject. myModule .");
}

Return {
MyPublicProperty: "I can be accessed as YAHOO. myProject. myModule. myPublicProperty ."
MyPublicMethod: function (){
YAHOO. log ("I can be accessed as YAHOO. myProject. myModule. myPublicMethod .");
// In myProject, I can access private variables and methods.
YAHOO. log (myPrivateVar );
YAHOO. log (myPrivateMethod ());
// The native scope of myPublicMethod is myProject. We can use "this" to access public members.
YAHOO. log (this. myPublicProperty );
}
};
}();
In the above Code, we return an object with two members from an anonymous function. You can use this. myPublicProperty and this. myPublicMethod to access the YAHOO. myProject. myModule. Outside YAHOO. myProject. myModule, public members can access it using YAHOO. myProject. myModule. myPublicProperty and YAHOO. myProject. myModule. myPublicMethod.
Private variables 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, the Partial Variables of a function are retained after the function is returned. As long as YAHOO. myProject. myModule needs them, our two private variables will not be destroyed.

Practice this mode. Let's take a look at a common application case of this model. If you have a list, some items in the list can be dragged. The drag-and-drop CSS class is displayed on the items dragged by the application.
<! -- This script file contains all 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 </li>
<Li> Item 2 </li> <! -- Two items cannot be dragged. -->
<Li class = "draggable"> three items </li>
</Ul>
<Script>
YAHOO. namespace ("myProject ");
YAHOO. myProject. myModule = function (){
// Reference the private abbreviation of the YUI utility:
Var yue = YAHOO. util. Event,
Yud = YAHOO. util. Dom;
// Private Method
Var getListItems = function (){
// Note that other private variables are used here, including the shorthand for "yud" YAHOO. util. Dom:
Var elList = yud. get ("myList ");
Var aListItems = yud. getElementsByClassName (
"Draggable", // get only the CSS class "draggable ".
"Li", // only list items are returned
ElList // restrict the child of the search Element
);
Return aListItems;
};
// The put back object will become YAHOO. myProject. myModule:
Return {
ADragObjects: [], // DD object that can be accessed externally
Init: function (){
// You can drag the list items until the DOM is fully loaded:
Yue. onDOMReady (this. makeLIsDraggable, this, true );
},
MakeLIsDraggable: function (){
Var aListItems = getListItems (); // the elements we can drag
For (var I = 0, j = aListItems. length; I <j; I ++ ){
This. aDragObjects. push (new YAHOO. util. DD (aListItems [I]);
}
}
};
}();
// The above code has been executed, so we can access the init method immediately:
YAHOO. myProject. myModule. init ();
</Script>
This is a simple example, with specific details. If we follow this method, we can write it more compact. This mode scales well when the project becomes more complex and its APIs increase. In this way, it avoids the global namespace, provides externally accessible API methods, and supports protected or "private" data and methods.

[1] original article: a javascript module pattern. This is on the YUI blog, and may not be opened in some places. You can search for English reprinting or use the cache of the search engine.

[2] "A JavaScript Module Pattern-A Module mode of JavaScript" is A translation by others. I have provided many references, but it is inconvenient to see it, this is one of the reasons for my translation of this Article. Of course, the main reason is that this article is the most basic article for studying YUI. The entire YUI module mode is based on this.