JavaScript模块化CommonJS规范和es6规范全讲解

一.CommonJS规范

1.模块导出文件

// es6规范,nodejs默认不支持,需要用babel降级

// 一.用export将变量导出

// ① 在定义前面写,规则：export + 声明变量/函数
export function f() {
    console.log('f')
}

export let f2 = 1
export let obj = {a: 1, b: 2}

// ② 在定义后写,用{}括起来，里面写变量名字
function f() {
    console.log('f')
}
let f1 = () => {
    console.log('f1')
}
let obj = {a: 1, b: 2}
export {f, obj}
export {f1}

// 二.用export default导出 规则：export default + 表达式

// 一个文件只能有一个export default导出,default后面跟的是什么,导出的就是什么,且只能导出一个变量
// 比如导出一个对象
export default {
    a: 3,
    f() {
        console.log('f')
    },
    f1: () => {
        console.log('f1')
    },
}
// 比如导出一个函数
// export default function () {
//     console.log(1)
// };
// export default function a() {
//     console.log(1)
// };
// 比如导出一个简单的变量
// let c = 3
// export default c

2.模块导入文件

//用require函数获得的就是那个文件中的module.exports属性
const a = require("./CommonJS规范.js")

console.log(a)

二.es6规范

1.模块导出文件

// es6规范,nodejs默认不支持,需要用babel降级

// 一.用export将变量导出

// ① 在定义前面写
export function f() {
    console.log('f')
}
export let f2 = 1
export let obj = {a: 1, b: 2}

// ② 在定义后写,用{}括起来
function f() {
    console.log('f')
}
let f1 = () => {
    console.log('f1')
}
let obj = {a: 1, b: 2}
export {f, obj}
export {f1}

// 二.用export default导出

// 一个文件只能有一个export default导出,default后面跟的是什么,导出的就是什么,且只能导出一个变量
// 比如导出一个对象
export default {
    a:3,
    f() {
        console.log('f')
    },
    f1: ()=> {
        console.log('f1')
    },
}
// 比如导出一个函数
// export default function () {
//     console.log(1)
// };
// 比如导出一个简单的变量
// let c = 3
// export default c

2.模块导入文件

// 一.用export将变量导出,我们用{}接收,接收到传过来的变量,名字一一对应
import {f} from './es6规范';
import {f1, obj} from './es6规范';
f()

// 或者将接收到的变量全部挂载到一个对象身上
import * as w from './es6规范';
w.f()

// 二.用export default导出,随便用一个变量去接收,发送的是什么,我们就接收到什么
import b from './es6规范';
console.log(b)

顺便提一句，在1文件去调用2文件中的函数时，执行1文件的同时会自动执行2文件中的代码