您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
Javascript模块导入导出详解
内容摘要: JS模块导入导出,使用import,export这两个关键字export用于对外输出本模块import用于导入模块也就是说使用export导出一个模块之后,其它文件就可以使用import导入相应的模块了下面我们具体看看,import和export到底怎么用?怎么导出模块(比如变量,函数,类,对象等)1导出单个变量//a.js导出一个变量,语法如下export......
JS模块导入导出,使用import,export这两个关键字

export用于对外输出本模块

import用于导入模块

也就是说使用export导出一个模块之后,其它文件就可以使用import导入相应的模块了

下面我们具体看看,import和export到底怎么用?怎么导出模块(比如变量,函数,类,对象等)

1导出单个变量

//a.js导出一个变量,语法如下

exportvarsite="www.helloworld.net"

//b.js中使用import导入上面的变量

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

console.log(site)//输出:www.helloworld.net

2导出多个变量

上面的例子是导出单个变量,那么如何导出多个变量呢

//a.js中定义两个变量,并导出

varsiteUrl="www.helloworld.net"

varsiteName="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中定义并导出一个函数

functionsum(a,b){

returna+b

}

//将函数sum导出

export{sum}

//b.js中导入函数并使用

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

console.log(sum(4,6))//输出:10

4导出对象

js中一切皆对象,所以对象一定是可以导出的,并且有两种写法

4.1第一种写法

使用exportdefault关键字导出,如下

//a.js中,定义对象并导出,注意,使用exportdefault这两个关键字导出一个对象

exportdefault{

siteUrl:'www.helloworld.net',

siteName:'helloworld开发者社区'

}

//b.js中导入并使用

importobjfrom'./a.js'//路径根据你的实际情况填写

console.log(obj.siteUrl)//输出:www.helloworld.net

console.log(obj.siteName)//输出:helloworld开发者社区

4.2第二种写法

同样是使用exportdefault关键字,如下

//a.js中定义对象,并在最后导出

varobj={

siteUrl:'www.helloworld.net',

siteName:'helloworld开发者社区'

}

exportdefaultobj//导出对象obj

//b.js中导入并使用

importobjfrom'./a.js'//路径根据你的实际情况填写

console.log(obj.siteUrl)//输出:www.helloworld.net

console.log(obj.siteName)//输出:helloworld开发者社区

5导出类

导出类与上面的导出对象类似,同样是用exportdefault关键字,同样有两种写法

5.1第一种写法

//a.js中定义一个类并直接导出

exportdefaultclassPerson{

//类的属性

site="www.helloworld.net"

//类的方法

show(){

console.log(this.site)

}

}

//b.js中导入并使用

//导入类

importPersonfrom'./a.js'

//创建类的一个对象person

letperson=newPerson()

//调用类的方法

person.show()//输出:www.helloworld.net

5.2第二种写法

//a.js中定义一个类,最后导出

classPerson{

//类的属性

site="www.helloworld.net"

//类的方法

show(){

console.log(this.site)

}

}

//导出这个类

exportdefaultPerson

//b.js中导入并使用

//导入类

importPersonfrom'./a.js'

//创建类的一个对象person

letperson=newPerson()

//调用类的方法

person.show()//输出:www.helloworld.net

小结

下面我们简单总结一下

export与exportdefault的区别

export与exportdefault均可用于导出常量、函数、文件、模块等

可以在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式,将其导入,以便能够对其进行使用

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

export、import可以有多个,exportdefault仅有一个。

通过export方式导出,在导入时要加{},exportdefault则不需要

export具名导出xxx,exportdefault匿名。区别在于导入的时候,export需要一样的名称才能匹配,后者无论取什么名都可以。

模块化管理中一个文件就是一个模块,export可以导出多个方法和变量,exportdefault只能导出当前模块,一个js文件中只支持出现一个

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:table设置超出部分隐藏,鼠标移上去显 下一篇:js导入导出excel
发布日期:2022/12/27
手机扫二维码直达本页
发布时间:14:46:43
点  击:17
录  入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023