スマフォアプリ作成47:自作ライブラリ導入 | Hello, Stupid World!

Hello, Stupid World!

いろいろとメモ代わりに書いていきます。

前に作ったライブラリ(http://ameblo.jp/trap-z/entry-11581048430.html
を導入してみました。

意外と変更箇所は少なかったんですが、どんな所が変わったか記述します。

[scheduler.js修正前①]
//指定クラスにイベントリスナを追加
view.addClassEvents = function(clazz, events, func){
 var searchNodes = document.getElementsByTagName('div');
 for (var i = 0; i < searchNodes.length; i++){
  if (searchNodes[i].className.split(" ").indexOf(clazz) > -1) {
   searchNodes[i].addEventListener(events, func, false);
  }
 }
};

[scheduler.js修正後①]
//配列対象時に余計なプロパティを除外
model.filterOfArray = function(i,k,v){
 return !isNaN(k);
};

//指定クラスにイベントリスナを追加
view.addClassEvents = function(clazz, events, func){
 var searchNodes = document.getElementsByTagName('div');
 TRAP.chain(searchNodes).filter(model.filterOfArray)
  .filter(function(i,k,v){ return (v.className.split(" ").indexOf(clazz) > -1);})
  .callEach(function(i,k,v){ v.addEventListener(events, func, false);});
};

[解説]
作成ライブラリは連想配列だけでなく配列でも使用可能です。
ただし、配列の場合にJavascriptでは数値のキーだけでなく
lengthやitemなどのプロパティが存在する為、場合によっては除外する
必要があります。
そこで、model.filterOfArrayという関数を作成し、キーが数値以外のものを
除外しています。(lengthやitemなど)

行数的には短くなっていませんし、即時関数はなれるまで読みづらいと
思いますが、for文やif文がライブラリ内に隠蔽されていることで
処理の分岐を気にしなくてよいです。

とはいえ、このようにforもifも一つずつだったらわざわざ置換えなくて
良いかなと思いました。


[scheduler.js修正前②]
//祝日をセット
view.setHoliday = function(){
 var holiday = model.holiday.get();
 for (key in holiday) {
  if (ById(key) != null) {
   //タスクが登録されていない場合は祝日名を表示
   if (model.app.getTaskCountOfDay(key) === 0) {
    ById(key).innerHTML += holiday[key];
   }
   //一日は色を変える
   var class_str = "holiday blk";
   if (key.slice(-2) === "01") {
class_str += " monthFirst"
   }
   ById(key).setAttribute("class", class_str);
  }
 }
};

[scheduler.js修正後②]
//祝日をセット
view.setHoliday = function(){
 var isNotNullId = function(i,k,v){
  return ById(k) != null;
 };
 var holiday = model.holiday.get();
 //タスクが登録されていないものは祝日の名前を表示
 TRAP.chain(holiday)
  .filter(isNotNullId)
  .filter(function(i,k,v){ return model.app.getTaskCountOfDay(k) === 0;})
  .callEach(function(i,k,v){ ById(k).innerHTML += holiday[k];});
 //一日は色を変える
 TRAP.chain(holiday)
  .filter(isNotNullId)
  .filter(function(i,k,v){ return k.slice(-2) === "01";})
  .callEach(function(i,k,v){ ById(k).setAttribute("class", "holiday blk monthFirst");});
 //一日以外
 TRAP.chain(holiday)
  .filter(isNotNullId)
  .filter(function(i,k,v){ return k.slice(-2) !== "01";})
  .callEach(function(i,k,v){ ById(k).setAttribute("class", "holiday blk");});
};

[解説]
ここの修正は大分分かりやすくなったと思います。
for文の中にif文がもともと三つ存在したことでパターンも5つあり、
どんな時にどの処理を行うのか追いづらかったと思います。

それがライブラリを使う事で順番的に一つずつ考えていけるように
なりましたし、個別にテストすることも簡単になります。

どうやら、for文の中にif文が二つ以上あるようなケースだと
ライブラリの効果が出そうです。