阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JS export

      功能

      在创建 JavaScript 模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。

      无论您是否声明,导出的模块都处于严格模式。 export 语句不能用在嵌入式脚本中。

      语法

      // 导出单个特性
      export let name1, name2, …, nameN; // also var, const
      export let name1 = …, name2 = …, …, nameN; // also var, const
      export function FunctionName(){...}
      export class ClassName {...}
      
      // 导出列表
      export { name1, name2, …, nameN };
      
      // 重命名导出
      export { variable1 as name1, variable2 as name2, …, nameN };
      
      // 默认导出
      export default expression;
      export default function (…) { … } // also class, function*
      export default function name1(…) { … } // also class, function*
      export { name1 as default, … };
      
      // Aggregating modules
      export * from …;
      export { name1, name2, …, nameN } from …;
      export { import1 as name1, import2 as name2, …, nameN } from …;
      export { default } from …;
      
      

      nameN

      要导出的标识符(以便其他脚本通过 import 语句进行导入).

      描述

      有两种不同的导出方式,命名导出和默认导出。你能够在每一个模块中定义多个命名导出,但是只允许有一个默认导出。每种方式对应于上述的一种语法:

      命名导出:

      // 导出早前定义的函数
      export { myFunction };
      
      // 导出常量
      export const foo = Math.sqrt(2);
      

      默认导出(函数):

      export default function() {}
      

      默认导出(类):

      export default class {}
      

      在导出多个值时,命名导出非常有用。在导入期间,必须使用相应对象的相同名称。但是,可以使用任何名称导入默认导出,例如:

      let k; export default k = 12; // 在 test.js文件中定义导出
      
      import m from './test' // 由于k 是默认导出,所以可以自由使用import m 替代import k
      
      console.log(m);        // 输出为 12
      

      下面的语法不能从导入的模块导出默认导出值:

      export * from …;
      

      如果需要导出默认值,请使用下列代码:

      export {default} from 'mod';
      

      示例

      使用命名导出

      在模块中,我们可以使用以下代码:

      // module "my-module.js"
      function cube(x) {
        return x * x * x;
      }
      const foo = Math.PI + Math.SQRT2;
      var graph = {
          options: {
              color:'white',
              thickness:'2px'
          },
          draw: function() {
              console.log('From graph draw function');
          }
      }
      export { cube, foo, graph };
      

      这样的话,在其它脚本中,我们可以这样使用它:

      // 在html中应使用带有module类型的script。
      // 示例:
      //   <script type="module" src="./demo.js"></script>
      //
      // 在http服务器上访问,否则将会有一个CORS保护报错。
      //
      // script demo.js
      
      import { cube, foo, graph } from 'my-module.js';
      graph.options = {
          color:'blue',
          thickness:'3px'
      };
      graph.draw();
      console.log(cube(3)); // 27
      console.log(foo);    // 4.555806215962888
      

      使用默认导出

      如果我们要导出一个值或模块中的返回值,就可以使用默认导出:

      // module "my-module.js"
      export default function cube(x) {
        return x * x * x;
      }
      

      然后,在另一个脚本中,可以直接导入默认导出:

      // module "my-module.js"
      import cube from 'my-module.js';
      console.log(cube(3)); // 27​​​​​
      

      注意,不能使用 var、let 或 const 用于导出默认值 export default。

      模块重定向

      如果我们想要在当前模块中,导出指定导入模块的默认导出(等于是创建了一个“重定向”):

      // module "redirect-module.js"
      export {default} from './other-module';
      export * from './other-module';
      

      规范

      规范状态备注
      ECMAScript 2015 (6th Edition, ECMA-262)
      Exports
      Standard初版
      ECMAScript Latest Draft (ECMA-262)
      Exports
      Draft
      目录
      目录