Why should the front end use modularity?

This time I will bring you why the front-end should use Modularization? , what are the precautions for front-end modularization? The following is a practical case, let’s take a look.

What do CMD, AMD, and CommonJS specifications refer to? What applications are there?

AMD (Asynchronous Module Definition) specifies a mechanism under which modules and dependencies can be loaded step by step. This is especially true for asynchronous loading on the browser side, which is also an extension of the CommonJS specification. 12

Syntax

define(id?, dependencies?, factory);1

id: The name of the module in the definition, optional; if If this parameter is not provided, the module name should default to the name of the specified script requested by the module loader. .

Dependencies dependencies: It is an array literal of the module identifier that the current module depends on and has been defined by the module. The dependency parameter is optional, if this parameter is omitted it should default to ["require", "exports", "module"]. However, if the factory method's length attribute is less than 3, the loader will choose to call the factory method with the number of arguments specified by the function's length attribute.

Factory method factory: The module initializes the function or object to be executed. If it is a function, it should be executed only once. If it is an object, this object should be the output value of the module.
Example

define('modal', ['jQuery', 'dialog'], function($, Dialog){$('.modal').show();
Dialog.open();
});1234

AMD’s libraries include RequireJS, curl, Dojo, etc. CommonJS is a specification for server-side modules, and Node.js adopts this specification. Node.JS first adopted the concept of js modularity. In a module, there is a free variable "require", which is a function. The "require" function receives a module identifier. "require" returns the API exported by the external module. If a dependency cycle occurs, the external module may not have completed execution when required by its transitive dependencies; in this case, the object returned by "require" must contain at least the Output that has been prepared before calling the require function (which will enter the current module execution environment). If the requested module cannot be returned, then "require" must throw an error. In a module, there will be a free variable named "exports", which is an object to which the module can add its own API during execution. Modules must use the "exports" object as the only representation of output.
Example

exports.add = function() {
  var sum = 0, i = 0, args = arguments, l = args.length;  while (i < l) {
      sum += args[i++];
  }
  return sum;
};1234567

CMD (Common Module Definition) is generated during the promotion process of SeaJS.

CMD was proposed by Yu Bo in China. Its main difference from the AMD specification is the definition module and dependency introduction part. AMD needs to specify all dependencies when declaring the module and pass them into the module through formal parameters
Example

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});123456789

Compared with the AMD module, CMD is closer to Node’s definition of the CommonJS specification:

define(factory);1

In the dependency part, CMD supports dynamic introduction. The example is as follows:

define(function(require , exports , module){    //the module code goes here
});123

require, exports, module are passed to the module through formal parameters. When you need to rely on a module, you can call the module to import it at any time.

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

Recommended reading:

Methods for front-end page testing

The application of call and apply in javascript

The above is the detailed content of Why should the front end use modularity?. For more information, please follow other related articles on the PHP Chinese website!