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}) => {
  // ...·
});

commonjs 与 es6相关Module语法的区别

相关推荐