掻い摘んで言うと
- 【翻訳】あなたが求めていたリアクティブプログラミング入門←こちらの記事を読んでRPを試してみた。
- RxJSの代わりにBacon.jsを使ってみようと思った。
- 嵌った。
RxJSのコード(dblclk.js)
最初は素直にRxJSでコードを書いてみた。
function main() {
var Rx = require('rx');
var target = document.getElementById('btn');
var clicks = Rx.Node.fromEvent(target, 'click');
clicks
.buffer(clicks.throttle(250))
.map(function(xs) { return xs.length; })
.filter(function (n) { return n === 2; })
.subscribe(function() { target.innerText = ++target.value; });
}
window.addEventListener('DOMContentLoaded', function() {
main();
});
てきとーなindex.htmlを用意。
<doctype html>
<html>
<head>
<title>Clicker</title>
<script src='bundle.js'></script>
</head>
<body>
<button id="btn">0</button>
</body>
</html>
requireを使っているのでbrowserifyを使ってbundle.jsにまとめる。
browserify -o bundle.js dblclk.js
んで、http-serverを起動する。入ってなければ、
npm i -g simple-http-server
で、インストールしてから、
start http-server
※Windowsを使ってなかったらstartは無視してください。
これで、http://localhost:8080/ にアクセスして、ボタンをダブルクリックするとカウントアップされるデモが見れます。
Bacon.jsに書き換えてみる
まずは、インストール。
npm i baconjs
RxJSとイベントストリームの取得の仕方が違うみたい。
var clicks = Bacon.fromEvent(target, 'click');
こんな感じ。
ダブルクリックイベントストリームの胆はこの部分だけど、
.buffer(clicks.throttle(250))
Bacon.jsにもbuffer、throttleメソッドがあるので、とりあえずこのままにして実行。動きません。シグネチャを調べてみたらRxJSとは違っていたので順番を入れ替えたり色々試してみた。が、ダメ。
で、正解は
function main() {
var Bacon = require('baconjs').Bacon;
var target = document.getElementById('btn');
var clicks = Bacon.fromEvent(target, 'click');
clicks
.bufferWithTime(250)
.map(function(xs) { return xs.length; })
.filter(function (n) { return n === 2; })
.subscribe(function() { target.innerText = ++target.value; });
}
window.addEventListener('DOMContentLoaded', function() {
main();
});
あれ?butterとかthrottleとかはどこへ行った?
.bufferWithTime(250)
そもそも使うメソッドが違ったという。
結論:ライブラリのドキュメントはちゃんと読め。(前回と同じオチな気がする)