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群，群號： 1160215841 有關vue和element的知識幾乎有問必答，歡迎進群~