Javascript模块导入导出的方法是什么

这篇“Javascript模块导入导出的方法是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Javascript模块导入导出的方法是什么”文章吧。

首先要知道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.netconsole.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.netconsole.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'//创建类的一个对象personlet 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'//创建类的一个对象personlet person = new Person()//调用类的方法person.show()  //输出：www.helloworld.net

JavaScript的作用是什么

1、能够嵌入动态文本于HTML页面。

2、对浏览器事件做出响应。

3、读写HTML元素。

4、在数据被提交到服务器之前验证数据。

5、检测访客的浏览器信息。

6、控制cookies，包括创建和修改等。

7、基于Node.js技术进行服务器端编程。

以上就是关于“Javascript模块导入导出的方法是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。