[JavaScript] A module mode of JavaScript

Global variables are the devil. In Yui, we only use two global variables: Yahoo and yahoo_config. Yui uses Yahoo object-level members or variables in the member scope. We recommend that youProgramSimilar rules are also used.

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: 

2. Create a namespace object: If you use Yui, you can use the 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.
4. Assign an anonymous function return value to your namespace object:

   Yahoo. myproject. mymodule = function () {return {mypublicproperty: "I am accessed as Yahoo. myproject. mymodule. mypublicproperty. "; Mypublicmethod: function () {Yahoo. Log (" I am 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.

5. 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 This mode also supports the added utility.

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

6. 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 </LI> <! -- Two items cannot be dragged. --> <li class = "draggable"> three items </LI> </ul> <SCRIPT> Yahoo. namespace ("myproject"); Yahoo. myproject. mymodule = function () {// Private abbreviation reference of the Yui utility: var Yue = Yahoo. util. event, Yud = Yahoo. util. dom; // Private method var getlistitems = function () {// note that other private variables, including "Yud" yahoo. util. short for DOM: var ellist = Yud. get ("mylist"); var alistitems = Yud. getelementsbyclassname ("draggable", // get the "Li" for the "draggable" only CSS class, // only returns the list item ellist // limit the sub-item of the modified search element ); return alistitems;}; // The returned object will be Yahoo. myproject. mymodule: Return {adragobjects: [], // externally accessible, stores the DD object init: function () {// The list items can be dragged until the Dom is fully loaded: yue. ondomready (this. makelisdraggable, this, true) ;}, makelisdraggable: function () {var alistitems = getlistitems (); // the elements 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 code above 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 a lot of references, but it is inconvenient to see it. This is my translation.ArticleOf course, the main reason is that this article is the most basic article to learn about Yui. The entire Yui module mode is based on this.

Address: http://dancewithnet.com/2007/12/04/a-javascript-module-pattern/