Created
October 17, 2017 15:20
-
-
Save KleoPetroff/bf7adb7a2d418f701e2f8a5474066a63 to your computer and use it in GitHub Desktop.
Pub/Sub
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <body> | |
| <button id="addNewObserver">Add New Observer checkbox</button> | |
| <input id="mainCheckbox" type="checkbox"/> | |
| <div id="observersContainer"></div> | |
| <script> | |
| // Extend an object with an extension | |
| function extend( obj, extension ){ | |
| for ( var key in extension ){ | |
| obj[key] = extension[key]; | |
| } | |
| } | |
| // References to our DOM elements | |
| var controlCheckbox = document.getElementById( "mainCheckbox" ), | |
| addBtn = document.getElementById( "addNewObserver" ), | |
| container = document.getElementById( "observersContainer" ); | |
| // Concrete Subject | |
| // Extend the controlling checkbox with the Subject class | |
| extend( controlCheckbox, new Subject() ); | |
| // Clicking the checkbox will trigger notifications to its observers | |
| controlCheckbox.onclick = function(){ | |
| controlCheckbox.notify( controlCheckbox.checked ); | |
| }; | |
| addBtn.onclick = addNewObserver; | |
| // Concrete Observer | |
| function addNewObserver(){ | |
| // Create a new checkbox to be added | |
| var check = document.createElement( "input" ); | |
| check.type = "checkbox"; | |
| // Extend the checkbox with the Observer class | |
| extend( check, new Observer() ); | |
| // Override with custom update behaviour | |
| check.update = function( value ){ | |
| this.checked = value; | |
| }; | |
| // Add the new observer to our list of observers | |
| // for our main subject | |
| controlCheckbox.addObserver( check ); | |
| // Append the item to the container | |
| container.appendChild( check ); | |
| } | |
| </script> | |
| </body> | |
| </head> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class ObserverList { | |
| constructor() { | |
| this.observerList = []; | |
| } | |
| add(obj) { | |
| return this.observerList.push(obj); | |
| } | |
| count() { | |
| return this.observerList.length; | |
| } | |
| get(index) { | |
| if( index > -1 && index < this.observerList.length ){ | |
| return this.observerList[ index ]; | |
| } | |
| } | |
| indexOf(obj, startIndex) { | |
| let i = startIndex; | |
| while( i < this.observerList.length ){ | |
| if( this.observerList[i] === obj ){ | |
| return i; | |
| } | |
| i++; | |
| } | |
| return -1; | |
| } | |
| removeAt(index) { | |
| this.observerList.splice( index, 1 ); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Subject { | |
| constructor() { | |
| this.observers = new ObserverList(); | |
| } | |
| addObserver(observer){ | |
| this.observers.add(observer); | |
| } | |
| removeObserver(observer) { | |
| this.observers.removeAt(this.observers.indexOf(observer, 0)); | |
| } | |
| notify(context) { | |
| const observerCount = this.observers.count(); | |
| for(var i=0; i < observerCount; i++){ | |
| this.observers.get(i).update( context ); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment