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:
- Object literal notation
- Module mode
- AMD Modules
- COMMONJS Module
- 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