With the increase of JS complexity, modularity is widely used, there is no partner to all kinds of introduction and export silly points are not clear? What is the difference between module. Export and exports?

Preface – Modularization

Usually when we write code, we will divide complex problems reasonably according to the actual situation, so that the code is more readable and maintainable. Thus a module can be understood as part of a whole.

  • Each module is an individual and of course it is best to follow the minimum functional modularity;
  • Modules are reusable
  • Better separation and loading on demand

Development of modularity

1. The simplest global function

function fn1(){
    
}
function fn2(){
    
}
Copy the code

Implementation: Each function is divided by function

Problem: Global pollution, should be more process-oriented development model

2. Namespace mode: Object literal writing method, simple encapsulation of a function block

let action = {
    name: 'aa'.printName(){
        console.log(this.name)
    }
}
action.name = 'bb'
action.printName()//bb
Copy the code

Implementation: can encapsulate more complex component methods, reducing global variables

Problem; The method data inside can be changed. Data insecurity

3.IIFE mode: Anonymous function call (closure)

Jquery source code is used in this mode; Some components of JQ, too, are treated this way.

Implementation: Encapsulates data and behavior within a function, and avoids global variable contamination by adding attributes to the window to expose the interface

Modular specification

1.Common js

An overview of the

Node JS uses the Common JS specification. Each JS is a separate module with its own scope. Variables, functions, and classes defined in one file are private and invisible to other files. On the server side, modules are loaded synchronously at runtime. On the browser side, modules need to be compiled and packaged in advance.

The characteristics of

1. Have their own scope, will not pollute the global

2. The contents of files are private to ensure data security

3. The module can be loaded multiple times, but it will only run once at the first time of loading, and then the result of running will be cached. After loading, the cache result will be read directly. For the module to run again, the cache must be cleared.

4. The order of module loading is related to the order of code (synchronous loading ~)

grammar

Module.exports = value exports. XXX = value // require()Copy the code

Loading mechanism

The loading mechanism for CommonJS modules is that the input is a copy of the output value. That is, once a value is printed, changes within the module do not affect that value.

2.AMD

AMD and CMD are asynchronous and apply to the browser side. Because it is asynchronous, the data method can be accessed using a callback after the load is complete.

define(['module1'.'module2'].function(m1, m2){
   returnModule}) require (['module1'.'module2'].function(m1, m2){
   使用m1/m2
})
Copy the code

3.CMD

As asynchronous as AMD is, the CMD specification incorporates CommonJS and AMD specifications. In Sea-.js, the CMD specification is followed.

define(function(require, exports, module){
  exports.xxx = value
  module.exports = value
})

define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})
Copy the code

4. Modularity of ES6

ES6 in the language standard level, the realization of module function, and the implementation is quite simple, can completely replace CommonJS and AMD specifications, become a common browser and server module solution.

The ES6 module is designed to be as static as possible, so that the module dependencies, as well as the input and output variables, can be determined at compile time. Both CommonJS and AMD modules can only determine these things at runtime. For example, a CommonJS module is an object, and you have to look for object properties when you enter it.

/ / CommonJS modulelet { stat, exists, readFile } = require('fs'); / / is equivalent tolet _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

Copy the code
// ES6 module import {stat, exists, readFile } from 'fs';
Copy the code

Commonjs essentially loads the FS module as a whole (that is, loads all the methods of FS), generates an object (_FS), and then reads three methods from that object. This type of loading is called “runtime loading” because the object is only available at runtime, making it completely impossible to do “static optimization” at compile time.

An ES6 module is not an object. Instead, it explicitly specifies the output code through the export command, which is then input through the import command.

The essence of the ES6 module is to load three methods from the FS module and none of the other methods. This type of loading is called “compile-time loading” or static loading, meaning ES6 modules can be loaded at compile time, which is much more efficient than CommonJS modules

The difference between the two:

The CommonJS module outputs a copy of a value. The ES6 module outputs a reference to a value.

② CommonJS module is loaded at runtime, ES6 module is output at compile time.