background

Modularity is often asked in interviews, along the same line: Tell me about the modularity journey? The difference between AMD and CMD? However, I didn’t have a complete knowledge system in my mind, so I had to falter and falter. It was really uncomfortable, so I made up my mind to sort out this piece of knowledge.

modular

What is modularity?

The internal data/implementation that encapsulates a complex program into blocks (files) according to certain rules (specifications) and combines them together is private, exposing only interfaces (methods) to communicate with external modules

Evolutionary history

  • Simple encapsulation: Namespace mode
  • Anonymous functions: IIFE mode (execute functions now)
  • Module pattern: Introduces dependencies
    • The cornerstone of modern modularity

Why modularity?

  • The Development of the Web is rapid, not only confined to static pages, but towards the development of applications, more and more rich functions
  • Code complexity is getting higher and higher
  • The need to decouple your code
  • Reduces file size and saves Http request time

Benefits of modularity

  • Avoiding naming conflicts (reducing namespace pollution)
  • Better separation, load on demand
  • Higher reusability
  • High reusability

implementation

The page introduces

And that raises questions

  • Request too much
  • Relying on the fuzzy
  • Difficult to maintain

Modular specification

CommonJS

specification

instructions

  • Each file can be treated as a module
  • On the server: Modules are loaded synchronously at runtime
  • In the browser: modules need to be compiled ahead of time for packaging processing
  • Javascript.ruanyifeng.com/nodejs/modu…

The basic grammar

  • Exposed to the module
    • module.exports = value
    • exports.xxx = value
  • The introduction of the module
    • require(xxx)
      • Third-party module: XXX indicates the module name
      • Custom module: XXX is the module file path

implementation

Server-side implementation

  • Node.js
  • nodejs.cn/

Browser-side implementation

  • Browserify
  • Browser-side packaging tool called CommonJS
  • browserify.org/

AMD

specification

instructions

  • Asynchronous Module Definition Asynchronous Module loading mechanism
  • Github.com/amdjs/amdjs…
  • Designed for use in browsers, modules are loaded asynchronously

The basic grammar

Defining exposure modules

  • Define modules that have no dependencies
define(function(){
    returnModule})Copy the code
  • Define modules with dependencies
define(['module1'.'module2'].function(m1, m2) {
    returnModule})Copy the code

Introducing usage modules

require(['module1'.'module2'].function (m1, m2) {use m1/m2})Copy the code

Implementation (browser)

  • Require.js
  • www.requirejs-cn.cn/

CMD

specification

instructions

  • Common Module Definition
  • Designed for use in browsers, modules are loaded asynchronously
  • Modules are loaded and executed only when they are in use

The basic grammar

Defining exposure modules

  • Define modules that have no dependencies
define(function(require.exports.module) {
    exports.xxx = value
    // or
    module.exports = value
})
Copy the code
  • Define modules with dependencies
define(function(require.exports.module) {
    // Introduce dependency modules (synchronous syntax)
    var module2 = require('./module2')
    // Introduce dependency modules (asynchronous)
    require.async('./module3'.function() {
        // Expose the module
        exports.xxx = value
    })
})
Copy the code
  • Introducing usage modules
define(function(require) {
    var m1 = require('./module1')
    var m4 = require('./module4')
    m1.show()
    m4.show()
})
Copy the code

Implementation (browser side)

  • Sea.js
  • seajs.github.io/seajs/docs/

ES2015

specification

instructions

  • es6.ruanyifeng.com/
  • Dependent modules need to be compiled and packaged

The basic grammar

  • Export module:export
  • Import module:import

Implementation (browser side)

  • Compile ES6 code into ES5 code using Babel
  • Compile and package JS using Browserify

UMD

specification

instructions

  • Universal Module Definition
  • Unified modular specification compatible with multiple operating environments
  • github.com/umdjs/umd

implementation

  • Babel packaging

Mind maps

Documents: JS modular knowledge summary. Mindmap links: note.youdao.com/noteshare?i…

conclusion

  • AMD advocates the dependency module front, CMD advocates the dependency module nearby
  • requireIs a copy of a module,importIs a reference to a module
  • The AMD/CMD/CommomJS modular specification is run-time loading and the ES6 modular specification is compile-time output interface