javascript实现观察者模式

一个需求,考虑使用观察者模式,不过没有写过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="点击我吧" οnclick="subject.notify()">
	</body>
</html>

 附件是项目打包

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值