前端观察者模式

1.观察者模式

观察者模式又叫发布-订阅模式,它定义了一种一对多的关系,让多个观察者对对象同时监听某一个目标对象(为了方便了解,以下将观察者对象叫做订阅者,对目标对象叫做发布者)。发布者的状态变化时就会通知所有订阅者,使它们能够自动更新自己。

中心思想:促进松散耦合,一为时间上的解耦,二为对象之间的解耦。让耦合的双方都依赖于抽象,而不是依赖于具体,从而使得各自的变化都不会影响到另一边的变化。

应用:假如我们网站页面里面的信息获取,需要根据用户是否登录来发送请求。比如说购物车,用户信息,头像,消息列表等,那么它们和用户信息之间产生了强烈的耦合。比如下面的模式:

login.success(function(data){

  header.setHeader(data);

  nav.setNav(data);

  message.refresh();

  cat.refresh();

});

等到后期维护,你又需要增加一个其他模块,比如说用户订单列表,你可能有需要在这个模块里面去添加一部分内容。你就需要不断的去重构这部分代码。

而观察者模式就是在用户登录成功之后向这些模块发送登录成功消息,这些模块可根据接受的消息进行相关操作。

$.ajax('http:// xxx.com?login',function(data){// 登录成功

    pubsub.publish('loginSucc',data);// 发布登录成功的消息

});

// 各模块监听登录成功的消息:

var  header=(function(){// header模块

pubsub.subscribe('loginSucc',function(data){

   header.setHeader(data.avatar);

});

return{

    setHeader:function(data){

       console.log('设置header模块的头像');

    }

 };

})();

var nav=(function(){// nav模块

     pubsub.subscribe('loginSucc',function(data){

         nav.setNav(data.avatar);

    });

  return{

     setNav:function(avatar){

        console.log('设置nav模块的头像');

    }

  };

})();

优点

1.支持简单的广播通信,自动通知所有已经订阅过的对象;

2.页面载入后发布者很容易与订阅者存在一种动态关联,增加了灵活性;

3.发布者与订阅者之间的抽象耦合关系能够单独扩展以及重用。

缺点

1.创建订阅者本身要消耗一定的时间和内存,而且当你订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中;

2.虽然可以弱化对象之间的联系,但如果过度使用的话,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解。

原文:http://web.jobbole.com/87809/ 如何实现消息传播

http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,964评论 2 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,812评论 25 709
  • # 一度蜜v3.0协议 --- # 交互协议 [TOC] ## 协议说明 ### 请求参数 下表列出了v3.0版协...
    c5e350bc5b40阅读 685评论 0 0
  • 文/沐叁 每日写作第18天,今天是复盘总结的第3天,我要盘点下小米屋的半个月成果,并给出反馈意见,希望能有助于她的...
    沐叁阅读 485评论 2 1