es6 module模块的导入import和导出export的写法

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返回的路径进行加载
落魄前端-小陈
1
0
1
评论
浏览
收藏