jQuery

Metodos de instancia y de clase

por

En JavaScript no existen clases, se simulan las clases con objetos funcion que hacen las veces de constructor. Pero a pesar de ello a los desarrolladores backend les sigue gustando usar clases. En general a todo el mundo que venga de otro lenguaje OO le gusta seguir utilizando clases, o algo que las simule, para instanciar los objetos que van a utilizar.
En la documentacion de Prototype JS clasifican los métodos de una «clase» en dos categorías: métodos de instancia () y métodos de clase (). Por ejemplo la clase Element que se usa para trabajar con el DOM.

El caso de jQuery es bastante distinto. JQuery es un único objeto (lo que seria una clase para Prototype) con distintas propiedades. Cuando usamos el selector $, este nos devuelve un objeto instancia de jQuery, que referencia al elemento del DOM que le hallamos indicado. Este objeto instanciado, tiene propiedades comunes al objeto jQuery pero otras muy variadas. Esto es así porque en el objeto instanciado puede contener un array de elementos del DOM, todo el documento (con $(document)… ) o un div creado al vuelo y que no cuelga de ninguna rama del DOM aun; en general cualquier cosa, por eso tiene propiedades varias para trabajar con cualquier elemento posible.

La documentación de jQuery muestra los metodos de dos formas dependiendo de si son de instancia o de clase. Los métodos de clase aparecen con las nomenclatura «jQuery.metodo()» y los de instancia aparecen empezando por un punto: «.metodo()» que son los que normalmente para trabajar de forma ágil se usan del modo: «$(«#id»).metodo()«.

Documentación jQuery Prototype Style

Me preguntaba como sería ver la documentación de jQuery al estilo de la docu de PrototypeJS. En definitiva aparecería una sola clase (jQuery en si) seria algo parecido a lo que sigue:

Propiedades de jQuery: Class Method

prototype fn extend noConflict isReady ready bindReady isFunction
isArray isPlainObject isEmptyObject error parseJSON noop globalEval nodeName
each trim makeArray inArray merge grep map guid
proxy uaMatch browser support props cache expando noData
data removeData queue dequeue attrFn attr event Event
find expr unique text isXMLDoc contains filter dir
nth sibling fragments clean cleanData style css curCSS
swap get getScript getJSON post ajaxSetup ajaxSettings lastModified
etag ajax handleError active httpSuccess httpNotModified httpData param
speed easing timers fx offset

Propiedades del prototipo de jQuery (objeto jQuery): Instance Methods

init selector jquery length size toArray get pushStack
each ready eq first last slice map end
push sort splice extend data removeData queue dequeue
delay clearQueue attr removeAttr addClass removeClass toggleClass hasClass
val bind one unbind delegate undelegate trigger triggerHandler
toggle hover live die blur focus focusin focusout
load resize scroll unload click dblclick mousedown mouseup
mousemove mouseover mouseout mouseenter mouseleave change select submit
keydown keypress keyup error find has not filter
is closest index add andSelf parent parents parentsUntil
next prev nextAll prevAll nextUntil prevUntil siblings children
contents text wrapAll wrapInner wrap unwrap append prepend
before after remove empty clone html replaceWith detach
domManip appendTo prependTo insertBefore insertAfter replaceAll css serialize
serializeArray ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend show
hide _toggle fadeTo animate stop slideDown slideUp slideToggle
fadeIn fadeOut offset position offsetParent scrollLeft scrollTop innerHeight
outerHeight height innerWidth outerWidth width
*si el objeto es un elemento del DOM también aparecerá en esta lista la propiedad ‘context’.

Propiedades Comunes de jQuery y de su prototipo.

En general los métodos de instancia y de clase comunes son los siguientes:

extend ready error each map data removeData queue
dequeue attr find text filter css get offset

En este articulo no me voy a meter con la diferencia entre una librería y otra, eso ya quedaría para otro momento. Pero en cuanto a documentaciones se refiere me gusta bastante el estilo claro de la de Prototype. Aunque ya hace tiempo que me acostumbré a buscar en la documentación de jQuery, veo que no pueden hacer toda la documentación en una sola página. Su documentación sigue la misma filosofía que la librería pero puede ser confuso para quienes empiezan a trabajar con ella, y todo viene de que hay que cambiar la forma de pensar cuando se cambia de lenguaje. JavaScript is diferent. XD

Zepto un mini jQuery

por

ZeptoJSPensando en que los móviles no tienen mucha capacidad de computo (todo es cuestionable) ni tanto ancho de banda (esto ya suele ser más normal) que los ordenadores personales, ha surgido la idea de minimizar el tamaño de la libreria (biblioteca) más popular de javascript y su nombre es Zepto.
Como jQuery pero en aerogel. Esa es su filosofía, y la verdad es que la parte ajax de la biblioteca la dejan an 39 lineas de código.
Que se reducen sus funcionalidades es algo lógico y normal, pero en realidad las principales y muchos selectores CSS siguen estando.
Las cosas que cambian y con motivo son por ejemplo la detección de UserAgent que la implementa de la siguiente manera:

android = ua.match(/(Android)\s+([\d.]+)/),
iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/),
ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
webos = ua.match(/(webOS)\/([\d.]+)/);

Como veis aunque está pensado para dispositivos móviles está orientado hacia el uso de un navegador con webkit. De hecho todo el apartado de FX de la librería lo solucionan con las directivas de webkit.

$.fn.anim = function(props, dur, ease){
var transforms = [], opacity, k;
for (k in props) k === 'opacity' ? opacity=props[k] : transforms.push(k+'('+props[k]+')');
return this.css({ '-webkit-transition': 'all '+(dur||0.5)+'s '+(ease||''),
'-webkit-transform': transforms.join(' '), opacity: opacity });
}

Me gusta la iniciativa de una versión ‘mini’ o ‘movil’ de jQuery, de hecho en muchas ocasiones no se utiliza la librería en todo su esplendor, cosa que es normal. Pero en el caso de Zepto, que aun va por la versión 0.2 se podria tener en cuenta el resto de navegadores para moviles (como opera mini).

Adaptar el estilo de tu web a tu monitor

por

Una cosa que se me ha ocurrido hace poco es hacer virguerias con los estilos de la web que tengas en el navegador acutualmente. La mejor opción es hacer las cosas en la parte del cliente, ya que desde el servidor hay información, como el tamaño de la ventana en que se visualiza la web, que no se puede consultar directamente.
Usando jquery puedes aumentar o disminuir el tamaño de las fuentes de tus divs con esta sencilla funcion. Esto lo puedes hacer con las proporciones que más te gusten, aquí aparecen a partir de 900 pixels.

var w=0;
var h=0;
function res(elem,we){
 var tam=$(elem).css('font-size');
 tam=parseFloat(tam);
 if(we>900){
  var incremento=(we*100/900)-100;
  tam +=incremento;
 }
 $(elem).css('font-size',tam+"px");
}

$(document).ready(function() {
 var w= $(document).width();
 var h= $(document).height();
 $("div").each(function(i,e){
  res(this,w);
 })
});

Si simplemente te has definido distintas hojas de estilo para distintos tamaños no es nedesario que crees ninguna funcion para recorrer los elementos de la web. Simplemente debes seleccionar la hoja de estilo según el tamaño e incrustarla dinamicamente.

var w=0;
$(document).ready(function(){
 var tam;
 var w= $(document).width();
 if(w > 900){
  tam=1;
 }
 else{
  tam=2;
 }
var link=<link rel=stylesheet type=text/css href=style '+tam+'.css >;
$('head').append(link);
});

así selecionarás la hora de estilo style1.css o style2.css según el tamaño de la ventana en la que se esté viendo tu web.

Ni y ni ningun diseñador te recomendará que cambies el estilo de la web dependiedo del monitor, pero eso no significa que no tengas que hacerlo en determinadas condiciones.
El metodo CSS de jQuery te permite leer y escribir dinamicamente las caracteristicas de los elementos que tengas en la web. De hecho los efectos se hacen con ligeros cambios usando este método.