JS Observser Pattern_serpattern-优快云博客

本文链接：https://blog.youkuaiyun.com/BLUEsang/article/details/106983350

本文探讨了JavaScript中的观察者模式，详细介绍了如何使用Observer保存和控制事件，特别是将传统的ES5实现转换为ES6类表示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Observer 保存event

注意点
array.filter()返回一个array，内含满足item！=fn的所有元素

function EventObserver(){
  this.observers = [];
}

EventObserver.prototype = {  
  subscribe:function(fn)   //与prototype.subscribe = funtcion()相同
  {this.observers.push(fn);
    console.log(`You are now subscribed to ${fn.name}`);
  },
  unsubscribe:function(fn){
    this.observers = this.observers.filter(function(item){
      if(item!==fn){
        return item;
      }
    });
    console.log(`You are noe unsubscribed from ${fn.name}`);
  },
  fire:function(){
    this.observers.forEach(function(item){
      item.call();
    });
  }
}

const click = new EventObserver();

//Event Listeners
document.querySelector('.sub-ms').addEventListener('click',function(){
  click.subscribe(getCurms);
});

document.querySelector('.unsub-ms').addEventListener('click',function(){
  click.unsubscribe(getCurms);
});

document.querySelector('.fire').addEventListener('click',function(){
  click.fire();
});

//Click handler
const getCurms = function(){
  console.log(`Current Ms: ${new Date().getMilliseconds()}`);
}

Observer控制event

function EventObserver(){
  this.observers = [];
}

EventObserver.prototype = {  
  subscribe:function(fn)   //与prototype.subscribe = funtcion()相同
  {this.observers.push(fn);
    console.log(`You are now subscribed to ${fn.name}`);
  },
  unsubscribe:function(fn){
    this.observers = this.observers.filter(function(item){
      if(item!==fn){
        return item;
      }
    });
    console.log(`You are noe unsubscribed from ${fn.name}`);
  },
  fire:function(){
    this.observers.forEach(function(item){
      item.call();
    });
  }
}

const click = new EventObserver();

//Event Listeners
document.querySelector('.sub-ms').addEventListener('click',function(){
  click.subscribe(getCurms);
});

document.querySelector('.unsub-ms').addEventListener('click',function(){
  click.unsubscribe(getCurms);
});

document.querySelector('.fire').addEventListener('click',function(){
  click.fire();
});

document.querySelector('.sub-s').addEventListener('click',function(){
  click.subscribe(getCurs);
});

document.querySelector('.unsub-s').addEventListener('click',function(){
  click.unsubscribe(getCurs);
});

//Click handler
const getCurms = function(){
  console.log(`Current Ms: ${new Date().getMilliseconds()}`);
}

const getCurs = function(){
  console.log(`Current s: ${new Date().getSeconds()}`)
}

将ES5转为ES6 class表示

class EventObserver{
  constructor(){
    this.observers = [];
  }
  subscribe(fn){
    this.observers.push(fn);
    console.log(`You are now subscribed to ${fn.name}`);
  }
  unsubscribe(fn){
    this.observers = this.observers.filter(function(item){
      if(item!==fn){
        return item;
      }
    });
    console.log(`You are noe unsubscribed from ${fn.name}`);
  }
  fire(){
    this.observers.forEach(function(item){
      item.call();
    });
  }
}

const click = new EventObserver();

//Event Listeners
document.querySelector('.sub-ms').addEventListener('click',function(){
  click.subscribe(getCurms);
});

document.querySelector('.unsub-ms').addEventListener('click',function(){
  click.unsubscribe(getCurms);
});

document.querySelector('.fire').addEventListener('click',function(){
  click.fire();
});

document.querySelector('.sub-s').addEventListener('click',function(){
  click.subscribe(getCurs);
});

document.querySelector('.unsub-s').addEventListener('click',function(){
  click.unsubscribe(getCurs);
});

//Click handler
const getCurms = function(){
  console.log(`Current Ms: ${new Date().getMilliseconds()}`);
}

const getCurs = function(){
  console.log(`Current s: ${new Date().getSeconds()}`)
}