ES6 export和export default的区别及具体使用方法( module 语法 )

es6提供了模块的语法，这边文章主要让你快速上手和理解 module 语法。附上阮一峰的教程：https://es6.ruanyifeng.com/#docs/module

 

一、export 和 import 

首先建两个js文件，命名随意，我这里按照字面意思命名为 export.js（输出） 和 import.js（输入）

然后先搞清楚export.js里面可以写什么以及怎么写：

//export.js

// 写法一
export var m = 1;
export function f() { console.log('i am function') };

// 写法二(推荐)
var m = 1;
function f() { console.log('i am function') };
export { m, f };

// 写法三(重命名)
var n = 1;
function f() { console.log('i am function') };
export {n as m,f};

// tips: 
//  1.export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
//  2.export命令可以出现在模块的任何位置，只要处于模块顶层就可以(不能处于块级作用域内)。

上面三种方法任选一种就好了，输出的是一个常量 1 ，还有一个会打印 i am function 的函数；

 

接下来是import.js：

//import.js(也可以使用as实现重命名)

//写法一
import {m} from "./export.js"
import {f} from "./export.js"

console.log(m,f()) // 1, i am function

// 写法二
import { m, f } from "./export.js";

console.log(m,f()) // 1, i am function

//写法三(整体加载配合重命名,*代表所有的意思)
import * as getResult from './export.js';

console.log(getResult.m,getResult.f()) // 1, i am function

 

二、export default 和 import

使用 export default 的理由：使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载，为了解决这个问题，可以使用export default命令，为模块指定默认输出。

// export-default.js（只能有一个export default）

//写法一：
export default function () {
    console.log('我是export default输出内容');
}

//写法二(可以加函数名称，但是不起作用，加了等于没加):
export default function foo() {
    console.log('我是export default输出内容');
}

// 写法三(和export不一样，不需要加{},是foo，而不是{foo}):
function foo() {
    console.log('我是export default输出内容');
}

export default foo;

看看 export-default 的 import.js

//import.js（selfName是随意取的，而且不需要加{}）


import selfName from './export-default.js'; 
selfName() //我是export default输出内容

 

要想真正理解他们，必须明白他们之间的区别：

　　1. export 输出的必须是一个对外接口（比如变量），而export default 可以直接输出常量。

　　      举例： export 110 是错误的，export default 110是对的。

　　　  原因： defalut 就是它（export）的对外接口

　　2.  export 后面可以跟变量声明语句，export default 后面不能跟变量声明语句。

　　　 举例：export var a = 1是对的，export default var a = 1是错的，

　　　 原因:export default命令其实只是输出一个叫做default的变量


      3.  export 的import 需要使用大括号{},而且名称是一一对应的，而export default 不要大括号{}，并且名称随意。

　　　 举例： import { f } from "./export.js"; import selfName from './export-default.js';

　　　 原因： export default 一个模块只能有一个，所以import只会对应一个。

 

通过例子理解他们的转换过程：

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

 

新建了一个QQ群，群号： 850779411 有关vue和element的知识几乎有问必答，欢迎进群~
QQ扫码进群：