基本用法
比如模块A 向外部提供变量a1和函数fn供其他模块调用,那么我们在模块B中调用a1和fn。
//A.js
var a1=111
function fn(){
}
export {a1,fn} //在文件的底部统一导出,即使有时候导出的变量只有一个也这样写
那么在B.js中调用的形式就是这样:
//B.js
import {a1,fn} from './A'
console.log(a1)
fn()
调用的时候 统一使用
import {xxx,xxx2,xxx3} from 'xxx'
的形式调用。
当然了如果只用到其中一个变量或函数,那么只需要import进来需要的那个就行了,比如import {a1} from './A'
.但有时候遇到这种情况,名字重复比如B.js里面已经有个变量叫a1了,那么就加个 as 起个别名。
//B.js
import {a1 as a111,fn} from './A'
console.log(a111)
fn()
还有一种常用的import是这样的:
import * as A from './A'
console.log(A.a1)
这个怎么理解记忆呢,就是A模块在代码里不是这样导出的吗——
export {a1,fn}
这里看成导出了一个对象,对应我们import * as A from './A
里面的*
,然后我们给它起了个别名叫A
,当然叫A
是为了记忆使用的方便,你可以叫其他什么abcd
,那么调用的时候就是abcd.a1
abcd.fn
.以上就是一种 export 和两种import 的搭配使用方式。在我自己早期import和export也是各种组合用,自己把自己搞糊涂了,最后发现就这俩套路翻来覆去的用,就能解决问题。
各自导出的方式
当然了,除了自己写代码,还经常调用别人写的代码,比如有这个C模块:
export var c1 = 222
//
//
//
export function fn() {
}
我一般不推荐这种写法,缺点之一是导出的变量或者函数分散在代码的各个地方,没有一个统一管理的地方,另一个缺点是不能够直观的让人理解导出的形式。
不过如果是别人写的话我们也没有办法,那我们自己可以在脑子里把他成想象成之前说的的那种导出方式:
var c1 = 222
//
//
//
function fn() {
}
export{c1,fn}
那么怎么import使用就和上面的基本情况一样了,就不赘述了。
default的用法
还有一种export用法
//C.js
var c1 = 222
//
//
//
function fn() {
}
var c2=222
export { c1,fn}
export default c2
注意这里的c2前面加了个default,那这个有啥用的呢,就是其他模块import的时候能简单点——少写一对大括号。
import c2 from "./C";
当然这里有个所谓的『优点』就是直接起别名
import c222 from "./C"
相当于import c2 as c222 from "./C"
然后如果我们的代码里还使用了C模块的其他变量或函数,那就要这样了
import c2 ,{c1,fn} from "./C";
你就会发现import的用法瞬间成笛卡尔积复杂起来:加大括号的、不加大括号的、起别名加as的、不加as的、import*的、不带星的再乘以export的分开export的、不分开export的 default和不default的…………
export:规定模块对外接口
①默认导出:export default Test(导入时可指定模块任意名称,无需知晓内部真实名称)
②单独导出:export const name = "Bruce"
③按需导出:export { age, name, sex }(推荐)
④改名导出:export { name as newName }
import:导入模块内部功能①默认导入:import Test from "test"
②整体导入:import * as Test from "test"
③按需导入:import { age, name, sex } from "test"
④改名导入:import { name as newName } from "test"
⑥自执导入:import "test"
⑦复合导入:import Test, { name } from "test"
复合模式export命令和import命令结合在一起写成一行,变量实质没有被导入当前模块,相当于对外转发接口,导致当前模块无法直接使用其导入变量
①默认导入导出:export { default } from "test"
②整体导入导出:export * from "test"
③按需导入导出:export { age, name, sex } from "test"
④改名导入导出:export { name as newName } from "test"
⑤具名改默认导入导出:export { name as default } from "test"
⑥默认改具名导入导出:export { default as name } from "test"
继承:默认导出和改名导出结合使用可使模块具备继承性;
设计思想:尽量地静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量;
严格模式:ES6模块自动采用严格模式.