彻底弄懂Javascript模块导入导出

译者 | HelloWorld开发人员街道社区

书名镜像：https://my.oschina.net/helloworldnet/blog/5a619981

本栏已经开始自学 Javascript 的这时候，对组件不太懂，不晓得是不是导入组件，求出组件，就佯装叮当试

比如说import xx from test.js无济于事，就管吻括弧import {xx} from test.js

再说常常靠蒙，浑然不觉一类读法是对的，只不过却是没认知，却是要学

特别是在原本写www.helloworld.net中文网站的这时候，一碰到此种难题，就懵逼了，特别是导入服务器端库的这时候

此种情况下更多，此首诗也是为的是怕之后忘掉，自查自纠用的，也期望能协助更多的好友，此首诗而已特别针对 ES6 的组件有关科学知识

具体来说要晓得 export，import 是甚么

他们晓得，JS 组件导入求出，采用import,export这三个关键字

export 用作对内输入本组件

import 用作导入组件

上面他们具体内容看一看， import 和 export 究竟是不是用？是不是求出组件（比如说表达式，表达式，类，第一类等）

1 求出一般而言表达式

//a.js 求出三个表达式，句法如下表所示

//b.js 中采用import 导入上面的表达式

import { site } from “/.a.js” //路径根据你的实际情况填写

console.log(site) //输入：www.helloworld.net

上面的例子是求出一般而言表达式，那么如何求出多个表达式呢

//a.js 中定义三个表达式，并求出

var siteUrl=”www.helloworld.net”

//将上面的表达式求出

// b.js 中采用这三个表达式

console.log(siteUrl) //输入：www.helloworld.net

3 求出表达式

求出表达式和求出表达式一样，需要添加{ }

//a.js 中定义并求出三个表达式

function sum(a, b) {

return a + b

//将表达式sum求出

//b.js 中导入表达式并采用

import { sum } from “/.a.js” //路径根据你的实际情况填写

console.log( sum(4,6) ) //输入：10

js 中一切皆第一类，所以第一类一定是能求出的，并且有两种读法

4.1 第一类读法

采用export defaultURL求出，如下表所示

//a.js 中，定义第一类并求出, 注意，采用export default 这三个URL求出三个第一类

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开发人员街道社区

同样是采用export defaultURL，如下表所示

//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

5 求出类

求出类与上面的求出第一类类似，同样是用export defaultURL，同样有两种读法

5.1 第一类读法

//a.js 中定义三个类并直接求出

export default class Person {

//类的属性

//类的方法

show(){

console.log(this.site)

}

//b.js 中导入并采用

//导入类

//创建类的三个第一类person

//调用类的方法

5.2 第二种读法

//a.js 中定义三个类，最后求出

class Person {

//类的属性

//类的方法

show(){

console.log(this.site)

}

//求出这个类

//b.js 中导入并采用

//导入类

//创建类的三个第一类person

//调用类的方法

小结

上面他们简单总结一下

export与export default的区别

export 与 export default 均可用作求出常量、表达式、文档、组件等

能在其他文档或组件中通过 import+(常量 | 表达式 | 文档 | 组件) 名的方式，将其导入，以便能够对其进行采用

export default 后面不能跟 const 或 let 的关键词

export、import 能有多个，export default 仅有三个。

通过 export 方式求出，在导入时要加 { }，export default 则不需要

export 具名求出 xxx ，export default 匿名。区别在于导入的这时候，export 需要一样的名称才能匹配，后者无论取甚么名都能。

组件化管理中三个文档就是三个组件，export 能求出多个方法和表达式，export default 只能求出当前组件，三个 js 文档中只支持出现三个

对于import,export,export default，他们的用法上面的例子已经很详细的列出了，忘掉的这时候，能当作参考看一看

最重要的却是要明白为甚么要这么写，实在不明白记住就行了。