ES6 中export 命令

  • A+
所属分类:ES 6 JavaScript Web

ES6 中引入了模块功能,模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一.export 命令

1.export命令作用

  • ① ES6中引入了模块的概念,一个模块就是一个独立的JS文件。该文件内部的所有变量,外部无法获取。
  • ② 我们希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

2.export的定义方式

  1. export的定义方式,一种是输出整个表达式;另一种是使用大括号,大括号中写入导出变量。
  2. export输出变量,函数,类。
  3. export输出时可以使用as指定别名。
    //1.======输出变量======
    // profile.js
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;
    
    // profile.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    
    export { firstName, lastName, year };
    //2.======输出函数======
    export function multiply(x, y) {
      return x * y;
    };
    
    function v1() { ... }
    function v2() { ... }
    
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };
    

3.export的输出注意点

  1. 如下方式都是定义错误的
    // 报错
    export 1;
    
    // 报错
    var m = 1;
    export m;
    
    // 报错
    function f() {}
    export f;
    
  2. export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错
    function foo() {
      export default 'bar' // SyntaxError
    }
    foo()
    

二.export default 命令

1.export default命令作用

  1. export default输出默认的js模块,在import引入的时候可以以任意名称导入。
  2. export default命令用于指定模块的默认输出。一个模块只能有一个默认输出,输出一个函数,或者一个对象。
    //导出函数
    // export-default.js
    export default function () {
      console.log('foo');
    }
    
    //import 加载export-default.js默认模块的时候,不需要使用大括号
    // import-default.js
    import customName from './export-default';
    customName(); // 'foo'
    
    //导出对象
    // export-default.js
    export default{
      say:'hi  I am Joey'
    }
    
    <script  type="module" >
     import m from './model.js'
      alert(m.say)
    </script>
    
  3. export default命令用在非匿名函数前,也是可以的。引入的时候和匿名函数相同。
    //如下代码,foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。
    // export-default.js
    export default function foo() {
      console.log('foo');
    }
    
    // 或者写成
    function foo() {
      console.log('foo');
    }
    
    export default foo;
    

2.export default和正常输出比较

  1. 第一组输入不需要大括号,第二组需要大括号
    // 第一组
    export default function crc32() { // 输出
      // ...
    }
    
    import crc32 from 'crc32'; // 输入
    
    // 第二组
    export function crc32() { // 输出
      // ...
    };
    
    import {crc32} from 'crc32'; // 输入
    

3.export default实质

  1. 因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
    // 正确
    export var a = 1;
    
    // 正确  将变量a的值赋给变量default
    var a = 1;
    export default a;
    
    // 错误
    export default var a = 1;
    
    // 正确
    export default 42;
    
    // 报错
    export 42;
    

4.同时导出,导入默认模块和正常输出

  1. 在一条import语句中,同时输入默认接口和其他接口
    export default function (obj) {
      // ···
    }
    
    export function each(obj, iterator, context) {
      // ···
    }
    
    export { each as forEach };
    
    //导入默认
    import _ from 'lodash';
    //导入默认和正常函数
    import _, { each, forEach } from 'lodash';
    
zhangfeng

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: