Front-end modularization is a complex file programming a separate module, such as JS files, etc., divided into separate modules for reuse (reuse) and maintenance (version iteration), which leads to the problem of interdependence between modules, so there are commonJS specifications, AMD, CMD specifications, etc., And webpack, a tool for JS packaging (compilation, etc.)

CommonJS

NodeJS is an implementation of the CommonJS specification, and WebPack is written in CommonJS

Browsers are not compatible because require is synchronous and needs to wait. If we use synchronization to get server information, the browser will be “suspended” and the browser does not have module, exports, require and global variables

CommonJS defines modules as :{require} {module definition (exports)} {module identifier (module)}, loaded at runtime

Conversion tool: Browserify

//foo.js module.exports = function(x) { console.log(x); }; //main.js var foo = require("./foo"); foo("Hi"); = = = = = = = = = = = = = = = = = = = = = = = = "" "" "" [{" id" : 1, the "source" : ". The module exports = function (x) {\ n the console. The log (x); \ n}; ". "deps":{} }, { "id":2, "source":"var foo = require(\"./foo\");\nfoo(\"Hi\");", "deps":{"./foo":1}, "Entry ":true}] Browerify puts all modules into an array. The ID attribute is the module number, the source attribute is the module source, and the DEPS attribute is the module's dependency.Copy the code

AMD

Async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async: async

Math.js define(function (){var add = function (x,y){return x+y; }; Var CCC = function (x,y){return x+y; }; Return {add: add, CCC: CCC}; }); Require (['math'], function (math) {math. Add (2, 3); }); Function (dep1,dep2){define(['dep1','dep2'],function(dep1,dep2){define(['dep1','dep2'],function(dep1,dep2){... });Copy the code

RequireJS implements the AMD specification, such as using require.js in your project and setting up the main entry to load other modules asynchronously

</script> If underscore ="js/require.js" data-main="js/main"></script> Require (['jquery', 'backbone', 'backbone'], function ($, _, backbone){// some code here}); / / require. Config ({baseUrl: "js/lib", paths: {"jquery": "jquery.min", "underscore": Underscore. Min ", "backbone": "backbone. Min "}});Copy the code

CMD/AMD

The common module definition seaJS CMD advocates dependency nearby,AMD advocates dependency front-loading,AMD advocates since the start of loading, while CMD advocates need to be used before loading

define(function(require, exports, Module) {var a = require('./a') a.dosomething (); var b = require('./b');  })Copy the code

Fast AMD | | | will waste resources pre-load, all depend on execution until use

CMD | only really need to load dependent on | | poor performance until use to define dependency

CommonJS and ES6 modules

  • CommonJS Modules are run time loaded, ES6 Modules are compile-time output interfaces
  • CommonJS output is a copy of the value; ES6 Modules output references to values, and changes within the output module can affect the reference changes
  • The module path imported by CommonJs can be an expression because it uses the require() method; ES6 Modules can only be strings
  • CommonJS This points to the current module, ES6 Modules This points to undefined
  • ES6 Modules doesn’t have these top-level variables: arguments, require, module, exports, __filename, __dirname

require

  1. CommonJs syntax (AMD specification introduction), CommonJs modules are objects.
  2. The run-time method of loading the entire module (that is, all the methods in the module), generating an object, and then reading its methods from the object (only the object is available at run time, not static at compile time) can theoretically be used anywhere in the code
  3. Require is an assignment process that assigns the result of require (object, number, function, etc.), an object of export by default, to a variable (copy or shallow copy).

import

  1. Es6 modules are not objects. Es6 modules are not objects. Es6 modules are not objects
  2. It is called at compile time to determine module dependencies and input variables (ES6 module is not an object, but the output code is specified by export command, and then the import input is used to load only the methods in import, other methods are not loaded). Import has promotion effect and will be promoted to the head of the module (executed at compile time).
  3. Import is the deconstruction process (who is needed, who is loaded)