es6 模块
来源:互联网 发布:淘宝宽屏海报代码 编辑:程序博客网 时间:2024/06/16 04:37
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入。
// ES6模块import { stat, exists, readFile } from 'fs';
上面代码的实质是从
fs
模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。模块功能主要由两个命令构成:export
和import
。export
命令用于规定模块的对外接口,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};同样的,
function
和class
的输出,也必须遵守这样的写法。// 报错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
变量和默认方法。阅读全文
0 0
- ES6---es6中的模块
- ES6--模块
- es6 模块
- nodejs 模块与es6模块
- 【ES6系列】模块Module
- ES6 模块modules
- ES6的模块Module
- ES6模块加载
- ES6-Module模块
- ES6中的模块
- 浅谈ES6模块基础知识
- ES6 模块系统
- ES6 模块实现
- ES6之模块
- es6 导出class模块
- 深入ES6 模块系统
- 理解ES6的模块(Understanding ES6 Modules)
- ES6学习14(模块)
- Android 简单分析Looper MessageQueue
- java 之线程的控制
- 移动生产力成手机重要竞争点,S Pen如何令Note 8脱颖而出?
- 剑指Offer_面试题42_翻转单词顺序 VS 左旋转字符串
- java和C/C++比较
- es6 模块
- 如何经营你的知识资产
- 通过SIMPLE_DEV_PM_OPS定义suspend和resume函数
- hdu 6085(bitset)
- IDEA+spring +mvc +maven
- 强连通分量算法之kosaraju的一些理解
- 关于sql server 在存储过程中创建临时表,并往临时表中插入数据时出现乱码的问题
- 非正确经验引发C++内存泄露
- Mybatis系列之Spring & Mybatis整合