JavaScript编码之路【ES6新特性之模块化】_universal module definition javascript-CSDN博客

本文链接：https://blog.csdn.net/zrblue/article/details/135435837

本文详细介绍了JavaScript历史上的模块化规范，如CommonJS、AMD、UMD和IIFE，以及ES6的模块化语法，包括命名导出、统一导出、默认导出和不同的导入方法。通过实例演示了如何在实际项目中运用这些模块化技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引子

欢迎来到 JavaScript 的模块化大战——这是一场被各种不同规范规定的模块横亘在我们面前带来的混乱战斗。然而，拿起你的剑吧，让我们一起跨过这段困难的旅程！

在ES6（ECMAScript 2015）之前的规范

JavaScript社区存在多种模块化规范和实现

CommonJS ⭐⭐⭐⭐⭐
AMD（Asynchronous Module Definition）
UMD（Universal Module Definition）
IIFE（Immediately Invoked Function Expression）

CommonJS

在令人舒适的ES6(也就是 ECMAScript 2015)之前，我们的JavaScript社区里各种模块化规范和实现让人眼花缭乱。比如说CommonJS,这是一个专门针对服务器端JavaScript的模块化规范。要是你是个Node.js 的粉丝，你一定熟悉这个。它有两个特别简单术语——“require”和 “module.exports” 偶尔还会有个"exports",用这两个英勇的小家伙，你就可以加载和导出你的模块啦！

自创模块的导入导出

我们来看看他的第一件装备：module.exports

我们有两个模块，一个是math.js，用于进行数学运算，另一个是app.js，用于调用math.js中的函数。

首先，创建一个名为math.js的文件，并在其中定义一些数学函数：

math.js

它有 add 和 subtract 这两个超能力

加法函数

function add(a, b) {
   
  return a + b
}

减法函数

function subtract(a, b) {
   
  return a - b
}

然后我们把这些超能力暴露出去，让别人也可以得到这些超能力

module.exports = {
   
  add: add,
  subtract: subtract
}

app.js

引入math.js模块
有了这个，我们其他模块也可以有这个超能力
var math = require('./math')

看看我学会了新能力

使用加法函数

var result1 = math.add(10, 5)
console.log(result1) // 输出: 15

使用减法函数

var result2 = math.subtract(10, 5)
console.log(result2) // 输出: 5

看吧，是不是很神奇？只要你有心，你也可以！

而且这个英雄如此好学，他还多学会了一种叫做“exports”的装备，别小看它，它并不逊色于"module.exports"！

utils.js

我们有个模块叫做 utils.js，它有 sum 和 reverseString 这两个超能力

求和函数

function sum(numbers) {
   
  return numbers.reduce((acc, curr) => acc + curr, 0)
}

反转字符串函数

function reverseString(str) {
   
  return str.split('').reverse().join('')
}

然后我们用 exports 这个武器，暴露出去这些超能力

exports.sum = sum
exports.reverseString = reverseString

app.js

这样，其他模块想要这些超能力，只要去借就好了

var utils = require('./utils')

定义一组数字

var numbers = [1, 2, 3, 4, 5]

使用sum函数求和

var total = utils.sum(numbers)

console.log(total) // 输出: 15

使用reverseString函数反转字符串

var str = 'Hello World!'
var reversed = utils.reverseString(str)
console.log(reversed) // 输出: '!dlroW olleH'</