前言:ES6把js文件当做模块处理
一、export & import
示例1:
导出一个变量
//test.js
var name = "Amy";
export {name};
//写法2 (注意导入变量写法)
var name = "Amy";
export {name as anotherName};
//写法3
export var name = "Amy";
//反模式
var name = "Amy";
export name; //export输出的是接口,现在输出值,所以不可以。
导入变量
import {name} from 'test'
//针对导入写法2
import {anotherName} from 'test'
示例2:
导出一组变量
//test.js
var name = "Amy";
var age = "20";
export {name, age};
//写法2
export {name};
export {age};
导入一组变量
//写法1
import {name, age} from 'test'
//写法2
import * as test from 'test'
test.name;
//写法3 module指令 (等同于写法2)
module test from 'test'
test.name;
示例3:
导出函数
//test.js
export function f1() {...};
export function f2() {...};
示例4:
导出默认模块
默认模块只能有一个,export default只是输出一个叫default的变量,所以default后接任何变量名,都视为匿名
//test.js
export default function f1() {...};
//写法2
function f1() {...}
//不用加花括号{},export default f1是将f1赋值给default
export default f1;
//反模式
export default var a = "Amy";
导入默认模块
//不用加花括号{}
import f1 from 'test'
示例5:
导出匿名默认模块
//test.js
export default function () {...};
导入匿名默认模块
//import 可以为该匿名模块指定任意名字
import anyName from 'test'
示例6:
同时导出非默认和默认模块
//test.js
var name = "Amy";
var age = 20;
export default name;
export {age};
同时导入非默认和默认模块
import name, {age} from 'test'
二、import
- import会执行所加载的模块
import 'test'
//执行test,但不导入任何变量
三、总结
- import
- 非默认模块加花括号
import {notDefaultName} from 'fileName'
- 默认模块不加花括号
import defaultName from 'fileName'
- 非默认模块加花括号
- export
- 非默认模块加花括号
export {notDefaultName}
或 导出声明export var a = 0
- 默认模块不加花括号
export default defaultName
,实质导出变量default
- 非默认模块加花括号
四、参考文献
阮一峰 ES6 import export