es6 import 与 export

es6 import 与 export


ES6把js文件当做模块处理

导出一个变量
写法1
var name = "Amy";
export {name};

写法2
var name = "Amy";
export {name as anotherName};

写法3
export var name = "Amy";


//export输出的是接口,变量(不能是具体的值)

导入变量
import {name} from 'test'

//针对导入写法2
import {anotherName} from 'test'


导出一组变量
//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;


导出函数
export function f1() {...};


导出默认模块
默认模块只能有一个，export default只是输出一个叫default的变量，所以default后接任何变量名，都视为匿名
//test.js
export default function f1() {...};

//写法2
function f1() {...}
//不用加花括号{}，export default f1是将f1赋值给default
export default f1;


导入默认模块
//不用加花括号{}
import f1 from 'test'


同时导出非默认和默认模块
//test.js
var name = "Amy";
var age = 20;
export default name;
export {age};


同时导入非默认和默认模块
import name, {age} from 'test'

总结
import
非默认模块加花括号 import {notDefaultName} from 'fileName'
默认模块不加花括号 import defaultName from 'fileName'
export
非默认模块加花括号 export {notDefaultName} 或 导出声明 export var a = 0
默认模块不加花括号 export default defaultName，实质导出变量default

均可用于导出常量、函数、文件、模块等