引言：当闭包遇见观察者

在JavaScript的世界里，闭包（Closure）如同一个神奇的魔法箱，而观察者模式（Observer Pattern）则是解耦代码的利器。当这两者相遇时，会产生怎样的化学反应？本文将带您深入探索如何用闭包优雅地实现观察者模式，并揭示其在实际开发中的妙用。

一、理解核心概念

1.1 闭包的灵魂三要素

• 函数嵌套：一个函数内部定义另一个函数
• 变量捕获：内层函数持有外层作用域的变量引用
• 持久化状态：即使外层函数执行结束，内层函数仍能访问被捕获的变量

javascript function createCounter() { let count = 0 // 被闭包捕获的变量 return function() { return ++count } }

1.2 观察者模式的三方角色

• Subject（主题）：维护观察者列表，通知状态变化
• Observer（观察者）：定义接收通知的接口
• ConcreteObserver（具体观察者）：实现具体响应逻辑

二、闭包实现观察者模式

2.1 基础实现框架

javascript
function createSubject() {
const observers = [] // 关键：闭包保存观察者列表

return {
subscribe: (observer) => {
observers.push(observer)
return () => { // 返回取消订阅函数
observers.splice(observers.indexOf(observer), 1)
}
},
notify: (data) => {
observers.forEach(observer => observer(data))
}
}
}

2.2 实际应用示例

javascript
// 创建消息中心
const newsCenter = createSubject()

// 订阅者A
const unsubscribeA = newsCenter.subscribe((news) => {
console.log(读者A收到：${news})
})

// 订阅者B
const unsubscribeB = newsCenter.subscribe((news) => {
console.log(读者B兴奋地看到：${news})
})

// 发布消息
newsCenter.notify('JavaScript ES2023新特性发布')

// 取消订阅
unsubscribeB()

三、进阶优化技巧

3.1 防止内存泄漏

javascript
function createSafeSubject() {
const observers = new WeakMap()
let uid = 0

return {
subscribe: (observer) => {
const key = ++uid
observers.set(key, observer)
return () => observers.delete(key)
},
notify: (data) => {
observers.forEach(observer => observer(data))
}
}
}

3.2 支持异步通知

javascript
function createAsyncSubject() {
const observers = []
let isNotifying = false

return {
subscribe: (observer) => {
observers.push(observer)
// ...返回取消订阅逻辑
},
notify: async (data) => {
if (isNotifying) return
isNotifying = true

  await Promise.all(
    observers.map(observer => 
      Promise.resolve(observer(data))
        .catch(console.error)
    )
  )

  isNotifying = false
}

}
}

四、真实场景应用

4.1 表单验证联动

javascript
const formValidator = createSubject()

// 用户名输入框
const usernameInput = document.getElementById('username')
usernameInput.addEventListener('input', (e) => {
formValidator.notify({
type: 'USERNAME_CHANGE',
value: e.target.value
})
})

// 密码强度检测
formValidator.subscribe(({ type, value }) => {
if (type === 'USERNAME_CHANGE') {
// 实现用户名存在性检查...
}
})

4.2 微前端通信

javascript
// 主应用
const appEventBus = createSubject()

// 子应用A
appEventBus.subscribe((payload) => {
if (payload.type === 'GLOBALSTATEUPDATE') {
// 同步全局状态...
}
})

// 子应用B
function dispatchGlobalEvent() {
appEventBus.notify({
type: 'USER_LOGOUT',
timestamp: Date.now()
})
}

五、性能优化实践

5.1 惰性通知机制

javascript
function createLazySubject() {
let observers = []
let dirty = false
let pendingData

return {
subscribe: (observer) => {
// ...订阅逻辑
},
notify: (data) => {
pendingData = data
if (!dirty) {
dirty = true
requestAnimationFrame(() => {
observers.forEach(observer => observer(pendingData))
dirty = false
})
}
}
}
}

5.2 批量更新处理

javascript
const batchSubject = createSubject()
let batchQueue = []
let isBatching = false

function batchNotify(data) {
batchQueue.push(data)
if (!isBatching) {
isBatching = true
setTimeout(() => {
batchSubject.notify(batchQueue)
batchQueue = []
isBatching = false
}, 0)
}
}

结语：优雅架构的艺术

闭包实现的观察者模式，就像在代码中架起无形的消息高速公路。它不仅保持了代码的整洁性，更在模块间建立了松耦合的通信桥梁。下次当您需要组件通信或状态管理时，不妨试试这种优雅的实现方式，或许会有意想不到的收获。