前端观察者模式

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