深入浅出理解iife、cjs、esm

2023-04-23 23:36:11

JavaScript 模块化开发：iife、CJS、ESM 详解

JavaScript 模块化开发简介

在前端开发中，模块化开发是一种组织和管理代码的常用方法。它有助于提高代码的可重用性、可维护性和可测试性。有几种不同的 JavaScript 模块化开发方法，包括 iife、CJS 和 ESM。

立即执行函数表达式 (IIFE)

iife 是一种立即执行的匿名函数。 它用于封装代码或创建私有变量。iife 的语法如下：

(function() {
  // 代码在这里执行
})();

CommonJS (CJS)

CJS 是 Node.js 中使用的模块化开发规范。 它使用 require() 函数来加载模块，并使用 module.exports 对象来导出模块。CJS 的语法如下：

// 文件 a.js
module.exports = {
  name: 'John',
  age: 30
};

// 文件 b.js
const { name, age } = require('./a.js');

console.log(name, age); // 输出：John 30

ES Modules (ESM)

ESM 是 ES6 中引入的模块化开发规范。 它使用 import 和 export 来加载和导出模块。ESM 的语法如下：

// 文件 a.js
export const name = 'John';
export const age = 30;

// 文件 b.js
import { name, age } from './a.js';

console.log(name, age); // 输出：John 30

iife、CJS、ESM 之间的区别

iife、CJS 和 ESM 之间的主要区别如下：

iife 是一种立即执行的匿名函数，而 CJS 和 ESM 是模块化开发规范。
CJS 使用 require() 函数来加载模块，并使用 module.exports 对象来导出模块，而 ESM 使用 import 和 export 关键字来加载和导出模块。
CJS 是 Node.js 中使用的模块化开发规范，而 ESM 是 ES6 中引入的模块化开发规范。