一个需求，考虑使用观察者模式，不过没有写过javascript版的，好了，开始啦！
先定义发布者接口
(function() {
/* 发布者接口 */
ISubject = function() {
this.observers = [];
}
ISubject.prototype = {
// 如果状态发生改变，通知所有观察者调用其update方法
notifyObservers : function(context) {
for (var i = 0, n = this.observers.length; i < n; i++) {
this.observers[i].update(context);
}
},
// 添加订阅者
attach : function(observer) {
if (!observer.update)
throw 'Wrong observer';
this.observers.push(observer);
},
/* 移除订阅者 */
detach : function(observer) {
if (!observer.update) {
throw 'Wrong observer';
}
this.observers.remove(observer);
}
}
})();
在定义观察者接口
(function() {
/* 订阅者接口 */
IObserver = function() {
// 观察者要实现的方法
this.update = function() {
throw "此方法必须被实现！"
}
}
})();
工具类，其中一个方法是接口实现具体类
(function() {
// 实现接口
implement = function(Concrete, Interface) {
for (var prop in Interface) {
Concrete[prop] = Interface[prop];
}
}
})();
发布者的实现类
(function() {
/** *************** 发布者的实现类 ********************** */
subject = {
notify : notify
};
implement(subject, new ISubject());
function notify() {
this.notifyObservers("哈哈哈哈");
}
})()
订阅者的实现类1
(function() {
/** ******************* 订阅者的实现类 **************************** */
observer1 = {};
implement(observer1, new IObserver());
/* 必须实现它们的具体update方法 */
observer1.update = function(value) {
alert("我是一号：" + value);
}
// 将发布者和订阅者(观察者)关联
subject.attach(observer1);
})();
订阅者的实现类2
(function() {
/** ******************* 订阅者的实现类 **************************** */
observer2 = {};
implement(observer2, new IObserver());
/* 必须实现它们的具体update方法 */
observer2.update = function(value) {
alert("我是二号：" + value);
}
// 将发布者和订阅者(观察者)关联
subject.attach(observer2);
})();
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>javascript 观察者模式</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type=text/javascript src="js/iobserver.js"></script>
<script type=text/javascript src="js/isubject.js"></script>
<script type=text/javascript src="js/util.js"></script>
<script type=text/javascript src="js/subject.js"></script>
<script type=text/javascript src="js/observer1.js"></script>
<script type=text/javascript src="js/observer2.js"></script>
</head>
<body>
<input type="button" value="点击我吧" onclick="subject.notify()">
</body>
</html>
附件是项目打包
分享到：
相关推荐
一个比较有意思的js库可以为javascript的对象实现观察者模式，以往我们使用javascript实现的观察者模式都是通过使用回调函数配合dom上的event事件来操作的，而“Watch.js”可以为javascript的对象实现观察者模式，...
本文将详细介绍如何在JavaScript中实现观察者模式，并探讨其在现代Web开发中的应用。 观察者模式是JavaScript中实现事件驱动编程的重要模式。通过实现自定义的观察者模式，或者使用现有的框架和库，可以构建出响应式...
下面通过两个具体的示例来说明如何在JavaScript中实现观察者模式。 **示例1：** 在这个例子中，我们创建了一个简单的弹出窗口（子窗口），该窗口可以从打开它的父窗口接收数据，并在用户选择某些项后将结果返回给...
本文将详细介绍如何利用JavaScript的特性实现观察者模式，并通过一个具体的示例来展示如何使用这种模式来实现数据自动刷新的效果。 #### 二、观察者模式的核心概念 在深入了解实现细节之前，我们先来了解一下观察...
### JavaScript设计模式详解：单例模式与观察者模式 #### 一、单例模式 **定义**：单例模式是一种常用的软件设计模式，其目的是确保某个类只有一个实例，并且能够提供一个全局访问点来访问该实例。在JavaScript中...
观察者模式是一种强大的设计模式，它允许对象之间的...在JavaScript中实现观察者模式可以提高代码的可维护性和可扩展性。通过本文的介绍和代码示例，你应该能够理解观察者模式的基本概念，并能够在自己的项目中实现它。
在JavaScript中，我们可以使用函数、事件监听器或者发布/订阅模式来实现观察者模式。例如，HTML DOM事件就是一个观察者模式的实例，当我们为DOM元素绑定点击事件时，实际上是注册了一个监听器，当点击事件发生时，...
除了标准实现，还有很多其他语言和框架提供了观察者模式的支持，例如在C#中，可以使用System.ComponentModel.INotifyPropertyChanged接口来实现，而在JavaScript中，可以通过事件监听器或者发布/订阅模式来实现类似...
在实际开发中，很多框架和库也内置了观察者模式，如JavaScript中的EventEmitter（Node.js）、C#的事件和委托，以及Android中的BroadcastReceiver等。这些工具使得开发者可以更便捷地应用观察者模式，提高代码的可...
例如，我们可以通过定义一个通用的Events对象来提供添加监听器和触发事件的方法，使任何对象都能轻松地实现观察者模式。 总而言之，观察者模式是一个非常有用的模式，可以极大地提高系统的可扩展性和可维护性。通过...
本篇文章将深入探讨JavaScript的OOP思想，并通过实际代码示例介绍单例模式、工厂模式和观察者模式。 首先，面向对象编程的核心概念是类和对象。在JavaScript中，虽然没有传统的类定义，但可以通过构造函数来模拟类...
【JavaScript源代码】详解从vue的组件传值着手观察者模式 在JavaScript中，Vue框架是一种广泛应用的前端开发工具，其核心设计思想包含了观察者模式的元素。观察者模式是一种软件设计模式，它定义了对象间的一种一对...
下面将详细探讨观察者模式的概念、工作原理以及如何在JavaScript中实现。 **观察者模式的基本概念** 观察者模式是一种行为设计模式，它允许你定义一个订阅机制，可以发布事件到多个订阅者，即观察者。这些观察者会...
- **响应式编程**：在函数式编程和React等库中，观察者模式常用于实现组件之间的状态同步。 ObserverJS库的实现可能会考虑性能优化，比如使用发布-订阅（Pub/Sub）模型来减少不必要的通知，或者使用惰性求值来延迟...
在JavaScript中实现观察者模式有多种方法。上述代码展示了两种不同的实现方式。第一种方式中，发布者拥有订阅者列表，并负责添加和删除订阅者，以及在数据更新时调用所有订阅者的回调函数。第二种方式与第一种相似，...
- 观察者模式：定义对象间的一种一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。 - 代理模式：为其他对象提供一种代理以控制对这个对象的访问。 - 原型模式：利用原型...
在JavaScript中，观察者模式广泛用于事件驱动编程，而策略模式和模板方法模式则有助于保持代码的灵活性和可扩展性。 每个模式都有其特定的适用场景和优缺点，通过理解和应用这些模式，开发者可以更好地组织代码，...
在JavaScript中实现观察者模式的一个典型例子是DOM事件。当DOM元素上绑定了事件监听器时，当事件发生（如点击事件），就会触发绑定到该事件的处理函数。这里的DOM元素相当于目标，事件监听器相当于观察者。 在提供...
在JavaScript中，我们可以创建一个`pubsub`对象来实现观察者模式。`pubsub`对象包含三个主要方法：`subscribe`（订阅）、`unsubscribe`（退订）和`publish`（发布）。`subscribe`方法用于注册回调函数到特定主题...