bata's log

フロントエンド系のTipsとかメモ

JavaScriptの設計 ～ ModelとViewを考えながら書いてみる

JavaScript

フォームにテキストを入力すると配列にデータをプッシュするというWEBアプリでよくありそうな処理です。 色々やると難しいので、Modelはデータを管理してViewはDOMの操作を管理するという単純なルールのみ。

さらにデータをDOMに書き出すViewを作ると簡単なMV○になるかもしれないけど、とりあえずは単純な処理のみで書いてみた。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="src/js/myapp.js"></script>
</head>
<body>
<form action="" class="todoForm">
    <input type="text" />
    <input type="submit" value="add" />
</form>
</body>
</html>

まずはHTML。Formにクラスを付けて管理。

名前空間

/**
 * namespace[MyApp]
 */

var MyApp = MyApp || {};

名前空間を設定する。

Model

/**
 * データを管理するModelクラス
 */

(function($,nss){

    //個別のデータを管理するクラス
    ns.Item = function(text){
        this.text = text;
    }

    //配列を管理するクラス
    ns.Data = function(){
        this.list = [];
    }

    //配列にデータを追加するメソッド
    ns.Data.prototype = {

        add: function(text){
            var item = new ns.Item(text);
            this.list.push(item);
        }

    }

})(jQuery,MyApp);

個別のデータをItemクラス、配列をDataクラスで管理。
ここではDOMの操作やイベントに関する操作は一切しません。

View

/**
 * フォームを管理するViewクラス
 */

(function($,ns){

    ns.ViewForm = function(el,data){
        this.$el = $(el);
        this.$input = this.$el.find('input[type="text"]');
        this.data = data;
        this.event();
    }

    ns.ViewForm.prototype = {

        event: function(){
            var that = this;
            that.$el.on('submit',function(e){
                that.onSubmit(e);
                console.log(that.data.list);
            });
        },

        onSubmit: function(e){
            e.preventDefault();
            var text = this.getText();
            if(text){
                this.data.add(text);
                this.clearInput();
            }
        },

        getText: function(){
            return this.$input.val();
        },

        clearInput: function(){
            this.$input.val('');
        }

    }

})(jQuery,MyApp);

FormをViewFormクラスで管理。
FormがsubmitされるとModelの配列にデータを追加します。
イベントのみを管理しデータの管理はModelに任せます。

初期化

/**
 * 初期化
 */

$(function(){

    var data = new MyApp.Data();
    new MyApp.ViewForm('.todoForm',data);

});

最後に初期化。
配列を管理するDataクラスをインスタンス化して変数に格納してViewクラスに渡します。

フォームにテキストを入力してsubmitすると、データが追加されます。