彻底弄懂Javascript模块导入导出
<p>笔者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试</p><p>比如 <code>import xx from 'test.js'</code> 不起作用，就加个括号<code>import {xx} from 'test.js'</code></p>
<p>反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂</p>
<p>尤其是在当初写 <code>www.helloworld.net</code> 网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候</p>
<p>这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识</p>
<h2 id="首先要知道exportimport-是什么">首先要知道export，import 是什么</h2>
<p>我们知道，JS 模块导入导出，使用<code>import</code> , <code>export</code> 这两个关键字</p>
<ul>
<li><strong>export</strong> 用于对外输出本模块</li>
<li><strong>import</strong> 用于导入模块</li>
</ul>
<blockquote>
<p>也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了</p>
</blockquote>
<p>下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）</p>
<h3 id="1-导出单个变量">1 导出单个变量</h3>
<pre><code class="language-js">//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"
//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出： www.helloworld.net
</code></pre>
<h3 id="2-导出多个变量">2 导出多个变量</h3>
<p>上面的例子是导出单个变量，那么如何导出多个变量呢</p>
<pre><code class="language-js"> //a.js 中定义两个变量，并导出
var siteUrl="www.helloworld.net"
var siteName="helloworld开发者社区"
//将上面的变量导出
export { siteUrl ,siteName }
// b.js 中使用这两个变量
import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写
console.log(siteUrl) //输出： www.helloworld.net
console.log(siteName) //输出： helloworld开发者社区
</code></pre>
<h3 id="3-导出函数">3 导出函数</h3>
<p>导出函数和导出变量一样，需要添加<code>{ }</code></p>
<pre><code class="language-js">//a.js 中定义并导出一个函数
function sum(a, b) {
return a + b
}
//将函数sum导出
export { sum }
//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10
</code></pre>
<h3 id="4-导出对象">4 导出对象</h3>
<p>js中一切皆对象，所以对象一定是可以导出的，并且有两种写法</p>
<h4 id="41-第一种写法">4.1 第一种写法</h4>
<p>使用 <code>export default </code>关键字导出，如下</p>
<pre><code class="language-js">//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
siteUrl:'www.helloworld.net',
siteName:'helloworld开发者社区'
}
//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区
</code></pre>
<h4 id="42-第二种写法">4.2 第二种写法</h4>
<p>同样是使用<code>export default </code>关键字，如下</p>
<pre><code class="language-js">//a.js 中定义对象，并在最后导出
var obj = {
siteUrl:'www.helloworld.net',
siteName:'helloworld开发者社区'
}
export default obj //导出对象obj
//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区
</code></pre>
<h3 id="5-导出类">5 导出类</h3>
<p>导出类与上面的导出对象类似，同样是用 <code>export default </code> 关键字，同样有两种写法</p>
<h4 id="51-第一种写法">5.1 第一种写法</h4>
<pre><code class="language-js">//a.js 中定义一个类并直接导出
export default class Person {
//类的属性
site = "www.helloworld.net"
//类的方法
show(){
console.log(this.site)
}
}
//b.js 中导入并使用
//导入类
import Person from './a.js'
//创建类的一个对象person
let person = new Person()
//调用类的方法
person.show() //输出：www.helloworld.net
</code></pre>
<h4 id="52-第二种写法">5.2 第二种写法</h4>
<pre><code class="language-js">//a.js 中定义一个类，最后导出
class Person {
//类的属性
site = "www.helloworld.net"
//类的方法
show(){
console.log(this.site)
}
}
//导出这个类
export default Person
//b.js 中导入并使用
//导入类
import Person from './a.js'
//创建类的一个对象person
let person = new Person()
//调用类的方法
person.show() //输出：www.helloworld.net
</code></pre>
<h3 id="小结">小结</h3>
<p>下面我们简单总结一下</p>
<p><code>export</code>与<code>export default</code>的区别</p>
<ul>
<li>export与export default均可用于导出常量、函数、文件、模块等</li>
<li>可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用</li>
<li>export default后面不能跟const或let的关键词</li>
<li>export、import可以有多个，export default仅有一个。</li>
<li>通过export方式导出，在导入时要加 { }，export default则不需要</li>
<li>export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。</li>
<li>模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个</li>
</ul>
<p>对于<code> import</code> ,<code>export</code> , <code>export default</code> ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看</p>
<p>最重要的还是要明白为什么要这么写，实在不明白记住就行了。</p><br><br>
来源：https://www.cnblogs.com/start1225/p/17003030.html
頁:
[1]