一、export和export default
export和export default都用于导出常量、函数、文件、模块等,区别是:
1、在一个JS文件中,export可以有多个;export default只能有一个;
2、它们的引用方式不同;
二、import用于引入一个JS文件:
1、如import引入的是依赖包,则不需要相对路径
2、如import引入的是自定义的JS文件,则需要相对路径
3、import使用export导出的需要用{},使用export导出的不需要{};

例子:

//d1.js
//d1.js是用export导出的
export const str = 'hello world'
export function f0(a){
	return a+1
}
export const f1 = (a,b) => {
	return a+b
}
export const f2 = (function () {
	return 'hello'
})()

引用方式:

//d2.js
//在d2.js中引用d1.js,d1.js是使用export导出的变量和函数,引用时要使用{};
import { str,f0,f1,f2 } from 'd1' //名字要和export相同,d2.js和d1.js在同目录,如不同目录则 from '../../d1.js',扩展名可以不写
const a = f1(1,2)
//也可以写成:
import {str} from 'd1'
import {f1} from 'd1'
//d3.js
//用export default导出,JS文件中只能有一个
export default const str = 'hello world'

引用:

//d4.js
//引用d3.js,使用export default导出的,引用时不要{}
import str from 'd3'  //名字可以任意

如在d3.js中要定义多个,可以先用export,然后再用export default批量导出,这样:

//修改后的d3.js
export const str = 'hello world'
export function f0(a){
	return a+1
}
export const f1 = (a,b) => {
	return a+b
}
export default {
   str,
   f0,
   f1
}

引用:

//修改d4.js
import d from 'd3'
const a = d.f0(45)
Logo

前往低代码交流专区

更多推荐