[js modularity] CommonJS / ES6 modularity

Table of contents

1. Getting Started with Modularization

1.1 What is modularity

1.2 Why modularization

1.3 Problems brought about by modularization

2. Modular specification

2.1 CommonJS (browser and server side)

2.1.1 Specifications

2.1.2 Basic syntax

2.2 ES6 modularity (commonly used)

2.2.1 Specifications

2.2.2 Basic syntax

1. Getting Started with Modularization

1.1 What is modularity

1. Split a complex image into individual files according to certain rules, and finally combine them together.
2. These split files are modules. The internal data of the module is private, and only some methods are exposed to the outside to communicate with other external modules.

1.2 Why modularization

1. Reduce complexity and improve decoupling
2. avoid naming conflicts
3. Better separation, load on demand
4. Higher reusability, high maintenance

1.3 Problems brought about by modularization

1. too many requests
2. Dependency Fuzzy (Combined)
3. difficult to maintain

Take it apart and put it back together

2. Modular specification

A large project must use modularization technology, and the corresponding modularization specification will be used
when using modularization. There are two popular modularization specifications: CommonJS, ES6

2.1 CommonJS (browser and server side)

2.1.1 Specifications

1. Official website: http://wiki.commonjs.org/wiki/modules
2. Each file is a module
3. CommonJS modular code  can run on both the server side and the browser side.
4. Server side: modular code can be run directly
5. Browser side: Modularized code is compiled with Browserify (  http://browserify.org).

2.1.2 Basic syntax

1. The export module exposes data

First way: Second way:module.exports = value（value为要交出去的变量、对象、函数等）
module.xxx = value

2. import Import modules
Import third-party modules; require(xxx), xxx is the module name
Import custom modules: require(xxx), xxx is the module file path

3. Built-in relationship

console.log(exports == module.exports);  // true

Simultaneously expose multiple

module1.js

/*
    module1 使用 module.exports = xxx 去暴露
*/
// module.exports 和 exports不能混用，若混用了，以 module.exports为主

const data = 'athui'
const msg = 'hello'
module.exports = {
	showData(){
		console.log(data);
	},
	showMsg(){
		console.log(msg);
	}
}
exports.x = 100// 不起效

module2.js

/*
    module2 使用 exports.xxx = value 去暴露，value是暴露的内容，xxx是名字
*/
exports.sum = function(a, b){
	console.log(a + b);
}
exports.sub = function(a, b){
	console.log(a - b);
}
export.a = 1

app.js

// 引入的内容是什么，取决的暴露的是什么

// 引入的同时解构赋值
const {showData, showMsg} = require('./module1') // 引入自定义模块
const {sum, sub, a} = require('./module2')

// 引入第三方包
const uniq = require('uniq') 
const arr = [1,2,10,5]
console.log(uniq(arr)); //去重 字典排序 1 10 2 5

[Run in node environment] node app.js
[Run in browser environment] Execute
index.html

1. Install browserify globally:npm i browserify -g
2. Compile the specified file browerserify ./app.js -o ./build.js
3. Introduce build.js in the html page

index.html

<script type="text/javascript" src=".bulid.js"></script>

2.2 ES6 modularity (commonly used)

2.2.1 Specifications

1. Each file is a module
2. The code needs to be compiled sequentially with Babel and Browserify to run on the browser side
3. Bebel Chinese website: https://www.bebeljs.cn/
   Babel can convert es6 to es5

2.2.2 Basic syntax

1. Module exposes data
   1. Expose separately (exposure on demand) export 暴露内容
   2. uniform exposure export {暴露内容1，暴露内容2}
   3. exposed by default export defalut 暴露内容

1. Separate exposure (on-demand exposure)

export const data = 'asheh'
export const msg = 'ssss'
export function showMsg(){
	console.log(msg);
}
export function showData() {
	console.log(');
}

Supplement: Prepare related dependency packages (to prepare for compiling code)
Global installation: babel-cli, Browserify: npm install babel-cli browserify -g
Local installation: babel-preset-es2015:  npm install babel-preset-es2015
Create .babelrc file

{
	"presets":["es2015"]
}

perform  translation babel ./  -d  ./build   ./代表当前文件 -d代表编译 ./build代表输出文件夹
browserify ./build/app.js -o ./build/build.js

babel ： es6 -> CJS （es5）

browserify: CJS -> browser can run

2. Uniform Exposure export {暴露内容1，暴露内容2}

module3.js

const school = '尚硅谷'
const person = {
	name:'老刘',
	age:18,
	sex:'女'
}
function getLaoliu(){
	console.log(person)
}
//统一暴露--常用`在这里插入代码片`
export {school, person, getLaoliu}
//支持改名
export {school as school ,person as person, getLaoliu as getLaoliu}

3. Default exposure (suitable for exposing only one data) can only be exposed once

module4.js

export default {
	name:"wc",
	age:5
}

use simultaneously

module5.js

// [分别暴露]
export const teacher1 = {name:'强哥', age:15}
export const teacher2 = {name:'ke 哥', age:35}

// [统一暴露]
const stu1 = {name:'网哥', age:25}
const stu1 = {name:'掌声', age:33}
export {stu1,stu2}

// [默认暴露]
export default{
	school:'上海dax',
	address:'shanghai',
	subject:['计算机','java','大数据']
}

Import method

app.js

// 引入【分别暴露】模块
import {data,msg,showData,showMsg} form './module1' // 注意不是解构赋值

// 引入【分别暴露】模块 + 打包加入
import * form './module1'

// 引入【分别暴露】模块 + 重命名
import {data as data2} form './module2'

// 引入【统一暴露】模块 （和上面三种一样）
import {school as sc,person,getLaoliu} form './module3'

// 引入【默认暴露】模块 
import module4 form './module4'

// 引入多种暴露方式
import module5,{teacher1，teacher2,stu1,stu2} from './module5'