APIからのCallback

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

ライブラリやモジュールからのCallback

ライブラリ等で見かける、処理結果を非同期で戻すAPIを作成する例です。
Callbackをonプロパティに登録する方法、またはEventでカスタムイベントを作成してaddEventListenerでCallbackを登録する方法も考えられるので、それを考察したメモです。

Callbackをonメソッドで登録、かつリエントラント

onメソッドでCallbackを設定する事例として、ちゅんラヂで用いているhls.js(HLS配信の受信)やdash.js(DASH配信の受信)などのライブラリがこの方法です。
 ex. 機能インスタンス.on('イベント名', ()=>{});
このonプロパティでCallback処理を設定する方法はライブラリやモジュールのAPI作成でほぼ標準的に用いられています。
そして、同じクラスから複数のインスタンスを作成する場合にリエントラントにできるかを確認しました。

リエントラントなonメソッドでCalbackを試したコード

APIを想定したロジックはクラスで定義。複数インスタンスを生成してリエントラントになる事を確認。

See the Pen CallbackTest by 𝕓𝕠𝕠𝕤𝕜𝕒𝕟𝕚𝕦𝕞📻 (@booskanium) on CodePen.

補足:classというprototype関数の糖衣構文は使いやすい。

カスタムイベントでCallbackを設定する方法

addEventListenerでCallbackを登録する方法も試しました。
 機能インスタンス名.addEventListener('イベント名', ()=>{});
注意としては、Event生成がモジュール内に記述してあると、イベント名が同じでリエントラントではないことから、1つのクラスから複数インスタンスが動く様な仕組みでは使えない。

動作確認の事例

あとで(リエントラントにならない結果が見えているので試さないかも)

参考:カスタムイベントの作成

EventEmitterを利用する方法

addEventListenerでCallbackを登録する方法も試しました。
掲載はあとで

動作確認の事例

あとで(リエントラントにならない結果が見えているので試さないかも)