Douglas Crockford has imparted a useful single case pattern (singleton patterns) to implement this rule, and I think his model is beneficial to your application based on Yui. Douglas called it modular Mode (module pattern). It works as follows:
1, create a Namespace object: If you use Yui, you can use Yahoo.namespace () method: Yahoo.namespace ("MyProject"); This allocates an empty MyProject object, which is a member of YAHOO. If the fruit myproject already exists, it will not be overwritten. Now we can start adding yahoo.myproject members.
2. Assign an anonymous function return value to your namespace object:
Copy Code code as follows:
YAHOO.myProject.myModule = function () {
return {
Mypublicproperty: "I was visited as YAHOO.myProject.myModule.myPublicProperty. ";
Mypublicmethod:function () {
YAHOO.log ("I was visited as YAHOO.myProject.myModule.myPublicMethod." ");
}
};
}(); This bracket causes the anonymous function to be executed and return
Note the last line with closed curly braces and immediately followed by parentheses ()-This symbol causes an immediate execution of the anonymous function, returning an object containing Mypublicproperty and Mypublicmethod. As soon as this anonymous function returns, the returned object is accessed as a YAHOO.myProject.myModule.
3. In the anonymous function, add the "private" method and the variable before returning the statement. So far, we've just allocated mypublicproperty and Mypublicmethod directly to YAHOO.myProject.myModule. In addition, when we place some code before returning the statement, the pattern also supports the added utility.
Copy Code code as follows:
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 visited as YAHOO.myProject.myModule.myPublicProperty." "
Mypublicmethod:function () {
YAHOO.log ("I can be visited as YAHOO.myProject.myModule.myPublicMethod.") ");
In MyProject, I can access the private variables and methods
YAHOO.log (Myprivatevar);
YAHOO.log (Myprivatemethod ());
The native scope of Mypublicmethod is MyProject, and we can use "this" to access public members.
YAHOO.log (This.mypublicproperty);
}
};
}();
In the code above, we return an object with two members from an anonymous function. Within the YAHOO.myProject.myModule, you can access them separately with This.mypublicproperty and This.mypublicmethod. Outside the 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 are executed and terminated immediately, they remain, by virtue of the power of the closure (closure)-a rule that is retained by the local variable of a function after the function returns. As long as YAHOO.myProject.myModule needs them, our two private variables will not be destroyed.
4, the practice of this model. Let's take a look at a common application case for this pattern. Suppose you have a list, and some items on the list can be dragged. Drag-and-drop CSS classes are applied to the dragged items.
Copy Code code as follows:
<!--This script file contains all 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" > A </li>
<li> two </li> <!--two items will not be dragged-->
<li class= "Draggable" > Three </li>
</ul>
<script>
Yahoo.namespace ("MyProject");
YAHOO.myProject.myModule = function () {
Yui Utility's private shorthand reference:
var Yue = YAHOO.util.Event,
Yud = YAHOO.util.Dom;
Private method
var getlistitems = function () {
Note that this place uses other private variables, including the shorthand for "Yud" YAHOO.util.Dom:
var ellist = yud.get ("MyList");
var alistitems = Yud.getelementsbyclassname (
"Draggable",//Get items with CSS class "draggable" only
"Li",//Only return list items
Ellist//Limit search to change elements of the child
);
return alistitems;
};
This returned object will become YAHOO.myProject.myModule:
return {
Adragobjects: [],//externally accessible, storing DD objects
Init:function () {
Until the DOM is fully loaded, the list item is implemented to drag:
Yue.ondomready (This.makelisdraggable, this, true);
},
Makelisdraggable:function () {
var alistitems = GetListItems (); The elements that we can drag and drop
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 immediately access the Init method:
YAHOO.myProject.myModule.init ();
</script>
This is a simple example, specifically written in detail--if done in this way, we can certainly write it more compact. This pattern is scaled well when the project becomes more complex and its API increases. In this way, it avoids global namespaces, provides externally accessible API methods, and supports protected or "private" data and methods.
- [1] Original: "A JavaScript module pattern". This is in Yui blog, some places may not open, you can search the English reprint or use the search engine cache can also see.
- [2] "a JavaScript module Pattern–javascript module Mode" This is someone else's translation, a lot of reference, but it is very inconvenient to see, this is my translation of this article a reason, Of course, the main reason is this article is to learn Yui the most basic article, the entire Yui module model are based on this.
Original address: http://dancewithnet.com/2007/12/04/a-javascript-module-pattern/
