ES Module的导入和导出

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。在早期的js没有模块化的概念。但是随着发展又需要模块化，于是出现了集中规范，早期比较出名的就有AMD、CMD，他们都只是一种规范，没有具体的实践，而AMD具体的实践者就有requirejs、curl，CMD则有seajs，不过随着历史的发展，这两种规范都慢慢的推出了历史的舞台，现在流行的commonjs 和ES6 Module，而node就是commonjs最佳的实践者，而ES Module则是官方规范的模块化，自然而然就是现在最主流的模块化方案，ES Module的工作原理有一篇文章讲的非常好，如果对英文没有压力的话，我觉得非常有必要阅读一篇。

export

导出

  1. 第一种方法： 

    1. export const name = "coderwei";
    2. export const age = 19;

  2. 第二种方式： 

    1. const name = "coderwei";
    2. const age = 19;
    3. export {
    4. name,
    5. age
    6. };

  3. 第三种方式： 

    1. const name = "coderwei";
    2. const age = 19;
    3. export {
    4. name as fname,
    5. age as fage
    6. };
    7. //这种方式不常用，如果需要起别名通常在导入的时候起别名

导入

  1. 第一种导入方式：
    ```javascript import { name, age } from “./01导出的三种方式/01导出的三种方式.js”;

console.log(name, age);

  2. 2.  第二种导入方式：起别名  
  3. ```javascript
  4. import {
  5.   name as fname,
  6.   age as fage,
  7. } from "./01_导出的三种方式/01_导出的三种方式.js";
  9. console.log(fname, fage);
  1. 第三种导入方式：
    ```javascript import * as Info from “./01导出的三种方式/01导出的三种方式.js”;

console.log(Info.name, Info.age);

  2. <a name="f0e41efa"></a>
  3. ### 结合使用
  5.         结合实际项目，在开发中可以会有一个utils工具库，封装一些常用的工具函数，所以这个时候我们通常会给他定义一个统一的出口(index.js)，避免我们在导入的时候找来找去的，也方便后续进行管理。
  7. 1.  /utils/formatDate.js  
  8. ```javascript
  9. export function formatDate() {
  10.   return 123;
  11. }
  1. /utils/foramtPrice.js
    ```javascript export function formatPrice() { return “￥” + “99.99”; }

export function rmbToGreenback() { return “$” + “99.99”; }

  2. 3.  /utils/index.js  
  3. ```javascript
  4. // 导入导出方式1
  5. import { formatDate } from "./formatDate.js";
  6. import { formatPrice, rmbToGreenback } from "./formatPrice.js";
  8. export { formatDate, formatPrice, rmbToGreenback };
  10. // 导入导出方式2
  11. export { formatDate } from "./formatDate.js";
  12. export { formatPrice, rmbToGreenback } from "./formatPrice.js";
  14. // 导入导出方式3
  15. export * from "./formatDate.js";
  16. export * from "./formatPrice.js";

export default

  1.     export导出要求了我们导出的叫什么，导入的时候就一定要叫什么，不然的话就找不到了。当然我也可以给一个模块定义一个默认导出的内容，而这个默认导出的内容就是用export default声明的，再导入的时候也不需要关心导出的名字是什么，由开发者自己决定，同一个模块只能有一个默认导出的变量

导出

  1. // 第一种方式可以通过起别名的形式声明一个默认导出的变量，比如说
  2. const name = "coderwei";
  3. const age = 19;
  5. export { name, age as default };
  7. // 第二种导出方式可以使用export default
  8. const name = "coderwei";
  9. const age = 19;
  10. export default age;

导入

使用默认导出的时候，如果需要导入，需要省略中括号

  1. import coderwei from "./utils/index.js";
  2. console.log(coderwei); //19