【设计模式】从订阅发布模式说起

先扯点闲话。一时兴起，遂决定之后采用这个前缀来写这个十多篇的系列总结了。在之前的学习和博客整理中，感觉都挺没方向，很散乱。除了看书的总结外，其他时候都是零碎性地学习，我想，若能系统性地带着目的去散落这些点，再类似依赖收集一样把这些零碎的东西汇总整理出来，那应该也挺不错的~

这周的复习知识点主要是以下几方面：

设计模式之发布订阅/观察者模式
事件相关，事件、模型、处理机制
Ajax
异步

我将这些点梳理到了脑图中，并作了一些批注，感觉一边整理了知识点，也让自己有了一个整体的脉络和方向感，树越分散也就是所谓的深度，让树更深也就是知识的深度。

从设计原则说起#

一个优秀的程序员通常由其操作技能、知识水平，经验层力和能力四个方面组成。这些原则，也就是巨人的肩膀，总结而出流传至今，每一个程序员都应该了解，运用于开发和生活中。

要我来说的话就是，先去了解，知道有这些东西，也许不能马上运用到实际项目中，但当我们遇到困难时，就可以回顾一下图里的各原则，结合以下经验：

粗浅地了解这些原则
在（公司或开源）项目中观察或总结他人或自己的设计
实践、回顾，再总结
总结后再回到第1步深入了解以此往复

观察者模式#

比较概念的解释是，目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法

简易版观察者模式实现

1
class ObserverList {
2
  constructor() {
3
    this.observerList = [];
4
  }
5

6
  add(observer) {
7
    this.observerList.push(observer)
8
  }
9

10
  get(index) {
11
    if (index >= 0 && index < this.count()) {
12
      return this.observerList[index]
13
    }
14
  }
15

16
  removeAt(index) {
17
    this.observerList.splice(index, 1)
18
  }
19

20
  count() {
21
    return this.observerList.length
22
  }
23

24
  indexOf(observer, startIndex = 0) {
25
    let i = startIndex
26

27
    while (i < this.count()) {
28
      if (this.observerList[i] === observer) {
29
        return i
30
      }
31
      i++
32
    }
33
    return -1
34
  }
35
}
36

37
class Subject {
38
  constructor() {
39
    this.observers = new ObserverList();
40
  }
41

42
  addObserver(observer) {
43
    this.observers.add(observer)
44
  }
45

46
  removeObserver(observer) {
47
    this.observers.removeAt(this.observers.indexOf(observer))
48
  }
49

50
  notify(...args) {
51
    let observerCount = this.observers.count()
52
    for (let i = 0; i < observerCount; i++) {
53
      this.observers.get(i).update(args)
54
    }
55
  }
56
}

发布订阅模式#

比较概念的解释是，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。

简易版发布订阅模式实现

1
module.exports = class PubSub {
2

3
  constructor() {
4
    this.subscribers = {}
5
  }
6

7
  subscribe(type, fn) {
8
    let listeners = this.subscribers[type] || []
9
    listeners.push(fn)
10
    this.subscribers[type] = listeners
11
  }
12

13
  unsubscribe(type, fn) {
14
    let listeners = this.subscribers[type]
15
    if (!listeners) return
16
    this.subscribers[type] = listeners.filter(v => v !== fn)
17
  }
18

19
  publish(type, ...args) {
20
    let listeners = this.subscribers[type]
21
    if (!listeners) return
22
    listeners.forEach(item => (item.apply(type, args)))
23
  }
24
}

两者区别#

两者最大的区别是调度的地方虽然两种模式都存在订阅者和发布者（具体观察者可认为是订阅者，具体目标可认为是观察者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调度的。所以观察者模式的订阅者和发布者之间是存在依赖的，而发布/订阅模式则不会
两种模式都可以用于松散耦合，改进代码管理和潜在的复用

优点#

观察者和发布/订阅模式鼓励我们认真思考应用程序不同部分之间的关系。他们还帮助我们确定包含直接关系的层次，而这些关系可以用主题和观察者集合取而代之。这可以有效地将应用程序分解为更小，更松散的块，以改善代码管理和重用的潜力。

使用Observer模式的进一步动机是我们需要保持相关对象之间的一致性，而不需要使类紧密耦合。例如，当一个对象需要能够通知其他对象而不做这些对象的假设时。

使用这两种模式时，观察者和主体之间可能存在动态关系。这提供了很大的灵活性，当我们的应用程序的不同部分紧密耦合时，这可能不容易实现。

尽管对于每个问题来说，这并不总是最好的解决方案，但这些模式仍然是设计分离系统的最佳工具之一，应该被视为任何JavaScript开发人员的工具带中的重要工具。

缺点#

因此，这些模式的一些问题实际上源于其主要益处。在“发布/订阅”中，通过将发布者与订阅者分离，有时可能难以获得我们应用程序的特定部分正常运行的保证。

例如，发布商可能会假定一个或多个订阅者正在倾听他们。假设我们正在使用这样的假设来记录或输出关于某些应用程序过程的错误。如果执行日志记录的用户崩溃（或出于某种原因无法运行），由于系统的解耦特性，发布者将无法看到这种情况。

这种模式的另一个缺点是用户对彼此的存在并不知情，并且对转换发布商的成本视而不见。由于用户和发布者之间的动态关系，更新依赖性很难追踪。

实践应用 - 实现Vue的双向绑定#

这么一看的话，其实Vue里的双向绑定的实现也是发布订阅模式吧。为什么不是观察者？因为多了一个Watcher，这就是相当于调度中心，通过这一层为中间人进行的更新。

这类的代码看多少次都不嫌多，这是之前网上一个不错的实现，我拿过来学习了

1
class MyVue {
2
  // new Vue({ ... }) 这个options就是这里的对象啦
3
  // 初始化 将 options 赋值到实例对象上
4
  constructor(options) {
5
    this.$options = options
6
    this.$el = document.querySelector(options.el)
7
    this.$data = options.data
8
    this.$methods = options.methods
9
    // data的内容会放到这里来， 这也就说明了 初始化结束后，手动加的值不会被监听到
10
    this._binding = {}
11
    // 初始化时会监听data上的属性
12
    this._observe(this.$data)
13
    // 初始化时 编译 $el 里的子节点
14
    this._compile(this.$el)
15
  }
16

17
  _observe(obj) {
18
    let that = this
19
    Object.keys(obj).forEach(key => {
20
      if (obj.hasOwnProperty(key)) {
21
        that._binding[key] = {
22
          // 添加依赖收集， 是个数组
23
          _directives: []
24
        }
25
        console.log(that._binding[key])
26
        let val = obj[key]
27
        if (typeof val === 'object') {
28
          // 若是对象就递归
29
          that._observe(val)
30
        }
31

32
        let binding = that._binding[key]
33
        // 响应式 双向绑定的核心操作
34
        Object.defineProperty(that.$data, key, {
35
          enumerable: true,
36
          configurable: true,
37
          get() {
38
            console.log(`${key} 获取 ${val}`)
39
            return val
40
          },
41
          set(newVal) {
42
            console.log(`${key} 更新 ${newVal}`)
43
            if (val !== newVal) {
44
              val = newVal
45
              binding._directives.forEach(item => {
46
                item.update()
47
              })
48
            }
49
          }
50
        })
51
      }
52
    })
53
  }
54

55
  _compile(root) {
56
    let that = this
57
    let nodes = root.children
58
    for (let i = 0; i < nodes.length; i++) {
59
      let node = nodes[i]
60
      if (node.children.length) {
61
        this._compile(node)
62
      }
63

64
      if (node.hasAttribute('v-click')) {
65
        node.onclick = (function() {
66
          let attrVal = nodes[i].getAttribute('v-click')
67
          return that.$methods[attrVal].bind(that.$data)
68
        })()
69
      }
70

71
      if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
72
        node.addEventListener('input', (function(key) {
73
          let attrVal = node.getAttribute('v-model')
74
          that._binding[attrVal]._directives.push(new Wathcer(
75
            'input',
76
            node,
77
            that,
78
            attrVal,
79
            'value'
80
          ))
81

82
          return function() {
83
            that.$data[attrVal] = nodes[key].value
84
          }
85
        })(i))
86
      }
87

88
      if (node.hasAttribute('v-bind')) {
89
        let attrVal = node.getAttribute('v-bind')
90
        that._binding[attrVal]._directives.push(new Watcher(
91
          'text',
92
          node,
93
          that,
94
          attrVal,
95
          'innerHTML'
96
        ))
97
      }
98
    }
99
  }
100
}
101

102
class Watcher {
103
  constructor(name, el, vm, exp, attr) {
104
    this.name = name    // 指令名
105
    this.el = el        // 指令对应dom
106
    this.vm = vm        // 指令所属MyVue实例
107
    this.exp = exp      // 指令对应值
108
    this.attr = attr    // 绑定的属性值
109
    this.update()
110
  }
111

112
  update() {
113
    this.el[this.attr] = this.vm.$data[this.exp]
114
  }
115
}

这里说一下，我们通过 new 生成了一个 MyVue实例，而传入的参数（对象）作为配置，在初始化阶段做了这些事情：

赋值，实例的 $options$ el $data$ method 都是从options里获取到的
_observe 为每一个实例上的data属性添加监听（通过Object.defineProperty）
_compile 编译节点，指令对应的value对应一个新的Watcher，进行依赖收集从而触发数据响应

于是到codepen上试试吧

event.js 的实现#

这是一个典型的发布订阅模式的应用

1
// 定义R对象 如果支持es6用原生的Reflect，没就相当于提供polyfill
2
'use strict';
3
var R = typeof Reflect === 'object' ? Reflect : null
4
var ReflectApply = R && typeof R.apply === 'function'
5
  ? R.apply
6
  : function ReflectApply(target, receiver, args) {
7
    return Function.prototype.apply.call(target, receiver, args);
8
  }
9
var ReflectOwnKeys
10
if (R && typeof R.ownKeys === 'function') {
11
  ReflectOwnKeys = R.ownKeys
12
} else if (Object.getOwnPropertySymbols) {
13
  ReflectOwnKeys = function ReflectOwnKeys(target) {
14
    return Object.getOwnPropertyNames(target)
15
      .concat(Object.getOwnPropertySymbols(target));
16
  };
17
} else {
18
  ReflectOwnKeys = function ReflectOwnKeys(target) {
19
    return Object.getOwnPropertyNames(target);
20
  };
21
}
22

23
// console.warn的封装
24
function ProcessEmitWarning(warning) {
25
  if (console && console.warn) console.warn(warning);
26
}
27

28
// Number.isNaN 是es6加入的，后面是并联的兼容处理，Number类型 自身与自身不相等的只有NaN了
29
var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {
30
  return value !== value;
31
}
32

33
function EventEmitter() {
34
  EventEmitter.init.call(this);
35
}
36
// 将EventEmitter构造函数作为默认导出
37
module.exports = EventEmitter;
38
// 向后兼容node 0.10.x 版本 看来这个库相当老了啊，不过也不妨碍我们学习
39

40
EventEmitter.EventEmitter = EventEmitter;
41
EventEmitter.prototype._events = undefined;
42
EventEmitter.prototype._eventsCount = 0;
43
EventEmitter.prototype._maxListeners = undefined;
44

45
// 默认情况下，如果超过10个侦听器，EventEmitters将会输出警告添加到它
46
// 这是一个有用的默认值，它有助于查找内存泄漏
47
var defaultMaxListeners = 10;
48
Object.defineProperty(EventEmitter, 'defaultMaxListeners', {
49
  enumerable: true,
50
  get: function() {
51
    return defaultMaxListeners;
52
  },
53
  set: function(arg) {
54
    if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {
55
      throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.');
56
    }
57
    defaultMaxListeners = arg;
58
  }
59
});
60

61
// 构造类的静态方法
62
EventEmitter.init = function() {
63
  // 相当于constructor的构造函数调用 初始化
64
  if (this._events === undefined ||
65
      this._events === Object.getPrototypeOf(this)._events) {
66
    this._events = Object.create(null);
67
    this._eventsCount = 0;
68
  }
69
  this._maxListeners = this._maxListeners || undefined;
70
};
71

72
// 显然不是所有的Emitters侦听器都应该限制为10个。这个功能允许增加
73
EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {
74
  if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {
75
    throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.');
76
  }
77
  this._maxListeners = n;
78
  return this;
79
};
80

81
// 给下面的 getMaxListeners方法用  EventEmitter原型方法里的 this指向实例对象
82
// 所以可从实例中 拿到 属性值 _maxListeners
83
function $getMaxListeners(that) {
84
  if (that._maxListeners === undefined)
85
    return EventEmitter.defaultMaxListeners;
86
  return that._maxListeners;
87
}
88
EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
89
  return $getMaxListeners(this);
90
};
91

92
EventEmitter.prototype.emit = function emit(type) {
93
  var args = [];
94
  // emit第一个参数一般是方法名，所以 从arguments[1]开始
95
  for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
96
  // 右边的表达式返回一个布尔值 ，type报错就为true。doError可理解为错误标记的flag
97
  var doError = (type === 'error');
98

99
  // 拿到 实例的 _events 对象
100
  var events = this._events;
101
  if (events !== undefined)
102
    // 没有错就直接返回 false
103
    doError = (doError && events.error === undefined);
104
  else if (!doError)
105
    return false;
106

107
  // 下面是错误处理
108
  if (doError) {
109
    var er;
110
    if (args.length > 0)
111
      er = args[0];
112
    if (er instanceof Error) {
113
      // 注意：“throw”这一行的注释是有意的，他们表示 如果这导致未处理的异常，则在Node的输出中输入。
114
      throw er;
115
    }
116
    // 错误上下文为er 这里的er就是传进来的type的报错环境上下文
117
    var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));
118
    err.context = er;
119
    throw err;
120
  }
121

122
  // 从events里找type对应的函数 拿到 并赋给handler
123
  var handler = events[type];
124
  if (handler === undefined)
125
    return false;
126
  if (typeof handler === 'function') {
127
    // 绑定上下文
128
    ReflectApply(handler, this, args);
129
  } else {
130
    // handler多次调用  把多个handler 放到数组里来处理
131
    var len = handler.length;
132
    var listeners = arrayClone(handler, len);
133
    for (var i = 0; i < len; ++i)
134
      ReflectApply(listeners[i], this, args);
135
  }
136
  return true;
137
};
138

139
function _addListener(target, type, listener, prepend) {
140
  var m;
141
  var events;
142
  var existing;
143
  // listener类型判断
144
  if (typeof listener !== 'function') {
145
    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
146
  }
147
  events = target._events;
148
  if (events === undefined) {
149
    events = target._events = Object.create(null);
150
    target._eventsCount = 0;
151
  } else {
152
    // 为了避免在 type === "newListener" 这种情况下递归
153
    // 在将其添加到侦听器之前，首先触发 "newListener"
154
    if (events.newListener !== undefined) {
155
      target.emit('newListener', type,
156
                  listener.listener ? listener.listener : listener);
157
      // 重新分配 `events`，因为newListener处理程序可能导致了 this._events被分配给一个新的对象
158
      events = target._events;
159
    }
160
    existing = events[type];
161
  }
162
  if (existing === undefined) {
163
    // 优化一个listener的情况。不需要额外的数组对象
164
    existing = events[type] = listener;
165
    ++target._eventsCount;
166
  } else {
167
    if (typeof existing === 'function') {
168
      // 添加第二个元素，需要更改为数组
169
      existing = events[type] =
170
        prepend ? [listener, existing] : [existing, listener];
171
      //如果我们已经有了一个数组，只需追加
172
    } else if (prepend) {
173
      existing.unshift(listener);
174
    } else {
175
      existing.push(listener);
176
    }
177
    // 检查监听器泄漏
178
    m = $getMaxListeners(target);
179
    // m > 0 && (exiting.length > m && !existing.warned )
180
    if (m > 0 && existing.length > m && !existing.warned) {
181
      existing.warned = true;
182
      // 没有错误代码，因为它是一个warning
183
      var w = new Error(
184
        'Possible EventEmitter memory leak detected. ' +
185
        existing.length + ' ' + String(type) + ' listeners ' +
186
        'added. Use emitter.setMaxListeners() to ' +
187
        'increase limit'
188
      )
189
      w.name = 'MaxListenersExceededWarning';
190
      w.emitter = target;
191
      w.type = type;
192
      w.count = existing.length;
193
      ProcessEmitWarning(w);
194
    }
195
  }
196
  return target;
197
}
198

199
// 结合上面的函数，这是高阶函数的用法 普通地，我们一般会传 事件名和回调
200
// 这里返回 _addListner方法 第一个参数是 this 实例对象作为上下文环境
201
// 然后是 事件名，回调，prepend默认为false
202
EventEmitter.prototype.addListener = function addListener(type, listener) {
203
  return _addListener(this, type, listener, false);
204
};
205
// 同名方法 addListner 和用 on等效
206
EventEmitter.prototype.on = EventEmitter.prototype.addListener;
207

208
// 和on的区别在于 prepend为true，当前已经是数组了才会这样用（不同我们来，已经封装在内部逻辑里了）
209
EventEmitter.prototype.prependListener = function prependListener(type, listener) {
210
  return _addListener(this, type, listener, true);
211
};
212

213
function onceWrapper() {
214
  // 把参数放到 args中。 我们先看下面的 _onceWrap方法
215
  var args = [];
216
  for (var i = 0; i < arguments.length; i++) args.push(arguments[i]);
217
  // 显然，这个if逻辑会走到里
218
  if (!this.fired) {
219
    // removeListener会被调用
220
    this.target.removeListener(this.type, this.wrapFn);
221
    // 然后再把fired 设回true
222
    this.fired = true;
223
    // 这里因为ReflectApply的原因，this上下文回到了 实例对象上
224
    ReflectApply(this.listener, this.target, args);
225
  }
226
}
227
function _onceWrap(target, type, listener) {
228
  // 初始state
229
  var state = { fired: false, wrapFn: undefined, target: target, type: type, listener: listener };
230
  // 好 有了这个bind后，上面onceWrapper的this就知道了，我们再跳回去
231
  var wrapped = onceWrapper.bind(state);
232
  wrapped.listener = listener;
233
  state.wrapFn = wrapped;
234
  return wrapped;
235
  // 回到wrapped这个上下文中
236
}
237

238
// 该方法可理解为调用一次后 自动把方法注销掉
239
EventEmitter.prototype.once = function once(type, listener) {
240
  if (typeof listener !== 'function') {
241
    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
242
  }
243
  this.on(type, _onceWrap(this, type, listener));
244
  // 后同，return this 是返回实例对象自身，方便链式调用
245
  return this;
246
};
247

248
EventEmitter.prototype.prependOnceListener = function prependOnceListener(type, listener) {
249
  if (typeof listener !== 'function') {
250
    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
251
  }
252
  this.prependListener(type, _onceWrap(this, type, listener));
253
  return this;
254
};
255

256
// 删除监听方法
257
EventEmitter.prototype.removeListener = function removeListener(type, listener) {
258
  var list, events, position, i, originalListener;
259
  // 错误判断，这里先略过了
260
  if (typeof listener !== 'function') {
261
    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
262
  }
263
  events = this._events;
264
  if (events === undefined)
265
    return this;
266

267
  // list被赋值为evnets[type] 即 一个注册的事件
268
  list = events[type];
269
  if (list === undefined)
270
    return this;
271

272
  // 当前list 和所传的注册事件若一致就进入这个逻辑里
273
  if (list === listener || list.listener === listener) {
274
    // 处理 注册事件 为单个函数 的情况
275
    if (--this._eventsCount === 0)
276
      this._events = Object.create(null);
277
    else {
278
      delete events[type];
279
      if (events.removeListener)
280
        this.emit('removeListener', type, list.listener || listener);
281
    }
282
  } else if (typeof list !== 'function') {
283
    // 处理 注册事件 为数组的情况
284
    position = -1;
285
    for (i = list.length - 1; i >= 0; i--) {
286
      if (list[i] === listener || list[i].listener === listener) {
287
        originalListener = list[i].listener;
288
        position = i;
289
        break;
290
      }
291
    }
292
    if (position < 0)
293
      return this;
294
    if (position === 0)
295
      list.shift();
296
    else {
297
      spliceOne(list, position);
298
    }
299
    if (list.length === 1)
300
      events[type] = list[0];
301
    if (events.removeListener !== undefined)
302
      this.emit('removeListener', type, originalListener || listener);
303
  }
304
  return this;
305
};
306

307
// 同名方法，等同于 removeListener
308
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
309

310
// 删除所有的监听
311
EventEmitter.prototype.removeAllListeners = function removeAllListeners(type) {
312
  var listeners, events, i;
313
  events = this._events;
314
  if (events === undefined)
315
    return this;
316

317
  // 不侦听removeListener，不需要触发emit
318
  if (events.removeListener === undefined) {
319
    if (arguments.length === 0) {
320
      // 通过赋值的方式 让 实例对象的 _events 为空
321
      this._events = Object.create(null);
322
      // 事件数清0
323
      this._eventsCount = 0;
324
    } else if (events[type] !== undefined) {
325
      if (--this._eventsCount === 0)
326
        this._events = Object.create(null);
327
      else
328
        delete events[type];
329
    }
330
    return this;
331
  }
332

333
  // 为所有事件上的所有侦听器发出removeListener
334
  if (arguments.length === 0) {
335
    var keys = Object.keys(events);
336
    var key;
337
    for (i = 0; i < keys.length; ++i) {
338
      key = keys[i];
339
      if (key === 'removeListener') continue;
340
      this.removeAllListeners(key);
341
    }
342
    this.removeAllListeners('removeListener');
343
    this._events = Object.create(null);
344
    this._eventsCount = 0;
345
    return this;
346
  }
347
  listeners = events[type];
348
  if (typeof listeners === 'function') {
349
    this.removeListener(type, listeners);
350
  } else if (listeners !== undefined) {
351
    // LIFO order
352
    for (i = listeners.length - 1; i >= 0; i--) {
353
      this.removeListener(type, listeners[i]);
354
    }
355
  }
356
  return this;
357
};
358

359
// 同样的，我们先看 原型方法
360
function _listeners(target, type, unwrap) {
361
  var events = target._events;
362
  if (events === undefined)
363
    return [];
364
  // 参数type为事件名
365
  var evlistener = events[type];
366
  if (evlistener === undefined)
367
    return [];
368
  if (typeof evlistener === 'function')
369
    return unwrap ? [evlistener.listener || evlistener] : [evlistener];
370
  return unwrap ?
371
    unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
372
}
373

374
EventEmitter.prototype.listeners = function listeners(type) {
375
  // 返回 _listeners调用的结果，回到 _listener函数
376
  return _listeners(this, type, true);
377
};
378
EventEmitter.prototype.rawListeners = function rawListeners(type) {
379
  return _listeners(this, type, false);
380
};
381
EventEmitter.listenerCount = function(emitter, type) {
382
  if (typeof emitter.listenerCount === 'function') {
383
    return emitter.listenerCount(type);
384
  } else {
385
    return listenerCount.call(emitter, type);
386
  }
387
};
388
EventEmitter.prototype.listenerCount = listenerCount;
389

390
function listenerCount(type) {
391
  var events = this._events;
392
  if (events !== undefined) {
393
    var evlistener = events[type];
394
    if (typeof evlistener === 'function') {
395
      return 1;
396
    } else if (evlistener !== undefined) {
397
      return evlistener.length;
398
    }
399
  }
400
  return 0;
401
}
402
EventEmitter.prototype.eventNames = function eventNames() {
403
  return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
404
};
405

406
// 辅助方法，浅拷贝数组
407
function arrayClone(arr, n) {
408
  var copy = new Array(n);
409
  for (var i = 0; i < n; ++i)
410
    copy[i] = arr[i];
411
  return copy;
412
}
413

414
// 从数组中删除某项
415
function spliceOne(list, index) {
416
  for (; index + 1 < list.length; index++)
417
    list[index] = list[index + 1];
418
  list.pop();
419
}
420

421
// listner的拷贝
422
function unwrapListeners(arr) {
423
  var ret = new Array(arr.length);
424
  for (var i = 0; i < ret.length; ++i) {
425
    ret[i] = arr[i].listener || arr[i];
426
  }
427
  return ret;
428
}

音乐

音乐