一、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'