jQuery style

Cómo preparar una librería al estilo de jQuery

Mark Rothko

archivado en: JavaScript / 22 Marzo, 2016

jQuery me sigue pareciendo una maravilla; sin embargo, también es cierto que es menos eficiente que usar javaScript directamente y que no combina muy bien con algunos frames como angular o polymer. Ahora bien, escribir algunas operaciones en puro js es bastante pesado, ya que es un lenguaje muy «verboso», como gusta decir ahora a las espesuras gramaticales, por lo que no es mala idea usar un recurso intermedio, como un objeto o similar al estilo de jQuery, pero mucho más ligero, adecuado directamente al navegador límite que tenemos por debajo, que en estos días ya suele ser el ie11, y solo con los métodos que necesitamos. Y el caso es que preparar algo así es más sencillo que un botijo.

A vuelapluma, que voy algo volado:

1. Incluimos el tinglado en una función autoejecutable para que las closures nos protejan del mundo exterior 😛 Y ahí ponemos nuestra librería (en el ejemplo foo), que devuelve el módulo donde está todo el cogollo.

(function () {

var foo = function (params) {

return new DomModule(params);

};

var DomModule = function (params) {

// métodos

};

2. El primer método será el selector, que devolverá una nodeList.

var DomModule = function (params) {

var selector = document.querySelectorAll(params),

i = 0;

this.length = selector.length;

for (; i < this.length; i++) {

this[i] = selector[i];

}

return this;

};

...

}

3. A continuación creamos un objeto o similar con los métodos de la librería. El patrón da igual, lo único importante es que devolvamos this para que se puedan concatenar los métodos, como ocurre en jQuery. Por ejemplo:

var methods = {};

methods.addClass = function(classAdd) {

var len = this.length;

if ( classAdd ) {

while (len--) {

this[len].classList.add(classAdd);

}

}

return this;

};

methods.removeClass = function(classRemove) {

var len = this.length;

if ( classRemove ) {

while (len--) {

this[len].classList.remove(classRemove);

}

}

return this;

};

methods.toggleClass = function(classToggle) {

var len = this.length;

if (classToggle ) {

while (len--) {

this[len].classList.toggle(classToggle);

}

}

return this;

};

methods.setStyle = function(style, value) {

var len = this.length;

if ( style && value ) {

while (len--) {

this[len].style[style] = value;

}

}

return this;

};

methods.text = function(text) {

var len = this.length;

while (len--) {

this[len].textContent = text;

}

return this;

};

methods.html = function(content) {

var len = this.length;

if ( content.indexOf('script') !== -1 || content.indexOf('iframe') !== -1 ) {

content = 'scripts are not allowed';

}

while (len--) {

this[len].innerHTML = content;

}

return this;

};

methods.setStyle = function(style, value) {

var len = this.length;

if ( style && value ) {

while (len--) {

this[len].style[style] = value;

}

}

return this;

};

methods.remove = function() {

var len = this.length;

while (len--) {

if ( this[len].parentNode ) {

this[len].parentNode.removeChild(this[len]);

}

}

return true;

};

Se pueden incluir tantos métodos como se necesiten de forma habitual, lo único importante es no perder de vista que no queremos replicar jQuery, sino aligerarlo para quedarnos con lo que realmente nos va a ahorrar tiempo de picado (y ya otro día hablo de yagni, una de mis filosofías de desarrollo de software favoritas :P).

4. Por último, prototipamos el objeto con los métodos y engarzamos nuestra librería a window en caso de que no exista.

foo.fn = DomModule.prototype = methods;

if ( !window.foo ) {

window.foo = foo;

}

Ale op, pues con esto ya estaría listo el tinglado, que podríamos usar como jQuery:

foo('.miClase').addClass('bazinga');

he dejado el ejemplo completo en gist.

 

|| Tags:

valoración de los lectores sobre jQuery style

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*