昨天幫一個網友解決一個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萬的鉅款——有沒有被嚇到？
並且這東西萬惡地增加了程式碼複雜度……