昨天帮一个网友解决了一个打字稿的问题。提醒我，当初学这个知识点的时候，迷迷糊糊“猜”了半天的用法，踩坑了。当时主要是在hptt://es6.ruanyifengcom看阮一峰的这篇文章。讲了很多如何实现，很多细节。当然讲的很全面，但是对于我们这些语言使用者来说，有点乱，抓不住重点，所以就按照自己的理解整理了下。首先，让我投诉一下。有多种方法可以同时使用单个导出和导入。设计过于复杂，记忆和使用的心理负担过重。按照我的理解，一个函数应该有而且只有一种语法。Sugar（忘了这是什么编程语言的设计哲学），所以我用了一段时间，我称之为基本用法。基本用法比如模块A对外提供了变量a1和函数fn供其他模块调用，那么我们在模块B中调用a1和fn//A.jsvara1=111functionfn(){}export{a1,fn}//文件底部统一导出，即使有时候导出的变量只有一个，那么在B.js中调用的形式是这样的//B.jsimport{a1,fn}from'./A'console.log(a1)fn()的调用形式统一为import{xxx,xxx2,xxx3}from'xxx'。当然，如果你只使用其中一个变量或函数，你只需要导入你需要的那个，比如import{a1}from'./A'。但是有时候会遇到这种情况，名字重复了，比如B.js里面已经有一个叫a1的变量，所以加一个as让它成为别名。//B.jsimport{a1asa111,fn}from'./A'console.log(a111)fn()另一个常用的导入是这样的：import*asAfrom'./A'console.log(A.a1)你是如何理解记忆的？A模块在代码中不就是这样导出的吗——这里的export{a1,fn}算是导出的一个对象，对应我们的import*asAfrom'./A*，然后我们命名为A，当然这里为了方便记忆就叫A，你也可以叫其他的abcd，那么调用的时候就是abcd.a1abcd.fn。以上是一种导出和两种导入的组合使用。在我早期，import和export也有各种组合使用。自己一头雾水，最后发现反复使用这两个套路是可以解决问题的。当然，每个导出的方式当然是。除了自己写代码，还经常调用别人写的代码。比如有这个C模块：exportvarc1=222//////exportfunctionfn(){}我一般不推荐这种写法的缺点之一是导出的变量或函数比较分散在代码的各个地方，并没有统一管理的地方。另一个缺点是导出的形式无法直观理解。但是如果是别人写的，我们也没办法，那么我们可以在脑海中想象成之前提到的export方法：varc1=222//////functionfn(){}export{c1,fn}然后import的使用方法和上面的基本情况一样，就不赘述了。default的用法还有一个export用法//C.jsvarc1=222//////functionfn(){}varc2=222export{c1,fn}exportdefaultc2注意前面加了一个default这里的c2，那这个有什么用呢，就是在导入其他模块的时候，可以简单点——少写花括号。从“./C”导入c2；当然，这里有个所谓的“好处”，就是直接aliasimportc222from"./C"相当于importc2asc222from"./C"。那么如果我们在代码中还使用到C模块的其他变量或者函数的话，那么就需要importc2,{c1,fn}from"./C";你会发现import在笛卡尔乘积中的用法瞬间变得复杂：大括号，没有括号，别名有as，没有as，import*，没有星号然后乘以export分离导出，default和non-defaultwithoutexport...所以还是推荐我文章开始提倡的基本写法，虽然有点生硬，但是可以涵盖以下几种情况。本质上，后几种是基本形式的特例。它最初是为了在编写代码时节省几个字符而设计的，但是这个东西带来了“巨大”的脑力成本（理解成本和记忆成本）和时间成本，别说“哎~那是你水平有限，这么简单的事情搞不定”，但是有我身边很多蝙蝠程序员都踩过这个陷阱。如果一个程序员需要十分钟来学习、理解和记忆，那么10个程序员需要100分钟，100个程序员需要1000分钟……100万程序员需要1000万分钟，按程序员的小时工资按XX计算，3000万元的巨款，你害怕吗？而这些东西可怕地增加了代码的复杂性......
