export/import-----前端ES6代码的模块化

export/import-----前端ES6代码的模块化

ES6新增的export/import，实际上就是导包。

我们可以把其他js类的变量，方法通过export导出，然后通过import导入。

举个例子：

有三个js文件分别为user.js ,hello.js,main,js

导出变量和函数的方法

• user.js

  var name = "jack"
  var age = 21
  function add(a,b){
      return a + b;
  }
  
  export {name,age,add}
  

  这里写的就是变量 name和变量age以及函数add（）的导出方法。

  我们让main.js使用它们。

  • main.js

    导入时，不一定要全部导入，导入你要用的就行。

    import {name,add} from "./user.js"
    
    
    console.log(name);
    add(1,3);
    

    那么，如果用的是对象，该如何导出/导入呢？

导出对象的方法

我们拿hello.js举例

• hello.js

   export const util = {
       sum(a, b) {
           return a + b;
       }
   }
   
   //或者这么导出
   const util = {
       sum(a, b) {
           return a + b;
       }
   } 
   export util;
  

  导入

  • main.js

import util from "./hello.js"


util.sum(1,2);

注意：导入的名字现在是不能随便改的。

如果我们想随便改的话，就要这么写：

• hello.js

export default {
    sum(a, b) {
        return a + b;
    }
}

• main.js

import abc from "./hello.js"


abc.sum(1,2);