Nodejs Web端JavaScript模块化的历史是什么样子的？

Node.js Web端JavaScript模块化的历史是什么样子的？

Web端JavaScript模块化并不是凭空捏造的。从早期的混乱到如今的规范和工具，JavaScript模块化的历程充满了挑战和创新。本文将回顾这一过程，并介绍一些重要的里程碑。

1. 早期阶段：全局变量混乱

在早期，JavaScript并没有模块化概念。所有代码都在全局作用域中执行，这导致了命名冲突和难以维护的代码。例如：

// 文件: script1.js
var message = "Hello, World!";
function sayHello() {
    console.log(message);
}

// 文件: script2.js
var message = "Goodbye, World!";
function sayGoodbye() {
    console.log(message);
}

在这段代码中，script1.js 和 script2.js 都定义了一个名为 message 的变量，这会导致命名冲突。

2. 模块模式（Module Pattern）

为了减少全局变量污染，开发者开始使用模块模式来封装代码。这种模式通过立即调用函数表达式（IIFE）来创建私有作用域：

(function(global) {
    var message = "Hello, World!";
    global.sayHello = function() {
        console.log(message);
    };
})(this);

这种模式虽然解决了部分问题，但仍然缺乏模块之间的依赖管理和加载机制。

3. CommonJS 规范

随着服务器端JavaScript的发展，CommonJS规范应运而生。它定义了一套标准的模块系统，允许开发者通过 require 和 module.exports 来导入和导出模块：

// 文件: module1.js
exports.message = "Hello, World!";
exports.sayHello = function() {
    console.log(exports.message);
};

// 文件: module2.js
var module1 = require('./module1');
console.log(module1.message); // 输出 "Hello, World!"
module1.sayHello(); // 输出 "Hello, World!"

4. AMD (Asynchronous Module Definition)

AMD规范旨在解决浏览器环境中的异步加载问题。它允许模块在加载时声明依赖关系，并且支持异步加载：

// 文件: module1.js
define(['dependency'], function(dependency) {
    return {
        message: "Hello, World!",
        sayHello: function() {
            console.log(dependency.getMessage());
        }
    };
});

// 文件: dependency.js
define({
    getMessage: function() {
        return "Hello from dependency!";
    }
});

5. CMD (Common Module Definition)

CMD规范与AMD类似，但更注重于简单性和兼容性。SeaJS是一个流行的CMD实现：

// 文件: module1.js
define(function(require, exports, module) {
    var dependency = require('./dependency');
    exports.message = "Hello, World!";
    exports.sayHello = function() {
        console.log(dependency.getMessage());
    };
});

// 文件: dependency.js
define(function(require, exports, module) {
    return {
        getMessage: function() {
            return "Hello from dependency!";
        }
    };
});

总结

从全局变量混乱到模块模式，再到CommonJS、AMD和CMD规范，JavaScript的模块化经历了多个阶段。这些规范和工具为现代Web开发提供了强大的模块化能力，使得代码更加组织有序和易于维护。

确实，之前我只用extjs，后来接触dojo的时候发现他提供了require方法，dojo也是之前很早发行的，所以想想应该是比较早的