ES6模块化导入和导出

ES6中规范化了模块的导入和导出语法：

• export 命令：一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

  // 方式一
  export left name = '张三';
  import {name} from 'xx.js'
  
  // 方式二(推荐)可以一起在模块结束位置输出
  // 导出
  let age  = 18;
  let height = 14;
  export ｛age, height｝
  // 导入
  import {age, hieght } from 'xx.js'
  
  //方式三 导出函数
  export function add(num1, num2) {
    return num1 + num2
  }
  import {add}  from 'xx.js'
  
  // 方式四 导出类
  export class Person() {
    run() {
     console.log('在奔跑')
    }  
  }
  import {Person}  from 'xx.js'
  let p = new Person();
  p.run();

• export default 命令

  • 使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

    exprot default class Person {
      getAge() {
            console.log('Person age');
        }  
    }

  • export default命令只能使用一次,如果同一个文件中使用了多个export default,前面的将会被覆盖,但是使用export符合用法时,重复会报错。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字,这时就不需要知道原模块输出的函数名。

  • export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

    function add(x, y) {
      return x * y;
    }
    //export
    export {add as default};
    // 等同于
    // export default add;
    //import
    import { default as xxx } from 'modules';
    // 等同于
    // import xxx from 'modules';

  • 注意：引入时import命令后面，不使用大括号。

• 统一全部导入

  import {name, age, height } from 'xxx.js'
  import * as aaa from 'xxx.js'
  使用：aaa.name