commonjs 与 es6相关Module语法的区别
1、export 在接口名字与模块内部的变量之间建立了一一对应的关系,export输出的接口,与其模块内对应的变量值是动态绑定的,即通过暴露的接口可以取到模块内与之对应绑定变量的实时的值。
commonjs的规范完全不同,commonjs输出的是值的缓存,不存在动态的更新。
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export
的写法,除了像上面这样,还有另外一种。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958; export { firstName, lastName, year };
export
命令除了输出变量,还可以输出函数或类(class)。
export function multiply(x, y) {
return x * y;
};
2、CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。
/ CommonJS模块
let { stat, exists, readFile } = require('fs'); // 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
上面代码的实质是整体加载fs
模块(即加载fs
的所有方法),生成一个对象(_fs
),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。
// ES6模块
import { stat, exists, readFile } from 'fs';
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入。上面代码的实质是从fs
模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。
tips:import
语句会执行所加载的模块,因此可以有下面的写法。
import 'lodash';
上面代码仅仅执行lodash
模块,但是不输入任何值。
3、import
和export
命令只能在模块的顶层,不能在代码块之中(比如,在if
代码块之中,或在函数之中)。这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。在语法上,条件加载就不可能实现。如果import
命令要取代 Node 的require
方法,这就形成了一个障碍。因为require
是运行时加载模块,import
命令无法取代require
的动态加载功能。
const path = './' + fileName;
const myModual = require(path);
上面的语句就是动态加载,require
到底加载哪一个模块,只有运行时才知道。import
命令做不到这一点。
4、引入import()
函数,完成动态加载。
import
命令能够接受什么参数,import()
函数就能接受什么参数,两者区别主要是后者为动态加载。
import()
返回一个 Promise 对象。
import()
函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
import()
类似于 Node 的require
方法,区别主要是前者是异步加载,后者是同步加载。
下面是import()
的一些适用场合。
1、按需加载
import()
可以在需要的时候,再加载某个模块。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
2、条件加载
import()
可以放在if
代码块,根据不同的情况,加载不同的模块。
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
import()
加载模块成功以后,这个模块会作为一个对象,当作then
方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
最新文章
- 【C#】【Thread】BackgroundWorker的使用
- xcode6 beta 中智能提示(自动完成)功能有时不显示的问题
- LoadRunner 获取接口请求响应信息
- [Logstash-input-redis] 使用详解
- [fun code - 模拟]孤独的“7”
- JavaScript:九种弹出对话框
- python3爬虫之入门和正则表达式
- PMM Client 安装异常报错
- 放弃幻想,全面拥抱Transformer:自然语言三大特征抽取器CNN/RNN/Transformer比较
- Django JWT Token RestfulAPI用户认证
- Python 标准类库-日期类型之datetime模块
- R49 A-D D图有向有环图
- ANSYS渡槽槽身动水压力的施加(2)——U型渡槽
- Linux下RTL-SDR基础环境安装
- spring boot中,jar包、war包的区别
- ubuntu-15.04-desktop-amd64.iso:ubuntu-15.04-desktop-amd64:安装Oracle11gR2
- OAuth2.0认证和授权以及单点登录
- 使用CXF实现基于Rest方式的WebService
- spring cloud知识点
- Java 获取JVM内存和物理内存信息
热门文章
- MySQL服务问题
- 【软工实践】Beta版本演示
- nodejs接收前端formData数据
- git : error occurred during unpacking on the remote end: unpack-objects abnormal exit
- Linux服务器连接不上的几种解决办法
- 上传base64图片并压缩
- matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色
- springboot使用SpringTask实现定时任务
- ADB命令使用大法
- easyui datagrid 中序列化后的日期格式化