preface

  • Object module

The original concept of modularity was to put a static object into a single file and then call it, not reusable.

var obj={
	name:"Jane",
    age:18
}
Copy the code
  • Execute function immediately

An object is returned as the result of an immediately executed function, reusable but dependent on external variables, and the code has no standard specification.

var obj=(function(outerVar){
	return {
    	name:"Jane",
        age:18,
        prop:outerVar
    }
})(outerVar)
Copy the code

CommonJS+Browserify

CommonJS proposes the following four concepts:

  • module
  • export
  • require
  • global

We all know that CommonJS exports using module.exports or exports[property]

/*module.js*/
var name="Jane"
module.exports={
	getName(){
    	return name
    },
    changeName(){
    	name='KangKang'
    }
}

/*demo1.js*/
var obj=require('./module.js')
console.log(obj.getName())  //'Jane'
obj.changeName()
console.log(obj.getName())  //'KangKang'

/*demo2.js*/
var obj=require('./module.js')
console.log(obj.getName)  //'KangKang'  
Copy the code

From the result returned by demo2.js, we can see that require caches the current state when loading the execution module, and gets the cached value first when the module is used elsewhere.

One of the biggest issues is that browsers don’t know CommonJS modules, exports, require, etc., so you need an intermediate script Browserify to compile CommonJS into a browser-supported format. If it is only used on the server side, like Nodejs, no intermediate scripts are needed.

Compilation principle is not detailed, you can see ruan Yifeng blog – commonJS-in-Browser

AMD UMD

AMD: Asynchronous module definition.

A define method is all it takes to load the export module, but intermediate scripts are also required for translation. It’s also been popular on the front end for a few years. Asynchronous module loading format supported by the browser

UMD: Unified module definition.

Is a compromise between CommonJS and AMD, the specific use is not understood.

ES6

ES6 syntax is voted out according to the appeal of the majority of developers, so it is the most widely recognized and popular syntax in JavaScript at present. Its export module form is export a variable, function, class, import… from …

Note that ES6 modules do not cache run results, but dynamically and asynchronously fetch loaded module values, and variables are always bound to the module in which they are located.

  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.
  3. The CommonJS module require() is a synchronously loaded module, while the ES6 module import command is asynchronously loaded, with a separate module-dependent parsing phase.

That is to say, when the variables of the exported file of ES6 module change, the variables of the imported file also change. In addition, the JS engine will generate a read-only reference when it encounters import when parsing, and then read the value of the variable by referring to the file when executing.

// module.js export let count = 1; export function addCount() { count++; } // main.js import { count, addCount } from './module'; console.log(count); // 1 addCount(); console.log(count); / / 2Copy the code