Javascript module pattern analysis_javascript skills

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.");
}
};
}( ; The object of 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 we do it this way, we will undoubtedly be able to 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.

[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.​