一个需求,考虑使用观察者模式,不过没有写过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>
附件是项目打包