es6 模块

来源:互联网 发布:淘宝宽屏海报代码 编辑:程序博客网 时间:2024/06/16 04:37

ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

// ES6模块import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

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

var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 报错export 1;// 报错var m = 1;export m;

上面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量m,还是直接输出1。1只是一个值,不是接口。正确的写法是下面这样。

// 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1;export {n as m};
同样的,functionclass的输出,也必须遵守这样的写法。

// 报错function f() {}export f;// 正确export function f() {};// 正确function f() {}export {f};
import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
import {firstName, lastName, year} from './profile';function setName(element) {  element.textContent = firstName + ' ' + lastName;}

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。
foo();import { foo } from 'my_module';

目前阶段,通过 Babel 转码,CommonJS 模块的require命令和 ES6 模块的import命令,可以写在同一个模块里面,但是最好不要这样做。因为import在静态解析阶段执行,所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。

require('core-js/modules/es6.symbol');require('core-js/modules/es6.promise');import React from 'React';

第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法。

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

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确export var a = 1;// 正确var a = 1;export default a;// 错误export default var a = 1;

模块之间也可以继承。

假设有一个circleplus模块,继承了circle模块。

export * from 'circle';export var e = 2.71828182846;export default function(x) {  return Math.exp(x);}

上面代码中的export *,表示再输出circle模块的所有属性和方法。注意,export *命令会忽略circle模块的default方法。然后,上面代码又输出了自定义的e变量和默认方法。
原创粉丝点击