Before the appearance of modular specification, modular implementation is based on the original module system, and through the convention to achieve modular code organization. In order to unify the differences between developers and projects, a standard is needed to regulate the implementation of modularity. In addition, for the problem of module loading in modularization, in the first four stages are manually introduced through the script label to each used module, which means that module loading is not controlled by the code once a long time after maintenance is very troublesome. Imagine a problem if a page relies on a module and forgets to reference that module in HTML. Or removing a reference to a module from the page and forgetting to delete the reference to the module in the HTML can cause problems. So we need some basic common code to automatically load modules through code, which means we need a module language standard and a basic library (module loader) to automatically load modules.

CommonJS specification

When it comes to modularity specifications, the CommonJS specification is the first one that comes to my mind. It is a set of standards proposed in Node that all module code in Node must follow the CommonJS specification. The specification specifies that each file is a module, each module has a separate scope, each module needs to export members through module.exports and load modules through the require function. Using this specification on the browser side can be problematic because Node’s module loading mechanism is synchronous. The execution mechanism of Node is that the module is loaded at startup. It doesn’t need to be loaded during execution. It uses the module later, so this is not a problem in Node. However, if you switch to the browser side and use the CommonJS specification in the browser, it will be inefficient because every page load will result in a large number of synchronous mode requests.

AMD specification

The Asynchronous Module Definition specification AMD(Asynchronous Module Definition) was designed specifically for the browser side, rather than the CommonJS standard. At the same time, an AMD-compliant library require.js was released. It implements the AMD specification and is itself a very powerful module loader. According to the AMD specification, each module must be defined by the define function, which can accept two or pass three parameters by default. If passing three arguments, the first parameter is the name of the module in the later loading when the module is used, the second parameter is an array used to declare the module dependencies, the third parameter is a function and the function parameters and the dependency of the front one each for a member of the module. The define function provides a private space for the current module. If you want to export some members to the external module, you can return it.

// Define a module
define('module1'['jquery'.'./module2'].function($, module2){
	return {
    	start: function() {$('body').animate({margin: '200px'}}}})Copy the code

In addition, requireJS also provides a require function to help developers automatically load modules. Its usage is similar to define. The difference is that require is used to load modules, while define is used to define modules.

// Load a module
require(['./module1'].function(module1) {
	module1.start()
})
Copy the code

When requireJS loads a module, it automatically creates a script tag to send the script file request and execute the module code. Most third-party libraries currently support the AMD specification, but IT is relatively complicated to use AMD, because developers need to write code not only to write business representatives, but also to manually write module files using require, DEFINE, etc. These will lead to an increase in the complexity of our code. In addition, if the module is divided too carefully, it will cause the number of REQUESTS for JS files in the same page will be particularly large, resulting in low page efficiency. So AMD was a step in the evolution of front-end modularity, a compromise implementation that wasn’t the final solution, but it made a lot of sense in the context of its time.

CMD specification

AMD for the first time provided a standard for front-end modularity in the browser side, and another standard CMD(Common Module Defination) specification implemented by the Sea-.js library proposed by Taobao appeared at the same time. This module standard is somewhat similar to CommonJS and is basically a duplicate wheel of requireJS in usage. The idea was to make CMD code as similar to CommonJS as possible to reduce the learning costs of developers, but this approach was later adopted by requireJS.

/ / CMD specification
define(function(require.exports.module) {
	// introduce dependencies via require
    var$=require('jquery')
    Exports or module.exports exposes members
    module.exports = function () {$('body').append('<p>module2</p>')}})Copy the code