Modules 从 JavaScript 到 TypeScript 的模块化演变

2024-01-18 01:25:48

JavaScript 中的模块化

JavaScript 最初是一个全局作用域语言，这意味着在全局范围内声明的变量和函数可以从任何地方访问。然而，随着 JavaScript 应用程序变得越来越复杂，需要一种方法来组织和封装代码，避免命名冲突和全局变量污染。

ES 模块

ES2015 引入了 ES 模块，提供了一种模块化代码的标准化方式。ES 模块使用 export 和 import 语句来导出和导入标识符，并且它们在自己的作用域中运行。这有助于封装代码，防止意外的命名冲突。

// module.js
export const myFunction = () => {
  console.log("Hello from myFunction!");
};

// main.js
import { myFunction } from "./module.js";
myFunction(); // Hello from myFunction!

CommonJS 模块

在 ES 模块之前，CommonJS 模块是一种流行的模块化模式，主要用于 Node.js。CommonJS 模块使用 require 和 module.exports 对象来导出和导入标识符，并且它们也在自己的作用域中运行。

// module.js
module.exports = {
  myFunction: () => {
    console.log("Hello from myFunction!");
  },
};

// main.js
const module = require("./module.js");
module.myFunction(); // Hello from myFunction!

AMD 模块

AMD（异步模块定义）模块是一种模块化模式，主要用于浏览器环境。AMD 模块使用 define 函数来定义模块，并且它们依赖于异步加载机制来导入其他模块。

// module.js
define(["jquery"], function($) {
  return {
    myFunction: () => {
      console.log("Hello from myFunction!");
    },
  };
});

// main.js
requirejs(["module"], function(module) {
  module.myFunction(); // Hello from myFunction!
});

TypeScript 中的模块化

TypeScript 是一个编译到 JavaScript 的超集语言，它提供了一个更严格的类型系统和一些现代 JavaScript 特性。TypeScript 支持 ES 模块和 CommonJS 模块，并提供了一些额外的功能来增强模块化。

命名空间

在 TypeScript 中，模块可以作为命名空间使用。这允许我们将相关的标识符分组到一个单一的命名空间中，并使用点语法访问它们。

// module.ts
export namespace MyModule {
  export const myFunction = () => {
    console.log("Hello from myFunction!");
  };
}

// main.ts
import { MyModule } from "./module.ts";
MyModule.myFunction(); // Hello from myFunction!

导入和导出

TypeScript 使用 import 和 export 语句来导入和导出标识符。TypeScript 还支持条件导入和导出，这允许我们根据编译器标志动态地导入或导出模块。

// module.ts
export const myFunction = () => {
  console.log("Hello from myFunction!");
};

// main.ts
import { myFunction } from "./module.ts";
if (condition) {
  export { myFunction };
}