051-Stateパターン使って画面遷移のロジック考える

前回の記事をベースにして、Stateパターン適用しようと思い骨格となる部分だけ考えてみました。

デバッグし易さを優先したいので、Titanium Mobile固有のAPIを利用せずGoogleChromeの開発ツール上で動作確認してます。

var Page = function(page){
  this.event_move_older = 0;
  this.event_move_newer = 1;
  this.first_page = 1;
  this.last_page = 10;
  this.current_page = page;
  this.state = new DefaultPage(this.current_page);
};
Page.prototype = {
  init:function(){
    console.log('start page handling');
    var page_event = [1,0,0,0,0,1,1,1,0,1,1,1,1,1,1,1,1,0,0,1,0,1];
    var len = page_event.length;
    for(var i=0;i<len;i++){
      if(page_event[i]===this.event_move_older){
	this.state = this.state.moveOlder();
      }else if(page_event[i]===this.event_move_newer){
	this.state = this.state.moveNewer();
      }else{
	console.log('error');
      }
      console.log('sayPage method called');
      this.sayPage();
    }
  },
  sayPage:function(){
    return this.state.currentPage();
  }
};
var DefaultPage = function(page){
  this.current_page = page;
};
DefaultPage.prototype = {
  moveOlder:function(){
    console.log('状態遷移(action) ---> older button click!!');
    return new MiddlePage(this.current_page);
  },
  moveNewer:function(){
    console.log('状態遷移(action) ---> newer button click!!');
    return new MiddlePage(this.current_page);
  },
  currentPage:function(){
    console.log(this.current_page);
  }
};

var FirstPage = function(page){this.current_page = page;};
FirstPage.prototype = {
  moveOlder:function(){
    console.log('状態遷移(action) ---> First Page older button click!!');
    this.current_page++;
    return new MiddlePage(this.current_page);
  },
  moveNewer:function(){
    console.log('状態遷移(action) ---> First Page newer button click!!');
    console.log('there is no newer page');
    return new FirstPage(this.current_page);
  },
  currentPage:function(){
    console.log(this.current_page);
  }
};

var MiddlePage = function(page){this.current_page = page;};
MiddlePage.prototype = {
  moveOlder:function(){
    if(this.isLast(this.current_page)){
      return new LastPage(this.current_page);
    } else if(this.isFirst(this.current_page)){
      return new FirstPage(this.current_page);
    } else {
      console.log('状態遷移(action) ---> MiddlePage newer button click!!');
      this.current_page++;
      return new MiddlePage(this.current_page);
    }

  },
  moveNewer:function(){
    if(this.isLast(this.current_page)){
      return new LastPage(this.current_page);
    } else if(this.isFirst(this.current_page)){
      return new FirstPage(this.current_page);
    } else {
      console.log('状態遷移(action) ---> MiddlePage newer button click!!');
      this.current_page--;
      return new MiddlePage(this.current_page);
    }
  },
  currentPage:function(){
    console.log(this.current_page);
  },
  isLast:function(page){
    var flag = false;
    if(page > 9) {
      flag = true;
    }else{
      flag = false;
    }
    return flag;
  },
  isFirst:function(page){
    var flag = false;
    if(page < 1) {
      flag = true;
    }else{
      flag = false;
    }
    return flag;
  }
};

var LastPage = function(page){this.current_page = page;};
LastPage.prototype = {
  moveOlder:function(){
    console.log('状態遷移(action) ---> Last Page older button click!!');
    console.log('there is no older page');
    return new LastPage(this.current_page);
  },
  moveNewer:function(){
    console.log('状態遷移(action) ---> Last Page newer button click!!');
    this.current_page--;
    return new MiddlePage(this.current_page);
  },
  currentPage:function(){
    console.log(this.current_page);
  }
};

var p = new Page(8);
p.init();

上記コードを実際にGoogleChrome上のコンソールで確認すると

start page handling
状態遷移(action) ---> newer button click!!
sayPage method called
8
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
9
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
10
sayPage method called
10
状態遷移(action) ---> Last Page older button click!!
there is no older page
sayPage method called
10
状態遷移(action) ---> Last Page newer button click!!
sayPage method called
9
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
8
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
7
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
8
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
7
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
6
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
5
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
4
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
3
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
2
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
1
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
0
sayPage method called
0
状態遷移(action) ---> First Page older button click!!
sayPage method called
1
状態遷移(action) ---> MiddlePage newer button click!!
sayPage method called
0
sayPage method called
0
状態遷移(action) ---> First Page newer button click!!
there is no newer page
sayPage method called
0

という感じで画面遷移の基本ロジックは出来たのですが、最終ページや最初のページにたどりついた時に、sayPage()が複数呼び出されているから意図したように動作してない気がする・・

考え出すと難しいなぁ。。