<pre name="code" class="html"><html>
<head>
<title>Observer</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pubsub = (function() {
//訂閱者列表
var events = {};
var subUid = 0;
//發佈
function publish(eventName, args) {
if (!events[eventName]) {
return false;
}
var subscribers = events[eventName];
var len = subscribers.length;
while (len--) {
subscribers[len].callback(eventName, args);
}
}
//訂閱
function subscribe(eventName, callback) {
events[eventName] = events[eventName] || [];
var id = subUid++;
events[eventName].push({
callback: callback,
id: id
});
return id;
}
//取消訂閱
function unsubscribe(id) {
var eventName;
var i;
var len;
var subscribers;
for (eventName in events) {
subscribers = events[eventName];
if (subscribers) {
for (i = 0, len = subscribers.length; i < len; i++) {
if (subscribers[i].id === id) {
subscribers.splice(i, 1);
return id;
}
}
}
}
return this;
}
//利用Revealing Module模式隱藏內部實現,提供接口
return {
publish: publish,
subscribe: subscribe,
unsubscribe: unsubscribe
};
}());
//在hello事件生增加一個訂閱
var subscription = pubsub.subscribe("hello", function(eventName, data) {
console.log("Event:" + eventName + "/data:" + data);
});
//向訂閱者發送消息
pubsub.publish("hello", ["天鑲"]);
//向訂閱者發送消息
pubsub.publish("hello", ["天鑲", "求", "offer"]);
//取消訂閱
pubsub.unsubscribe(subscription);
//向訂閱者發送消息
pubsub.publish("hello", ["天鑲", "再求", "offer"]);
</script>
</body>
</html>
設計模式之發佈/訂閱模式
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.