fbpx Skip to content

Cómo empezar con DOMmy.Js

DOMmy.js es una librería Javascript superligera e independiente, diseñada para trabajar fácilmente con el DOM y producir potentes animaciones CSS3 a través de JS.

Revelación completa: Desarrollé DOMmy.js. Y en este tutorial quiero demostrar cómo se puede utilizar para mantener sus páginas web bonitas y ligeras.

DOMmy.js tiene una curva de aprendizaje muy superficial; es aún más superficial si alguna vez ha utilizado un framework de estilo antiguo como jQuery o Prototype.

DOMmy.js no es un framework de nueva generación como Vue.js, React, o Angular; estas son herramientas que usan nuevas tecnologías como el DOM virtual, plantillas dinámicas, y enlace de datos; usted usa herramientas de nueva generación para construir aplicaciones asíncronas.

DOMmy.js es un marco Javascript para escribir código Javascript “clásico”, trabajando con el DOM a nivel central. Un framework Javascript como jQuery hace una tarea similar, con tres grandes diferencias:

  • jQuery utiliza un motor interno propio para trabajar con selectores y producir animaciones. Este motor está totalmente basado en Javascript. Por el contrario, DOMmy.js le permite seleccionar cualquier elemento en el DOM y crear animaciones potentes, utilizando las especificaciones modernas y súper potentes tanto de Javascript como de CSS3. No necesitaba escribir un motor Javascript para trabajar con DOM y animaciones. Ya están disponibles las herramientas cross-browser, flexibles y potentes que le permiten hacerlo. Sólo quería una estructura Javascript que ayudara a los desarrolladores a escribir controles DOM y animaciones CSS3 usando el lenguaje Javascript.
  • DOMmy.js es una estructura Javascript que mira al futuro. Está escrito para ser compatible con algunas de las últimas versiones de los principales navegadores, pero no quiero que mi código sea compatible con software muy antiguo como IE6/7 y similares.
  • jQuery y Prototype tienen APIs completas basadas en un motor interno, DOMmy.js proporciona controles para sólo dos cosas principales: Operaciones y animaciones DOM; otras tareas se pueden realizar fácilmente con vainilla Javascript o ampliando la estructura central de DOMmy.js.

Así, DOMmy.js es un navegador cruzado, super-ligero (la versión minified pesa sólo 4kb), super-fácil de aprender, super-rápido de ejecutar, librería Javascript. En pocas palabras, con DOMmy.js puedes hacerlo:

  • navegar por el DOM, seleccionando y trabajando con elementos HTML y colecciones de elementos;
  • crear potentes animaciones CSS3 y colecciones de animaciones;
  • añadir (múltiples) eventos, propiedades CSS y atributos a los elementos;
  • usar un elemento de almacenamiento para almacenar y recuperar contenido específico;
  • trabajar con una estructura coherente esta estructura ;
  • tienen una moda DOMReady DOMReady , con la que no es necesario esperar a que los recursos (como imágenes y vídeos) se carguen completamente para poder trabajar con DOM.

Instalación de DOMmy.js

Implementar DOMmy.js en su página web es muy sencillo. Sólo necesita incluir el script a través de la etiqueta script , y estará listo para comenzar. Puedes descargar el script y usarlo localmente o cargarlo a través de la página web del proyecto:

El DOM está listo!

Como dije antes, con DOMmy.js no necesitamos esperar a que los recursos de la página se carguen para trabajar con DOM. Para ello, utilizamos la función $$$ . El contenido colocado dentro de esta práctica función se ejecutará cuando la estructura DOM (y no la “página”) esté lista. Escribir código con DOMmy.js es súper rápido. Quería crear un fragmento que me permitiera escribir la menor cantidad de código posible, así que supongo que nada es más rápido que escribir:

$$$$(función() {
// Cuando DOM esté listo, hazlo.
});)

…de forma independiente. Por supuesto, puede utilizar tantos bloques DOMReady como desee o necesite:

/// bloque 1
$$$(función() {
        // Cuando DOM esté listo, hazlo.
});
// Bloque 2
$$$(función() {
        // Cuando DOM esté listo, hazlo.
});
// Bloque 3
$$$(función() {
        // Cuando DOM esté listo, hazlo.
});

)

Seleccionar elementos DOM

Así que ahora podemos empezar a trabajar con nuestra estructura DOM. Puede seleccionar el elemento que desee utilizando un “id” HTML. Esto se hace con la función $ :

/// seleccione un elemento por ID.
// En este caso se selecciona el elemento con el identificador "myElement".
$($0027miElement$0027);

Y puede seleccionar la colección/lista de elementos que desee utilizando un selector CSS. Esto se hace con la función $$ :

/// seleccionar una colección de elementos mediante el selector CSS
$$($0027#myid div.myclass p$0027)

Por supuesto, también puede seleccionar varios elementos utilizando varios selectores:

/// una selección de elementos HTML
$$($0027#miprimerelemento, #mi segundoelemento$0027)
// Otra selección de elementos HTML
$$($0027#myfirstelement div.myclass a, #mysecondelement span$0027)

No hay límites para la selección de DOM. Los elementos se incluirán en la colección final con la que podrá trabajar con los métodos de DOMmy.js.

Adición de eventos

Añadir eventos a los elementos (de forma transversal a los navegadores) es muy sencillo. Sólo tiene que utilizar el método on en la colección de elementos a los que desea adjuntar el evento(s) con el evento específico:

/// agrega un evento a un elemento que se dispara al hacer clic en el elemento
$($0027miElemento$0027).on($0027clic$0027, función() {
    ($0027¡Hey! ¡Hiciste clic en mí!$0027);
});

)

Nota: la función log es una función incorporada que funciona como un acceso directo global a través del navegador para console.log. Si el navegador no soporta el objeto de la consola, el resultado se imprimirá en un cuadro de alerta global.

Puede añadir varios eventos a la vez, por supuesto:

/// añadir un evento a un elemento
$$($0027#myElement p$0027).on({ {myElement p$0027).on
// Evento CLICK
click$0027: function() { {pulsar
($0027¡Hey, has hecho clic aquí!$0027);
},
// Evento MOUSEOUT
mouseout”: function() {
($0027¡Hey, aquí tienes el ratón!$0027);
}
});)

Como puede ver, no necesita aplicar los métodos DOMmy.js a cada elemento. Los métodos se aplican directamente al resultado de la selección de DOM y el motor interno iterará correctamente a través de los elementos HTML.

Se puede acceder al elemento “current” en la iteración simpy usando esta palabra clave:

 $($0027demo$0027).on({
     click$0027: function() { {pulsar
          this.css({$0027ancho$0027: $0027300px$0027})
              .html($0027Hecho!$0027);
     }
 });

)

Trabajar con atributos

De la misma manera, puede añadir, editar y recuperar los valores de los atributos HTML:

/// obtener un atributo
var title = $($0027myElement$0027).attr($0027title$0027);
// establecer un atributo
$($0027myElement$0027).attr($0027título$0027, $0027mi título$0027);
// establecer múltiples atributos
$($0027myElement$0027).attr({$0027title$0027: $0027my title$0027, $0027alt$0027: $0027alternate text$0027});

El método attr funciona de tres maneras diferentes:

  • devuelve el valor del atributo especificado si el argumento que proporcionó es una cadena;
  • establece un atributo HTML a un nuevo valor si pasa dos argumentos;
  • establece una colección de atributos HTML si se pasa un objeto de pares clave/valor que representan los atributos del elemento.

Definición de estilos de CSS

Al igual que los atributos HTML, puede establecer y obtener valores CSS por medio del método css :

/// set single CSS
$($0027myElement$0027).css($0027display$0027, $0027block$0027);
// set multiple CSS
$($0027myElement$0027).css({$0027display$0027: $0027block$0027, $0027color$0027: $0027white$0027});
// Obtener un solo CSS
$($0027miElemento$0027).css($0027mostrar$0027);
// Obtener múltiples CSS
$($0027myElement$0027).css([$0027display$0027, $0027color$0027]);

Como puede ver, con el potente método css puede hacerlo:

  • establecer una sola propiedad CSS a un nuevo valor, si pasa dos cadenas;
  • obtener el valor de una propiedad CSS, si pasa una cadena;
  • establecer múltiples propiedades CSS, si pasa un objeto de pares clave/valor;
  • obtener una matriz de valores, si pasa una matriz de cadenas que representan propiedades CSS.

Obtención y configuración de contenido HTML

Con el método html se puede definir y obtener el valor HTML del elemento:

// set html
$($0027myElement$0027).html($0027nuevo contenido$0027);
// Obtener HTML
var = $($0027myElement$0027).html();
// logs $0027nuevo contenido
log (contenido);
    

>

Iteración

Si selecciona más de un elemento, puede aplicar un método DOMmy.js a cada elemento en una sola llamada.
Sin embargo, cuando se desea trabajar con cada elemento manualmente, como cuando se obtiene contenido (es decir, contenido HTML o contenido almacenado). En este caso, puede utilizar la función handy forEach de la siguiente manera:

/// Obtener todas las inmersiones
var myels = $$($0027div$0027);
// establecer un contenido almacenado
myels.set ($0027val$0027, 10);
// ITERAR a través de cada uno de los divisores e imprimir sus atributos
myels.forEach(función(el, i) {
log(el.attr($0027id$0027) + el.get($0027val$0027) + $0027.
$0027);
});)

La función forEach es la forma preferida de iterar a través de colecciones HTML de elementos utilizando DOMmy.js. Cuando se aplica sobre un elemento DOMmy.js, utiliza dos parámetros:

  • element: el elemento DOMmy.js que está seleccionando. Puede aplicarle cualquier método DOMmy.js;
  • índice: índice que representa la posición del elemento en las colecciones de elementos.

Almacenamiento

El almacenamiento es un lugar, que pertenece a los elementos, donde se pueden almacenar tantos valores como se desee y recuperarlos en el momento deseado. Puede trabajar con el almacenamiento utilizando los métodos set y get :

// ajustar el almacenamiento
var myVal = “hola”;
$($0027myElement$0027).set($0027myVal$0027, myVal);
// Almacenamiento múltiple
var mySecondVal = “todos”;
$($0027myElement$0027).set({$0027myVal$0027: myVal, $0027mySecondVal$0027: mySecondVal});
// Obtener
$($0027myElement$0027).get($0027myVal$0027) + $($0027myel$0027).get($0027mySecondVal$0027);
// “Hola a todos”
>

Como puede ver, puede almacenar artículos individuales o múltiples a la vez. Las posiciones que se almacenan pertenecen al elemento que se está seleccionando.
Nota: recuerde que si está seleccionando varios elementos, el elemento se almacenará en cada uno de ellos, incluso si la CSS es ligeramente diferente, ya que DOMmy.js reconoce cada elemento específico:

/// establece un elemento en div#a y div#b
$$($0027div#a, div#b$0027).set($0027myStoredValue$0027, 10);
// que, por supuesto, es lo mismo que div#a.
$($0027a$0027).get($0027myStoredValue$0027); // 10

Por supuesto, los mecánicos internos de DOMmy.js identifican “div#a” y “a” / “#a” como el mismo puntero al mismo elemento, para que pueda trabajar con seguridad con métodos de almacenamiento y otros métodos de DOMmy.js de una manera coherente.

Si almacena el elemento DOM en una sola variable, que es la mejor manera de trabajar con elementos HTML, puede evitar las llamadas simultáneas y ganar espacio de memoria:

const myEl = $("div#a div");
// memorizar datos
myEl.set ($0027myStoredValue$0027, 10);
// Obtener datos
myEl.get($0027myStoredValue$0027); // 10

Animaciones CSS3

La joya de la corona de DOMmy.js es su motor de animación. Esto se basa en el motor de animaciones CSS3, por lo que funciona con los principales navegadores. Las animaciones se generan a través del método fx , que acepta los siguientes argumentos:

  • un objeto, que representa la propiedad CSS a animar;
  • un número, que representa la duración de la animación, en segundos. El valor por defecto es 5 segundos;
  • una función, que representa una llamada de retorno que será llamada una vez que la animación esté terminada;
  • un booleano, representando si encadena o no animaciones concurrentes. El valor por defecto es falso.

Veamos cómo usar el método fx , creando dos animaciones simples.

/// animación simple
$($0027myel$0027).fx({$0027width$0027: $0027300px$0027, $0027height$0027: $0027300px$0027}, 2);

Aquí simplemente alteramos la anchura y la altura de las propiedades CSS de #myel en 2 segundos. En el siguiente ejemplo creamos la misma animación con una duración de 1 segundo y con una función de devolución de llamada que editará el contenido HTML del elemento con la cadena “Completed!

Puede acceder al elemento actual utilizando esta palabra clave :

/// animación simple con devolución de llamada
$($0027myel$0027).fx({$0027width$0027: $0027300px$0027, $0027height$0027: $0027300px$0027}, 1, function() {
this.html ($0027Completado!$0027);
});)

Encadenamiento

Puede crear magia con “animation chaining”: usando true como valor del cuarto parámetro, puede encadenar tantas animaciones como desee. Para hacer esto, simplemente use el método fx más de una vez en un selector específico. En el siguiente ejemplo cambiamos el ancho de todos los elementos HTML que coinciden con el selector “.myel” varias veces:

var callBack = function() {
    // haz algo guay
};
// Animaciones de colas
$$($0027.myel$0027).fx({$0027ancho$0027: $0027400px$0027}, 2, callBack, true);
           .fx({$0027width$0027: $0027100px$0027}, 4, callBack, true);
           .fx({$0027width$0027: $002750px$0027}, 6, callBack, true);
           .fx({$0027width$0027: $0027600px$0027}, 8, callBack, true);

Por supuesto que puedes encadenar todo. La estructura de DOMmy.js le permite establecer llamadas concurrentes a los elementos:

/// múltiples llamadas
$$($0027div#e, #d$0027)
    .fx({$0027tamaño de fuente$0027: $002740px$0027, $0027color$0027: $0027amarillo$0027}, 1)
    .fx({$0027tamaño de fuente$0027: $002710px$0027, $0027color$0027: $0027rojo$0027}, 1)
    .attr($0027título$0027, $0027thediv$0027)
    .attr($0027clase$0027, $0027thediv$0027)
    .attr({$0027lang$0027: $0027en$0027, $0027dir$0027: $0027ltr$0027});

Recuerde que las llamadas encadenadas se ejecutarán inmediatamente. Si quieres encadenar algo al final de una animación específica tienes que establecer una llamada de vuelta para esa animación.

Crear un manejador de eventos que dispara animaciones

Ahora, queremos crear un fragmento que produzca una animación sobre un elemento específico. Esta animación se disparará cuando el usuario mueva el ratón sobre el propio elemento y cuando deje atrás el ratón. Al final de cada paso, se establecerá un contenido HTML adecuado:

$($0027miElemento$0027).on({
    pasar el ratón por encima: function() {
        this.fx({$0027width$0027: $0027300px$0027}, 1, function() {
            this.html ($0027Completado!$0027);
        });
    },
    mouseout": function() {
        this.fx({$0027width$0027: $0027100px$0027}, 1, function() {
            this.html ($0027Back again!$0027);
        });
    }
});

)

Como puedes ver, con DOMmy.js es muy fácil trabajar con animaciones CSS3. Recuerde siempre que esto se refiere al elemento actual.

Ahora, queremos producir una animación encadenada que altere el estilo CSS de un elemento en cuatro pasos diferentes, usando cuatro llamadas de retorno diferentes y encender esta animación cuando el usuario haga clic en el elemento:

var clicked = false;
$($0027miElemento$0027).on({ {)
click$0027: function() { {pulsar
if(! clicked ) { {¡Si!
clicked = true;
this.fx({$0027width$0027: $0027300px$0027, $0027height$0027: $0027300px$0027, $0027background-color$0027: $0027red$0027, $0027border-width$0027: $002710px$0027}, 1, function() {
este.html($00271$0027);
), cierto)
.fx({$0027altura$0027: $002750px$0027, $0027color de fondo$0027: $0027amarillo$0027, $0027ancho del borde$0027: $00274px$0027}, 1, function() {
este.html($00272$0027);
), cierto)
.fx({$0027ancho$0027: $0027100px$0027, $0027color de fondo$0027: $0027azul$0027, $0027ancho del borde$0027: $002710px$0027}, 1, function() {
este.html($00273$0027);
), cierto)
.fx({$0027altura$0027: $0027100px$0027, $0027color de fondo$0027: $0027#3dac5f$0027, $0027anchura del borde$0027: $00272px$0027}, 1, función() {
este.html($00274$0027);
clicked = false;
);
}
}
});)

Puedes ver estos fragmentos en acción directamente en la sección Demo del proyecto DOMmy.js.