資訊專欄INFORMATION COLUMN
摘要：昨天幫一個(gè)網(wǎng)友解決一個(gè)的問題，看了一下，歸根結(jié)底還是對(duì)的和用法的不熟悉。讓我想起來當(dāng)年學(xué)這個(gè)知識(shí)點(diǎn)的時(shí)候，也是云里霧里跌跌撞撞猜了很久用法，踩過坑。
昨天幫一個(gè)網(wǎng)友解決一個(gè)typescript的問題，看了一下，歸根結(jié)底還是對(duì)js的import和export用法的不熟悉。讓我想起來當(dāng)年學(xué)這個(gè)知識(shí)點(diǎn)的時(shí)候，也是云里霧里跌跌撞撞『猜』了很久用法，踩過坑。
當(dāng)時(shí)主要看的是阮一峰的這篇文章 hptt://es6.ruanyifengcom，里面講了很多怎么實(shí)現(xiàn)和許多細(xì)節(jié)性的東西，當(dāng)然很全面，只是,對(duì)我們作為語言的使用者來說，有點(diǎn)讓人抓不到重點(diǎn)，所以按照自己的理解整理了一下。
首先，吐槽一下，單單一個(gè)export和import搭配使用的方式就好幾種，設(shè)計(jì)的過于復(fù)雜了，記憶和使用的心理負(fù)擔(dān)太重，按我的理解來說，一個(gè)功能應(yīng)該有且只有一種語法糖（忘了這是哪種編程語言的設(shè)計(jì)哲學(xué)了），所以我一段時(shí)間內(nèi)就一直使用一種，我稱之為基本使用方式。
基本用法比如模塊A 向外部提供變量a1和函數(shù)fn供其他模塊調(diào)用，那么我們?cè)谀KB中調(diào)用a1和fn。
//A.js
var a1=111
function fn(){
}
export {a1,fn} //在文件的底部統(tǒng)一導(dǎo)出，即使有時(shí)候?qū)С龅淖兞恐挥幸粋€(gè)也這樣寫
那么在B.js中調(diào)用的形式就是這樣：
//B.js
import {a1,fn} from "./A"
console.log(a1)
fn()
調(diào)用的時(shí)候 統(tǒng)一使用 import {xxx,xxx2,xxx3} from "xxx"的形式調(diào)用。
當(dāng)然了如果只用到其中一個(gè)變量或函數(shù)，那么只需要import進(jìn)來需要的那個(gè)就行了，比如import {a1} from "./A".
但有時(shí)候遇到這種情況，名字重復(fù)比如B.js里面已經(jīng)有個(gè)變量叫a1了，那么就加個(gè) as 起個(gè)別名。
//B.js
import {a1 as a111,fn} from "./A"
console.log(a111)
fn()
還有一種常用的import是這樣的：
import * as A from "./A" console.log(A.a1)
這個(gè)怎么理解記憶呢，就是A模塊在代碼里不是這樣導(dǎo)出的嗎——export {a1,fn} 這里看成導(dǎo)出了一個(gè)對(duì)象，對(duì)應(yīng)我們import * as A from "./A里面的 *，然后我們給它起了個(gè)別名叫A,當(dāng)然叫A是為了記憶使用的方便，你可以叫其他什么abcd,那么調(diào)用的時(shí)候就是abcd.a1 abcd.fn.
以上就是一種 export 和兩種import 的搭配使用方式。在我自己早期import和export也是各種組合用，自己把自己搞糊涂了，最后發(fā)現(xiàn)就這倆套路翻來覆去的用，就能解決問題。
各自導(dǎo)出的方式當(dāng)然了，除了自己寫代碼，還經(jīng)常調(diào)用別人寫的代碼，比如有這個(gè)C模塊：
export var c1 = 222
//
//
//
export function fn() {
}
我一般不推薦這種寫法，缺點(diǎn)之一是導(dǎo)出的變量或者函數(shù)分散在代碼的各個(gè)地方，沒有一個(gè)統(tǒng)一管理的地方，另一個(gè)缺點(diǎn)是不能夠直觀的讓人理解導(dǎo)出的形式。不過如果是別人寫的話我們也沒有辦法，那我們自己可以在腦子里把他成想象成之前說的的那種導(dǎo)出方式：
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前面加了個(gè)default，那這個(gè)有啥用的呢，就是其他模塊import的時(shí)候能簡(jiǎn)單點(diǎn)——少寫一對(duì)大括號(hào)。
import c2 from "./C";
當(dāng)然這里有個(gè)所謂的『優(yōu)點(diǎn)』就是直接起別名import c222 from "./C"相當(dāng)于import c2 as c222 from "./C"
然后如果我們的代碼里還使用了C模塊的其他變量或函數(shù)，那就要這樣了
import c2 ,{c1,fn} from "./C";
你就會(huì)發(fā)現(xiàn)import的用法瞬間成笛卡爾積復(fù)雜起來：加大括號(hào)的、不加大括號(hào)的、起別名加as的、不加as的、import*的、不帶星的再乘以export的分開export的、不分開export的 default和不default的…………
所以還是推薦我文章開始推崇的那種基本寫法，雖然死板些，但是能cover到后面的幾種情況，本質(zhì)上后面幾種是基本形式的特殊情況，本意設(shè)計(jì)出來是為了寫代碼的時(shí)候能少寫幾個(gè)字符，可是這東西帶來『巨大』的心智成本（理解成本和記憶成本）和時(shí)間成本，你別說『哎~那是你水平有限這么簡(jiǎn)單的東西都搞不定』，但我身邊不少bat的程序員都踩過這個(gè)坑，假如一個(gè)程序員要花十分鐘來學(xué)習(xí)理解記憶，那10個(gè)程序員就是100分鐘，100個(gè)程序員就是1000分鐘……100萬個(gè)程序員就是1000萬分鐘，按程序員的時(shí)薪XX計(jì)算，那就是一筆3000萬的巨款——有沒有被嚇到？
并且這東西萬惡地增加了代碼復(fù)雜度……
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100155.html
摘要：前段時(shí)間有寫過一個(gè)在項(xiàng)目中的實(shí)踐。在里邊有解釋了為什么要使用，以及在中的一個(gè)項(xiàng)目結(jié)構(gòu)是怎樣的。關(guān)于的配置文件，在本項(xiàng)目中存在兩份。一個(gè)需要注意的小細(xì)節(jié)因?yàn)槲覀兊呐c實(shí)現(xiàn)版本中都用到了。 前段時(shí)間有寫過一個(gè)TypeScript在node項(xiàng)目中的實(shí)踐。 在里邊有解釋了為什么要使用TS，以及在Node中的一個(gè)項(xiàng)目結(jié)構(gòu)是怎樣的。 但是那僅僅是一個(gè)純接口項(xiàng)目，碰巧趕上近期的另一個(gè)項(xiàng)目重構(gòu)也由我...
摘要：所以，如果你也考慮開始使用，不妨也看一下。使用模塊中，模塊的使用方法與一致。安裝好定義文件之后，如果使用等對(duì)支持較好的編輯器，則會(huì)提供更加強(qiáng)大的代碼提示功能。如果使用配合的，則可以方便地構(gòu)建瀏覽器可以運(yùn)行的代碼。 TypeScript所做的，是在JavaScript的基礎(chǔ)上加入了類型，TypeScript編譯器將TypeScript編譯成JavaScript，可以在瀏覽器或者nodej...
摘要：引入全面指南系列目錄引入全面指南引入全面指南篇寫在前面寫這篇文章時(shí)的我，使用經(jīng)驗(yàn)三個(gè)多月，完全空白，花了大概三個(gè)晚上把手頭項(xiàng)目遷移至，因此這篇文章更像個(gè)入門指引。見文章引入全面指南篇完整代碼見庫，分支為整合示例，分支為不含的基礎(chǔ)示例。 Vue2.5+ Typescript 引入全面指南 系列目錄： Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescrip...
angular2是什么？我猜不容我贅述，各位一定略有耳聞，無論是曾經(jīng)AngularJS的擁躉，亦或是React的粉絲，都或多或少的對(duì)她有過一點(diǎn)了解。未見其物、先聞其聲，angular2在問世之前已經(jīng)做足了宣傳，想必諸位也一定被下面各種詞匯所震懾，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive ...
閱讀 2113·2021-11-18 10:02
閱讀 2863·2021-09-04 16:41
閱讀 1155·2019-08-30 15:55
閱讀 1420·2019-08-29 17:27
閱讀 1104·2019-08-29 17:12
閱讀 2539·2019-08-29 15:38
閱讀 2864·2019-08-29 13:02
閱讀 2840·2019-08-29 12:29
