彻底弄懂Javascript模块导入导出

九路
• 阅读 637

笔者开始学习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开发者社区

5 导出类

导出类与上面的导出对象类似,同样是用 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

小结

下面我们简单总结一下

exportexport 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 ,他们的用法上面的例子已经很详细的列出了,忘记的时候,可以当作参考看看

最重要的还是要明白为什么要这么写,实在不明白记住就行了。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
1年前
盘点5种基于Python生成的个性化语音方法
小编在很小的时候就特别喜欢搞怪,模仿别人的声音,尤其是老头老太太模仿的那是一个出神入化。今天小编就带大家模仿一下个性化的声音,不过不是用小编的嘴,而是用程序,看它们都是怎么被模仿出来的。1、gtts模块这是一款语音模块,它可以将任意文字转换为音频文件,格式为mp3。下面我们一起来看看它的用法:一、安装并导入:pipinstallgttsfrom
Stella981 Stella981
1年前
ES6模块之export和import详解
文章转载自:https://blog.csdn.net/qq\_28506819/article/details/75733601ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。1、模块导出(export)
Stella981 Stella981
1年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
1年前
Python(11)
importtkinterimporttkinter.messagebox导入线性模块importthreading导入时间模块importtimeclassLuckAward:初始化对象def__init_
Stella981 Stella981
1年前
Python获取当前时间及格式化
1、导入time模块导入time模块importtime2、打印时间戳time.time()导入time模块importtime打印时间戳print(time.time())!(https://img2018.cnblogs.co
Stella981 Stella981
1年前
Node.js 入门系列——寻找第三方模块
1、知道模块名,寻找模块的文档在看别人的代码或者文章的时候,经常会遇到自己没用过的第三方模块,怎么办呢?其实很简单,你只要在浏览器中输入网址 https://npmjs.org/package/模块名称 ,即可进入这个模块的介绍页面。比如,别人的源码中出现一行 varxssrequire('xss') 
Stella981 Stella981
1年前
Python有趣的小案例
导入turtle模块模块是python自带的工具箱,这里将工具箱导入就能使用了turtle模块是python用来画图的工具箱importturtle将turtle里的工具拿出来,赋给t变量照猫画虎用就是了,这些东西要到很后面才能理解t
Wesley13 Wesley13
1年前
ES6模块化及优点,简单案例让你秒懂
模块化:模块是一个文件   好处:       1.减少命名冲突       2.避免引入时的层层依赖       3.可以提升执行效率   第一种方法       1.如何导出(暴露)           expor
Wesley13 Wesley13
1年前
Java Activiti 工作流引擎 springmvc SSM 流程审批 后台框架源码
工作流模块1.模型管理  :web在线流程设计器、预览流程xml、导出xml、部署流程2.流程管理  :导入导出流程资源文件、查看流
Stella981 Stella981
1年前
Notadd 应用配置数据导入导出设计
在notadd设计中,应用是实现整个模块化的核心。而考虑实际过程中可能存在套装(比如商城全家桶,1个模块42个插件,将在正式版实现一件安装套装)而为了插件相互能够配合,做了一键导入导出后台配置。mall://模块唯一标示version://版本号time: