关于javascript:3分钟搞定ES6-模块化

33次阅读

共计 1659 个字符,预计需要花费 5 分钟才能阅读完成。

ES6 模块

ES6 应用 exportimport 导出和导入模块。

导出模块

一个模块就是一个独立的 JS 文件,该文件内的变量内部无奈获取。若心愿能让内部获取模块内的变量,则要用 export 关键字裸露变量。

// 别离裸露(命名行内导出)export const age = 66
export let name = 'Bruce'
export function sayHello() {console.log('hello from m1.js')
}
// 对立裸露(命名子句导出)let book = '红宝书'
let price = 129
let bookInfo = {
  author: 'Matt Frisbie',
  translator: '李松峰',
}
// 能够应用 as 关键字重命名,改名后原来的名字就不能用了
export {book, price, bookInfo as bookMessage}
// 默认裸露(默认导出)export default {
  color: 'red',
  edition: 4,
}

一个模块只能有一个默认导出,反复的默认导出会出错。

// SyntaxError
const obj = {age: 44}
export default obj
export default {name: 'Modules'}

默认裸露和对立裸露能够组合到一起。

const foo = 'foo'
const bar = 'bar'

// foo 是默认裸露,bar 是对立裸露
export {foo as default, bar}

实质上默认裸露是导出名为 default 的变量,导入的时候能够任意取名。因而前面不能跟变量申明语句。

// 等同
export {foo as default}
export default foo

// 等同
import xxx from 'module.js'
import {default as xxx} from 'module.js'

// 报错
export default let a = 1

三种导出形式能够在同一个模块同时应用。

// 默认裸露
export default {
  color: 'red',
  edition: 4,
}

// 对立裸露
let bar = 666
let foo = 'foo'
export {bar, foo}

// 别离裸露
export let msg = 'good'

export 导出的是值的援用,导入值会随导出值的变动而扭转,也就是通过接口可失去模块外部实时的值。

// m1.js
export let name = 'Bruce'
setTimeout(() => {name = 'good'}, 1000)

import {name} from './m1.js'
console.log(name) // 'Bruce'
setTimeout(() => {console.log(name)
}, 1500) // 'good'

导入模块

应用 import 关键字导入模块。

// 导入通过别离裸露和对立裸露导出的接口
import {name, age, sayHello} from './m1.js'
// 导入通过默认裸露导出的接口,变量名自取
import defaultValue from './m3.js'
// 混合导出的接口
import defaultValue, {book, price, bookInfo} from './m3.js'

导入模块时能够对变量重命名。

import {bookInfo as bookMessage} from './m2.js'

能够应用 * 进行模块的整体导入,此时必须进行重命名。* 是一个对象,所有导入值都保留在这个对象上。

import * as person from './m1.js'

console.log(person.name)
console.log(person.age)
person.sayHello()

import 命令会晋升到模块顶部再执行,它是在编译阶段执行的,在代码运行之前。

因为它是动态执行,因而无奈应用在运行时能力失去后果的构造。

// 不会报错,失常运行
sayHello()
import {sayHello} from './m1.js'

// 报错
import {'say' + 'Hello'} from './m1.js'

正文完
 0