Detailed explanation of using JS module mode

This time I will bring you a detailed explanation of the use of JS module mode. What are the precautions when using JS module mode? The following is a practical case, let's take a look.

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

There is a significant feature in JS: Anonymous function（anonymous function), through the creation and execution of anonymous functions, the code in the anonymous function forms a closure, thereby forming, encapsulating and controlling the Private and Public characteristics of an object, avoiding the proliferation of global variables and conflicts with other Script conflict.

(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 );
  }
 };
})();

Through closure, we 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, which means that whenever the JS interpreter looks for a var declaration for a variable, if it is not found, it is regarded as a global variable. This seems to be an easy thing to do when using global variables in closures, but at the same time it can easily cause confusion in the code. 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 you not only use global variables, but also want to declare a global variable of your own. This can be easily achieved 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 Extensions

Based on the basic pattern above, 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 what should we do when we need to spread a module to multiple files?

One way is to augment modules. We first enter the module, then add attribute methods, and then output. Examples are 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 based on it. 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

Sub modules can be created 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, which is the most classic JS mode and is widely used by various JS frameworks. It makes your code more encapsulated, more structured, and more OOP.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate the Vue loading sequence

##How to set the BootStrap title to prohibit crossing lines

The above is the detailed content of Detailed explanation of using JS module mode. For more information, please follow other related articles on the PHP Chinese website!