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萬的巨款——有沒有被吓到？

并且這東西萬惡地增加了代碼複雜度……

來源：https://segmentfault.com/a/1190000017419857