首頁 > 開發者 > JavaScript
JavaScript中發布/訂閱模式的簡單一實例，javascript訂閱
上次研究觀察者模式，很多文章說它也叫Subscribe/Publish(發布/訂閱模式)。可在《Javascript設計模式》一書中，這兩種模式還是有些區別的。書中原話如下：
1.Observer模式要求希望接收到主題通知者的觀察者必須訂閱內容改變的事件。
2.Subscribe/Publish模式使用了一個主題/事件通道，這個通道介於訂閱者和發行者之間。該事件系統允許代碼定義應用程式的特定事件，該事件可以傳遞自訂參數，自訂參數包含訂閱者所需要的值。其目的是避免訂閱者和發行者產生依賴關係。
與Observer模式不同之處在於它允許任何訂閱者執行適當的事件處理常式來註冊和接收發行者發出的通知。
好吧，不明覺厲。下面是我的理解：
1.觀察者模式中，目標對象負責維護觀察者。發布/訂閱模式中發行者不關心訂閱者，只負責把訊息丟出去就不管了。
2.觀察者模式中，觀察者要提供一個介面，然後當目標對象發生改變時調用此介面使自身狀態和目標狀態保持一致。即所有的觀察者都要有一個統一的介面(比如上文中寫的update方法，大家的方法都要叫這個名字)。而發布/訂閱模式中，訂閱者事件的觸發不是依靠這樣一個介面，而是訂閱者通過監聽一個特定的訊息(這個訊息一般包含名稱和訂閱者所需要的參數)來觸發的。可以理解為訂閱者監聽的不是發行者，而是訊息池，只要訊息池裡有它關心的訊息，即觸發事件，不管這個訊息是誰發布過去的。發行者和訂閱者是解耦的。
下面是js中發布/訂閱模式的實現，複製粘貼到console裡面試一試就明白了：
複製代碼 代碼如下:
var pubsub = (function(){
var q = {}
topics = {},
subUid = -1;
//發布訊息
q.publish = function(topic, args) {
if(!topics[topic]) {return;}
var subs = topics[topic],
len = subs.length;
while(len--) {
subs[len].func(topic, args);
}
return this;
};
//訂閱事件
q.subscribe = function(topic, func) {
topics[topic] = topics[topic] ? topics[topic] : [];
var token = (++subUid).toString();
topics[topic].push({
token : token,
func : func
});
return token;
};
return q;
//取消訂閱就不寫了，遍曆topics，然後通過儲存前面返回token，刪除指定元素
})();
//觸發的事件
var logmsg = function(topics, data) {
console.log("logging:" + topics + ":" + data);
}
//監聽指定的訊息'msgName'
var sub = pubsub.subscribe('msgName', logmsg);
//發布訊息'msgName'
pubsub.publish('msgName', 'hello world');
//發布無人監聽的訊息'msgName1'
pubsub.publish('anotherMsgName', 'me too!');
<html>
<head>
<script language="javascript">
<!--
function show()
{
//alert(window.document.myform.username.value);
if(document.myform.username.value=="")
{
alert("NO Complete");
alert("4444444444");
return false;
}
else
{
alert("OK");
return true;
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="test.html" method="post">
<input type="input" name="username" value=""/>
<input type="submit" name="mybutton" value="點擊" onClick="return show()"/>
</form>
</body>
</html>
jQuery訂閱發布訊息模式的回呼函數中傳入參數值，找javascript解
你好！！
書中也存在有偏差的情況···
//發布$.publish("test", "a", "bds", "csdf", "dsdf");改為$.publish("test", ["a", "bds", "csdf", "dsdf"]);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
