JavaScript中观察者模式与发布订阅模式的用法-创新互联

这篇文章主要讲解了JavaScript中观察者模式与发布订阅模式的用法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

目前创新互联建站已为上千多家的企业提供了网站建设、域名、虚拟空间、网站托管、企业网站设计、友好网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻分不清楚，博客起因如此，开始对观察者和发布订阅开始了Google之旅。对整个学习过程做一个简单的记录。

观察者模式

当对象间存在一对多关系时，则使用观察者模式(Observer Pattern)。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。在观察模式中共存在两个角色观察者(Observer)与被观察者(Subject)，然而观察者模式在软件设计中是一个对象，维护一个依赖列表，当任何状态发生改变自动通知它们。

其实观察者模式是一个或多个观察者对目标的状态感兴趣，它们通过将自己依附在目标对象之上以便注册所感兴趣的内容。目标状态发生改变并且观察者可能对这些改变感兴趣，就会发送一个通知消息，调用每个观察者的更新方法。当观察者不再对目标状态感兴趣时，它们可以简单的将自己从中分离。

在观察者模式中一共分为这么几个角色：

Subject:维护一系列观察者，方便添加或删除观察者
Observer:为那些在目标状态发生改变时需要获得通知的对象提供一个更新接口
ConcreteSuject:状态发生改变时，想Observer发送通知，存储ConcreteObserver的状态
ConcreteObserver:具体的观察者

举例

举一个生活中的例子，公司老板可以为下面的工作人员分配认为，如果老板作为被观察者而存在，那么下面所属的那些员工则就作为观察者而存在，为工作人员分配的任务来通知下面的工作人员应该去做哪些工作。

通过上面的例子可以对观察者模式有一个简单的认知，接下来结合下面的这张图来再次分析一下上面的例子。

如果Subject = 老板的话，那么Observer N = 工作人员，如果细心观察的话会发现下图中莫名到的多了一个notify()，那么上述例子中的工作就是notify()。

JavaScript中观察者模式与发布订阅模式的用法

既然各个关系已经屡清楚了，下面通过代码来实现一下上述的例子：

// 观察者队列
class ObserverList{
  constructor(){
    this.observerList = {};
  }
  Add(obj,type = "any"){
    if(!this.observerList[type]){
      this.observerList[type] = [];
    }
    this.observerList[type].push(obj);
  }
  Count(type = "any"){
    return this.observerList[type].length;
  }
  Get(index,type = "any"){
    let len = this.observerList[type].length;
    if(index > -1 && index < len){
      return this.observerList[type][index]
    }
  }
  IndexOf(obj,startIndex,type = "any"){
    let i = startIndex,
      pointer = -1;
    let len = this.observerList[type].length;
    while(i < len){
      if(this.observerList[type][i] === obj){
        pointer = i;
      }
      i++;
    }
    return pointer;
  }
  RemoveIndexAt(index,type = "any"){
    let len = this.observerList[type].length;
    if(index === 0){
      this.observerList[type].shift();
    }
    else if(index === len-1){
      this.observerList[type].pop();
    }
    else{
      this.observerList[type].splice(index,1);
    }
  }
}
// 老板
class Boos {
  constructor(){
    this.observers = new ObserverList();
  }
  AddObserverList(observer,type){
    this.observers.Add(observer,type);
  }
  RemoveObserver(oberver,type){
    let i = this.observers.IndexOf(oberver,0,type);
    (i != -1) && this.observers.RemoveIndexAt(i,type);
  }
  Notify(type){
    let oberverCont = this.observers.Count(type);
    for(let i=0;i另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            网页标题：JavaScript中观察者模式与发布订阅模式的用法-创新互联            

            网址分享：http://6mz.cn/article/ddcies.html

网站建设知识

JavaScript中观察者模式与发布订阅模式的用法-创新互联

观察者模式

举例

其他资讯