Lo de las instancias es claro, la idea era sólo mostrar una alternativa. Ahora, más poderosa, menos poderosa... de nuevo semántica y relatividad.
Esto, por ejemplo, que podría ser el core de un miniframework súper básico y limitado, parece en principio poco poderoso:
Código PHP:
<script>
var panino=(function(){
/* ---- métodos privados ---- */
var metodosPrivados={
}
/* ---- métodos públicos ---- */
return{
extend:function(el,obj){
for(var i in obj)
el[i]=obj[i];
return el;
},
get:function(id){
return panino.extend(document.getElementById(id),metodosPrivados);
},
add:function(obj){
panino.extend(metodosPrivados,obj);
}
}
})();
</script>
Pero, si empezás a agregar cosas, su potencia cambia:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
<script>
var panino=(function(){
/* ---- métodos privados ---- */
var metodosPrivados={
}
/* ---- métodos públicos ---- */
return{
extend:function(el,obj){
for(var i in obj)
el[i]=obj[i];
return el;
},
get:function(id){
return panino.extend(document.getElementById(id),metodosPrivados);
},
add:function(obj){
panino.extend(metodosPrivados,obj);
}
}
})();
window.$=panino.get;
var basicos={
addEvent: function(type, fn ) {
if ( this.addEventListener ) {
this.addEventListener( type, fn, false );
} else if(this.attachEvent){
var _this=this;
var f= function(){fn.call(_this,window.event);}
this.attachEvent( 'on'+type, f);
this[fn.toString()+type]=f;
}else{
this['on'+type]=fn;
}
return this;
},
removeEvent: function(type, fn ) {
if( this.removeEventListener){
this.removeEventListener( type, fn, false );
}
else if(this.detachEvent){
this.detachEvent('on'+type,this[fn.toString()+type]);
this[fn.toString()+type]=null;
}
else{
this['on'+type]=function(){};
}
return this;
},
css:function(propiedad,valor){
if(!valor)
return this.style[propiedad];
this.style[propiedad]=valor;
return this;
},
hover:function(a,b){
this.addEvent('mouseover', a );
this.addEvent('mouseout', b );
return this;
}
}
var efectos={
set_opacity:function (div, value) {
div.style.opacity = value;
div.style.MozOpacity = value;
div.style.KhtmlOpacity = value;
div.style.filter = 'alpha(opacity=' + value*100 + ')';
div.style.zoom=1;//necesario para Explorer
},
crecer:function(obj,medida){
obj.style.height=medida+'px';
},
transicion:function(inicio,fin,segundos,efecto,tcallback){
this.val=null;
var _this=this;
this.test=0;
if(_this.intervalo)
clearInterval(_this.intervalo);
this.val=inicio<1?inicio+.0001:inicio;
this[efecto](this, this.val);
this.pasos=(fin-inicio)/100;
this.pausa=segundos*10;
this.intervalo=setInterval(
function(){
if(_this.test>99 || Math.abs(fin-_this.val)<0.01){
clearInterval(_this.intervalo);
_this.val=fin;
_this[efecto](_this, _this.val);
if(typeof tcallback=='function'){
return tcallback.call(_this);
}
}
_this.test++;
document.getElementById('log').innerHTML=_this.test;
_this.val=_this.val+_this.pasos;
_this[efecto](_this, _this.val);
},this.pausa);
return this;
},
easing:function(inicio,fin,coef,propiedad,medida,pausa,ecallback){
var tmp=[];
var _this=this;
if(_this.intervalo)
clearInterval(_this.intervalo);
if(!medida)medida='';
this.css(propiedad,inicio+medida);
this.test=0;
this.pausa=pausa;
this.intervalo=setInterval(
function(){
tmp[_this.test]=_this.val;
if(_this.test>1 && tmp[tmp.length-2]==tmp[tmp.length-1]){
_this.val=fin;
_this.css(propiedad,_this.val+medida);
clearInterval(_this.intervalo);
if(typeof ecallback=='function'){
return ecallback.call(_this);
}
}
_this.test++;
document.getElementById('log').innerHTML=_this.test;
_this.val=parseFloat(_this.css(propiedad))+(fin-parseFloat(_this.css(propiedad)))*coef;
_this.css(propiedad,_this.val+medida);
},this.pausa);
return this;
},
eliminar:function(){
this.css('display','none');
}
}
panino.add(basicos);
panino.add(efectos);
onload=function(){
$('pp')
.transicion(0,1,3,'set_opacity',function(){this.easing(10,100,.09,'height','px',5,function(){this.easing(parseInt(this.css('width')),400,.09,'width','px',5);});})
.addEvent('click',function(){ this.transicion(.5,0,3,'set_opacity',function(){this.easing(100,10,.09,'height','px',5);})})
.css('display','block')
.css('borderStyle','solid')
.css('borderWidth','1px')
.css('borderColor','#000')
.css('cursor','pointer')
.hover(function(){this.css('backgroundColor','red');},function(){this.css('backgroundColor','orange');});
}
</script>
</head>
<body>
<div id="pp" style=" background-color:orange; color:#FFF; display:none; width:1000px; ">fffffff</div>
<div id="log"></div>
</body>
</html>
Y puede extenderse al infinito y más allá.
Ahora bien, de dónde partimos?: de un objeto json. Con qué fuimos agregando funcionalidad?: con más objetos json. Es reusable, es poderoso? Siempre será cuestión de debate...