AMD & ESModules 是什么?

在CommonJS中可以用require去加载模块。
现在假设我们在web环境下,用require去加载模块A。
但是模块A由于网络问题,使得加载速度很慢或者请求超时根本获取不到。
由于js在浏览器端是异步加载的,最终这个没有加载到的模块A会导致后面依赖它的代码出错。
所以CommonJS 规范虽然适用于服务器端,但不适用于浏览器端。

AMD规范很好地解决了异步加载和依赖的问题,
AMD的全称是Asynchronous Module Definition,即异步模块加载机制。

AMD 例子:

1.定义模块moduleB,模块moduleB依赖于模块moduleX

define('moduleB', ['./moduleX'], function(x){
  console.log(x);
  return {
    name: 'xxx'
  }
})

2.引用模块moduleA

require(['./moduleA'], function(a){ 
  console.log(a.xxx);
})
//意思是函数依赖于moduleA,加载完后才再执行。

结尾:

私人开发的规范:
CMD 应用于 seaJS (代码有BUG,没人维护,没人使用)
AMD 应用于 requireJS (过时,但依然有人维护,有人使用)
CommonJS 应用于 NPM

官方开发的规范:
ESModules

ESModules是es6规范, 截止2017年8月,目前大部分浏览器不支持。
Node.js 从 8.5.0 开始原生支持 ES 模块,不过还需要通过命令行参数控制。
8.5.0前的Node.js依然使用CommonJS。
ESModules 需要用babel转换es6语法

2021年11月,目前主流的打包软件都默认使用ESModules,所以请直接使用官方统一的规范ESModules,CMD和AMD已经成为历史

ESModules例子:
定义模块moduleA:

let xxx = {};
export xxx;
let yyy = {};
export yyy;

引用模块moduleA:

import {* as A} from './moduleA';

引用后的调用:

console.log(A.xxx);
console.log(A.yyy);

更多资料: 在 Node.js 中使用原生的 ES 模块

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容