prototype.js Element Methods hideの実装

例によってprototype.jsを使わずに最小限で実装してみました。

• もっと削っていけば理解も深まると思います。
• applyとかをきちんと理解できるかがミソでしょうか。。

<script>
function $(element){
	if(typeof element == 'string')
		element = document.getElementById(element);
	return Element.extend(element);
}

Object.extend = function(d, s){
	for(p in s) d[p] = s[p];
	return d;
}

Element.extend = function(element){
	var methods = {};
	var cache = Element.extend.cache;
	Object.extend(methods, Element.Methods);
	
	for(var p in methods){
		var value = methods[p];
		
		if(typeof value == 'function' && !(p in element))
			element[p] = cache.findOrStore(value);
	}
	return element;
}
Element.extend.cache = {
	findOrStore : function(value){
		return this[value] = this[value] || function(){
			return value.apply(null, [this].concat($A(arguments)));
		}
	}
};
Element.Methods = {
	hide : function(element){
		$(element).style.display = 'none';
		return element;		
	}
}

Object.extend(Element, Element.Methods);

function $A(iterable){
	var l = iterable.length;
	var rs = new Array(l);
	while(l--) rs[l] = iterable[l];
	return rs;
}
function test(){
	var d = $('foo');
	d.hide();
}
</script>


<div id='foo'>foo</div>
<div onclick="test()">click</div>