🥇 Primeros pasos con DOMmy.Js

- Advertisement -

DOMmy.js es una biblioteca Javascript independiente y súper liviana, diseñada para trabajar fácilmente con el DOM y producir poderosas animaciones CSS3 a través de JS.

Divulgación completa: desarrollé DOMmy.js. Y en este tutorial quiero demostrar cómo se puede usar para mantener sus páginas web agradables y livianas.

DOMmy.js tiene una curva de aprendizaje muy superficial; es incluso menos profundo si alguna vez ha utilizado un marco de estilo de generación anterior como jQuery o Prototype.

DOMmy.js no es un marco de próxima generación como Vue.js, React o Angular; estas son herramientas que utilizan nuevas tecnologías como el DOM virtual, las plantillas dinámicas y el enlace de datos; utiliza herramientas de próxima generación para crear aplicaciones asincrónicas.

DOMmy.js es un marco de trabajo de Javascript para escribir código Javascript «clásico», que trabaja con el DOM en el nivel central. Un marco de Javascript como jQuery hace una tarea similar, con tres grandes diferencias:

jQuery utiliza un motor interno patentado para trabajar con selectores y producir animaciones. Este motor está completamente basado en Javascript. Por el contrario, DOMmy.js le permite seleccionar cualquier elemento en el DOM y crear animaciones poderosas, utilizando las especificaciones modernas y súper poderosas de Javascript y CSS3. No necesitaba escribir un motor Javascript para trabajar con DOM y animaciones. Las herramientas multinavegador, flexibles y potentes que te permiten hacerlo ya están disponibles. Solo quería una estructura Javascript que ayudara a los desarrolladores a escribir controles DOM y animaciones CSS3 utilizando el lenguaje Javascript.
DOMmy.js es una estructura Javascript que mira hacia el 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 API completas basadas en un motor interno, DOMmy.js proporciona controles para solo dos cosas principales: operaciones y animaciones DOM; otras tareas se pueden realizar fácilmente con Vanilla Javascript o ampliando la estructura central de DOMmy.js.

Por lo tanto, DOMmy.js es una biblioteca Javascript multinavegador, súper liviana (la versión reducida pesa solo 4kb), súper fácil de aprender y súper rápida de ejecutar. En pocas palabras, con DOMmy.js puedes:

navegar por el DOM, seleccionando y trabajando con elementos HTML y colecciones de elementos;
crear poderosas animaciones CSS3 y colecciones de animaciones;
agregar (múltiples) eventos, propiedades CSS y atributos a los elementos;
usar un elemento de almacenamiento para almacenar y recuperar contenido específico;
trabajar con coherencia este estructura;
tener un navegador cruzado DOMReady fashion, con el que no es necesario esperar a que los recursos (como imágenes y videos) se carguen por completo para poder trabajar con DOM.

Índice

Instalación de DOMmy.js

Implementar DOMmy.js en su página web es simple. Solo necesita incluir el script a través del guion etiqueta, y estarás listo para comenzar. Puedes descarga el guion y utilícelo localmente o cárguelo a través del sitio web del proyecto:

<script src="https://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // use dommy.js
    $$$(function() {
        // ...
    });
</script>

¡El DOM está listo!

Como dije antes, con DOMmy.js no necesitamos esperar a que se carguen los recursos de la página para poder trabajar con DOM. Para hacer esto, usamos el $$$ 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:

$$$(function() {
        // when DOM is ready do this
});

…de manera independiente. Por supuesto, puede utilizar tantos DOMReady bloques como quieras o necesites:

// block 1 
$$$(function() {
        // when DOM is ready do this
});

// block 2
$$$(function() {
        // when DOM is ready do this
});

// block 3
$$$(function() {
        // when DOM is ready do this
});

Seleccionar elementos DOM

Entonces ahora podemos comenzar a trabajar con nuestra estructura DOM. Puede seleccionar el elemento que desee utilizando un «id» HTML. Esto se hace con el ps función:

// select an element by ID. 
// In this case you select the element with ID "myElement"
$('myElement');

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

// select a collection of elements by CSS selector
$$('#myid div.myclass p')

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

// a selection of HTML elements
$$('#myfirstelement, #mysecondelement')

// another selection of HTML elements
$$('#myfirstelement div.myclass a, #mysecondelement span')

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

Adición de eventos

Agregar eventos a los elementos (en forma de navegador cruzado) es muy simple. Solo usa el en método en la colección de elementos a los que desea adjuntar los eventos con el evento específico:

// add an event to an element that fires when you click the element
$('myElement').on('click', function() {
    log('Hey! You clicked on me!');
});

Nota: la función Iniciar sesión es una función integrada que funciona como un acceso directo global entre navegadores para console.log. Si el navegador no es compatible con el objeto de la consola, el resultado se imprimirá en un cuadro de alerta global.

Puede agregar varios eventos a la vez, por supuesto:

// add a events to an element
$$('#myElement p').on({
    // CLICK event
    'click': function() {
        log('Hey, you clicked here!');
    },
    
    // MOUSEOUT event
    'mouseout': function() {
        log('Hey you mouseovered here!');
    }
});

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

Puede acceder al elemento «actual» en la iteración simplemente usando el este palabra clave:

 $('demo').on({
     'click': function() {
          this.css({'width': '300px'})
              .html('Done!');
     } 
 });

Trabajar con atributos

De la misma manera, puede agregar, editar y recuperar los valores de los atributos HTML:

// get an attribute
var title = $('myElement').attr('title');

// set an attribute
$('myElement').attr('title', 'my title');

// set multiple attributes
$('myElement').attr({'title': 'my title', 'alt': 'alternate text'});

los atributo El método funciona de tres maneras diferentes:

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

Configuración de estilos CSS

Al igual que los atributos HTML, puede establecer y obtener valores CSS mediante el CSS método:

// set single CSS
$('myElement').css('display', 'block');

// set multiple CSS
$('myElement').css({'display': 'block', 'color': 'white'});

// get single CSS
$('myElement').css('display');

// get multiple CSS
$('myElement').css(['display', 'color']);

Como puede ver, con el poderoso CSS método que puede:

establezca una sola propiedad CSS en 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;
obtenga una matriz de valores, si pasa una matriz de cadenas que representan propiedades CSS.

Obtener y configurar contenido HTML

Con el html método que puede establecer y obtener el valor HTML del elemento:

// set html
$('myElement').html('new content');

// get html
var content = $('myElement').html();

// logs 'new content'
log ( content );

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 desea trabajar con cada elemento manualmente, como cuando obtiene contenido (es decir, contenido HTML o contenido almacenado). En este caso, puede utilizar el práctico para cada funcionar de la siguiente manera:

// get all divs
var myels = $$('div');

// set a stored content
myels.set('val', 10); 

// ITERATE through each single div and print its attributes
myels.forEach(function(el, i) {
    log(el.attr('id') + el.get('val') + ' \n');
});

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

elemento: el elemento DOMmy.js que está seleccionando. Puede aplicarle todos los métodos DOMmy.js;
índice: un í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 puede almacenar tantos valores como desee y recuperarlos en el momento deseado. Puede trabajar con el almacenamiento utilizando el establecer y obtener métodos:

// set storage
var myVal = "hello";
$('myElement').set('myVal', myVal);

// multiple storage
var mySecondVal = "everybody";
$('myElement').set({'myVal': myVal, 'mySecondVal': mySecondVal});

// get   
$('myElement').get('myVal') + $('myel').get('mySecondVal');  
// "hello everybody"

Como puede ver, puede almacenar un solo artículo o varios artículos a la vez. Los elementos que almacena pertenecen al elemento que está seleccionando.
Nota: recuerda que si seleccionas varios elementos, el elemento se almacenará en cada uno de estos elementos, incluso si el CSS es ligeramente diferente, porque DOMmy.js reconoce cada elemento específico:

// set an item to div#a and div#b
$$('div#a, div#b').set('myStoredValue', 10);

// get from #a, that of course is the same as div#a
$('a').get('myStoredValue'); // 10

Por supuesto, la mecánica interna de DOMmy.js identifica «div#a» y «a» / «#a» como el mismo puntero al mismo elemento, por lo que puede trabajar de manera segura con el almacenamiento y otros métodos de DOMmy.js de manera coherente.

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

const myEl = $("div#a div");

// store data
myEl.set('myStoredValue', 10);

// get data
myEl.get('myStoredValue');      // 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 todos los principales navegadores. Las animaciones se generan a través de la efectos especiales método, que acepta los siguientes argumentos:

un objeto, que representa la propiedad CSS para animar;
un número, que representa la duración de la animación, en segundos. El valor predeterminado es 5 segundos;
una función, que representa una devolución de llamada que se llamará una vez que finalice la animación;
un booleano, que representa si encadenar animaciones concurrentes o no. El valor predeterminado es falso.

Veamos cómo usar el efectos especiales método, mediante la creación de dos animaciones simples.

// simple animation
$('myel').fx({'width': '300px', 'height': '300px'}, 2);

Aquí simplemente modificamos el ancho y el alto de las propiedades CSS de #miel 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 el mensaje «¡Completado!» cuerda.

Puede acceder al elemento actual utilizando el este palabra clave:

// simple animation with callback
$('myel').fx({'width': '300px', 'height': '300px'}, 1, function() {
        this.html('Completed!');
});

Encadenamiento

Puedes crear magia con «encadenamiento de animación»: usando verdadero 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() {
    // do something cool
};

// queue animations
$$('.myel').fx({'width': '400px'}, 2, callBack, true);
           .fx({'width': '100px'}, 4, callBack, true);
           .fx({'width': '50px'}, 6, callBack, true);
           .fx({'width': '600px'}, 8, callBack, true);

Por supuesto que puedes encadenar todo. La estructura de DOMmy.js le permite establecer llamadas simultáneas a elementos:

// multiple calls
$$('div#e, #d')
    .fx({'font-size': '40px', 'color': 'yellow'}, 1)
    .fx({'font-size': '10px', 'color': 'red'}, 1)
    .attr('title', 'thediv')
    .attr('class', 'thediv')
    .attr({'lang': 'en', 'dir': 'ltr'});

Recuerda que las llamadas encadenadas se ejecutarán inmediatamente. Si desea encadenar algo al final de una animación específica, debe establecer una devolución de llamada para esa animación.

Crear un controlador de eventos que active animaciones

Ahora, queremos configurar un fragmento que produzca una animación en un elemento específico. Esta animación se activará cuando el usuario mueva el mouse sobre el elemento mismo y cuando lo deje atrás. Al final de cada paso, se establecerá un contenido HTML adecuado:

$('myElement').on({
    'mouseover': function() {
        this.fx({'width': '300px'}, 1, function() {
            this.html('Completed!');
        });
    },
    'mouseout': function() {
        this.fx({'width': '100px'}, 1, function() {
            this.html('Back again!');
        });
    } 
});

Como puede ver, con DOMmy.js es muy fácil trabajar con animaciones CSS3. Siempre recuerda eso este 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 devoluciones de llamada diferentes y disparar esta animación cuando el usuario haga clic en el elemento:

   var clicked = false;
   
   $('myElement').on({
    'click': function() {
        if( !clicked ) {
            clicked = true;
            this.fx({'width': '300px', 'height': '300px', 'background-color': 'red', 'border-width': '10px'}, 1, function() {
                this.html('1');
            }, true)
            .fx({'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
                this.html('2');
            }, true)
            .fx({'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
                this.html('3');
            }, true)
            .fx({'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
                this.html('4');
                clicked = false;
            }, true); 
        }
    } 
  });

Puede ver estos fragmentos en acción directamente en el Sección de demostración del proyecto DOMmy.js.

Don't miss out!

Primeros pasos con DOMmy.Js