首页 > 网页制作 >使用函数表达式实现模块化封装

使用函数表达式实现模块化封装

来源：互联网 2026-07-19 08:12:18

利用立即执行函数表达式创建独立作用域，将变量与函数私有化，通过返回对象暴露精心挑选的公共接口。闭包赋予内部函数访问私有状态的权限，实现真正私有成员。依赖注入作为参数传入，便于测试、替换和压缩。

### 如何通过函数表达式实现模块化封装模块化的核心思路是通过IIFE（立即执行函数表达式）创建一个私有的作用域，将所有变量和函数封装在其中，仅通过返回的对象暴露有限的接口，从而实现外部只能访问到指定的几个方法。 #### 用IIFE构建独立作用域函数表达式加上括号立即执行，即刻形成一个封闭环境。在内部声明的变量和函数不会污染全局空间，这是封装的基本前提。 - 标准写法：(function() { /* 私有逻辑 */ })(); - 括号不能省略——缺少括号时，JavaScript引擎会将其视为函数声明，导致行为完全不同。 - 可以主动传入依赖项，例如window、jQuery或工具函数，既方便代码压缩，也明确标明了外部依赖关系。 #### 只暴露可控的公共接口模块必须主动返回一个对象，这个对象是外界唯一能接触的部分。它不代表内部全部内容，而是经过精心挑选的“窗口”。 - 返回普通方法集合：return { init() {}, getData() {} }; - 支持链式调用：在方法中返回this或新对象即可。 - 注意不要直接暴露原始数据——例如不要返回{ count }，而应提供getCount()和setCount()，将读写权限控制起来。 #### 利用闭包实现真正的私有成员 IIFE内部定义的变量默认对外不可见；只有返回对象中引用的那些函数，才能持续访问它们——这就是闭包赋予的“特权”。 - 举例：let token = null;在外层无法读写，但getToken()和setToken()可以操作它。 - 每次调用这个函数表达式，都会生成一套全新的私有状态，互不干扰。 - 多个模块需要共享状态？可以传入同一个对象作为参数，在闭包外部协调即可。 #### 配合依赖注入提升灵活性将jQuery、工具库等依赖作为参数传入IIFE，而不是硬编码引用——这样模块更容易测试、替换和压缩。 - 示例：(function($, utils) { /* 使用$和utils */ })(jQuery, myUtils); - 开发时使用全名，生产环境压缩工具可以缩写为单字母（例如j），减小体积。 - 结合UMD模板，同一份代码能同时适配浏览器全局、AMD、CommonJS等多种环境。

使用函数表达式实现模块化封装