CommonJs，Requirejs和ES6

Posted on Edited on In Waline:

Use of CommonJs, Requirejs and ES6 modules.

CommonJs

Commonjs is nodejs, which is a widely used Modularization mechanism on the server side.

The main content of this specification is that the module must export external variables or interfaces through module.exports, and import the output of other modules into the scope of the current module through require ()

According to this specification, each file is a module with its own scope. Variables, functions, classes, etc. in the file are not visible to other files. If you want to share variables in multiple files, you must define them as attributes of the global object (not recommended).

Definition module

Inside each module, the module variable represents the current module, and its exports attribute is the external interface, exposing the module’s interface. Other files load the module, which is actually reading the module.exports variable

Load module

, the suffix name defaults to js

The loading order of modules, according to the order in which they appear in the code

Depending on the required parameters, the require command goes back to a different path to find the module file

If the parameter string starts with/, it means that a module file located in the absolute path is loaded

If the parameter string starts with./, it means that a module file located in a relative path is loaded

If the parameter string does not start with the above two methods, it indicates that a default core module (node core module, or a module installed globally or locally in the node_modules) is loaded.

Entry file

Usually there will be a main file (entry file), load this entry file in index.html, and then load other files in this entry file. You can configure the main field in package.json to specify the entry file

Module cache

When a module is loaded for the first time, Node will cache the module, and when the module is loaded later, the module.exports of the module will be directly removed from the cache.

Loading mechanism

CommonJS’s loading mechanism is that the input is a copy of the input value, that is, once a value is output, changes inside the module cannot affect the value

AMD

AMD (Asynchronous Module Definition) is Designed for Browser Environmental, because the commonjs module system is loaded synchronously, and the current browser environment is not ready to load modules synchronously

Definition module

The define method is used to define modules, and RequireJS requires each module to be placed in a separate file

According to whether it depends on other modules, it can be divided into two types. The first is to define independent modules, and the second is to define non-independent modules

Independent module

1
2
3
4
5
6
define(function () {
	***
	return {
		//return interface
	}
})

Non-independent module

1
2
3
4
5
6
define(['module1', 'module2'], function (m1, m2) {
	***
	return {
		//return interface
	}
})

Load module

Use the require method to load the module, but because it is asynchronous, it uses the form of a callback function

1
2
3
require(['m1', 'm2'], function (m1, m2) {
	***
})

The above code indicates that the two modules m1 and m2 are loaded. When the load is successful, the callback function is executed, and the callback function is used to complete the specific task

The require method can also be used inside the define method

1
2
3
define(function(require) {
	let otherModule = require('otherModule')
})

The require method also supports a third parameter, the error handling callback function

1
2
3
4
5
6
7
8
require(
    ['backbone'], 
    (Backbone) => {
        return Backbone.View.extend({/*...*/})
    },
    (err) => {
    }
)

Configure

The require method itself is also an object, which has a config method for configuring the parameters of requirem.js

1
2
3
4
5
require.config({
    paths: {
        jquery: 'lib/jquery'
    }
})

paths

The paths parameter specifies the location of each module. This location can be either on the same server, an external URL, or multiple locations can be defined for the same module, so that when the first location fails to load, the second location will be loaded. The above code specifies the location of jquery, so that you can use require ([‘jquery’], function () {}) directly in the file

shim

Some libraries are not compatible with AMD, so you need to specify the shim attribute, which is used to help AMD load non-AMD specification libraries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
require.config({
    paths: {
        'backbone': 'vendor/backbone',
        'underscore': 'vendor/underscore'
    },
    shim: {
        'backbone': {
            deps: ['underscore'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: "_"
        }
    }
})

ES6

ES6 officially proposes the built-in Modularization syntax, and we do not need to introduce additional requijs on the browser side for Modularization.

Modules in ES6 have the following characteristics:

Module automatically runs in strict mode
Variables created at the module’s top-level scope will not be automatically added to the shared global scope, they will only exist inside the module’s top-level scope.
The this value of the module top-level scope is undefined
For content that needs to be accessed by code outside the module, the module must export it

Definition module

Use the export keyword to expose any variable, function, or class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//export variable
export var color = "red";
export let name = "cz";
export const age = 25;

//export function
export function add(num1,num2){
    return num1 + num2;
}

//export class
export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

function multiply(num1, num2) {
    return num1 * num2;
}

//Export object, that is, export reference
export {multiply}

Rename module

1
2
3
4
5
function sum(num1, num2) {
    return num1 + num2;
}

export {sum as add}

Export default values

The default value of a module is a single variable, function, or class specified using the default keyword, and you can only set one default export per module.

1
2
3
export default function(num1, num2) {
    return num1 + num2;
}

This module exports a function as the default value, and the default keyword indicates that this is a default export. This function does not need to have a name, because it represents the module itself. Compared to the function exported earlier using export, it is not an anonymous function but must have a name to use when loading the module, but the default export does not need a name, because the module name represents the exported value.

Default values can also be exported using the rename method

1
2
3
4
5
function sum(num1, num2) {
    return num1 + num2;
}

export { sum as default };

Load module

Use the import keyword in a module to import other modules.
The import statement has two parts, one is the identifier to be imported, and the other is the source module of the identifier to be imported. Here is the basic form of the import statement:

1
import { identifier1,identifier2 } from "./example.js"

Rename import

As with exporting, we can also rename imported bindings:

1
import { sum as add} from './example.js'

Restrictions

Both export and import have an important limitation, that is, they must be used outside of other statements or expressions, and cannot be used inside Code Blocks such as if. One reason is that the module syntax needs to allow JS to statically determine what needs to be exported. Because of this, you can only use export and import in the top-level scope of the module.

Reference article:

https://blog.csdn.net/crystal6918/article/details/74906757