彻底弄懂Javascript模块导入导出 - HelloWorld开发者社区
source link: https://www.cnblogs.com/start1225/p/17003030.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
笔者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试
比如 import xx from 'test.js' 不起作用，就加个括号 import {xx} from 'test.js'
反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂
尤其是在当初写 www.helloworld.net 网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候
这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识
首先要知道export，import 是什么
我们知道，JS 模块导入导出，使用 import , export 这两个关键字
- export 用于对外输出本模块
- import 用于导入模块
也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了
下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）
1 导出单个变量
//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"
//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出： www.helloworld.net
2 导出多个变量
上面的例子是导出单个变量，那么如何导出多个变量呢
//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开发者社区
3 导出函数
导出函数和导出变量一样，需要添加{ }
//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
4 导出对象
js中一切皆对象，所以对象一定是可以导出的，并且有两种写法
4.1 第一种写法
使用 export default 关键字导出，如下
//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开发者社区
4.2 第二种写法
同样是使用export default 关键字，如下
//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开发者社区
导出类与上面的导出对象类似，同样是用 export default 关键字，同样有两种写法
5.1 第一种写法
//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
5.2 第二种写法
//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
下面我们简单总结一下
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 ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看
最重要的还是要明白为什么要这么写，实在不明白记住就行了。
Recommend
-
163
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。 不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascr
-
63
前言：遇见前端，应该是今年最幸运的事情了。然而，幸运并未就此打住。 5月自己的第一份实习与唯品会邂逅 7月自己在掘金的两篇文章点赞数过千 10月自己拿到了腾讯的offer 现在，我在准备自己的毕设，准备下一个阶段的到来。掘金社区的确是一个让人成长的地方，我也...
-
53
-
39
-
58
本文出自伯特的《LoulanPlan》，转载务必注明作者及出处。 本文旨在讨论抽象类和接口的作用、实例及使用场景，都是我的理解和总结。更多关于接口和抽象类的概念知识，可自行查阅相关文档。 1. 抽象类及其作用 抽象类，顾名思义，即类的抽象。 在介绍面向对象概
-
48
概述Java中的并发锁大致分为隐式锁和显式锁两种。隐式锁就是我们最常使用的synchronized关键字，显式锁主要包含两个接口：Lock和ReadWriteLock，主要实现类分别为ReentrantLock和ReentrantReadWriteLock，这两个类都是基于AQS(AbstractQueuedSynchronizer)实现的。...
-
65
Nginx 的 location 实现了对请求的细分处理，有些 URI 返回静态内容，有些分发到后端服务器等，今天来彻底弄懂它的匹配规则 一个最简单的 location 的例子如下 server { server_name website.com;
-
51
摘要： 2个很有用的数据结构。 原文：彻底弄懂ES6中的Map和Set 作者：pubdreamcc Fundebug经授权转载，版权归原作者所有。 Map Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个
-
57
Blob Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。要从其他非blob对象和数据构造一个Bl
-
9
2.6.3 RabbitMQ -- HelloWorld 发送端 接收端 rabbitmq container 发送信息 https://www....
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK