作者: BigLoser 访问次数: 174 创建时间: 2023-01-03 12:56:28 更新时间: 2024-05-10 01:58:26
笔者开始学习 Javascript 的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试
比如 import xx from 'test.js'
不起作用,就加个括号 import {xx} from 'test.js'
反正总是靠蒙,总有一种写法是对的,其实还是没有理解,还是不懂
尤其是在当初写 www.helloworld.net
网站的时候,一遇到这种问题,就懵逼了,尤其是引入第三方库的时候
这种情况下更多,此篇文章也是为了怕以后忘记,自查用的,也希望能帮助更多的朋友,此篇文章只是针对 ES6 的模块相关知识
我们知道,JS 模块导入导出,使用 import
, export
这两个关键字
也就是说使用 export 导出一个模块之后,其它文件就可以使用 import 导入相应的模块了
下面我们具体看看, import 和 export 到底怎么用?怎么导出模块(比如变量,函数,类,对象等)
//a.js 导出一个变量,语法如下
export var site = "www.helloworld.net"
//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出: www.helloworld.net
上面的例子是导出单个变量,那么如何导出多个变量呢
//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开发者社区
导出函数和导出变量一样,需要添加 { }
//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
js 中一切皆对象,所以对象一定是可以导出的,并且有两种写法
使用 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开发者社区
同样是使用 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
关键字,同样有两种写法
//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
//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
的区别
对于 import
,export
, export default
,他们的用法上面的例子已经很详细的列出了,忘记的时候,可以当作参考看看
最重要的还是要明白为什么要这么写,实在不明白记住就行了。
语言: zh-CN
翻译人员:
原作者:
转载地址:
源网址: https://my.oschina.net/helloworldnet/blog/5619981
版权: 本站所有内容, 版权归原作者所有。发表原创内容将会获得现金奖励, 并且随着时间倍数增长, 请了解我们的内容奖励计划。