JS/TS 的 import 和 export 用法小結

DevTTL 發布于2019-08-23 14:08 / 3040人閱讀

摘要：昨天幫一個網友解決一個的問題，看了一下，歸根結底還是對的和用法的不熟悉。讓我想起來當年學這個知識點的時候，也是云里霧里跌跌撞撞猜了很久用法，踩過坑。

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

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

GPU云服務器云服務器寫的文件import 的用法 cdn的用法 find的用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100155.html

TypeScript在react項目中的實踐

摘要：前段時間有寫過一個在項目中的實踐。在里邊有解釋了為什么要使用，以及在中的一個項目結構是怎樣的。關于的配置文件，在本項目中存在兩份。一個需要注意的小細節因為我們的與實現版本中都用到了。前段時間有寫過一個TypeScript在node項目中的實踐。在里邊有解釋了為什么要使用TS，以及在Node中的一個項目結構是怎樣的。但是那僅僅是一個純接口項目，碰巧趕上近期的另一個項目重構也由我...

Hwg 2019-08-23 11:31 評論0 收藏0
如何使用TypeScript和Webpack編寫網頁應用

摘要：所以，如果你也考慮開始使用，不妨也看一下。使用模塊中，模塊的使用方法與一致。安裝好定義文件之后，如果使用等對支持較好的編輯器，則會提供更加強大的代碼提示功能。如果使用配合的，則可以方便地構建瀏覽器可以運行的代碼。 TypeScript所做的，是在JavaScript的基礎上加入了類型，TypeScript編譯器將TypeScript編譯成JavaScript，可以在瀏覽器或者nodej...

Codeing_ls 2019-08-19 18:19 評論0 收藏0
Vue2.5+ Typescript 引入全面指南

摘要：引入全面指南系列目錄引入全面指南引入全面指南篇寫在前面寫這篇文章時的我，使用經驗三個多月，完全空白，花了大概三個晚上把手頭項目遷移至，因此這篇文章更像個入門指引。見文章引入全面指南篇完整代碼見庫，分支為整合示例，分支為不含的基礎示例。 Vue2.5+ Typescript 引入全面指南系列目錄： Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescrip...

liangzai_cool 2019-08-21 17:26 評論0 收藏0
angular2初入眼簾之－搭個環境

angular2是什么？我猜不容我贅述，各位一定略有耳聞，無論是曾經AngularJS的擁躉，亦或是React的粉絲，都或多或少的對她有過一點了解。未見其物、先聞其聲，angular2在問世之前已經做足了宣傳，想必諸位也一定被下面各種詞匯所震懾，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive ...

everfight 2019-08-19 18:05 評論0 收藏0