• 观察者模式(1)


      (1)笔试中有一个自定义事件的题,这个题其实考的就是观察者模式。

      (2)Js中实现双向数据绑定也可以用观察者模式。所谓双向数据绑定指的是:数据的操作可以实时反映到数据,数据的变更也可以实时的展现在页面。(如AngularJs)

      观察者模式是一种设计模式,又叫发布订阅模式(Publish/Subscribe)。它定义了对象间一对多的关系,让多个观察者对象同时监听某个主体对象,当这个对象的状态发生变化时,所有监听这个对象的观察者都会收到一个通知,从而自动更新自己的状态。

    例子:

      假如我们正在开发一个商城网站,网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件,就是必须先用ajax异步请求获取用户的登录信息。这是很正常的,比如用户的名字和头像要显示在header模块里,而这两个字段都来自用户登录后返回的信息。这个时候,我们就可以把这几个模块的渲染事件都放到一个数组里面,然后待登录成功之后再遍历这个数组并且调用每一个方法。

      

      一个PubSub模型主要有三个方法:订阅(subscribe),退订(unsubscribe),发布(publish)。

      我们先来实现一个简单的PubSub模块。

    var PubSub={};
    
    //用于存储事件队列,事件管理器
    var quene={};
    
    //其中event为事件名称,callback为事件函数。
    //订阅接口  
    PubSub.on=function(event,callback){
      if(!quene[event]){
          quene[event]=[]; 
      }
      quene[event].push(callback);
    }
    
    //退订接口
    PubSub.off=function(event,callback){
       var currentEvent=quene[event];
      if(currentEvent){
        for (var i=0;i<currentEvent.length;i++){
          if(currentEvent[i]===callback){
            currentEvent.splice(i,1);
          }
        }
      }  
    } 
    
    //发布接口
    PubSub.emit=function(event){
      var currentEvent=quene[event];
      if(currentEvent){
        for(var i=0;i<currentEvent.length;i++){   //遍历这个事件下所有的事件处理器。
          currnetEvent[i]();   //执行函数
        }
      }
    } 
    使用:
    //订阅
    var callbackA=function(){
      console.log('eventA');
    }
    PubSub.on('a',callbackA);   //将事件加入事件队列,名称为 a
    PubSub.on('b',fucntion(){   //将事件加入事件队列,名称为 b 
      console.log('eventB'); 
    });
    
    //退订  第二个参数为回调函数的引用
    PubSub.off('a',callbackA);
    
    //发布
    PubSub.emit('a');
    Pubsub.emit('b');
  • 相关阅读:
    奇怪的html控件textarea
    ado.net快速上手实践篇(二)
    巧用apply让javascript函数仅执行一次
    javascript:像操作Array一样操作NodeList
    javascript下的数值型比较真的没有那么简单
    ado.net快速上手实践篇(一)
    ado.net快速上手疑问及解答(完结篇)
    如何利用【百度地图API】进行定位?非GPS定位
    【百度地图API】关于如何进行城市切换的三种方式
    【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注
  • 原文地址:https://www.cnblogs.com/telnetzhang/p/5817033.html
Copyright © 2020-2023  润新知