1、概述
JS中一直没有 module 体系,无法将一个大程序拆分成依赖的小文件,在用简单的方法拼接起来。ES6 的模块设计思想是尽量静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6模块不是对象,而是通过 export 命令显式指定输出的代码,再通过import 命令输入。如下:
import {state, getNum, setPost} form 'api'
以上方法实质上是从 api模块加载了3个方法,api中其他的方法不加载。这种加载就是 编译时加载或者静态加载
ES6的模块自动采用严格模式,不管你有没有在模块头部加上 「use strict」
模块功能主要由两个命令构成:export 和 import。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能
另外一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望能够在外部读取某个模块内部的变量,那么就需要使用 export 输出该变量。如下:
export function test() {
console.log('export')
}
或者
let test = 'test'
export { test }
第一种方法是直接输出该变量,第二种是一次性输出一组变量。可根据情况酌情使用。
通常情况下,export输出的是变量本身的名字,如果想重命名的话,可以通过 as 关键字。
function a () {}
function b () {}
export {
a as a1,
b as b1
}
敲黑板: export 规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
export 1 // 报错
var m = 1
export m // 报错
export const m = 1 // 正确
export(const m = 1) // 正确
const n = 1
export {n as m} // 正确
function a(){}
export a // 报错
export function a() {} // 正确
export(a) //正确
export 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域中就会报错。
使用了export 输出模块定义的接口之后可以使用 import 加载这个模块。
a.js
export function test() {}
b.js
import test from 'a.js'
// 为 test 重新定义名字
import {test as ttt} from 'a.js'
如果有多个接口可以一行引入
import {a, b, c} from 'a'
import 'a' // 加载a中所有模块
敲重点: import 输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里改写接口。
除了指定加载某个输出值,还可以使用整体加载,即用 星号 (*)指定对象,所有输出值都加载在这个对象上面。如下:
一般写法
a.js 中
export function add (num) {
return num = num * num
}
export function put (name) {
retrun name = name + 'hh'
}
// 引用
import {add, put} from 'a'
console.log(add(3), put('put'))
整体加载
import * as go from 'a'
console.log(go.add(3), go.put('put'))
在上面可以看出,使用 import 命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。如果想快速的加载模块,在这里可以使用 export default, 为模块指定默认输出。
export default function () {
console.log('hahha')
}
import hhh from 'a' // 引用的时候可以指定任意名字
非匿名函数
export default function hah(){
console.log('哈哈')
}
// 或者
function hah(){
console.log('hah')
}
export default hah
import hah from 'a'
// 也可以更换名字
import {b as a } import 'a'
敲黑板:
// defautl 方式输出 import 引入的时候变量名直接写
export default function aa(){}
import aa form 'a'
// 非defautl 方式输出 import 引入的时候变量名需加花括号
export function aa(){}
import {aa} form 'a'
export default 命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出。因此 export default 命令只能使用一次。所以 import引入的时候 方法名才不需要加括号。
如果在一个模块中,先输入后输出同一个模块
export { c, b } from 'a';
// 可以简单理解为
import { c, b } from 'a';
export { c, b }