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

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

```js
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


```js
var example = {

}
```

##デフォルト値と変動する値は分けておく事ですっきり
getDefaultCalendarOptionにデフォルトの値を。
setCalenderのopt内に変動する値を。
その際に``$.extendn``でくっつけるイメージ。

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

```js
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);
	},

```

```js

getDefaultCalendarOption: function (){

//省略
}
```


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

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

---