JavaScript module pattern explained in detail

This article mainly introduces the JavaScript module mode, and analyzes in detail the relevant concepts, functions, extensions and other operating techniques of the js module mode in the form of examples. Friends in need can refer to it. I hope it can help everyone.

There is no concept of Class in JS, so how to reflect the Public and Private properties of Object? The answer is the Module Pattern.

There is a significant feature in JS: anonymous function. Through the establishment and execution of the anonymous function, the code in the anonymous function forms a closure, thus forming, encapsulating and Control the Private and Public characteristics of an object to avoid the proliferation of global variables and conflicts with other scripts.

(function () {
  // 所有的变量和函数只在这个范围内有效
  // 仍然可以使用全局变量
}());

Classic module pattern template

var myNamespace = (function () {
 var myPrivateVar, myPrivateMethod;
 // A private counter variable
 myPrivateVar = 0;
 // A private function which logs any arguments
 myPrivateMethod = function( foo ) {
   console.log( foo );
 };
 return {
  // A public variable
  myPublicVar: "foo",
  // A public function utilizing privates
  myPublicFunction: function( bar ) {
   // Increment our private counter
   myPrivateVar++;
   // Call our private method using bar
   myPrivateMethod( bar );
  }
 };
})();

Passed Closure, you can see that when we use myNamespace, we can only see the properties and methods of myPublic*, but the properties and methods of myPrivate* cannot be accessed directly.

Basic mode extension

Import mixins

JS has an important feature called implicit global Variables, that is to say, whenever the JS interpreter looks for a var declaration for a variable, if it is not found, the variable is regarded as a global variable. This seems to be easy when using global variables in closures, but it can also easily cause code confusion. Fortunately, anonymous functions can also receive parameters, so through parameter passing, we can import the global variables we want to use into the anonymous function, thus providing a clearer and cleaner usage method.

(function ($, YAHOO) {
  // 这样就可以访问jQuery (as $) 和 YAHOO 库
}(jQuery, YAHOO));

Module exports

Sometimes not only use global variables, but also want to declare a global variable of your own, this can Easily implemented through the return value of an anonymous function.

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

Advanced extension

Based on the above basic pattern, we can continue to expand.

Augmentation

The limitation of the basic module mode is that we must put the entire module in one file. So when we need to spread a module to multiple files, what should we do? What to do?

One way is to augment modules. We first enter the module, then add attribute methods, and then output. The example is as follows

var MODULE = (function (my) {
  my.anotherMethod = function () {
    // added method...
  };
  return my;
}(MODULE));

Loose Augmentation

The above example requires a Module first, and then adds new features on this basis. . But sometimes, we load JS scripts asynchronously, so we need a low-coupling module creation method, which can be achieved through the following structure.

var MODULE = (function (my) {
  // add capabilities...
  return my;
}(MODULE || {}));

Sub-modules

You can create Sub modules based on Module. This is very simple. The example is as follows:

MODULE.sub = (function () {
  var my = {};
  // ...
  return my;
}());

So far, we have briefly introduced the module mode. As the most classic JS mode, this mode is widely used by various JS frameworks. It makes your code more encapsulated, more structured, and more OOP.

Related recommendations:

A module mode for Javascript_YUI.Ext related

A module mode for Javascript _javascript skills

How to make the js module more useful

The above is the detailed content of JavaScript module pattern explained in detail. For more information, please follow other related articles on the PHP Chinese website!