[알고리즘/자바스크립트] mix-in 패턴을 이용한 이벤트 함수 만들기

Mix-in eventing system

Make an eventing system mix-in that adds .trigger() and .on() to any input object.

 

 

※ Example usage:

var obj = mixEvents({ name: 'Alice', age: 30 });

obj.on('ageChange', function () { // On takes an event name and a callback function
  console.log('Age changed');
});

obj.age++;

obj.trigger('ageChange'); // This should call our callback! Should log 'age changed'.

 

※ Caveats:

• mixEvents should return the original object it was passed after extending it.
• If we repeatedly call .on with the same event name, it should continue to call the old function as well. That is to say, we can have multiple listeners for an event.
• If `obj.trigger` is called with additional arguments, pass those to the listeners.
• It is not necessary to write a way to remove listeners.

 

---

 

오늘 바닐라코딩 수업시간에 푼 자바스크립트 알고리즘 문제는

믹스인 패턴을 이용해서 이벤트 저장 함수를 만드는 문제였다.

 

객체를 인자로 받는 함수를 만들어서

그 원본 객체에 on과 trigger라는 함수를 추가해서 리턴해야 한다.

 

이 때 on 함수는 이벤트 이름과 함수를 인자로 받아서 저장하고,

trigger 함수는 이벤트 이름과 parameter들을 인자로 받아서

등록된 이벤트들이 있으면 parameter들을 인자로 넘겨주어 실행한다.

 

참고로 같은 이름으로 여러 개의 이벤트 함수를 등록할 수 있으며,

해당 이름을 넣어서 trigger하면 등록된 여러 개의 함수를 모두 실행해야 한다.

 

 

---

 

var mixEvents = function (obj) {
  const eventList = {};

  obj.on = function (eventName, callback) {
    if (!eventList[eventName]) {
      eventList[eventName] = [];
    }
    eventList[eventName].push(callback);
  };

  obj.trigger = function (eventName, ...params) {
    if (eventList[eventName]) {
      eventList[eventName].forEach(callback => callback.call(this, ...params));
    }
  };

  return obj;
};

 

나의 풀이는 이렇다.

 

mixEvents 함수 안에 eventList라는 객체를 만든다. 이 객체에 내가 원하는 이벤트들을 등록할 것이다.

 

이제 함수에 on과 trigger라는 function을 등록한다.

on 함수는 이벤트 이름과 함수 인자를 두 개를 받는다.

 

만약에 eventList에 해당 이름의 값이 없다면 배열을 만들어서 할당한 후

배열에 callback 함수를 push해서 저장한다.

 

trigger 함수는 이벤트 이름과 이벤트 콜백 함수의 인자로 넣을 파라미터들을 받는다.

몇 개의 파라미터를 받을지 모르기 때문에 rest parameter로 처리한다.

 

eventList에 이벤트 이름으로 등록된 이벤트 배열이 있는지 확인한다.

배열이 있으면 배열을 forEach로 순회하면서 이벤트 콜백 함수들을 모두 실행해준다.

이 때 params들을 인자로 넣어야하기 때문에 call()을 이용하여 인자들을 바인딩해주었다.