export导出:
假设文件名为a.js
//导出 写法一 ,一个个导出 export function ceshi1(){ console.log('ceshi1') } export function ceshi2(){ console.log('ceshi2') } 写法二,一起导出 function ceshi1(){ console.log('ceshi1') } function ceshi2(){ console.log('ceshi2') } export { ceshi1, ceshi2} 写法3,通过重命名导出,同时可以实现一个函数被多次重命名 function ceshi1(){ console.log('ceshi1') } function ceshi2(){ console.log('ceshi2') } export { ceshi1 as c1, ceshi2 as c2, ceshi2 as d2 } //对应的引入方式 (1)直接引入 import { ceshi1,ceshi2 } from "a.js" //调用 ceshi1(); ceshi2(); (2)重命名引入 import { ceshi1 as ce1, ceshi2 as ce2} from "a.js" //调用 ce1(); ce2(); (3) 先整体引入,再分别调用 import * as ceshiFn from "a.js" //注意,因为是用export导出,所以不能直接写成 import ceshiFn from "a.js" //调用 ceshiFn.ceshi1(); ceshiFn.ceshi2();
export default导出:
导出 function ceshi1(){...} function ceshi2(){...} export default {ceshi1,ceshi2} 引入 import ceshiFn from "a.js" //使用export default 导出,在引入的使用可以使用任意名字加载 //调用 ceshiFn.ceshi1() ceshiFn.ceshi2()
延伸:import如何根据需求才加载,及动态加载
通常我们使用的 import xxx from "xxx" 只能在模块的顶层,无法通过动态加载,如,我们可能需要判定在某个条件满足时才加载该模块:
if(条件成立){ //条件成立才加载该模块 import xxx from "xxx" } 结果是直接报错!
我们除了用requre(xxx)的引入方法达到动态加载,还可以通过import()来达到动态加载,import()
函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。需要注意的是import()是一个promise
//条件成立才加载该模块 if(条件成立){ import('xxxx.js').then(res =>{ //res 是假定xxxx.js导出方式为export default,如果是export导出,可以用解构赋值那样 //如 .then({xx,xxx} =>{}) ,方式和前面import使用方法一致 }).catch(err=>{}) } //因为import()是promise,所以它也能通过async await来使用 async Fn(){ let ce = await import('xxx.js') } //同时引入多个 Promise.all([ import('x'), import('xx'), import('xxxx'), ]).then(([data1,data2,data3])=>{}) 通过async await来使用 async Fn(){ const [data1,data2,data3] = await Promise.all([ import('x'), import('xx'), import('xxxx'), ]) }
import还可以加载动态路径
function urlFn(){ ... return 'xxxxx' } import(urlFn()).then() //根据urlFn返回的路径进行加载