模块化 —— CommonJS、AMD、UMD、ESM（上）
2021-04-01 10:27
标签：iphonex ref 通过 init 模块化 color sync code plain CommonJS、AMD、UMD、ESM 无论是那种模块化规范，重点关注 独立模块作用域 导出模块内部数据 导入外部模块数据 在早起前端对于模块化并没有什么规范，反而是偏向服务端的应用有更强烈的需求，CommonJS 规范就是一套偏向服务端的模块化规范，NodeJS 就采用了这个规范。 独立模块作用域 一个文件就是模块，拥有独立的作用域 导出模块内部数据 通过 导入外部模块数据 通过 因为 CommonJS 规范一些特性（基于文件系统，同步加载），它并不适用于浏览器端，所以另外定义了适用于浏览器端的规范 https://github.com/amdjs/amdjs-api/wiki/AMD 浏览器并没有具体实现该规范的代码，我们可以通过一些第三方库来解决 这里强调一下AMD是一个规范，它并不是代码。 https://requirejs.org/ 这是一个第三方库 独立模块作用域 通过一个 导入外部模块数据 通过前置依赖列表导入外部模块数据 导出模块内部数据 导入外部模块数据 模块化 —— CommonJS、AMD、UMD、ESM（上） 标签：iphonex ref 通过 init 模块化 color sync code plain 原文地址：https://www.cnblogs.com/jfen625/p/12571675.html
CommonJS
module.exports 或 exports 对象导出模块内部数据// a.js
let a = 1;
let b = 2;
module.exports = {
x: a,
y: b
}
// or
exports.x = a;
exports.y = b;
require 函数导入外部模块数据// b.js
let a = require(‘./a‘);
a.x;
a.y;
AMD
AMD(Asynchronous Module Definition)requireJS
// 1.html
script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js">script>
define 方法来定义一个模块，并通过该方法的第二个回调函数参数来产生独立作用域// scripts/Cart.js
define(function() {
// 模块内部代码
})
// scripts/main.js
// 定义一个模块，并导入 ./Cart 模块
define([‘./Cart‘], function(Cart) {
let cart = new Cart()
cart.add({name: ‘iphoneXX‘, price: 1000000})
})
requireJS 的 CommonJS 风格require.js 也支持 CommonJS 风格的语法// scripts/Cart.js
define([‘require‘, ‘exports‘, ‘module‘], function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
exports.Cart = Cart;
})
// 忽略不需要的依赖导入
define([‘exports‘], function(exports) {
class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
exports.Cart = Cart;
})
// 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
define(function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品：${item}`)
}
}
exports.Cart = Cart;
})
// scripts/main.js
define([‘./Cart‘], function(Cart) {
let cart = new Cart()
cart.add({name: ‘iphoneXX‘, price: 1000000})
})
文章标题：模块化 —— CommonJS、AMD、UMD、ESM（上）
文章链接：http://soscw.com/index.php/essay/70889.html