JS/TS 的 import 和 export 用法小结

简介: 昨天帮一个网友解决一个typescript的问题,看了一下,归根结底还是对js的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万的巨款——有没有被吓到?

并且这东西万恶地增加了代码复杂度……

来源:https://segmentfault.com/a/1190000017419857
相关文章
|
4月前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
132 2
|
4月前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
187 0
|
1月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
21天前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
16天前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
16天前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
4天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
9 0
|
18天前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。
|
2月前
|
缓存 JavaScript 前端开发
react.js高级用法
【8月更文挑战第27天】react.js高级用法
32 2
|
2月前
|
JavaScript
js中toggleClass用法
js中toggleClass用法
26 1