The result of the next pen shows the case where I'll use the Publish/Subscribe pattern. Every time you click on the button a square is added and a message with the number of squares is displayed. Event HTML Event This is the alert < = > button onclick "btnEvent()" </ > button < = > div class "alert border" </ > div < = > div class "squares border" </ > div As part of the layout I have a button that will trigger a every time is clicked. You also can see and containers that are used to display the message with the number of squares and the squares respectively. btnEvent alert squares div CSS { : solid black; : ; : ; : ; } { : solid black; : ; : ; : auto; } { :center; : ; : ; : ; } .squares border 1px max-width 300px min-height 50px margin-top 20px .square border 1px width 150px height 50px margin 20px .alert text-align max-width 300px min-height 20px margin-top 20px The stylesheet contains the classes to style the and containers; and the that is added every time the button is clicked. .squares .alert .square JavaScript numberOfSquares = ; { numberOfSquares += ; squares = ; (numberOfSquares).fill( ).forEach( { squares += ; }); .querySelector( ).innerHTML = squares; alert = .querySelector( ); alert.innerHTML = ; } let 0 ( ) function btnEvent 1 // display the squares let '' Array null => () '<div class="square"></div>' document '.squares' // display alert message const document '.alert' `The number of squares is: ` ${numberOfSquares} The script is composed of the global variable that stores the number of squares that have been added; and the handler wich increments the by one and displays the message and squares based on variable. numberOfSquares btnEvent numberOfSquares numberOfSquares Using Publish/Subscribe Pattern Now that we have the use case, I'll refactor the code in the script: numberOfSquares = ; { numberOfSquares += ; pubsub.publish( , { numberOfSquares }); } let 0 ( ) function btnEvent 1 'addSquare' This is how the handler will look like at the end of the day. As you can see the only work the handler will do is increment the by one and publish the event. Here I'm using a Publish/Subscribe Implementation ( module) which is in charge of executing every function that has been subscribed to the event. btnEvent numberOfSquares 'addSquare' pubsub 'addSquare' The object that is passed as a parameter in the method ( ) will be accessible to all the functions. pubsub.publish { numberOfSquares } Let's add the rest of the code to understand what I'm talking about. Adding Publish/Subscribe Implementation pubsub = { events = {}; subscribersId = ; { (!events[event]) { ; } subscribers = events[event]; subscribers.forEach( { subscriber.func(event, data); }); ; } { (!events[event]) { events[event] = []; } subscribersId += ; token = subscribersId.toString(); events[event].push({ token, func, }); token; } { found = .keys(events).some( events[event].some( { areEqual = subscriber.token === token.toString(); (areEqual) { events[event].splice(index, ); } areEqual; })); found ? token : ; } { publish, subscribe, unsubscribe, }; })(); const ( ) => ( const let -1 ( ) function publish event, data if return false const ( ) => subscriber return true ( ) function subscribe event, func if 1 const return ( ) function unsubscribe token const Object ( ) => event ( ) => subscriber, index const if 1 return return null return I adapted this implementation from the one made by at . Here you'll find a really good explanation about wich Publish/Subscribe Pattern is derived from, check it out if you want to dig deeper into it. Addy Osmani https://addyosmani.com/resources/essentialjsdesignpatterns/book The Observer Pattern Adding subscribers { squares = ; (data.numberOfSquares).fill( ).forEach( { squares += ; }); .querySelector( ).innerHTML = squares; } { alert = .querySelector( ); alert.innerHTML = ; } ( ) function displaySquares _event, data let '' Array null => () '<div class="square"></div>' document '.squares' ( ) function displayAlert _event, data const document '.alert' `The number of squares is: ` ${data.numberOfSquares} In our case, the work made by handler could be split out. We can see and functions as subscribers. btnEvent displaySquares displayAlert Subscribing displaySquares and displayAlert functions displayAlertSubscription = pubsub.subscribe( , displayAlert); displaySquaresSubscription = pubsub.subscribe( , displaySquares); let 'addSquare' let 'addSquare' Here I'm creating the event and subscribing and functions at the same time. 'addSquare' displaySquares displayAlert This is the result: Subscribe and Unsubscribe Dynamically What I'd like to do now is subscribe and unsubscribe function implementing two buttons. I'll add the buttons to our layout: displaySquares Subscribe displaySquares Unsubscribe displaySquares < = > button onclick "subDisplaySquares()" </ > button < = > button onclick "unsubDisplaySquares()" </ > button The next step is to add and handlers in our script: subDisplaySquares unsubDisplaySquares { (!displaySquaresSubscription) { displaySquaresSubscription = pubsub.subscribe( , displaySquares); } } { (displaySquaresSubscription) { pubsub.unsubscribe(displaySquaresSubscription); displaySquaresSubscription = ; } } ( ) function subDisplaySquares if 'addSquare' ( ) function unsubDisplaySquares if null You can see the final result here: And that's it. :) Let's connect on LinkedIn Follow me on Twitter | Github Featured Image: Man holding his head while sitting on chair near computer desk by Jason Strull
