また、はてな教科書のJavaScript課題をやってみた

JavaScript抜粋

(function() {
	var realtimeEdit = {
		container: $('.container'),
		init: function() {
			$('<button>', {
				text: 'Edit',
				class: 'btn edt'
			}).appendTo(this.container).css('float', 'right').hide();
			$('<button>', {
				text: 'Complete',
				class: 'btn cmp'
			}).appendTo(this.container).css('float', 'right').hide();
		},
		edit: function() {
			var btn = $(this).removeClass('edt').hide();
			btn.next().show();
			var tgtTitle = btn.parent().find('h2');
			var oldTitle = tgtTitle.text();
			var newTitle = $('<input>', {
				type: 'text',
				value: oldTitle,
				class: 'h2'
			});
			tgtTitle.html(newTitle);
			var tgtText = btn.parent().find('p');
			var oldText = tgtText.text();
			var newText = $('<textarea>', {
				value: oldText,
				class: 'p'
			});
			tgtText.html(newText);
		},
		complete: function() {
			var btn = $(this).hide();
			btn.prev().addClass('edt');
			var tgtTitle = btn.parent().find('input.h2');
			var oldTitle = tgtTitle.val();
			var newTitle = $('<h2>', {
				text: oldTitle
			});
			tgtTitle.parent().replaceWith(newTitle);
			var tgtText = btn.parent().find('textarea.p');
			var oldText = tgtText.val();
			var newText = $('<p>', {
				text: oldText
			});
			tgtText.parent().replaceWith(newText);
			var dateObj = new Date();
			var edited = "Posted at " + dateObj.getHours() + ":" + dateObj.getMinutes();
			btn.parent().find('small').text(edited);
		}
	};

	realtimeEdit.init();
	realtimeEdit.container.on('mouseover', function() {
		$(this).find('.btn.edt').show();
	});
	realtimeEdit.container.on('mouseout', function() {
		$(this).find('.btn.edt').hide();
	});
	realtimeEdit.container.find('.btn.edt').on('click', realtimeEdit.edit);
	realtimeEdit.container.find('.btn.cmp').on('click', realtimeEdit.complete);
}());

編集できる範囲に制限がありすぎる。

タイトルと、本文それぞれ1タグしか編集できない・・。
WordPressとかすごいんやなぁ・・って自分で実装してみて思う。

やっぱり設計がわからない。

最初に変数一個作ってそこで組んでいくとか、最初から関数を用意してやるとか、どこからどこまでがプロトタイプで拡張するとか、そういう勘所がまだまだわかりません。
ほんとどっかにお師匠さま・・。

なんだか気持ち悪い

機能別に関数を分けて定義するとか、見た目と裏の動きはそれぞれ分けるとか、それらしくやったつもりではいるものの、本当に良いのかどうとかわかりゃんせん！
というかボタンにつけたクラス名で色々判別するのってどうなんやろう。