EventEmitter

【祝！リニューアル】カヤック 新コーポレートサイト、5種類テーマ切り替えの裏側！【フロントエンド芸】

こちらの記事を実際に動かしてみた

bodyのdata属性を書き換えて、同時に任意の関数（アニメーション等）を実行したいというシーン

3種類のページテーマ

<div class="btn" data-design="mountain">mountain (green)</div>
<div class="btn" data-design="seaside">seaside (blue)</div>
<div class="btn" data-design="city">city (gray)</div>

DesignManager.js

import $ from 'jquery';
import EventEmitter from 'events';

const DATA_DESIGN = 'data-design';

export default class DesignManager extends EventEmitter {
    constructor() {
        super();
        this.currentDesign = null;
        this.EVENT = {
            CHANGE: 'change'
        };
    }

    setDesign (nextDesign) {
        const currentDesign = this.currentDesign;

        if (nextDesign === currentDesign) {
            return;
        }

        $('body').attr(DATA_DESIGN, nextDesign);
        this.currentDesign = nextDesign;

        // 第二引数に遷移前と後の情報をもたせることで、
        // listen先でより詳細な分岐ができる
        this.emit(this.EVENT.CHANGE, {
            from: currentDesign,
            to: nextDesign
        });
    }
}

script.js

import $ from 'jquery';
import DesignManager  from './DesignManager';

const DESIGN_NAME = 'mountain';
const designManager = new DesignManager();
designManager.on(designManager.EVENT.CHANGE, e => {
    console.log(e);
    // ページごとに分岐させる
    if (e.to === DESIGN_NAME ) {
      alert('to : mountainページへ移動');
    } else if (e.from === DESIGN_NAME ) {
      alert('from : mountainページを離脱');
    }
})

const $btn = $('.btn');
$btn.eq(0).on('click', () => {
    designManager.setDesign('mountain');
})
$btn.eq(1).on('click', () => {
    designManager.setDesign('seaside');
})
$btn.eq(2).on('click', () => {
    designManager.setDesign('city');
})

参考
https://nodejs.org/api/events.html