模块化

NKyc4t_XAG9QU

# CommonJS

CommonJS是同步加载，浏览器端使用会造成阻塞，服务端使用commonjs的原因是因为资源本身存储在服务器上，不用担心网络问题，读取磁盘文件也比较快。

// module.js
module.exports = {
    name:'banana',
    age:18,
    eat:function(){
        console.log('I like eating bananas')
    }
}
module.exports.userName = 'admin'

1
2
3
4
5
6
7
8
9

// app.js
const obj = require('./module.js')
console.log(obj) // { name: 'banana', age: 18, eat: [Function: eat], userName: 'admin' }

// 如果只想导入某个属性，可以使用解构赋值
const { name } = require('./module')
console.log(name) // 'banana'

1
2
3
4
5
6
7

# AMD 与 CMD

AMD使CommonJS规范可以异步加载，也就可以在浏览器使用了，但是规范成本高

# ES Module

// module.js
const obj = {
    name:'banana',
    age:18,
    eat:()=>{
        console.log('I like eating bananas')
    }
}
const userName = 'admin'

export { obj,userName }

1
2
3
4
5
6
7
8
9
10
11

// app.js
import { obj,userName } from './module.js'

1
2

# script标签中使用

给script标签添加 type="module" 属性

# 与commonjs区别

commonjs是拷贝，import是引用

# node环境使用esmodule

node8.0以后就支持了

编辑

上次更新: 2022/11/20

← 深度克隆常用工具函数→