ES6 Module语法的export、export default、import

ES6 模块的设计思想是尽量静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 模块是编译时加载,使得静态分析成为可能。
ES6 模块不是对象,而是通过 export 命令显示指定输出的代码,再通过 import 命令输入。

1、export 命令

// profile.js
// 格式一
export var firstName = 'zhangsan';
export var lastName = 'lisi';
export var year = 1995;

// 格式二
var firstName = 'zhangsan';
var lastName = 'lisi';
var year = 1995;
export {firstName, lastName, year};

上面的代码在 export 命令后面使用大括号指定所要输出的一组变量。格式二与格式一(直接放置到 var 语句前)是等价的,但是应该优先考虑使用格式二。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

export 命令除了输出变量,还可以输出函数(function)和类(class)。

需要特别注意的是,export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应的关系。

另外,export 语句输出的接口与其对应的值是动态绑定的关系,即通过该接口可以取到模块内部实时的值。

最后,export 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,import命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了 ES6 模块的设计初衷。

2、import 命令

// main.js
import { firstName, lastName, year } from './profile';
function setName(element) {
	element.textContent = firstName + ' ' + lastName;
} 

// 
import { firstName as first } from './profile'

import 命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号中的变量名必须与被导入模块对外接口的名称相同。如果想用新的名字,使用 as 关键字,将输入的变量重命名。

import 后面的 from 指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js 后缀可以省略。如果只是模块名(import {myMethod} from ‘antd’),不带有路径,那么必须有配置文件告诉 JavaScript 引擎该模块的位置。

import 命令具有提升效果,会提升到整个模块的头部并首先执行。这种行为的的本质是:import 命令是编译阶段执行的,在代码运行之前。

// 不会报错,因为 import 的执行早于 foo 的调用。
foo();
import { foo } from 'my_module';

3、export default 命令

// 第一组
export default function create() {}   //输出

import create from 'create';     // 输入

// 第二组
export function create(){}  // 输出

import { create } from 'create';  // 输入

上面的两组写法中,第一组使用 export default,对应的 import 语句不需要使用大括号;第二组不适用 export default,对应的 import 语句需要使用大括号。

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

本质上,export default 就是输出一个叫做 default 的变量或方法,然后系统允许我们为它取任意名字。

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

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

同样,因为 export default 本质是将该命令后面的值赋给变量 default 变量以后再默认,所以可以直接将一个值写在 export default 之后。

// 正确
export default 42;
// 错误
export 42;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值