在 JavaScript 中，模塊化編程是一種將代碼組織成獨(dú)立、可復(fù)用的模塊的方法，它有助于提高代碼的可維護(hù)性、可擴(kuò)展性和可讀性。以下是 JavaScript 中常見(jiàn)的模塊化編程方式：

一、CommonJS

CommonJS 是服務(wù)器端 JavaScript 的模塊化規(guī)范，它主要用于 Node.js 環(huán)境。在 CommonJS 中，每個(gè)模塊都有自己的作用域，模塊內(nèi)部的變量和函數(shù)默認(rèn)是私有的，只有通過(guò)模塊導(dǎo)出的接口才能被外部訪問(wèn)。

導(dǎo)出模塊：

使用 `module.exports` 或 `exports` 來(lái)導(dǎo)出模塊的內(nèi)容。`module.exports` 可以直接導(dǎo)出一個(gè)對(duì)象，而 `exports` 通常用于逐個(gè)導(dǎo)出模塊的成員。例如：

```javascript

// math.js

const add = (a, b) => a + b;

const subtract = (a, b) => a - b;

module.exports = {

add,

subtract

};

```

導(dǎo)入模塊：

使用 `require` 函數(shù)來(lái)導(dǎo)入其他模塊。`require` 函數(shù)接受一個(gè)模塊標(biāo)識(shí)符作為參數(shù)，并返回導(dǎo)入模塊的導(dǎo)出對(duì)象。例如：

```javascript

const math = require('./math');

console.log(math.add(3, 4)); // 輸出 7

console.log(math.subtract(7, 3)); // 輸出 4

```

二、AMD（Asynchronous Module Definition）

AMD 是一種異步模塊定義規(guī)范，主要用于瀏覽器環(huán)境。它通過(guò)定義一個(gè) `define` 函數(shù)來(lái)定義模塊，并且允許模塊異步加載。

定義模塊：

使用 `define` 函數(shù)來(lái)定義 AMD 模塊，第一個(gè)參數(shù)是模塊的標(biāo)識(shí)符，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)是模塊的依賴項(xiàng)，回調(diào)函數(shù)的返回值是模塊的導(dǎo)出內(nèi)容。例如：

```javascript

define(['dependency1', 'dependency2'], function (dep1, dep2) {

const multiply = (a, b) => a * b;

const divide = (a, b) => a / b;

return {

multiply,

divide

};

});

```

導(dǎo)入模塊：

使用 `require` 函數(shù)來(lái)導(dǎo)入 AMD 模塊，`require` 函數(shù)接受一個(gè)模塊標(biāo)識(shí)符數(shù)組作為參數(shù)，以及一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)是導(dǎo)入模塊的導(dǎo)出內(nèi)容。例如：

```javascript

require(['math'], function (math) {

console.log(math.multiply(3, 4)); // 輸出 12

console.log(math.divide(8, 2)); // 輸出 4

});

```

三、ES6 模塊（ECMAScript 2015 模塊）

ES6 引入了原生的模塊系統(tǒng)，它是一種靜態(tài)模塊系統(tǒng)，模塊的導(dǎo)入和導(dǎo)出在編譯時(shí)就確定了。

導(dǎo)出模塊：

使用 `export` 關(guān)鍵字來(lái)導(dǎo)出模塊的成員，可以逐個(gè)導(dǎo)出，也可以使用對(duì)象字面量的形式導(dǎo)出。例如：

```javascript

// math.js

export const add = (a, b) => a + b;

export const subtract = (a, b) => a - b;

// 或者

export default function multiply(a, b) {

return a * b;

}

```

導(dǎo)入模塊：

使用 `import` 語(yǔ)句來(lái)導(dǎo)入 ES6 模塊，`import` 語(yǔ)句可以指定要導(dǎo)入的模塊成員，也可以使用默認(rèn)導(dǎo)入。例如：

```javascript

import { add, subtract } from './math';

import multiply from './math';

console.log(add(3, 4)); // 輸出 7

console.log(subtract(7, 3)); // 輸出 4

console.log(multiply(3, 4)); // 輸出 12

```

四、UMD（Universal Module Definition）

UMD 是一種通用的模塊定義格式，它可以在 CommonJS、AMD 和瀏覽器環(huán)境中都能正常工作。UMD 模塊通常包含一個(gè)判斷條件，根據(jù)不同的環(huán)境選擇不同的模塊定義方式。

以下是一個(gè)簡(jiǎn)單的 UMD 模塊示例：

```javascript

(function (root, factory) {

if (typeof define === 'function' && define.amd) {

// AMD

define(['dependency1', 'dependency2'], factory);

} else if (typeof exports === 'object') {

// CommonJS

module.exports = factory(require('dependency1'), require('dependency2'));

} else {

// 瀏覽器全局變量

root.moduleName = factory(root.dependency1, root.dependency2);

}

}(this, function (dep1, dep2) {

const multiply = (a, b) => a * b;

const divide = (a, b) => a / b;

return {

multiply,

divide

};

}));

```

這些是 JavaScript 中常見(jiàn)的模塊化編程方式，每種方式都有其特點(diǎn)和適用場(chǎng)景。CommonJS 主要用于服務(wù)器端，AMD 適用于瀏覽器環(huán)境，ES6 模塊是 JavaScript 的原生模塊系統(tǒng)，而 UMD 則可以在多種環(huán)境中使用。在實(shí)際開發(fā)中，可以根據(jù)項(xiàng)目的需求和環(huán)境選擇合適的模塊化方式。