js观察者模式

转自: http://www.w3c.com.cn/js%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%8810%EF%BC%89-%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F

据说knockout就是用观察者模式的,嘻嘻。。。菜鸟傻笑

1.观察者模式是什么

   又叫做发布者订阅者模式(publish/Subscribe),用来确定对象之间的一种一对多的依赖,让多个订阅者同时监听某一个发布者对象,当这个发布者对象的状态发生变化时就通知所有的订阅者,使他们能够自动更新自己。

2.代码举例

   老实说自己还是没有完全吃透观察者模式,所以无法自助写出对应的代码,假如有幸您独到的文章,就移步到大叔处alloyteam处吧,这个随笔就用来加深我的理解吧。   

  1. var pubsub ={};
  2. (function(q){
  3. var topics ={},// 回调函数存放的数组
  4. subUid =-1;
  5. // 发布方法
  6. q.publish =function(topic, args){
  7. if(!topics[topic]){
  8. returnfalse;
  9. }
  10. setTimeout(function(){
  11. var subscribers = topics[topic],
  12. len = subscribers ? subscribers.length :0;
  13. while(len--){
  14. subscribers[len].func(topic, args);
  15. }
  16. },0);
  17. returntrue;
  18. };
  19. //订阅方法
  20. q.subscribe =function(topic, func){
  21. if(!topics[topic]){
  22. topics[topic]=[];
  23. }
  24. var token =(++subUid).toString();
  25. topics[topic].push({
  26. token: token,
  27. func: func
  28. });
  29. return token;
  30. };
  31. //退订方法
  32. q.unsubscribe =function(token){
  33. for(var m in topics){
  34. if(topics[m]){
  35. for(var i =0, j = topics[m].length; i < j; i++){
  36. if(topics[m][i].token === token){
  37. topics[m].splice(i,1);
  38. return token;
  39. }
  40. }
  41. }
  42. }
  43. returnfalse;
  44. };
  45. }(pubsub));

    使用方式如下:
  1. //来,订阅一个
    pubsub.subscribe('example1',function(topics, data){
    console.log(topics +": "+ data);
    });

    //发布通知
    pubsub.publish('example1','hello world!');
    pubsub.publish('example1',['test','a','b','c']);
    pubsub.publish('example1',[{'color':'blue'},{'text':'hello'}]);
  1.  

3.个人理解

  1.又成为发布者订阅者模式,用来确定对象之间的一对多的依赖;

  2.当发布者的状态发生改变时,会通知所有的订阅者,使其随之更新;

  3.就像一个报纸对应多个读者一样,当报社发布报纸后,很多读者就会收到报纸。

原文地址:https://www.cnblogs.com/custjiajia/p/3371303.html