javascript观察者模式的简单实现

1function PubSub() {
2  this.handlers = {}
3}
4PubSub.prototype = {
5  // 订阅事件
6  on: function (eventType, handler) {},
7  // 触发事件(发布事件)
8  emit: function (eventType) {},
9  // 删除订阅事件
10  off: function (eventType, handler) {},
11}
Copy

1//订阅事件
2var self = this
3if (!(eventType in self.handlers)) {
4  self.handlers[eventType] = []
5}
6self.handlers[eventType].push(handler)
7return this
Copy

1// 触发事件(发布事件)
2var self = this
3var handlerArgs = Array.prototype.slice.call(arguments, 1)
4for (var i = 0; i < self.handlers[eventType].length; i++) {
5  self.handlers[eventType][i].apply(self, handlerArgs)
6}
7return self
Copy

1var currentEvent = this.handlers[eventType]
2var len = 0
3if (currentEvent) {
4  len = currentEvent.length
5  for (var i = len - 1; i >= 0; i--) {
6    if (currentEvent[i] === handler) {
7      currentEvent.splice(i, 1)
8    }
9  }
10}
11return this
Copy

1var pubsub = new PubSub()
2var callback = function (data) {
3  console.log(data)
4}
5//订阅事件A
6pubsub
7  .on('A', function (data) {
8    console.log(1 + data)
9  })
10  .on('A', function (data) {
11    console.log(2 + data)
12  })
13  .on('A', callback)
14  .emit('A', '我是参数')
15//控制台将输出
16//1我是参数
17//2我是参数
18//我是参数
Copy

1function PubSub() {
2  this.handlers = {}
3}
4PubSub.prototype = {
5  // 订阅事件
6  on: function (eventType, handler) {
7    var self = this
8    if (!(eventType in self.handlers)) {
9      self.handlers[eventType] = []
10    }
11    self.handlers[eventType].push(handler)
12    return this
13  },
14  // 触发事件(发布事件)
15  emit: function (eventType) {
16    var self = this
17    var handlerArgs = Array.prototype.slice.call(arguments, 1)
18    for (var i = 0; i < self.handlers[eventType].length; i++) {
19      self.handlers[eventType][i].apply(self, handlerArgs)
20    }
21    return self
22  },
23  // 删除订阅事件
24  off: function (eventType, handler) {
25    var currentEvent = this.handlers[eventType]
26    var len = 0
27    if (currentEvent) {
28      len = currentEvent.length
29      for (var i = len - 1; i >= 0; i--) {
30        if (currentEvent[i] === handler) {
31          currentEvent.splice(i, 1)
32        }
33      }
34    }
35    return this
36  },
37}
38
39var pubsub = new PubSub()
40var callback = function (data) {
41  console.log(data)
42}
43//订阅事件A
44pubsub
45  .on('A', function (data) {
46    console.log(1 + data)
47  })
48  .on('A', function (data) {
49    console.log(2 + data)
50  })
51  .on('A', callback)
52  .emit('A', '我是参数')
Copy