模块模式(IIFE)
使用立即调用函数封装代码。
模块模式(IIFE) 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
模块模式解决了什么问题
在 ES 模块出现之前,模块模式可以将相关的状态和行为打包在一起,同时隐藏内部实现并公开简洁的公共接口。它建立在闭包之上。
IIFE
IIFE(立即调用的函数表达式)是定义后立即运行的函数。将函数包裹在括号中并调用它,可以立即创建一个私有作用域。
const result = (function () {
return 42;
})();
console.log(result); // 42为什么要立即运行
IIFE 可以为您提供一次性的私有作用域,而不必留下一个具名函数。内部的所有内容都与全局命名空间隔离。
(function () {
const temp = "not global";
console.log(temp);
})();
// temp is unreachable out here返回公共接口
模块模式是一个返回对象的 IIFE。对象的方法是围绕私有变量形成的闭包,共同构成公共接口。
const counter = (function () {
let count = 0; // private
return {
inc: () => ++count,
value: () => count
};
})();
counter.inc();
console.log(counter.value()); // 1私有与公共
在内部声明但未返回的任何内容都会保持私有。只有放在返回对象上的内容才可以访问。
const calc = (function () {
const pi = 3.14159; // private constant
return {
area: (r) => pi * r * r
};
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi); // undefined私有辅助函数
辅助函数可以存在于模块内部,供公共方法使用,但永远不会被公开。
const validator = (function () {
const clean = (s) => s.trim().toLowerCase(); // private
return {
isEmail: (s) => clean(s).includes("@")
};
})();
console.log(validator.isEmail(" A@B.com ")); // true揭示模块模式
一种流行的变体是先将所有函数定义为私有函数,然后返回一个对象,通过它“揭示”公共函数的引用。这样可以在底部清晰地列出公共接口。
const store = (function () {
let items = [];
function add(x) { items.push(x); }
function count() { return items.length; }
return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1单例
由于 IIFE 只运行一次,模块实际上是一个单例:它只有一个实例和一组私有状态。
const config = (function () {
let settings = { theme: "dark" };
return {
get: (k) => settings[k],
set: (k, v) => { settings[k] = v; }
};
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"传入依赖
您可以将全局对象或其他模块作为 IIFE 参数传入,从而明确依赖关系,并支持安全的压缩。
const mathUtils = (function (M) {
return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5避免污染全局作用域
这样做的核心目的,是只使用一个全局名称(即模块),而不是使用几十个松散的变量。这可以防止不同脚本之间发生命名冲突。
与 ES 模块的关系
如今,import/export 在语言层面提供了真正的模块作用域,在很大程度上取代了这种模式。不过,理解 IIFE 模块有助于弄清隐私和封装的工作方式,而且您仍会在旧代码中遇到它们。
快速检查
模块模式和 IIFE。
回顾
模块模式使用 IIFE 创建私有作用域,并返回一个对象,其方法是围绕隐藏状态形成的闭包。内部实现保持私有;只有返回的成员是公共的。揭示模块模式等变体可以让接口更加清晰,模块也会表现为单例。如今,ES 的 import/export 已取代这种模式,但建立在相同的思想之上。
常见问题解答
「模块模式(IIFE)」课时是免费的吗?
是的 — 「模块模式(IIFE)」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 JavaScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「模块模式(IIFE)」这节课中我会学到什么?
使用立即调用函数封装代码。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。
「模块模式(IIFE)」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗?
能。每节 JavaScript Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 闭包如何捕获状态
- 使用闭包创建私有变量
- 模块模式(IIFE)
- 工厂函数