May 14, 2020 (Tue)

  • Communicating Sequential Processes (CSP)
    import csp from 'js-csp';
    
    csp.go(function* () {
        const element = document.querySelector('#uiElement1');
        const channel = listen(element, 'mousemove');
        while (true) {
            const event = yield csp.take(channel);
            const x = event.layerX || event.clientX;
            const y = event.layerY || event.clientY;
            element.textContent = `${x}, ${y}`;
        }
    });
    listen() is implemented as follows.
    function listen(element, type) {
        const channel = csp.chan();
        element.addEventListener(type,
            event => {
                csp.putAsync(channel, event);
            });
        return channel;
    }
  • Generator 함수에 메소드를 설정할 수는 있으나 this를 쓸 수는 없다
    // Generator 함수를 정의하고
    function *T() {
      // new T() 방식으로 호출될 것을 기대하고 설정
      this.name = Math.random();
    }
    // 프로토타입 체인에 메소드 정의한뒤
    T.prototype.show = function() {
      return this.name;
    };
    const t = new T(); // TypeError. new 호출 불가. T는 생성자가 될 수 없음
    const t = T();  // ok, generator object
    // t는 Generator T의 인스턴스라면서
    t instanceof T; // true
    // 정작 this는 접근 안됨
    t.show(); // but nothing
  • TAMING THE ASYNCHRONOUS BEAST WITH CSP CHANNELS IN JAVASCRIPT1https://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript

  • const value = yield take( iterable );

    Transducer 패턴을 일반화 해서 사용하기위해, 위의 코드 처럼 take()가 consumer 역활을 하지만 yield로 인해 순차적으로 돌기위해선 csp.go()  함수와 같은 helper가 필요하다.

References   [ + ]

1. https://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript