export 与export default区别

51 阅读4分钟

异步模块定义(AMD):该标准的典型应该是RequireJS。其主要特点是模块使用异步加载,主要使用在浏览器端。

2、ES6模块系统

=========


详细信息科参考es6 Module

它具有以下特性:

  • 简洁的语法。语法将比CommoneJS更简单,只使用export和import实现模块的导出和导入

  • 使用export关键字定义导出对象,这个关键字可以无限次使用

  • 使用import关键字引入导入对象,这个关键字可导入任意数量的模块

  • 模块结构可以做静态分析。这使得在编译时就能确定模块的依赖关系,以及输入和输出的变量

  • 模块支持异步加载

  • 为加载模块提供编程支持,可以按需加载

  • 比CommonJS更优秀的循环依赖处理

支持状况

ES6为JavaScript带来了模块机制,但ES6的模块机制在当前所有的浏览器及Node.js中均不受支持。但我们可以通过一些编译器来对ES6语法进行转换,从而利用这些新特性给我们项目带来便利:

Babel-Babel是一个ES6语法转换为ES5语法的转换器,其支持对ES6模块语法的转换,包括:异步加载、状态隔离、顶级命名空间隔离等

es6-module-transpiler -将ES6模块编译为AMD规范或者CommonJS规范的模块

ES6 module loader-能支持动态加载ES6风格的模块

Traceur-Google开发的JS转换编译器,目的在于支持更多的JavaScript特性包括ES6模块

导出对象

在现有的模块系统中,每个JavaScript代码文件在ES6中都是一个模块。只有模块中的对象需要被外部调用时,模块才会输出对象,其余则都是模块的私有对象。该处理方式将细节进行封装,仅导出必要的功能。

内联导出

ES6模块里的对象可在创建它们的声明中导出。一个模块中可无数次使用export,所有的对象将被一起导出。请看下面的例子:

export class Employee{ constructor(id, name, dob){ this.id = id; this.name=name; this.dob= dob; } getAge(){ return (new Date()).getYear() - this.dob.getYear(); } } export function getEmployee(id, name, dob){ return new Employee(id, name, dob); } var emp = new Employee(1, "Rina", new Date(1987, 1, 22));

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11

  • 12

  • 13

  • 14

案例中的模块导出了两个对象: Employee类,getEmployee函数。因对象emp未被导出,所以其仍为模块私有。

导出一组对象

尽管内联导出很有效,但在大规模模块中,它就很难发挥作用了,因为我们可能无法追踪到模块导出来的对象。在这种情况下,更好的办法是,在模块的末尾单独进行导出声明,以导出该模块中的全部对象。

class Employee{ constructor(id, name, dob){ this.id = id; this.name=name; this.dob= dob; } getAge(){ return (new Date()).getYear() - this.dob.getYear(); } } function getEmployee(id, name, dob){ return new Employee(id, name, dob); } var x = new Employee(1, "Rina", new Date(1987, 1, 22)); export {Employee, getEmployee};

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11

  • 12

  • 13

  • 14

  • 15

在导出时,重命名对象也是可以的。如下例所示,Employee在导出时名字改为了Associate,函数GetEmployee改名为getAssociate。

export { Associate as Employee, getAssociate as getEmployee };

  • 1

  • 2

  • 3

  • 4

Default导出

使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。而默认导出每个导出只有一个单一值,这个输出可以是一个函数、类或其它类型的值

export default function() {}; // 可以导出一个函数 export default class(){}; // 也可以出一个类

  • 1

  • 2

const D = 123; export default D; export { D as default }; //与上面的等价

  • 1

  • 2

  • 3

  • 4

导入模块

现有模块可以使用关键字import导入到其它模块。一个模块可以被导入任意数量的模块中。下文展示了导入模块的不同方式。

如果模块包含一些逻辑要执行,且不会导出任何对象,此类对象也可以被导入到另一模块中。如下面案例所示:

import './module1.js';

  • 1

导入默认对象

采用Default导出方式导出对象,该对象在import声明中将直接被分配给某个引用,如下例中的“d”。

import d from './module1.js'; import { default as d } from './module1.js'; //等价于上面

  • 1

  • 2

导入命名的对象

正如以上讨论的,一个模块可以导出许多命名对象。如果另一模块想导入这些命名对象,需要在导入声明中一一列出这些对象。举个例子:

import {Employee, getEmployee} from './module1.js';

  • 1

当然也可在同一个声明中导入默认对象和命名对象。这种情况下,默认对象必须定义一个别名,如下例。

import {default as d, Employee} from './module1.js';