{"id":174,"date":"2010-08-29T11:48:57","date_gmt":"2010-08-29T17:18:57","guid":{"rendered":"http:\/\/www.arjarapu.com\/wordpress\/?p=174"},"modified":"2010-08-29T12:51:51","modified_gmt":"2010-08-29T18:21:51","slug":"publish-subscribe-events-in-javascript","status":"publish","type":"post","link":"http:\/\/www.arjarapu.com\/wordpress\/2010\/08\/publish-subscribe-events-in-javascript\/","title":{"rendered":"Publish \/ Subscribe Events in JavaScript"},"content":{"rendered":"<p>Some situations may require developers to call multiple methods on occurrence of an event. When we do know what all methods needs to be called before hand, then we could hard code &#8216;the set of methods&#8217; that needs to be called. However, what if we do not know &#8216;the set of methods&#8217; upfront?<\/p>\n<p>In C# we may accomplish this using <a href=\"http:\/\/en.csharp-online.net\/Multi-cast_Delegate\">Multi-cast Delegate<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Observer_pattern\">Observer<\/a> Pattern, a subset of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Publish\/subscribe\">Publish\/Subscribe<\/a> Pattern. So, how are we going to deal with this issue in JavaScript? <!--more--><\/p>\n<p>In scenarios where you know &#8216;the set of methods&#8217; before hand, we can do call them as show below (see a <a href=\"http:\/\/www.arjarapu.com\/wordpress\/wp-content\/uploads\/2011\/12\/publish.subscribe\/call.multiple.methods.html\">live demo<\/a> page)<\/p>\n<pre class='brush:javascript'>\r\n<script language=\"javascript\" type=\"text\/javascript\">\r\n      $(document).ready(function ()\r\n      {\r\n         $('#btnSubmit').click(function ()\r\n         {\r\n            onSubscribeFormEvent01($('#txtName').val(), $('#txtMessage').val());\r\n            onSubscribeFormEvent02($('#txtName').val(), $('#txtMessage').val());\r\n         });        \r\n      });\r\n      function onSubscribeFormEvent01(name, message)\r\n      {\r\n         if ($('#chkSubscribe1').attr('checked')) \r\n         {\r\n            $('#txtName1').val(name);\r\n            $('#txtMessage1').val(message);\r\n         }\r\n      };\r\n      function onSubscribeFormEvent02(name, message)\r\n      {\r\n         if ($('#chkSubscribe2').attr('checked')) \r\n         {\r\n            $('#txtName2').val(name);\r\n            $('#txtMessage2').val(message);\r\n         }\r\n      };\r\n   <\/script>\r\n<\/pre>\n<p>To do the same stuff in a decoupled fashion, where you don&#8217;t know &#8216;the set of methods&#8217; before hand, I solved the issue by implementing publish \/ subscribe pattern through EventManager class in JavaScript. The code listed above can be modified to use publish (when btnSubmit button is clicked) and subscribe (when chkSubscribe check boxes are checked ) feature as illustrated below (see  <a href=\"http:\/\/www.arjarapu.com\/wordpress\/wp-content\/uploads\/2011\/12\/publish.subscribe\/publish.subscribe.html\">live demo<\/a> page)<\/p>\n<pre class='brush:js'>\r\n      $(document).ready(function ()\r\n      {\r\n         $('#btnSubmit').click(function ()\r\n         {\r\n            EventManager.Publish('onPublishFormSubmitEvent', $('#txtName').val(), $('#txtMessage').val());\r\n         });\r\n         $('#chkSubscribe1').change(function ()\r\n         {\r\n            if ($(this).attr('checked'))\r\n            {\r\n               EventManager.Subscribe('onPublishFormSubmitEvent', onSubscribeFormEvent01);\r\n            }\r\n            else\r\n            {\r\n               EventManager.UnSubscribe('onPublishFormSubmitEvent', onSubscribeFormEvent01);\r\n            }\r\n         });\r\n         $('#chkSubscribe2').change(function ()\r\n         {\r\n            if ($(this).attr('checked'))\r\n            {\r\n               EventManager.Subscribe('onPublishFormSubmitEvent', onSubscribeFormEvent02);\r\n            }\r\n            else\r\n            {\r\n               EventManager.UnSubscribe('onPublishFormSubmitEvent', onSubscribeFormEvent02);\r\n            }\r\n         });\r\n\r\n<\/pre>\n<p>With this approach, while publishing the btnSubmit button doesn&#8217;t need to know what all check boxes are subscribed. The whole logic of calling \/ notifying the event to the subscribers is done through EventManager Class, which maintains a Registry of events and &#8216;the set of methods&#8217; to be called for each event. <\/p>\n<p>You may download the complete source for the code from <a href=\"http:\/\/www.arjarapu.com\/wordpress\/wp-content\/uploads\/2011\/12\/publish.subscribe\/publish.subscribe.html\">here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some situations may require developers to call multiple methods on occurrence of an event. When we do know what all methods needs to be called before hand, then we could hard code &#8216;the set of methods&#8217; that needs to be &hellip; <a href=\"http:\/\/www.arjarapu.com\/wordpress\/2010\/08\/publish-subscribe-events-in-javascript\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"_links":{"self":[{"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":8,"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":179,"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/posts\/174\/revisions\/179"}],"wp:attachment":[{"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.arjarapu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}