ajax使う時のテンプレ的にカプセル化してみた。（fullcalendar）

カプセル化する事によって、色々良いことあります。
fullcalendarを使用する例で。
※fullcalendarを例にしたので結局ごちゃごちゃしてしまい、テンプレっぽくならなかった。反省。

var example = {
    baseUrl: $('#base-url').val(),
    init: function () {
                //前月
        $(document).on('click', '#prev-button', function () {
            self.getCalenderData('prev', 'month');
        });

        //翌月
        $(document).on('click', '#next-button', function () {
            self.getCalenderData('next', 'month');
        });
    },
    getCalenderData: function (state, view) {
        var self = this;
        var url = self.baseUrl + "project/get_calendar_data";
        var opt = self.setAjaxOption(url, self.getSearchData(state));

        self.ajax(opt, function (json) {
            self.setProjectNumText(json.cal_data);
            self.setNow(json.now);
            self.destroyCalender();
            self.setCalender(json, view);
        }, function () {
            alert("読み込み失敗");
        });
    },
getDefaultCalendarOption: function () {
        var self = this;

        return {
            header: {
                left: 'prev,next',
                center: 'title',
                right: ''//'month,agendaWeek,agendaDay,listYear'
            },
            height: 900,
            eventBackgroundColor: '#26b99a',
            //省略
        }
    },
    setAjaxOption: function (url, data) {
        return {
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            cache: false,
        }
    },
    ajax: function (opt, success, fail) {
        $.ajax(opt).then(function (json) {
            success(json)
        }, function (a, b) {
            fail(a, b)
        });
    },
setCalender: function (json, view) {
        var self = this;
        var opt = $.extend(true, self.getDefaultCalendarOption(), {
            defaultDate: json.new_now,
            defaultView: view,
            events: json.cal_data,
        });

        // console.log(opt);
        // console.log(self.holiday);

        $('#pm_calendar').fullCalendar(opt);
        $('#pm_calendar').fullCalendar('addEventSource', self.holiday);
    },
//モーダルウィンドウからインサートする
    insertProject: function () {
        var self = this;
        var $form = $('#example');
        var url = self.baseUrl + "project/example";
        var name = $form.find('input[name=name]').val();
        var date = $form.find('input[name=date]').val();
        var end_date = $form.find('input[name=end_date]').val();

        if (!name) {
            alert('プロジェクト名を入力してください。');
            return false;
        }

        if (!date) {
            alert('日付を入力してください。');
            return false;
        }

        var opt = self.setAjaxOption(url, {
            "name": name,
            "date": date,
            "end_date": end_date,
        });

        self.ajax(opt, function (json) {
            $('.alert').remove();

            if (json.err) {
                $('#errBlock').prepend(json.html);
                return false;
            }

            $form.submit();
        }, function () {
            alert("イベント新規作成失敗");
        });
    },
};
$(function () {
    example.init();
});

ざっくり説明

カプセル化

全体をexampleで囲む事によってカプセル化が出来る。
カプセル化変数の上書きを防いだり、クラスのコンストラクタ的な扱いが出来る。

カプセル化・クラスの実現については以下の記事が分かりやすかった→
http://qiita.com/kotarella1110/items/9ee2404ef31f47932cc6

var example = {

}

デフォルト値と変動する値は分けておく事ですっきり

getDefaultCalendarOptionにデフォルトの値を。
setCalenderのopt内に変動する値を。
その際に$.extendnでくっつけるイメージ。

$.extendnの使い方が難しい。。

setCalender: function (json, view) {
        var self = this;
        var opt = $.extend(true, self.getDefaultCalendarOption(), {
            defaultDate: json.new_now,
            defaultView: view,
            events: json.cal_data,
        });

        // console.log(opt);
        // console.log(self.holiday);

        $('#pm_calendar').fullCalendar(opt);
        $('#pm_calendar').fullCalendar('addEventSource', self.holiday);
    },

getDefaultCalendarOption: function (){

//省略
}

最後にinitをまとめて呼び出す。

$(function () {
    example.init();
});

---