JavaScriptでMVPパターン(jQuery編)

昨日の「JavaScriptでMVPパターン（ぷよぷよ編）」ではアニメーションできてないのが嫌だったので、今日はアニメーションを書いてみた。

jQueryでアニメーションしながらMVPパターン

モデルはこんな感じ。start()で開始。next()で状態遷移し、オブザーバーに通知。
<br /> var model = {<br /> observers: new Array(),<br /> position: null,<br /> queue: null,<br /> running: false,<br /> start: function(q) {<br /> if (this.running) return;<br /> this.running = true;<br /> this.queue = q;<br /> this.next();<br /> },<br /> stop: function() {<br /> this.position = null;<br /> this.queue = null;<br /> this.running = false;<br /> },<br /> next: function() {<br /> if (!this.running) return;<br /> try {<br /> if (this.queue.length == 0) {<br /> this.stop();<br /> return;<br /> }<br /> this.position = this.queue.shift();<br /> } catch(e) {<br /> this.stop();<br /> return;<br /> }<br /> this.notify();<br /> },<br /> notify: function() {<br /> for(var i = 0; i < this.observers.length; i++) {<br /> try {<br /> this.observers[i].update();<br /> } catch(e) {<br /> }<br /> }<br /> }<br /> };<br />

ビューはこんな感じ。jQueryを使っている。update()の中でアニメーションを開始し、コールバック関数はプレゼンターを呼び出すようにしている。
<br /> window.onload = function() {<br /> view = {<br /> update: function() {<br /> var p = model.position;<br /> $(‘#cat’).animate(<br /> {left: p.x, top: p.y},<br /> {duration: ‘slow’, complete: presenter.next}<br /> );<br /> }<br /> };<br /> model.observers.push(view);<br /> $(‘#button1’).click(presenter.click);<br /> }<br />

プレゼンターはすごく短い。こんなのでもプレゼンターと言うのか？
<br /> var presenter = {<br /> click: function() {<br /> model.start([<br /> {x:280,y:0}, {x:15,y:180},<br /> {x:500,y:100}, {x:0,y:0}<br /> ]);<br /> },<br /> next: function() {<br /> model.next();<br /> }<br /> };<br />

MVPパターンを何か勘違いしてるだろうか？