PageBus最简单的实现publish-subcrbe代码-优快云博客

本文链接：https://blog.youkuaiyun.com/ronawilliam/article/details/4371244

两个订阅者,分别订阅“com.teamsun.select1” "com.teamsun.select2"两个主题的消息

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title>First use of PageBus</title> <mce:script type="text/javascript" src="pagebus.js" mce_src="pagebus.js"></mce:script> </head> <body > <div> <div>  <div > <div ><h3><b>Publisher</b></h3></div> <span > Click to sent message:</span> <li ><a href="#" mce_href="#" onClick="publishValueSuject1('message1'); return false">message1</a> on subject "com.teamsun.select1" </li> <li ><a href="#" mce_href="#" onClick="publishValueSuject1('message2'); return false">message2</a> on subject "com.teamsun.select1"</li> <li ><a href="#" mce_href="#" onClick="publishValueSuject2('message3'); return false">message3</a> on subject "com.teamsun.select2"</li> <li ><a href="#" mce_href="#" onClick="publishValueSuject2('message4'); return false">message4</a> on subject "com.teamsun.select2"</li> </div> <mce:script type="text/javascript"></mce:script>  <div> <div ><b><h3>Subscriber1:</h3></b></div> <div > <table> <tr> <td >Message Receiver1:</td> <td width="40"> </td> <td id="id_receiver1"> </td> </tr> <tr> <tr> <td ><b><h3>Subscriber2: </h3></b></td> </tr> <td >Message Receiver2:</td> <td width="40"> </td> <td id="id_receiver2"> </td> </tr> </table> </div> </div>  <mce:script type="text/javascript" src="receiver1.js" mce_src="receiver1.js"></mce:script> <mce:script type="text/javascript"></mce:script>   <mce:script type="text/javascript" src="receiver2.js" mce_src="receiver2.js"></mce:script> <mce:script type="text/javascript"></mce:script>  </body> </html>

receiver1.js

receiver1 = function( phonesCell) { this.subject = 'com.teamsun.select1'; this.sub = window.PageBus.subscribe(this.subject, this, this.onMessage, null); this.phonesCell = document.getElementById(phonesCell); } /* onMessage: 回调函数,展示信息*/ receiver1.prototype.onMessage = function(subj, msg, data) { //回调函数参数的个数为3个 this.phonesCell.innerHTML = msg.pubMessage; this.phonesCell.style.fontSize=50; };

receiver2.js

receiver2 = function(usersCell) { this.subject = 'com.teamsun.select2';//订阅的主题 this.sub = window.PageBus.subscribe(this.subject, this, this.onMessage, null);//订阅消息 this.usersCell = document.getElementById(usersCell); } /* 回调函数，得到并且展示消息*/ receiver2.prototype.onMessage = function(subj, msg, data) { this.usersCell.innerHTML = msg.pubMessage;//显示消息 this.usersCell.style.fontSize=50; };