1. // 观察者模式/发布者订阅者模式
    3. // 这个算是js中常见的设计模式了 react中的state数据存储和使用 就是这种模式
    4. // 还有监听事件 监听某个事件 当事件发生时 执行回调函数
    6. // 在生活中 好莱坞有句台词可以来形容这个模式 --不要给我打电话 我会给你打电话 、
    7. // 现在手机app的推送消息也可以理解为这种模式
    9. // 这种模式实现也很简单
    10. // 发布者维护一个数组 用以保存订阅者对象的回调函数
    11. // 发布者有一个注册订阅者和取消订阅的方法 最后再有一个发布消息的方法即可
    13. // 代码实现
    15. // 发布者维护一个对象 对象的key是事件名称 value是{}, 每个订阅者的回调函数
    16. function EventEmitter (){
    17.     this.events = {};
    18. }
    20. // 发布者的订阅方法
    21. EventEmitter.prototype.subscribe = function(event, key, callBack){
    22.     if(!this.events[event]){
    23.         // 还没有人订阅过这个事件 初始化存放回调函数的数据
    24.         this.events[event] = {};
    25.     }
    26.     // 添加回调函数
    27.     this.events[event][key] = callBack;
    28. }
    30. // 取消订阅方法
    31. EventEmitter.prototype.unSubscribe = function(event, key){
    32.     if(this.events[event] && this.events[event][key]){
    33.         delete this.events[event][key];
    34.     }
    35. }
    37. // 发布者发布事件的方法
    38. EventEmitter.prototype.dispatch = function(event, data){
    39.     // 没人订阅你发个毛线
    40.     if(!this.events) return;
    41.     for(var key in this.events[event]){
    42.         // console.log("-------------");
    43.         // console.log(key);
    44.         // console.log(this.events[event][key]);
    45.         this.events[event][key](data);
    46.     }
    47. }
    49. // 上面就是一个简单的发布者订阅者模式
    50. // 下面举例使用例子
    51. // 我们去餐馆吃饭 坐在位子上跟服务员点菜
    52. // 服务员在单子上写下几号座点了什么菜 
    53. // 做好了菜服务员会端菜上来 并在菜单上划掉上的菜
    54. // 这里服务员就是发布者 顾客就是订阅者
    56. // 创建个服务员
    57. var waiter = new EventEmitter();
    59. // 一号桌点了一份宫保鸡丁。。
    60. waiter.subscribe("宫保鸡丁", "1号桌", function(data){
    61.     console.log("1号桌的" + data + "上完了");
    62.     // 在菜单上划掉这一项
    63.     waiter.unSubscribe("宫保鸡丁", "1号桌");
    64. });
    66. // 二号桌点了猪肉炖粉条
    67. waiter.subscribe("猪肉炖粉条", "2号桌", function(data){
    68.     console.log("2号桌的" + data + "上完了");
    69.     waiter.unSubscribe("猪肉炖粉条", "2号桌");
    70. });
    72. // 上菜了 
    73. console.log("宫保鸡丁上菜了");
    74. waiter.dispatch("宫保鸡丁" , "大盘宫保鸡丁");
    76. // 二号桌又点了宫保鸡丁
    77. waiter.subscribe("宫保鸡丁", "2号桌", function(data){
    78.     console.log("2号桌的" + data + "上完了");
    79.     waiter.unSubscribe("宫保鸡丁", "2号桌");
    80. });
    82. // 猪肉炖粉条上了
    83. console.log("猪肉炖粉条上菜了");
    84. waiter.dispatch("猪肉炖粉条" , "猪肉炖粉条");
    86. // 宫保鸡丁上菜
    87. console.log("宫保鸡丁上菜了");
    88. waiter.dispatch("宫保鸡丁" , "小盘宫保鸡丁");
    91. // jq中也为发布者订阅者模式提供了接口
    92. // $().on $().off
    94. function eventWatcher () {
    95.     console.log("事件触发了");
    96. }
    98. $(document).on("divEvent", eventWatcher);
    100. $(document).trigger("divEvent");
    102. $(document).off("divEvent");
    104. $(document).trigger("divEvent");