ES6 export

Posted 2021-02-04 alantao

一、默认导出（default export）
// 1.一个模块只能有一个默认导出， 对于默认导出， 导入的名称可以和导出的名称不一致， 这对于导出匿名函数或类非常有用。

<!---- page.js ---->
export default function () {
	return ‘默认导出‘
}
export function setName() {
	return name + ‘Tao‘
}

<!---- main.js ---->
// 只导出默认的导出
import myFunc from ‘@/assets/page.js‘

// 混合的导出, 默认的导出和其他的导出
import defaultModel, { setName } from ‘@/assets/js/page‘

// 或者导出所有
import * as page from ‘@/assets/js/page‘

 

二、名字导出（name export）
// 1.名字导出可以在模块中导出多个声明

<!---- page.js ---->
export const name = ‘Alan‘
export function setName() {
	return name + ‘Tao‘
}
export function getName() {
	return name
}
// 2.也可以直接导出一个列表
function setName2() {
	return name + ‘Tao2‘
}
function getName2() {
	return name
}
export { setName2, getName2 }

<!---- main.js ---->
// import 根据变量名称导入
import { setName , getName} from ‘@/assets/js/page‘

// import 导入整个模块
import * as page from ‘@/assets/js/page‘
console.log(page.getName())  // Alan
console.log(page.setName())  // Alan Tao

 

三.解决导出命名冲突的问题，重命名的方法解决方法

// 这两个模块都会导出以`flip`命名的东西。
// 要同时导入两者，我们至少要将其中一个的名称改掉。
import {flip as flipOmelet} from "one.js"
import {flip as flipHouse} from "two.js"