+12

React FaceBook EventEmitter

Trong react việc liên kết giữa 2 component được thực hiện thông qua EventEmiter, việc hiểu rõ thêm gíup bạn sử dụng nó chủ động hơn.

Ta có EventEmitter của NodeJS và của FaceBook.

EventEmitter của NodeJS: https://nodejs.org/api/events.html EventEmitter của FaceBook: https://github.com/facebook/emitter

NodeJS EventEmitter bao gồm khá nhiều method:

  Event: 'newListener'
  Event: 'removeListener'
  EventEmitter.listenerCount(emitter, eventName)
  EventEmitter.defaultMaxListeners
  emitter.addListener(eventName, listener)
  emitter.emit(eventName[, ...args])
  emitter.eventNames()
  emitter.getMaxListeners()
  emitter.listenerCount(eventName)
  emitter.listeners(eventName)
  emitter.on(eventName, listener)
  emitter.once(eventName, listener)
  emitter.prependListener(eventName, listener)
  emitter.prependOnceListener(eventName, listener)
  emitter.removeAllListeners([eventName])
  emitter.removeListener(eventName, listener)
  emitter.setMaxListeners(n)

Facebook EventEmitter đơn gỉan và dễ sử dụng hơn.

Để tạo ra 1 listener ta có method addListener:

var emitter = new EventEmitter();
emitter.addListener('event', function(x, y) { console.log(x, y); });

method addListener được định nghĩa trong class BaseEventEmitter :

addListener(
    eventType: string, listener, context: ?Object): EmitterSubscription {
    return this._subscriber.addSubscription(
      eventType,
      new EmitterSubscription(this._subscriber, listener, context));
  }

eventkey của 1 Event được catch lại, mỗi khi muốn gọi function được add cùng Eventkeyevent ta có method emit:

emitter.emit('event', 5, 10);  // Listener prints "5 10".

Gỉa sử ta có 1 OrderStore extends EventEmitter:

class OrderStore extends EventEmitter {
  constructor(Dispatcher) {
    super()
    ...
  }
  
  addListener(callback) {
    this.on("ChangeEvent")
  }

Khi console.log OrderStore ta sẽ thấy :

OrderStore
  events: Object
    ChangeEvent: ()arguments: 
  ...

Nghĩa la 1 listener đã được lưu trong EventEmitter với tên gọi chính là type ta truyền vào.

Muốn remove các listener ta có hàm removeAllListeners:

emitter.removeAllListeners();

Muốn lấy ra các listeners đã được add vào ta có method listeners:

emitter.listeners();

Trong class BaseEventEmitter có định nghĩa method __emitToSubscription:

__emitToSubscription(subscription, eventType) {
  var args = Array.prototype.slice.call(arguments, 2);
  subscription.listener.apply(subscription.context, args);
}

Khi ta muốn custom callback gắn liền với emit của EventEmitter, ta có thể extends EventEmitter rồi overide lại method trên:

class MyEventEmitter extends EventEmitter {
  __emitToSubscription(subscription, eventType) {
    var args = Array.prototype.slice.call(arguments, 2);
    var start = Date.now();
    subscription.listener.apply(subscription.context, args);
    var time = Date.now() - start;
    MyLoggingUtility.log('callback-time', {eventType, time});
  }
}

Cảm ơn và hi vọng bài viết có ích trong công việc của bạn.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí