Stylus, la nueva API de acceso a elementos HTML
Después de unos días de desarrollo he terminado la versión 0.6 de una API que voy a estar utilizando en algunos de los trabajos en los que estoy metido, que sirve para acceder de una forma muy sencilla a los elementos de una página.
El nombre que le he puesto a esta forma de acceso a los elementos de una página es CSSPath, ya que usa ciertas partes de la sintaxis de acceso a elementos de CSS, añadiendo el acceso por indices (elemento[Posición]).
La forma de uso es muy sencilla, ya que para todos los que sepáis CSS os será una buena forma de empezar a hacer vuestros scripts no intrusivos.
Por ejemplo podéis añadir eventos a todos los botones de una página que sigan un patrón:
-
window.onload=function(){
-
for(var i=1;i<=10;i++){
-
var btnAra = Stylus.extract("#btnXtr"+i);
-
btnAra.onclick=function(){
-
alert(this.value);
-
}
-
}
-
}
En este caso sería lo mismo que usar getElementById, pero la gracia está en las búsquedas combinadas (pulsa para ver los ejemplos)
Si necesitáis algo "high level" que os de un 100% de seguridad podéis usar jQuery.
En las próximas versiones implementaré búsquedas por lotes pasando varios valores en un array:
-
var elementos = ["li","#elemento .class","#elemento[2] .class"];
-
Stylus.extract(elementos);
Lee el resto para ver el código:
El código de la API es el siguiente (descargar stylus.js):
-
var Stylus={
-
getElementsByClass:function(css,obj){
-
var s = [];
-
var els = obj.getElementsByTagName("*");
-
for(var i=0,t=els.length;i<t;i++){
-
var clase = els[i].className;
-
if(clase == css){s[s.length]=els[i];}
-
}
-
return s;
-
},getObj:function(obj,que){
-
var tFill;var element;
-
var qq=que.indexOf("[");
-
var u=que.charAt(0);
-
if(qq!=-1){
-
var num=que.substring(qq+1,que.length-1);que=que.substring(0,qq);
-
tFill=true;
-
}else{
-
tFill=false;
-
}
-
-
if(u=="#"){//ELEMENT ID
-
que=que.substring(1,que.length);
-
element = obj.getElementById(que);
-
}else if(u=="."){//CLASS
-
que=que.substring(1,que.length);
-
element=Stylus.c2a(Stylus.getElementsByClass(que,obj));
-
}else{//TAGNAME
-
//IMPLEMENTAR CLASS EN TAG (li.pepe);
-
element=Stylus.c2a(obj.getElementsByTagName(que));
-
}
-
if(tFill){
-
if(Stylus.isco(element)){var elemx=Stylus.c2a(element.getElementsByTagName(que));
-
}else{var elemx = element;}
-
element = elemx[num];
-
}
-
return element;
-
},extract:function(ex,obj){
-
if(!obj){obj=document;}
-
var inici;var fi;
-
var es=ex.indexOf(" ");
-
var pare=(es!="-1");
-
inici=ex.substring(0,es);fi=ex.substring(es+1,ex.length);
-
if(inici=="")inici=fi;
-
if(pare){
-
robj=Stylus.getObj(obj,inici);return Stylus.extract(fi,robj);
-
}else{
-
var robj=Stylus.getObj(obj,inici);
-
if(Stylus.isco(robj)){robj=Stylus.c2a(robj);}
-
return robj;
-
}
-
},isco:function(q){
-
if(!q)return false;
-
return !q.tagName&&!q.push;
-
},c2a:function(colection){
-
var sortida=[];
-
for(var i=0,tcol=colection.length;i<tcol;i++){sortida[sortida.length]=colection[i];}
-
return sortida;
-
}}
Comentarios
http://ricardocabello.com/?postid=323
Ricardo, conozco JQuery y también conozco Prototype (y su superfunción $). El tema es que prefiero desarrollar yo mismo este tipo de aplicaciones para poder adaptarlos al 100% a mis necesidades y para aprender.
Añado que a JQuery no se le puede hacer sombra y que esto lo he hecho para mi gusto y difrute.
Aparte que de todo se aprende :) y con la comida de cabeza que me he pegado para terminar esto me siento orgulloso de mi mismo.
He de decir que cuando puse el link no habia llegado a la parte del post donde dabas a entender que lo habias hecho tu :P Pense que hablabas de algo que habias encontrado por ahi, asi que me dije, yo creo que encontre algo mejor, y te lo puse.
Si te lo has currado tu, entonces chapo! :D
Deja un comentario