# export,import和export default的关

yscmh 关注

2018.08.22 18:47* 字数 599 阅读 33评论 1喜欢 1

1.export 命令
export命令用户规定模块的对外接口
一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,如果希望外部能够读取内部的某个变量,就必须使用export关键字输出该变量
用法1

    使用export命令输出变量。
    export var firstName = 'Michael';
     export var lastName = 'Jackson';

用法2

    在export命令后面，使用大括号指定所要输出的一组变量
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export {firstName, lastName, year};

注意:export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

    // 报错
        export 1;
    // 报错
          var m = 1;
          export m;
    正确写法:
        // 写法一
        export var m = 1;
        // 写法二
            var m = 1;
        export {m};
        // 写法三
        var n = 1;
        export {n as m};

2.import命令
import命令用于输入其他模块提供的功能,使用export命令定义了模块的对外接口以后,其他js文件就可以通过import命令加载这个模块
1.import命令接受一对大括号,里面指定要从其他模块导入的变量名,大括号里面的变量名,必须与被导入模块对应接口的名称相同

    // main.js
    import {firstName, lastName, year} from './profile.js';

2.如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名

    import { lastName as surname } from './profile.js';

3.import命令输入的变量都是只读的,因为他的本质是出入家口,不逊在加载模块的脚本里面,改写接口

    import {a} from './xxx.js'
    a = {}; // Syntax Error : 'a' is read-only;

3.export default

1.Export default命令为模块指定默认输出,使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载,但是用export default就不需要
2.使用export default默认输出

    // export-default.js
      export default function () {
          console.log('foo');
        }

上面代码是一个模块文件export-default.js，它的默认输出是一个函数,其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

    // import-default.js
        import customName from './export-default';
        customName(); // 'foo'
    上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

4.比较一下默认输出(export default)和正常输出(export)。

第一组 默认输出

      export default function crc32() { // 输出
                  // ...
          }
      import crc32 from 'crc32'; // 输入

第二组 正常输出

        export function crc32() { // 输出
            // ...
        };
    import {crc32} from 'crc32'; // 输入

*上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
*export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

小礼物走一走，来