JavaScript 模块化编程(笔记)

JavaScript 模块化编程是现代 JavaScript 开发中一种流行的方式。它通过把复杂的代码分成多个集中化独立的小模块，使代码更易于维护和适应不断变化的需求。

模块化编程基本概念

• 导入 import： 在一个模块中，用 import 语句引入其他模块的代码。
• 导出 export： 在一个模块中，用 export 语句将模块内部的代码对外公开。
• 模块作用域： 每个模块自成一体，拥有自己独立的作用域，内部变量和函数只能在模块内部访问。
• 单例模式： 每个模块只被加载一次，导出的对象是单例的。

CommonJS 规范

CommonJS 是最早实现 JavaScript 模块化的规范，它定义了 require 和 exports 两个全局对象，需要运行在服务器或者 Browserify 等工具中才能使用。

示例

// module.js
let name = 'module'
function getName() {
  return name
}
module.exports = {
  getName
}

// main.js
const module = require('./module')
console.log(module.getName()) // 'module'

在上面的例子中，我们通过 module.exports 导出了 getName 函数，在 main.js 中使用 require 引入 module.js 中的代码。

ES6 模块化

在 ES6 规范中，JavaScript 模块化被完全纳入标准库，并通过 import 和 export 语句提供了更易用的语法。

示例

// module.js
let name = 'module'
export function getName() {
  return name
}

// main.js
import { getName } from './module.js'
console.log(getName()) // 'module'

在上面的示例中，我们使用 export 导出了 getName 函数，在 main.js 中使用 import 引入 module.js 中的代码。

总结

通过模块化编程，我们可以大大提高代码的复用性和可维护性，避免了全局变量污染，使代码更加模块化和可读性更高。它已成为现代 JavaScript 开发中的标准实践。

参考

• JavaScript 模块化编程(笔记)
• CommonJS规范
• ES6 模块化教程