flowControl 処理順制御ライブラリ
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ ライブラリ紹介です
◆ 関数を登録するときに すでにどの関数が実行されていたら実行するという順番を指定できます
◆ 関数を登録するときに すでにどの関数が実行されていたら実行するという順番を指定できます
今回は ライブラリの紹介です
処理順を制御できる FlowControl です
「DOMのロードが終わってから」
「あの Ajax と この Ajax の両方が終わってから あっもちろんロード後で」
「A→B B→C X→D B→D C→E D→E みたいな複雑なの」
とかやりたくなるとタイヘンです
このライブラリでは 処理(関数)と名前を登録してそれを実行するタイミングをどの処理が終わっていたら実行するという方法で指定します
最後のアルファベットのものを使うと
B という名前と B の処理を登録するときに 「A の後」 という情報も登録しておきます
D は X と B 両方が終わったあとなので X と B が終わったらという情報を登録します
また X と B が終わったら 即 D を実行するのか 実行する関数を呼び出した時に 実行可能なものがあれば実行するのかも選ぶことができます
new するときに引数が true なら自動実行モードです
自動実行モードなら 実行可能になれば即実行されます
このモードじゃないときは自分で run メソッドを呼ぶ必要があります
add メソッドには (名前 実行する関数 オプション) の 3 つの引数を渡せます
名前は オプションの after で使います
第三引数の after プロパティに この関数はどの処理が終わった後に実行するかを指定します
複数の処理が終わっている必要があるなら after に配列を使って複数指定しても大丈夫です
また add の第三引数のオプションには args と bind も使えます
登録した関数が実行されるときの this と 引数を指定しておくことができます
add_cb メソッドで コールバック関数を渡すところの引数を簡単に書けます
例では setTimeout 関数ですが 第一引数は コールバック関数を渡します
そこに add_cb メソッドをかいておけば返り値が関数になっていて setTimeout が実行されたら実際に add が行われるようになっています
この例だと 3秒経って ロードが終わっていれば実行 もしロードが終わってなければ終わってから実行となります
add_cb の場合は引数はコールバック関数が呼ばれた時のものです
Ajax でデータを取得した時に使えば 複数の Ajax でデータが全部揃ったら開始するということもできます
また "load" は window.onload で自動で登録されるので after:"load" とするだけでロード後に実行すると指定できます
処理順を制御できる FlowControl です
どんなときに使うの?
JavaScript では Ajax などの非同期処理やイベントによる処理が多いので「DOMのロードが終わってから」
「あの Ajax と この Ajax の両方が終わってから あっもちろんロード後で」
「A→B B→C X→D B→D C→E D→E みたいな複雑なの」
とかやりたくなるとタイヘンです
このライブラリでは 処理(関数)と名前を登録してそれを実行するタイミングをどの処理が終わっていたら実行するという方法で指定します
最後のアルファベットのものを使うと
B という名前と B の処理を登録するときに 「A の後」 という情報も登録しておきます
D は X と B 両方が終わったあとなので X と B が終わったらという情報を登録します
また X と B が終わったら 即 D を実行するのか 実行する関数を呼び出した時に 実行可能なものがあれば実行するのかも選ぶことができます
具体的な使い方
var fc = new FlowControl()
fc.add("A", function(){console.log("A")})
fc.add("B", function(){console.log("B")}, {after:["A"]})
fc.add("C", function(){console.log("C")}, {after:["B"]})
fc.add("D", function(){console.log("D")}, {after:["B","X"]})
fc.add("E", function(){console.log("E")}, {after:["C","D"]})
fc.add("X", function(){console.log("X")})
console.log("まだ実行されない")
fc.run()
fc.add("A", function(){console.log("A")})
fc.add("B", function(){console.log("B")}, {after:["A"]})
fc.add("C", function(){console.log("C")}, {after:["B"]})
fc.add("D", function(){console.log("D")}, {after:["B","X"]})
fc.add("E", function(){console.log("E")}, {after:["C","D"]})
fc.add("X", function(){console.log("X")})
console.log("まだ実行されない")
fc.run()
まだ実行されない
A
B
C
X
D
E
A
B
C
X
D
E
var fc = new FlowControl(true)
setTimeout(fc.add_cb("after3s", function(a,b){console.log("ロード済み+3秒後 : ", a,b)}, {after:"load"}), 3000, "a", "b")
fc.add("test", function(a){console.log("bind と args サンプル : ", a, this[a])}, {after:"after3s", bind:{t:100}, args:["t"]})
setTimeout(fc.add_cb("after3s", function(a,b){console.log("ロード済み+3秒後 : ", a,b)}, {after:"load"}), 3000, "a", "b")
fc.add("test", function(a){console.log("bind と args サンプル : ", a, this[a])}, {after:"after3s", bind:{t:100}, args:["t"]})
(3秒まつ)
ロード済み+3秒後 : a b
bind と args サンプル : t 100
ロード済み+3秒後 : a b
bind と args サンプル : t 100
new するときに引数が true なら自動実行モードです
自動実行モードなら 実行可能になれば即実行されます
このモードじゃないときは自分で run メソッドを呼ぶ必要があります
add メソッドには (名前 実行する関数 オプション) の 3 つの引数を渡せます
名前は オプションの after で使います
第三引数の after プロパティに この関数はどの処理が終わった後に実行するかを指定します
複数の処理が終わっている必要があるなら after に配列を使って複数指定しても大丈夫です
また add の第三引数のオプションには args と bind も使えます
登録した関数が実行されるときの this と 引数を指定しておくことができます
add_cb メソッドで コールバック関数を渡すところの引数を簡単に書けます
例では setTimeout 関数ですが 第一引数は コールバック関数を渡します
そこに add_cb メソッドをかいておけば返り値が関数になっていて setTimeout が実行されたら実際に add が行われるようになっています
この例だと 3秒経って ロードが終わっていれば実行 もしロードが終わってなければ終わってから実行となります
add_cb の場合は引数はコールバック関数が呼ばれた時のものです
Ajax でデータを取得した時に使えば 複数の Ajax でデータが全部揃ったら開始するということもできます
また "load" は window.onload で自動で登録されるので after:"load" とするだけでロード後に実行すると指定できます