ES6的模块化

ES6自带了module模块，但目前浏览器并没有支持。我们可以轻松实现导入导出，批量导出，默认导入export default，使用星号符*整体导入，as关键字实现重命名

导出 export

• 导出Export：作为一个模块，它可以选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用。

   /*---module-B.js文件---*/
   //导出一个变量
  export let name ='wanglei'
  //到处一个函数
  export function test(){
      console.log('test')
  }
  //导出类
  export class Hello{
      test(){
          console.log('class')
      }
  }

  导入 import

• 导入Import：作为一个模块，可以根据需要，引入其他模块的提供的属性或者方法，供自己模块使用

  /*---module-A.js文件---*/
      import {name,test,Hello} from './module-B.js'

  批量导出

  //属性name
     var name = "wanglei";
     //属性age
     var age  = 25;
     //方法 say
     var say = function(){
         console.log("say hello");
     }
  
     //批量导出
     export {name,age,say}

  批量导入

  //---module-A.js文件---
  
     //导入 模块B的属性 name
     import { name,age,say } from "./module-B.js";
  
     console.log(name)
     //打印结果：wanglei
  
     console.log(age)
     //打印结果：25
  
     say()
     //打印结果：say hello

  整体导入

  //使用*实现整体导入 as和名称
  import * as obj from "./module-B.js";
  
  console.log(obj.name)
  //结果："wanglei"
  
  console.log(obj.age)
  //结果：25
  
  obj.say();
  //结果：say hello

  推荐使用 export default

    /*a.js*/
   let A =123;
   let test = function(){
      console.log('test')
   }
   export default{
       A,
       test
   }
  //导入
  import fun from './a.js
  console.log(fun.A)'

赏

谢谢你请我吃糖果

支付宝

微信