JavaScript模块与命名空间：四种公共API导出方式详解

JavaScript模块化的核心概念

起因：将代码组织到类中，核心目的在于提升代码的“模块化”程度，从而支持在多种不同场景下实现代码复用。然而，类并非实现代码模块化的唯一途径。

通常情况下，模块指代一个独立的JavaScript文件。该文件内部可以包含单一类定义、一组关联类、实用工具函数库，或是需要直接执行的初始化代码。

模块化的核心目标在于支持大规模程序的开发，有效处理来自分散源头的代码组装工作。即使引入了未被使用的模块代码，系统也应能确保核心逻辑的正确执行。

在理想的设计状态下，每个模块应当避免定义超过一个全局标识符，以减少全局命名空间污染的风险。

模块函数与命名空间封装

模块函数：通过将模块定义封装在某个函数内部，可以确保该函数内定义的变量和函数仅作为局部变量存在，在函数外部不可见。实际上，这种函数作用域即可充当模块的命名空间（即模块函数模式）。

一旦将模块代码封装进一个函数中，必须提供特定的方法来导出公用API，以便在模块函数外部进行调用。以下介绍几种常见的导出公用API的方式：

四种公共API导出方式详解

首先，需要创建一个全局命名空间对象。

// 创建一个全局变量用来存放与学校相关的模块
var school; // 创建school命名空间
if(!school) school = {};

1. 利用构造函数

// 返回Student构造函数来导出公共API
school.Student = (function() {
function Student() {
    }
// ...... 定义Student的原型对象和私有属性和方法 ........
return Student; // 返回Student构造方法导出公共API
})();

2. 返回命名空间对象

如果模块API包含多个单元，则该模块可以直接返回一个命名空间对象。

// 为school添加students模块
school.students = (function() {
// 这里定义了很多类如课程类/成绩类, 使用局部变量和函数
function Subject() { /* ... */ }
function Grade() { /* ... */ }
// 通过返回命名空间对象将API导出
return {
Subject: Subject,
Grade: Grade
    };
})();

3. 通过关键字new调用

另一种类似的技术：将模块函数视为构造函数，并通过new关键字进行调用。将公共API赋值给this属性，以此实现导出。

school.students = (new function() {
// ..... 这里省略了代码 ......
// 将API导到this对象中
this.Subject = Subject;
this.Grade = Grade;
// 注意，这里没有返回值
}()); // 括号写在里面。这里是创建新实例，new后面应紧跟构造函数的调用而不是表达式

4. 已定义命名空间对象

作为一种替代方案，如果全局命名空间对象已经存在，可以通过模块函数直接设置该对象的属性。

// 如果已经定义了命名空间对象
var school; // 创建school命名空间
if(!school) school = {};
school.students = {}; // student命名空间已经定义
(function(students) {
// ..... 这里省略了代码 ......
// 将公共API导到上面定义的命名空间中
students.Subject = Subject;
students.Grade = Grade;
// 这里也不需要返回值
})(school.students);

至此，关于导出公共API的几种方式已介绍完毕。