Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

ES系列文章

模块化Module?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起。块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

模块化Module规范

CommonJS:Node.js（服务端）
AMD:require.js（异步模块定义）
CMD:sea.js
ES6（客户端）

导入模块
//引入
import {
    a as aa,
    b,
    sum,
    obj,
    People
} from './module'
console.log(aa, b)
console.log(sum(2, 5))
console.log(obj)
let p = new People('xiecheng')
p.showName()

import add, {str} from './module'
console.log(add(4, 5), str)


import mod from './module'
console.log(mod.a)
console.log(mod.b)
console.log(mod.obj)
console.log(mod.sum(7, 8))

import * as mod from './module'
console.log(mod)
console.log(mod.default.a)
console.log(mod.default.b)
console.log(mod.default.sum(8, 9)

可以使用逗号分割，命名必须一样

导出模块
//module
export const a = 5
export const b = 'imooc'
export const sum = (x, y) => x + y  //箭头函数
const obj = { //对象
    name: 'es'
}
export {obj}
//统一使用
const a = 5
const b = 'imooc'
const sum = (x, y) => x + y
const obj = {
    name: 'es'
}

class People {
    constructor(name) {
        this.name = name
    }
    showName() {
        console.log(this.name)
    }
}

export {
    a,
    b,
    sum,
    obj,
    People
}

const a = 5
export default a
const b = 'imooc'
export default b

export default const a = 5 // 错误
function sum(x, y) {
    return x + y
}
export default sum

export const str = 'imooc'

const a = 5
const b = 'imooc'
const sum = (x, y) => x + y
const obj = {
    name: 'es'
}
class People {
    constructor(name) {
        this.name = name
    }
    showName() {
        console.log(this.name)
    }
}
export default {
    a,
    b,
    sum,
    obj,
    People
}

一个前端小白，若文章有错误内容，欢迎大佬指点讨论！

ES6 |模块化Module

ES系列文章

模块化Module?

模块化Module规范