dojo/topic
簡介
dojo/topic 是另一個和 dojo/on 一樣可以藉由某事的發生，而針對某事採取對應行動的機制。不同的地方在於：dojo/on 比較偏向單一的事件，單一的對應行動；dojo/topic 則偏向於藉由發佈單一的主題訊息 (topic)，而相對會有至少有一個及一個以上的對應行動。
topic 有二個常用的函式：
- publish(message, obj):
- 用來發佈一項主題訊息，第一個參數是所要發佈的主題訊息，為字串型態，字串的內容自定。第二個是隨發佈主題訊息所傳遞的相關資料，為物件型態，物件的內容自定。
- var handle = subscribe(message, action):
- 用來訂閱主題訊息。第一個參數是所要訂閱的主題訊息，為字串型態，字串的內容須和發佈的主題訊息內容相同。第二個參數則是收到訊息後所要採取的對應行動，型態為函式，函式的參數為 publish() 函式所傳遞的物件。傳回的變數 handle，具有 remove() 函式，用 handle.remove() 可以取消對主題訊息的訂閱。
範例
範例中建立了七個灰色方塊，點按方塊時，該方塊會訂閱主題訊息，程式每三秒會發佈一次主題訊息，有訂閱主題訊息的方塊則會在接到主題訊息時，改變其背景顏色。範例中不能取消主題訊息的訂閱。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:100%;
padding-top:20px;
}
.box {
box-sizing:box-sizing;
margin:10px;
width:60px;
height:60px;
border:3px solid gray;
background-color:#EEEEEE;
float:left;
}
.box:hover {
cursor:pointer;
}
</style>
CSS 中 .box 定義方塊的樣式， .box:hover 定義當游標移到方塊上方時，改變游標的樣式。
HTML
<body class="claro">
</body>
HTML 中，定義七個方塊，在點按方塊時，會呼叫 app.subscribe() 函式訂閱主題訊息。
Script
第 22 行定義一個含有彩虹七種顏色的字串陣列。
第 25~27 行則是各方塊訂閱主題訊息及所採取之行動的函式。訂閱的主題為 "changeColor"。
第 30~32 行定義每隔 3 秒鐘，，發佈一次 "changeColor" 主題訊息，發佈主題訊息時，並沒有相關的資料要傳遞，所以第二個參數為一個 null 指標。
沒有留言:
張貼留言