ECMAScript-Module

一、ECMAScript-Module

模块化的优点：

• 不会污染window
• 一处定义，多处使用，不必重复定义
• 很方便的解决模块化存在依赖关系，在es6中，只需要按需导入即可。
• 项目结构更加合理

1. 模块化规范

• CommonJS：Node.js
• AMD：require.js 【依赖前置】
• CMD：sea.js 【依赖后置，阿里，不再维护】
• ES6【2015年es6的模块化规范】

2. ES6的模块

• export
• import
• as
• export default

3. 相关举例

• 导出一个数值

// 导出一个数值
export const a = 5
// 对应的导入
import {a} from './module'

注意：这种方式的导入和导出，导出的变量和导入的变量，名称必须一致。如果希望导入的变量使用其他的名称，可以使用as 来进行修改

// 对应的导入
import {a as aa} from './module'

• 导出一个字符串

export const name = 'zhangsan'
import {name} from './module'

• 导出一个函数

export const sum = (x, y) => x + y
import {sum} from './module'

• 导出一个对象

const obj = {
	name: 'zhangsan',
	age: 18
}
export {obj}
// 注意导出对象的时候，需要一个{}

import {obj} from './module'

• 导出一个类

// 导出
class People {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log('I am ', this.name)
    }
}
export { People }

// 导入
import { People } from './module'

• 快速导出，导入

// 导出
const a = 5
const name = 'zhangsan'
const sum = (x, y) => x + y

const obj = {
	name: 'zhangsan',
	age: 18
}

class People {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log('I am ', this.name)
    }
}
export {a, name, sum, obj, People}

// 导入
import {a, b, sum, obj, People} from './module'

• 使用export default

// 导出
const a = 5
export default a
// 导入
import aa from './module'

// 默认导出和export普通导出共存
const a = 5
export default a
export const name = 'zhangsan'
// 导入
import aa, { name } from './module'

注意:对于export default导出的时候，import后面的名称可以随便，且一个导出模块，只能有一个export default，表示默认

// 快速导出
const a = 5
const name = 'zhangsan'
const sum = (x, y) => x + y

const obj = {
	name: 'zhangsan',
	age: 18
}

class People {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log('I am ', this.name)
    }
}
export default {a, name, sum, obj, People}

// 导入
import module from './module' // 这边的module只是一个对象的形式，通过module.xxx去访问

以模块的方式导入

// * 这种就需要注意，
// 如果导出的是export default, 对应导入取值是mod.default.xxx
// 如果普通的export导出，对应的导入取值是mod.xxx
import * as mod from './module'