JavaScript programming mode: module strength (1)

The module mode is a common JavaScript programming mode. It is easy to understand, but there are still some advanced usage methods that have not aroused widespread attention. If you are familiar with the module mode, you can jump to the section of "advanced mode.

BKJIA recommended reading: functional programming practices in JavaScript

Anonymous Closure

Anonymous closure is the basis for making everything possible, and it is also the best feature of JavaScript. Let's create a simple anonymous function. Code running in a function is stored in a closure, which is private and self-contained throughout the life cycle of the application. Reading: uncover the true face of Javascript closures)

 
 

  
  
(Function (){
  
  
// All var and functions only exist in the current scope
  
  
// You can still read all global variables.
  
  
}());
 
 

Note: Enclose the "()" of anonymous functions "()". This is a requirement of the JavaScript language, because all code starting with a function is recognized as a "function Declaration", and a function expression is created when () is wrapped.

Reference global variables

JavaScript has an implicit global variable. Whether a name is used or not, the JavaScript interpreter reversely traverses the scope chain to find the var declaration of this name. If var is not found, the object is global. This means that it is easy to use and create global variables in an anonymous closure. Unfortunately, this makes the code difficult to manage and makes it difficult for people who read the code to distinguish which variables are global. Fortunately, our anonymous functions provide a simple alternative. Passing global variables as parameters to anonymous functions is clearer and faster than using implicit global variables. Example:

 
 

  
  
(Function ($, YAHOO ){
  
  
// Use global jquery such as $ and YAHOO
  
  
} (JQuery, YAHOO ));
 
 

Module Export

When you not only want to use global variables, but also want to declare some global variables. We can easily export global variables using the return values of anonymous functions ). This is the basic form of a complete module model. Example:

 
 

  
  
var MODULE = (function () {   
  
  
var my = {},   
  
  
privateVariable = 1;   
  
  
function privateMethod() {   
  
  
// …   
  
  
}   
  
  
my.moduleProperty = 1;   
  
  
my.moduleMethod = function () {   
  
  
// …   
  
  
};   
  
  
return my;   
  
  
}());  
 
 

We declared a global variable "MODULE", which has two public attributes: A method MODULE. moduleMethod and a variable MODULE. moduleProperty. In addition, it uses the closure of anonymous functions to maintain its own private internal state. Based on the previous example, we can easily reference global variables.

Advanced Mode

The above content is enough for most users, but we can also develop a more powerful and scalable structure based on this model.

Hyperplasia

One limitation of the module mode is that the entire module must be written in one file. Anyone working in a large coding project knows the importance of dividing code into multiple files. Fortunately, we have another good solution. First, we import the module, then add the attribute, and then export it. Example:

 
 

  
  
Var MODULE = (function (my ){
  
  
My. anotherMethod = function (){
  
  
// Add some methods
  
  
};
  
  
Return my;
  
  
} (MODULE ));
 
 

To ensure consistency, we use the var keyword again, although this is not necessary. After the code is run, our MODULE will obtain a new public method MODULE. anotherMethod. This file also maintains its privacy, internal status, and import to it.

Loose Hyperplasia

Our previous example requires that our initialization module must be run first. The proliferation must occur in step 2. This is not necessary. One of the advantages of JavaScript is that it can read script files asynchronously. We can create multiple flexible modules. With Loose Augmentation, they can load themselves in any order. Each file should have the following structure:

 
 

  
  
Var MODULE = (function (my ){
  
  
// Add some features
  
  
Return my;
  
  
} (MODULE | {}));
 
 

In this mode, the var declaration is always required. If the module does not exist, the new module is imported. This means that you can use tools like LABJavaScript to read all your module files in parallel without any blocking.