javascript兑现观察者模式
日期：2014-05-16 浏览次数：20366 次
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="点击我吧" onclick="subject.notify()"> </body> </html>
?附件是项目打包
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
