JavaScript design mode-module (module) mode

Source: Internet
Author: User

Modules are an integral part of any powerful application, and it often helps us to clearly separate and organize the code units in the Project.

JS in the implementation of the module method:

    1. Object literal notation
    2. Module mode
    3. AMD Modules
    4. COMMONJS Module
    5. ECMAScript Harmony Module

Object literal

The object literal does not need to be instantiated with the new operator, but it cannot be used at the beginning of a statement, because the beginning may be interpreted as the beginning of a block, and the new member can be added to the object literal using the following assignment statement outside the object, Mymodule.property = " Somevalue ".

varMyModule = {myproperty:"somevalue", myconfig:{usecaching:true, language:"en"},//basic MethodMyMethod: function(){    //...},//output Information According to current configurationMyMethod2: function(){Console.log ("Caching is:"+( this. myconfing.usecaching)?"enabled":"disabled"); },//override Current ConfigurationMyMethod3: function(newconfig) {    if(typeofNewconfig = = ="object"){ this. Myconfig = newconfig; Console.log ( this. myconfig.language); }},};mymodule.mymethod3 ({language:"fr", usecaching:false})

Use object literals to help encapsulate and organize your Code.

In javascript, the module pattern is used to further simulate the concept of a class, which enables a single object to have public/private methods and variables that mask a particular part from the global scope.

The module mode uses closures to encapsulate the "private" state and Organization. It provides a way to wrap a mix of public/private methods and variables to prevent leaks from being leaked to the global scope and conflict with other developers ' Interfaces. With this pattern, you only need to return a public api, while everything else remains in the private closure.
In module mode, because of the existence of closures, declaring variables and methods are only available inside the pattern, but variables and methods defined on the returned object are available to the external consumer

Implementation of Module mode

var  testmodule = (< Span class= "hljs-keyword" >function   ()  {  var  counter = 0 ; return  {incrementcounter:function   ()  { return  ++counter; }, resetcounter:function   ()  { console.log ( "counter value prior to reset " + counter); Counter = 0 ; } }})(); //increment counter  testmodule.incrementcounter (); //check counter value and reset  testmodule.resetcounter (); 

Other parts of the code are not able to read Incrementcounter () and Resetcounter () directly. The counter variable is actually completely isolated from the global scope, so it behaves like a private variable whose existence is confined to the Module's closure because the only code that can access its scope is the two functions. The above method makes a valid namespace setting, so in the test code, all calls need to be prefixed.

//module mode with namespaces, public, and private variablesvarMynamspace = ( function(){    //private counter variable    varMyprivatevar =0;//record private functions with parameters    varMyprivatemethod = function(foo){Console.log (foo); };return{//public VariablesMupublicvar:"foo",//call public functions for private variables and methodsMypublicfunction: function(bar){myprivatevar++;        Myprivatemethod (bar); }    }})();

module mode or there are some deficiencies:
1. As we visit public and private members in different ways, when we want to change the visibility, we actually have to modify the existence of each member that has ever been used.
2. We cannot access the private members that were added to the method after That.
3. You cannot create automated unit tests for private members, which adds additional complexity when a bug needs to fix Patches.
4. Developers cannot easily extend private methods

JavaScript design mode-module (module) mode

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.