乐趣区

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’ 的形式调用。
但有时候遇到这种情况,名字重复比如 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* 的和不带星的…………
所以还是推荐我文章开始推崇的那种基本写法,虽然死板些,但是能 cover 到后面的几种情况,本质上后面几种是基本形式的特殊情况,本意设计出来是为了写代码的时候能少写几个字符,可是这东西带来『巨大』的心智成本(理解成本和记忆成本)和时间成本,你别说『哎~ 那是你水平有限这么简单的东西都搞不定』,但我身边不少 bat 的程序员都踩过这个坑,假如一个程序员要花十分钟来学习理解记忆,那 10 个程序员就是 100 分钟,100 个程序员就是 1000 分钟……100 万个程序员就是 1000 万分钟,按程序员的时薪 XX 计算,那就是一笔 3000 万的巨款——有没有被吓到?不过这倒是能养活一批书商和
并且这东西万恶的增加了代码复杂度……

退出移动版