#Implementations

Observer Design Pattern
1-https://pawelgrzybek.com/the-observer-pattern-in-javascript-explained/

JS- 
    let observers = [],
      data;
    const subscribe = f => observers.push(f);
    const unsubscribe = f => observers = observers.filter(o => o !== f);
    const notify = () => observers.forEach(o => o(data));

    for (let i = 1; i <= document.getElementsByClassName('js-paragraph').length; i++) {
    
      let update = text => document.querySelector(`.js-p${i}`).textContent = text;
      
      subscribe(update);
      
      document.querySelector(`.js-subscribe-p${i}`).addEventListener('click', function() {
        subscribe(update)
        notify();
      });
      
      document.querySelector(`.js-unsubscribe-p${i}`).addEventListener('click', function() {
        unsubscribe(update)
      });
    }
    
    document.querySelector('.js-input').addEventListener('keyup', function(e) {
      data = e.target.value;
      notify();
    });
    
HTML - 
<input type="text" class="js-input" placeholder="type something here">
<button class="js-subscribe-p1">Subscribe</button>
<button class="js-unsubscribe-p1">Unsubscribe</button>
<p class="js-paragraph js-p1"></p>
<button class="js-subscribe-p2">Subscribe</button>
<button class="js-unsubscribe-p2">Unsubscribe</button>
<p class="js-paragraph js-p2"></p>
<button class="js-subscribe-p3">Subscribe</button>
<button class="js-unsubscribe-p3">Unsubscribe</button>
<p class="js-paragraph js-p3"></p>



PUBSUB Implementation - 
https://gist.github.com/fatihacet/1290216

var pubsub = {};
(function(q) {
    var topics = {}, subUid = -1;
    q.subscribe = function(topic, func) {
        if (!topics[topic]) {
            topics[topic] = [];
        }
        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        });
        return token;
    };

    q.publish = function(topic, args) {
        if (!topics[topic]) {
            return false;
        }
        setTimeout(function() {
            var subscribers = topics[topic],
                len = subscribers ? subscribers.length : 0;

            while (len--) {
                subscribers[len].func(topic, args);
            }
        }, 0);
        return true;

    };

    q.unsubscribe = function(token) {
        for (var m in topics) {
            if (topics[m]) {
                for (var i = 0, j = topics[m].length; i < j; i++) {
                    if (topics[m][i].token === token) {
                        topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };
}(pubsub));


Singleton Pattern
https://www.dofactory.com/javascript/singleton-design-pattern
http://robdodson.me/javascript-design-patterns-singleton/

var Singleton = (function () {
    var instance;
 
    function createInstance() {
        var object = new Object("I am the instance");
        return object;
    }
 
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
 
function run() {
 
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
 
    alert("Same instance? " + (instance1 === instance2));  
}

Prototype Pattern - 
function person(firstName,lastName){
  
  this.firstName = firstName;
  
  this.lastName = lastName;
  
}

person.prototype.fullName = function(){
    return this.firstName + " " + this.lastName;
}

var person1 = new person('Akash','Pal');
var person2 = new person('Black','Panther');
person1 //{firstName: "Akash", lastName: "Pal"}
person2 //{firstName: "Black", lastName: "Panther"}
person1.fullName() //"Akash Pal"
person2.fullName() //"Black Panther"



Module Pattern - 
var personModule = (function(){
  
  var firstName;
  var lastName;
  
  return{
    setName(f,l){
      firstName = f;
      lastName = l;
    },
    getName(){
      return firstName + " " + lastName;
    }
  }
  
})();

personModule.setName('akash','pal')
personModule.getName() //"akash pal"


Links - 
https://medium.com/front-end-weekly/javascript-design-patterns-ed9d4c144c81