jQueryUIのコンポーネント化についてふと考えたこと

jQueryUIは何かのコンテンツをjQueryオブジェクトにしてpluginのメソッドを呼ぶだけで様々な機能を付加できる。

$('<div/>')
	.append('<div><input type="text"/></div>')
	.append('<div><span/></div>')
	.dialog({
		buttons:{
			copy:function(){
				$('div:eq(1)>span',this).text($('div:eq(0)>:text',this).val());
			},
			reset:function(){
				$('div:eq(0)>:text',this).val('');
				$('div:eq(1)>span',this).text('');
			}
		}
	});

この例だと、テキストボックスとspanを持っているdivをダイアログ化し、

• テキストボックスに入力した文字列をspanにコピーする機能
• テキストボックスとspanをともに空にする機能

を持ったボタンを追加している。

単純な例だと簡単だが、対象コンテンツのDOMツリーの階層が深く構造が複雑だったりすると、
optionsで指定する各callback関数の中で行う処理もそれ相応に複雑になるし、
構造を変えたときのメンテナンスコストも相応に上がる。

なので、コンポーネント化できればいいのではないかと考えた。
例えば、subcomponent・maincomponentというメソッドを追加するpluginがあったとして、
先ほどの例と同じことを以下のコードで実現できるようになればいいのではないか？

var subComponent1 = 
	$('<div><input type="text"/></div>')
		.subcomponent({
			buttons:{reset:function(){$(':text',this).val('');}}
		});

var subComponent2 = 
	$('<div><span/></div>')
		.subcomponent({
			buttons:{reset:function(){$('span',this).text('');}}
		});
$('<div/>')
	.append(subComponent1)
	.append(subComponent2)
	.dialog({
		buttons:{
			copy:function(){
				$('div:eq(1)>span',this).text($('div:eq(0)>:text',this).val());
			},
			reset:function(){}
		}
	})
	.maincomponent();

subcomponentメソッドの引数として、jQUeryUIの各種pluginメソッドのoptionsと同じものが渡せるとする。
子コンポーネントではそれぞれ、以下のの形で'reset'ボタンが押された時のcallback関数として、
テキストボックスを空にする処理、spanを空にする処理を記述している。

{
	buttons:{reset:function(){/* 処理 */}}
}

親コンポーネントの方では、以下の形で'reset'ボタンは作るがcallback関数には何も記述しない。

reset:function(){}

それをmaincomponentメソッドの実行で親コンポーネント化することで、
'reset'ボタンを押下した際に、そのことを子コンポーネントに伝播させて、
それぞれのcallback関数を実行させ、テキストボックスとspanをともに空にするという機能を実現する。
こういうことをやっていけば複雑化に対応しやすくなるのではないか？

などと思った。
今回はただのアイディアメモ。