JS/TS 的 import 和 export 用法小結

昨天幫一個網友解決一個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萬的鉅款——有沒有被嚇到？

而且這東西萬惡地增長了代碼複雜度……