JavaScriptを超シンプルなMVCで書く
- 単一のWebページに、簡単なイベントハンドラを3つ、4つ程書きたい。
- でもJavaScriptフレームワークを使う程の規模ではない。
- 本能の赴くままにイベントハンドラを書いてたら、訳が分からなくなってきた。
- 触るとバグりそうなので、もう触りたくない。
上記のようなこと、あると思います。というか、今の自分です。
サラッと見通しよく書きたいなぁ…ということで、簡単なサンプルを書いてみました。
var model = { flg: true, // 初期値 change: function() { if(this.flg) { this.flg = false; } else { this.flg = true; } } }
まずモデルは、データ層として考える。プロパティ = アプリが保持すべきデータ。
条件分岐はモデルでやる。
例えば、ファミコンのボタンが押されたら、その「ボタンを押した」という信号がモデルに渡されるイメージ。
信号をどう捌くかは、モデルに任せる。
自分が昔よくやってたのが、
var oldText = $('button').text(); var newText; if (oldText === '乃木坂46') { newText = '欅坂46'; } else { newText = '乃木坂46'; } $('button').text(newText);
DOMの値を直接読みにいって、それを使って諸々の処理を行う。
もうやめとこう。これからは、モデルのプロパティに状況を持たせる。DOMが持ってるデータは使わない。
var view = { render: function() { if(model.flg) { $('button').text('乃木坂46'); } else { $('button').text('欅坂46'); } } }
ビューからモデル内のデータを読んで、レンダリングする。
$(function() { $('button').on('click', function() { model.change(); view.render(); }); view.render(); // 初期表示 });
コントローラ。モデルとビューを使う。
まとめると、
(function() { var model = { flg: true, change: function() { if(this.flg) { this.flg = false; } else { this.flg = true; } } } var view = { render: function() { if(model.flg) { $('button').text('乃木坂46'); } else { $('button').text('欅坂46'); } } } $(function() { $('button').on('click', function() { model.change(); view.render(); }); view.render(); }); })();
無名関数で囲って、グローバル変数は作らないようにする。
これで何とか見通しよくなってくれないかなぁ…。