Причина использования шаблона проектирования Observer

Question

Я относительно новичок в JavaScript и недавно начал изучать различные шаблоны проектирования.Я понимаю, как работает шаблон проектирования наблюдателя, но я не совсем понимаю, когда их использовать.Взгляните на этот относительно простой шаблон наблюдателя:

function Observer(){
	this.listeners = {};
}
Observer.prototype.add = function(event,func){
	if(!this.listeners[event]){
  	this.listeners[event] = [];
  }
  this.listeners[event].push(func)
}
Observer.prototype.remove = function(event, func){
	var ref = this.listeners[event],
  var len = ref.length;
  for(var i =0; i<len; i++){
  	if(listener===func){
    	ref.splice(i,1)
    }
  }
}
Observer.prototype.trigger = function(event){
  var ref = this.listeners[event];
  var len = ref.length;
  for(var i=0; i<len; len++){
  	var listener = ref[i];
    if(typeof listener == 'function') {listener()}
  }
}
var observer = new Observer();
var observerFunc = function(){console.log('notified')};
observer.add("test",observerFunc)
observer.trigger("test") // logs "notified"

Мой вопрос в том, в чем преимущество использования шаблона наблюдателя, подобного приведенному выше, и выполнения чего-то подобного ниже с jQuery?Какое ограничение имеет второй подход?Они оба вызывают определенные функции при возникновении события, но я чувствую, что мне не хватает фундаментальной части.

var observer = {
	observerfunction : function(){console.log('Observer notified')}
}

$('selector').on("observerFunction", function(){
	observer.observerfunction();
})

$('selector').trigger('observerFunction');