A module mode of Javascript_YUI.Ext related

Douglas Crockford has taught a useful singleton pattern that implements this rule, and I think his pattern will be beneficial for your YUI-based applications. Douglas calls it the module pattern. It works as follows:

Create a namespace object: If you are using YUI, you can use the YAHOO.namespace() method: YAHOO.namespace("myProject"); This allocates an empty myProject object, Is a member of YAHOO (if myProject already exists, it will not be overwritten). Now we can start adding members of YAHOO.myProject.
Assign an anonymous function return value to your namespace object:
YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "I am called YAHOO.myProject.myModule.myPublicProperty Accessed. ";
myPublicMethod: function () {
YAHOO.log("I was accessed as YAHOO.myProject.myModule.myPublicMethod.");
}
};
}( ); // This bracket causes the anonymous function to be executed and returns
Note the last line with the closing brace followed by the bracket () - this notation causes the anonymous function to be executed immediately, returning an object containing myPublicProperty and myPublicMethod . As soon as this anonymous function returns, the returned object is accessed as YAHOO.myProject.myModule.

In anonymous functions, add "private" methods and variables before the return statement. So far, we've just assigned myPublicProperty and myPublicMethod directly into YAHOO.myProject.myModule. Additionally, this pattern supports increased utility when we place some code before the return statement.
YAHOO.myProject.myModule = function () {
//"Private" variable:
var myPrivateVar = "I can only be accessed within YAHOO.myProject.myModule.";
// Private method:
var myPrivateMethod = function () {
YAHOO.log("I can only be accessed within 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. Inside YAHOO.myProject.myModule, it can be accessed using this.myPublicProperty and this.myPublicMethod respectively. Outside YAHOO.myProject.myModule, public members can be accessed using YAHOO.myProject.myModule.myPublicProperty and YAHOO.myProject.myModule.myPublicMethod.
Private variables myPrivateProperty and myPrivateMethod can only be accessed by the anonymous function itself or by members of the returned object. Although anonymous functions execute and terminate immediately, they are still retained by the power of closure - the rule that variables local to a function are retained after the function returns. Our two private variables will not be destroyed as long as YAHOO.myProject.myModule needs them.

Practice this pattern. Let's look at a common application case of this pattern. Suppose you have a list, and some items on the list can be dragged. There is a dragging CSS class on the item to which dragging is applied.

One item

Two items

Three items Item

This is a simple example, deliberately written in detail - if done in this way, we can undoubtedly write it more compactly. This pattern scales well as the project becomes more complex and its API increases. In this way, it avoids the global namespace, provides externally accessible API methods, and supports protected or "private" data and methods. <script>src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script><script> <BR> YAHOO.namespace("myProject"); <BR> YAHOO.myProject.myModule = function () { <BR> //YUI实用程序的私有简写引用： <BR> var yue = YAHOO.util.Event, <BR> yud = YAHOO.util.Dom; <BR> //私有方法 <BR> var getListItems = function () { <BR> // 注意这个地方使用其他的私有变量，包括"yud"YAHOO.util.Dom的简写： <BR> var elList = yud.get("myList"); <BR> var aListItems = yud.getElementsByClassName( <BR> "draggable", //得到仅有CSS类"draggable"的项 <BR> "li", //仅返回列表项 <BR> elList //限定搜索改元素的子 <BR> ); <BR> return aListItems; <BR> }; <BR> //这个放回的对象将变成YAHOO.myProject.myModule: <BR> return { <BR> aDragObjects: [], //可对外访问的，存储DD对象 <BR> init: function () { <BR> //直到DOM完全加载好，才实现列表项可拖拽： <BR> yue.onDOMReady(this.makeLIsDraggable, this, true); <BR> }, <BR> makeLIsDraggable: function () { <BR> var aListItems = getListItems(); //我们可以拖拽的那些元素 <BR> for (var i=0, j=aListItems.length; i<j; i++) { <BR> this.aDragObjects.push(new YAHOO.util.DD(aListItems[i])); <BR> } <BR> } <BR> }; <BR> }(); <BR>//上面的代码已经执行，所以我们能立即访问init方法： <BR> YAHOO.myProject.myModule.init(); <BR> </script>[1]Original text: "a javascript module pattern". This is on the YUI blog. It may not be open in some places. You can search for English reprints or use the search engine cache to view it.

[2] "A JavaScript Module Pattern - A module pattern of JavaScript" This is someone else's translation. I have referenced it a lot, but it feels quite inconvenient to read. This is my translation of this article. One reason, of course the main reason is that this article is the most basic article for learning YUI, and the entire YUI module model is based on this.