export和export default的區別

這是我參與8月更文挑戰的第5天,活動詳情查看:8月更文挑戰ios

1、概述

在 ES6 以前,社區制定了一些模塊加載方案,最主要的有 CommonJS 和 AMD 兩種。前者用於服務器,後者用於瀏覽器。ES6 在語言標準的層面上,實現了模塊功能,並且實現得至關簡單,徹底能夠取代 CommonJS 和 AMD 規範,成爲瀏覽器和服務器通用的模塊解決方案。axios

ES6中,在JavaScript ES6中,export與export default都可用於導出常量、函數、文件、模塊等。瀏覽器

2、export命令

模塊功能主要由兩個命令構成:exportimport。export命令用於規定模塊的對外接口,import命令用於輸入其餘模塊提供的功能。服務器

一個模塊就是一個獨立的文件。該文件內部的全部變量,外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量,就必須使用export關鍵字輸出該變量。markdown

下面是一個js文件,裏面使用export命令來輸出變量,函數或類(class)app

//a.js
export var str = "export的內容";
export  var year =2019;
export function message(sth) {
  return sth;
}
複製代碼

除了上述的寫法,還有一種推薦使用的,由於這樣就能夠在腳本尾部,一眼看清楚輸出了哪些變量。函數

//a.js
 var str = "export的內容";
 var year =2019;
 function message(sth) {
  return sth;
}
export {str,year,message}
複製代碼

一般狀況下,export輸出的變量就是原本的名字,可是可使用as關鍵字重命名。post

//a.js
 var str = "export的內容";
 var year =2019;
 function message(sth) {
  return sth;
}
export {
    str as newname1,
    year as newname2,
    message as newname3
};
複製代碼

上面代碼使用as關鍵字,重命名了變量str和year,以及函數message的對外接口。ui

3、import命令

使用export命令定義了模塊的對外接口之後,其餘 JS 文件就能夠經過import命令加載這個模塊。url

//b.js
import { str,year, message } from './a';
 //也能夠分開寫兩次,導入的時候帶花括號,將每一個變量函數名寫清楚
複製代碼

上面代碼的import命令,用於加載a.js文件,引入後即可以在b.js文件中使用a.js文件中的變量、函數或類等。import命令接受一對大括號,裏面指定要從其餘模塊導入的變量名。大括號裏面的變量名,必須與被導入模塊(a.js)對外接口的名稱相同。

若是想爲輸入的變量從新取一個名字,import命令要使用as關鍵字,將輸入的變量重命名。

//b.js
import { str as newname1,
year as newname2,
message as newname3
} from './a';
複製代碼

import後面的from指定模塊文件的位置,能夠是相對路徑,也能夠是絕對路徑,.js後綴能夠省略。 若是隻是模塊名,不帶有路徑,那麼必須有配置文件,告訴 JavaScript 引擎該模塊的位置。

//import引入一個依賴包,不須要相對路徑。
import axios from ‘axios’;
//import 引入一個本身寫的js文件,是須要相對路徑的。
import AppService from ‘./appService’;
複製代碼

4、export default 命令

export default命令用於指定模塊的默認輸出。顯然,一個模塊只能有一個默認輸出,所以export default命令只能使用一次。因此,import命令後面纔不用加大括號,由於只可能惟一對應export default命令。一個文件內不能有多個export default

//a.js
const str = "export default的內容";
export default str
在另外一個文件中的導入方式: 
//b.js 
import StrFile from 'a'; 
//導入的時候沒有花括號
//本質上,a.js文件的export default輸出一個叫作default的變量,而後系統容許你引入的時候爲它取任意名字。
複製代碼

5、簡述區別

  1. export與export default都可用於導出常量、函數、文件、模塊等
  2. 在一個文件或模塊中,export、import能夠有多個,export default僅有一個
  3. 經過export方式導出,在導入時要加{ },export default則不須要,並能夠起任意名稱
    • (1) 輸出單個值,使用export default
    • (2) 輸出多個值,使用export
    • (3) export default與普通的export不要同時使用

公衆號:小何成長,佛系更文,都是本身曾經踩過的坑或者是學到的東西

有興趣的小夥伴歡迎關注我哦,我是:何小玍。 你們一塊兒進步鴨

相關文章
相關標籤/搜索