CommonJS规范

CommonJS规范应用在服务器

声明:

1
2
3
4
module.exports = {
  outA: showA,
  outB: showB
}

引入:

1
2
3
var moduleA = require('moduleA.js');
moduleA.outA();
moduleA.outB();

AMD规范

AMD规范应用在客户端

声明:

1
2
3
4
5
6
7
define(function(){
  //代码
  return {
    outA: showA,
    outB: showB
  }
})

引入:(异步执行)

1
2
3
4
5
require('moduleA.js',function(moduleA){
  引入之后执行
  moduleA.outA();
  moduleA.outB();
})

ECMA6模块化规范

1
import package from 'module-name'
1
export default str => str.toUpperCase()

在此示例中，模块定义了单个默认导出(default export)，因此它可以是匿名函数。 否则，它需要一个名称来区分其它的导出。

在引入入口文件时需要指定类型，而且不允许跨域

原生解析必须加.js后缀否则会404报错
原生import必须在服务器环境下运行

import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行，也就是说，import和export命令只能在模块的顶层，不能在代码块之中

如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

import()函数

import()返回一个 Promise 对象。下面是一个例子

1
2
3
4
5
6
7
8
9
const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });