Background:

A website consists of many pages, and developers used to separate development tasks or code by page dimension, which is modular development. But a page is often more complex, all THE JS code or HTML code written together is difficult to maintain, so there is a more perfect front-end module development method, the purpose is to make the code easier to manage, can improve the code reuse rate.

In general, a file is a module that has its own scope and only needs to expose specific functions or variables.

Common JS modular specification

  1. CommonJS
  2. AMD
  3. CMD
  4. ES6 module system

1.CommonJS

In Node.js, CommonJS specification is mainly used to achieve modularization, mainly providing several environment variables such as Module, exports, require and Groble to achieve modularization.

Code examples:

// add.js function add(a, b) { console.log(a + b); } module.exports = {// exportmethods add,}; // index.js const addModule = require("./add"); Addmodule. add(1, 2); // Call a method in the moduleCopy the code

Commonjs adopts synchronous mode to load modules. On the server side, there will be no problem in this mode, because module files are stored locally and can be read quickly. However, problems may occur if commonJS mode is used for modularization on the web side due to network problems. So nodeJS is the commonJS best practice.

2.AMD

The AMD specification uses asynchronous loading of modules, which does not affect the execution of subsequent statements. When using the AMD specification, you usually need to use require.js for asynchronously loading modules, require.config() to specify reference paths, etc., define modules with define(), and require() to load modules.

Code examples:

// set the module path and reference name to require.js <script SRC ="js/require.js"> Config ({baseUrl: "js/lib", paths: {"jquery": // underscore": // // Underscore (){function(){// underscore (){function(){function() : }) // reference module require([" module file path (without.js suffix)"], function(){module loading is asynchronous, after module loading is complete, after module loading is complete, require([" module file path (without.js suffix)], function(){module loading is asynchronous. To use the related functions of the module})Copy the code

3.CMD

CMD is another JS modularization solution, which is similar to AMD, except that AMD advocates relying on front-loading and up-front execution, while CMD advocates relying on nearby and delayed execution. CMD mainly uses SEAJS for modular management.

Code examples ** : **

Math.js define(function(require, exports, module) {var $= require('jquery.js'); var add = function(a,b){ return a+b; } exports.add = add; }); Seajs. use(['math.js'], function(math){var sum = math.add(1+2); });Copy the code

4.ES6 Module

ES6, on the level of language standards, implements module functions, and implements them quite simply, aiming to become a common module solution for browsers and servers. Its module functions are mainly composed of two commands: export and import. The export command is used to specify the external interface of a module, and the import command is used to input functions provided by other modules.

Code examples:

Math.js **/ let add = function (a, b) {return a + b; }; export { add }; /** reference module **/ import {add} from './math'; console.log(add(99 + 100))Copy the code

5. Differences between ES6 module and CommonJS module

  1. The CommonJS module prints a copy of the value, the ES6 module prints a reference to the value.
  2. The CommonJS module is run time loaded, and the ES6 module is compile time output interface.