ES6中export和import详解（export定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块） _详解

关山初度尘未洗，策马扬鞭再奋蹄！这篇文章主要讲述ES6中export和import详解（export定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块）相关的知识，希望能为你提供帮助。
1.Export
模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出

如：// profile.js

export var firstName = "Michael";
export var lastName = "Jackson";
export var year = 1958;

或者用更好的方式：用大括号指定要输出的一组变量

如：// profile.js

var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export firstName,lastName,year;

除了输出变量，还可以输出函数或者类（class）

export function multiply(x,y)
return x * y;

同样的道理，可以批量输出，也可以用as重命名

function v1()......

function v2()......

export
v1 as fn1,
v2 as fn2

export命令规定的是对外接口，必须与模块内部变量建立一一对应的关系

// 写法一
export var m =1;

//写法二
var m = 1;
export m;

//写法三
var n = 1;
export n as m;

Import命令
export定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块

// circle.js 输出两个函数

export function area(radius)
return Math.PI * radius * radius

export function circumference(radius)
return 2*Math.PI * radius;

// main.js加载模块逐一加载的写法

importarea, circumference from ./circle;

console.log(圆面积：+area(4));
console.log(圆周长：+circumference(14));

//整体加载的写法如下：
import * as circle from ./circle;

console.log(圆面积：+circle.area(4));
console.log(圆周长：+circle.circumference(14));

注意：不允许运行时改变！！！！！
4.export default
在上面的例子中，使用import导入时，都需要知道模块中所要加载的变量名或函数名，用户可能不想阅读源码，只想直接调用接口，就可以用export default命令，为模块指定输出

//命名为export-default.js

export default function ()
console.log(foo);

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// 命名为 import-default.js

import customName from ./export-default;

customName();

【ES6中export和import详解（export定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块）】对了，如果是默认输出的，default，然后import的时候就不需要花括号
如果是按需引入，就需要花括号哦
也可以按条件加载呢：
import()可以放在if......else语句中，实现条件加载。