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万的巨款——有无被吓到?

而且这东西万恶地增加了代码庞杂度……

    原文作者:Midqiu
    原文地址: https://segmentfault.com/a/1190000017419857
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞