プログラムdeタマゴ

nodamushiの著作物は、文章、画像、プログラムにかかわらず全てUnlicenseです

日にち、時刻によって処理を変えるJavaScriptライブラリー書いてみた


 よくある、時間帯によって処理内容を変えるJavaScriptは…

var today = new Date();
var $img = $("#test");//画像のurlを変えてみます
hour = today.getHours();
var url;
if (hour >= 0){url = "1.jpg";}
else if (hour > 5){url = "2.jpg";}
else if (hour > 10){url = "3.jpg";}
else if (hour > 15){url = "4.jpg";}
else if (hour > 20){url = "5.jpg";}
$img.attr("src",url);

 うん。まだ時間ぐらいで分岐するだけならいい。それに曜日で分岐して、月で分岐して、やっぱり日にちでも分岐して………うわあああああああ!

 も〜ちょっと楽に書くことはできないのか?と探してみたのですが見つけられなかったので、作ってみました。

 github nodamushi/DateAction

 こいつを使うと上の処理はこんな風に書くことができます。

var act = new DateAction;
function change(url){$("#test").attr("src",url);}

act.addAction(change,{time:"0-5",param:"1.jpg"});
act.addAction(change,{time:"5|-10",param:"2.jpg"});
act.addAction(change,{time:"10|-15",param:"3.jpg"});
act.addAction(change,{time:"15|-20",param:"4.jpg"});
act.addAction(change,{time:"20|-*",param:"5.jpg"});

act.action()

 これだけなら、便利さがわかりにくいですが、一日なら終日0.jpgを表示して、火曜日は11時から午後2時までt.jpgで、日〜水は午後4時30分から午後5時20分までs.jpgにしたいという条件を加えてみましょう。
 if文で考えるとまずは1日かどうか判断して、そうじゃなかったら火曜かどうか11時から午後2時までか判断して、そうじゃなかったらこんどは日曜から水曜か判断して、時間に入ってるか判断して、それでもなかったら今まで通り………ってめんどうくせえええ。

var act = new DateAction;
function change(url){$("#test").attr("src",url);}

act.addAction(change,{time:"0-5",param:"1.jpg"});
act.addAction(change,{time:"5|-10",param:"2.jpg"});
act.addAction(change,{time:"10|-15",param:"3.jpg"});
act.addAction(change,{time:"15|-20",param:"4.jpg"});
act.addAction(change,{time:"20|-*",param:"5.jpg"});

act.addAction(change,{date:"1",param:"0.jpg",priority:0});
act.addAction(change,{time:"11-pm2",week:"火",param:"t.jpg",priority:0});
act.addAction(change,{time:"pm4:30-pm5:20",week:"sun-wed",param:"s.jpg",priority:0})

act.action()

 火曜日の1日で12時だと、3.jpgにするか、t.jpgにするか、0.jpgにするかの3つがかぶり、通常は登録された順に実行されます。
 しかし、priorityの値が0のものがあると、一番最初に登録されたpriorityが0のもの1つだけを実行するので、0.jpgを設定する行動だけが適応されます。

 if文で分岐するよりはずっと楽になったと思います。