孤独プログラマー譚

孤独死が近い。

JavaScriptを超シンプルなMVCで書く

上記のようなこと、あると思います。というか、今の自分です。


サラッと見通しよく書きたいなぁ…ということで、簡単なサンプルを書いてみました。

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();
    });
})();

無名関数で囲って、グローバル変数は作らないようにする。


これで何とか見通しよくなってくれないかなぁ…。