美文网首页
export,import和export default的关系

export,import和export default的关系

作者: yscmh | 来源:发表于2018-08-22 18:47 被阅读0次

    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命令。

    相关文章

      网友评论

          本文标题:export,import和export default的关系

          本文链接:https://www.haomeiwen.com/subject/bvnyiftx.html