preface

All the code is written in a file or module, the coupling between the codes is too strong, any modification may cause global pollution, not conducive to the later maintenance; Moreover, functions in the same file are not easily divided clearly, and it is difficult to realize the reuse of the same function module. Js modularization is to package a complex program into several independent modules in accordance with certain specifications, and then combine these modules together to complete the function of the complex program. The data and methods inside a module are private, exposing only methods to the outside to communicate with other modules outside. This paper mainly analyzes three commonly used modular specifications: Commonjs, AMD (Asynchronous Module Definition), and ES6, CMD (Common Module Definition) and UMD (Universal Module Definition) are not discussed in this article.

commonjs

For applications that follow the CommonJS specification, each file can be treated as a module. Modules are loaded synchronously when running on the server side and cannot run directly on the browser side. They need to be compiled and packaged into a specification that the browser can recognize. Nodejs is an implementation that follows the CommonJS specification. 1. Commonjs runtime environment server: NodeJS browser: cannot run directly in the browser, need to use the packaging tool to package into the browser can recognize the specification.

2. The commonjs example

The commonJS specification exposes modules in two ways: (1) module.exports = value (2) exports.xxx = value exports defaults to an empty object. Let module = require(‘./module’)



module1.js

module.exports = {
    arr: [1, 2, 3],
    func: ()=>{
        console.log('module1')
    }
}
Copy the code

module2.js

exports.arr = [1, 2, 3]
exports.func = ()=>{
    console.log('module2')
}
Copy the code

main.js

let module1 = require('./module1')
let module2 = require('./module2')

console.log(module1.arr)
module1.func()

console.log(module2.arr)
module2.func()
Copy the code

Running main.js in the Node environment produces the following output:

[ 1, 2, 3 ]
module1
[ 1, 2, 3 ]
module2 
Copy the code

Commonjs code that follows the CommonJS specification cannot be run directly in a browser, as shown in the following example:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>commonjs</title> </head> <body> <script src="./main.js"></script> </body> </html>Copy the code

After the browser opens, the message:



Before the browser runs, you need to package commonJs-compliant code into browser-aware code, using the Browserify package (Browserify.org/)Edit package:

Install Browserify locally

npm install browserify –save-d

Package main.js

browserify ./main.js -o .. /dist/bundle.js

Index.html introduces packaged files

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>commonjs</title> </head> <body> <! -- <script src="./main.js"></script>--> <script src=".. /dist/bundle.js"></script> </body> </html>Copy the code

Normal browser output:

AMD

Asynchronous Module Definition (AMD), which is mainly used on the browser. 1. The AMD operating environment runs in the browser. AMD defines exposed modules: (1) Define modules without dependencies:

Define (function(){return module})Copy the code

(2) Define dependent modules:

Define (['module1', 'module2'], function(m1, m2){return module})Copy the code

AMD use modules:

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

AMD running need to download the requirejs, download address: requirejs.org/docs/downlo… Directory structure:



The module1.js file contains the following contents

define(function(){
    return 'module1'
})
Copy the code

The module2.js file contains the following contents

define(['module1'], function(m1) {
    return m1 + '+module2'
})
Copy the code

The contents of the main.js file are:

requirejs.config({
    paths: {
        module1: './module/module1',
        module2: './module/module2',
    }
})

requirejs(['module1', 'module2'], function(m1, m2) {
    console.log(m1)
    console.log(m2)
})
Copy the code

The contents of the index.html file are as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>commonjs</title> </head> <body> <script data-main="./main.js" src="./libs/require.js"></script> </body> </html>Copy the code

Open index.html in your browser and output

ES6

ECMAScript 6.0 (ES6 for short) is the next generation standard of THE JS language. The first version of ECMAScript 6.0 was released in June 2015. From now on, a new version will be released in June every year, marked by the year, such as ES2015 and ES2016. 1. ES6 Operating environment ES6 is a SPECIFICATION for JS. An environment that can run JS is an ES6 operating environment. Some runtime environments may not yet support the latest ES6 features, so you typically use the Babel transcoder (babeljs.io/) to convert ES6 code into ES5 code and run it in a browser. ES6 example Export module: export/export default Import module: import Directory structure:

Module1. Js file

let fn1 = function func1() {
    console.log('module1')
}
export {fn1}
Copy the code

Module2. Js file

let fn2 = function func2() {
    console.log('module2')
}
export default fn2
Copy the code

The contents of the main.js file

import {fn1} from './module/module1.js'
import fn2 from "./module/module2.js"
fn1()
fn2()
Copy the code

Index. HTML file contents

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>commonjs</title> </head> <body> <script type="module" src="./main.js"></script> </body> </html>Copy the code

Note that browsers support the ES6 syntax import and export, but import js files as module types. Open index.html in your browser and output