ES6 export 和 export default的區別
昨天幫一個網友解決一個typescript的問題，看了一下，歸根結底還是對js的import和export用法的不熟悉。讓我想起來當年學這個知識點的時候，也是雲里霧里跌跌撞撞『猜』了很久用法，踩過坑。
當時主要看的是阮一峰的這篇文章 hptt://es6.ruanyifengcom，里面講了很多怎么實現和許多細節性的東西，當然很全面，只是,對我們作為語言的使用者來說，有點讓人抓不到重點，所以按照自己的理解整理了一下。
首先，吐槽一下，單單一個export和import搭配使用的方式就好幾種，設計的過於復雜了，記憶和使用的心理負擔太重，按我的理解來說，一個功能應該有且只有一種語法糖（忘了這是哪種編程語言的設計哲學了），所以我一段時間內就一直使用一種，我稱之為基本使用方式。
基本用法
比如模塊A 向外部提供變量a1和函數fn供其他模塊調用，那么我們在模塊B中調用a1和fn。
//A.js
var a1=111
function fn(){
}
export {a1,fn} //在文件的底部統一導出，即使有時候導出的變量只有一個也這樣寫
那么在B.js中調用的形式就是這樣：
//B.js
import {a1,fn} from './A'
console.log(a1)
fn()
調用的時候 統一使用 import {xxx,xxx2,xxx3} from 'xxx'的形式調用。
當然了如果只用到其中一個變量或函數，那么只需要import進來需要的那個就行了，比如import {a1} from './A'.
但有時候遇到這種情況，名字重復比如B.js里面已經有個變量叫a1了，那么就加個 as 起個別名。
//B.js
import {a1 as a111,fn} from './A'
console.log(a111)
fn()
還有一種常用的import是這樣的：
import * as A from './A'
console.log(A.a1)
這個怎么理解記憶呢，就是A模塊在代碼里不是這樣導出的嗎——export {a1,fn} 這里看成導出了一個對象，對應我們import * as A from './A里面的 *，然后我們給它起了個別名叫A,當然叫A是為了記憶使用的方便，你可以叫其他什么abcd,那么調用的時候就是abcd.a1 abcd.fn.
以上就是一種 export 和兩種import 的搭配使用方式。在我自己早期import和export也是各種組合用，自己把自己搞糊塗了，最后發現就這倆套路翻來覆去的用，就能解決問題。
各自導出的方式
當然了，除了自己寫代碼，還經常調用別人寫的代碼，比如有這個C模塊：
export var c1 = 222
//
//
//
export function fn() {
}
我一般不推薦這種寫法，缺點之一是導出的變量或者函數分散在代碼的各個地方，沒有一個統一管理的地方，另一個缺點是不能夠直觀的讓人理解導出的形式。不過如果是別人寫的話我們也沒有辦法，那我們自己可以在腦子里把他成想象成之前說的的那種導出方式：
var c1 = 222
//
//
//
function fn() {
}
export{c1,fn}
那么怎么import使用就和上面的基本情況一樣了，就不贅述了。
default的用法
還有一種export用法
//C.js
var c1 = 222
//
//
//
function fn() {
}
var c2=222
export { c1,fn}
export default c2
注意這里的c2前面加了個default，那這個有啥用的呢，就是其他模塊import的時候能簡單點——少寫一對大括號。
import c2 from "./C";
當然這里有個所謂的『優點』就是直接起別名import c222 from "./C"相當於import c2 as c222 from "./C"
然后如果我們的代碼里還使用了C模塊的其他變量或函數，那就要這樣了
import c2 ,{c1,fn} from "./C";
你就會發現import的用法瞬間成笛卡爾積復雜起來：加大括號的、不加大括號的、起別名加as的、不加as的、import*的、不帶星的再乘以export的分開export的、不分開export的 default和不default的…………
所以還是推薦我文章開始推崇的那種基本寫法，雖然死板些，但是能cover到后面的幾種情況，本質上后面幾種是基本形式的特殊情況，本意設計出來是為了寫代碼的時候能少寫幾個字符，可是這東西帶來『巨大』的心智成本（理解成本和記憶成本）和時間成本，你別說『哎~那是你水平有限這么簡單的東西都搞不定』，但我身邊不少bat的程序員都踩過這個坑，假如一個程序員要花十分鍾來學習理解記憶，那10個程序員就是100分鍾，100個程序員就是1000分鍾……100萬個程序員就是1000萬分鍾，按程序員的時薪XX計算，那就是一筆3000萬的巨款——有沒有被嚇到？
並且這東西萬惡地增加了代碼復雜度……
來源：https://segmentfault.com/a/1190000017419857