イベントを書く時に便利なjsライブラリ「mitt」



javascriptで Event機能が簡単に使えるライブラリ「mitt」の紹介です。

Eventという概念は 関数とよく似ているような感じがしますが
関数はデーター(値)加工するのに対し、Eventは 処理をまとめるイメージです。

node.jsには 'EventEmitter' というイベントをまとめる便利なクラスが用意されていますが、
ブラウザで そのままEventEmitterクラスを使う事はできません。

// EventEmitterのサンプル * node.js
const EventEmitter = require("events");

const myEmitter = new EventEmitter();
// on()メソッドでイベントの定義
myEmitter.on('test', () => {
  console.log(" Working 'test' Event !! ");
});

// emit()メソッドで 'test'のイベント呼び出し
myEmitter.emit('test');
// output: Working 'test' Event !!


そんなEvent機能を 本家'EventEmitter'と同じ使い勝手、
ブラウザ( IE9以上から ) & サーバーの両方で使える軽量なJSライブラリが「mitt」です。
 

mittのインストール

mittのインストールはコマンドライン上から 'npm' か 'yarn'コマンドを使って導入する方法と
'CDN'経由でブラウザから直接呼び出すことが出来ます。

# npmコマンドを使ってインストール
npm install --save mitt
# yarnコマンドを使ってインストール
yarn add mitt
# CDN経由でブラウザ上のscriptタグから呼び出す場合
src="https://unpkg.com/mitt/dist/mitt.umd.js"
// ES6で呼び出す場合 ( * babel等 )
import mitt from 'mitt';

// TypeScriptから呼び出す場合
import * as mitt from 'mitt';
let emitter: mitt.Emitter = new mitt();

// CommonJSで呼び出す場合 ( * node.js等 )
var mitt = require('mitt');

// ブラウザ上で呼び出す場合 ( ES5 )
var emitter = mitt();


mittの使い方

mittの使い方は簡単で、' on() 'メソッドでイベントの定義、' emit() 'メソッドでイベントの呼び出し、
'EventEmitter'クラスを使ったことがある人なら直感的に使うことが出来ます。
( * version 1.1.0で動作検証しました )

// mittの呼び出し
var emitter = mitt();
// testイベントの定義
emitter.on('test', function() {
  console.log('working test event!');
});
// obj イベントの定義
emitter.on('obj', function(obj) {
  console.log('obj event with param: ' + obj.test);
});

// testイベントを呼び出し
emitter.emit('test');
// 引数を噛ましたobjイベントの呼び出し
emitter.emit('obj', {test: "hello"});

// offメソッドを使えば定義したイベントが破棄されます
// emitter.off('test');

/* -- output -- 
working test event!
obj event param: hello 
*/


また、本家EventEmitterには無い機能も用意されており、
onメソッドにワイルドカード( * )を付けてイベントを定義すると、
emitメソッドでイベントを発生時に 自動的に動作させるイベントを定義することが出来ます。

var emitter = mitt();
// test event
emitter.on('test', function() {
  console.log('test event!');
});
// ワイルドカードのイベント *一番最後に実行されます
emitter.on('*', function() {
  console.log('working anyway');
});

// testイベントの実行
emitter.emit('test');

/* --output--
test event!
working anyway # ワイルドカードイベントが実行
*/


実際にプロジェクトで使う時はexport構文や、
module.exports構文でモジュール化 ( babe + webpackl等を使って ) する一般的ですが、
ベタ書きをして使う場合は下記のようになると思われます。

// ES5 : 力技で使う例
function eventWraps(obj) {
  // initialize
  var emitter = mitt();

  // test event
  emitter.on('test', function() {
    console.log('working test event!');
  });

  emitter.on('obj', function(obj) {
    console.log('working with ' + obj.test);
  });

  // jQueryのclickイベント
  emitter.on('btn', function() {
    // 遅延実行するイベント時は'click'時に '*'で定義したイベントは実行されません
    $('#test').on('click', function() {
      console.log('hello');
    });

  });

  // 一番最後に実行される
  emitter.on('*', function() {
    console.log('working anyway');
  });

  return emitter;
};

// testイベントの実行
eventWraps().emit('test');
// btnイベントの実行
eventWraps().emit('btn');
// objイベントの実行
eventWraps().emit('obj', {test: "hi"});

 

Summary

以上がmittの紹介でした。

mittは IE9以上で動作するので、既存のプロジェクトにも安心して導入できます。

何かをした時のアクション処理 ( POST、GET .. etc ) を綺麗にまとめたり、
サーバー + ブラウザのEvent関連の書き方を 一元化したい場合などに便利に使えそうです。

GitHub : developit/mitt

 

この記事のカテゴリ
プログラミング

この記事のタグ