JS/TS 的 import 和 export 用法小结

DevTTL 发布于2019-08-23 14:08 / 3010人阅读

摘要：昨天帮一个网友解决一个的问题，看了一下，归根结底还是对的和用法的不熟悉。让我想起来当年学这个知识点的时候，也是云里雾里跌跌撞撞猜了很久用法，踩过坑。

昨天帮一个网友解决一个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的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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