JavaScript观察者模式(经典)

观察者模式，又称发布者-订阅者模式，是软件设计中一种极为常见的行为模式，也是GoF提出的23种软件设计模式之一。这一模式主要解决的对象间通信问题，特别是在一个对象状态变化需要通知其他对象时。当被观察对象的状态发生变化时，所有与之相关联的观察者都会得到通知，进而刷新自己的状态。

在观察者模式中，主要涉及到两个角色：被观察对象（Subject）和观察者（Observer）。被观察对象负责维护一个观察者列表，当它的状态发生变化时，会通知所有观察者。观察者则通过接口或抽象类实现，当接收到被观察对象的通知时，会进行相应的处理。

在生活中，观察者模式也有许多生动的例子。比如我们平时接触的DOM事件，就是JavaScript和DOM之间实现的一种观察者模式。当我们订阅了某个元素的click事件后，只要点击该元素，对应的函数就会被触发。

再来看看日常生活中的例子。在面试过程中，面试官让我留下联系方式，表示他们是“发布者”，而我则是“订阅者”。我无需主动询问面试结果，只需等待面试官的通知。这就是观察者模式的实际应用，实现了双方之间的解耦。

在开发过程中，观察者模式也有广泛的应用。比如在开发一个HTML5游戏时，游戏开始后需要加载一些图片素材。这时，我们可以将图片加载过程看作是被观察对象，而游戏的其他部分则是观察者。当图片加载完成时，游戏就可以开始运行了。这样，图片加载的状态变化能够自动通知游戏的其他部分，实现了两者之间的解耦。观察者模式也使得代码更加灵活和可维护。因为当被观察对象的状态发生变化时，所有的观察者都会得到通知，所以我们可以很容易地添加新的观察者或者修改已有的观察者，而无需修改被观察对象的代码。

当缤纷的图片完成加载，游戏的序幕随之拉开。在一个充满合作气息的项目中，我负责了Gamer和Map两大模块的打造。同事A则为我们带来了图片加载器loadImage的佳作。

loadImage的代码犹如一首优美的诗篇，当图片准备妥当，它轻轻吟唱，唤醒了地图和游戏逻辑的初始化。一切运行得井井有条，直到那天，我决定为游戏注入声音的灵魂。

我意识到需要在loadImage中加入声音的初始化代码，然而同事A此时正在远方享受他的旅游时光。我拨通了他的电话，我们交流了关于代码修改的想法。想象着各种可能出现的状况，我突然想到了一个更好的方式。

就像面试的场景，面试官将面试者的简历收集起来，在结果出炉时，只需照着简历上的联系方式挨个通知。我们来实现这个模式：

创建一个Events函数，包含listen（订阅）、one（只订阅一次）、remove（取消订阅）、trigger（触发事件）等方法。我们将loadImage变成一个事件发布者，通过触发“ready”事件来通知订阅者进行初始化操作。

现在我们来做一个简单的应用实例——成人电视台的小应用。我们定义一些订阅者，比如想看电影的人。然后，我们创建一个发布者——adultTv（成人电视台）。当某个电影播放时，我们触发“play”事件，同时传递电影信息给订阅者。订阅者收到信息后，弹出提示框显示电影名称。这样，无论电影播放多少次，订阅者都能实时收到通知。

我们调用cambrian.render('body')来呈现这个应用。这个应用就像是一个充满活力的舞台，图片、声音和游戏逻辑在这里交织融合，共同演绎出一场精彩的演出。而我们，正是这场演出的幕后导演，通过观察者模式将各个元素巧妙地串联起来，创造出无限可能。