Primeros pasos con DOMmy.js | Depósito de diseñador web

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

DOMmy.js tiene una curva de aprendizaje muy superficial; es aún más superficial si alguna vez ha usado 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; son herramientas que utilizan nuevas tecnologías como la virtual CÚPULA, plantillas dinámicas y enlace de datos; utilice herramientas de última generación para crear aplicaciones asincrónicas.

DOMmy.js es un marco Javascript de secuencias de comandos ​«código Javascript «clásico», que funciona con CÚPULA en el nivel básico. 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. En cambio, DOMmy.js le permite seleccionar cualquier elemento de CÚPULA y crea animaciones poderosas usando especificaciones modernas y súper poderosas para Javascript y CSS3. No necesitaba escribir un motor Javascript para trabajar con CÚPULA y animaciones. Las herramientas multinavegador, flexibles y potentes que le permiten hacer esto ya están disponibles. Solo quería una estructura Javascript para ayudar a los desarrolladores a escribir CÚPULA controles y CSS3 animaciones utilizando el lenguaje Javascript.
• DOMmy.js es un marco Javascript con visión de 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 ES DECIR6/​7 y similares
• jQuery y Prototype tienen API completas basadas en un motor interno, DOMmy.js solo proporciona controles para dos cosas principales: CÚPULA operaciones y animaciones; otras tareas se pueden realizar fácilmente con Vanilla Javascript o ampliando el marco principal DOMmy.js.

Entonces DOMmy.js es multinavegador, muy liviano (solo la versión mínima pesa 4kb), súper fácil de aprender, súper rápido de ejecutar, biblioteca Javascript. En resumen, con DOMmy.js puedes:

• navegar a lo largo CÚPULAseleccionar y trabajar con HTML elementos y colecciones de elementos;
• crea poderosamente CSS3 animaciones y colecciones de animación;
• añadir (más) eventos, CSS propiedades y atributos de los elementos;
• usar un elemento de almacenamiento para almacenar y recuperar contenido específico;
• trabajar con coherencia este estructura;
• tener un navegador cruzado DOM hecho modo, donde no tiene que esperar a que los recursos (como imágenes y videos) se carguen completamente para trabajar CÚPULA.

Instalación de DOMmy.js

Implementar DOMmy.js en su página web es simple. Solo necesita incluir el script a través de guión etiqueta y ya está listo para ir. Puede 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 CÚPULA ¡está listo!

Como dije antes, con DOMmy.js no tenemos que esperar a que se carguen los recursos de la página para trabajar con CÚPULA. Para hacer esto, usamos $$$ función. El contenido colocado en esta práctica función se ejecutará cuando CÚPULA estructura (y no ​«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 forma independiente. Por supuesto, puedes usar tantos como quieras. DOM hecho 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 CÚPULA elementos

Así que ahora podemos empezar a trabajar con nosotros. CÚPULA estructura. Puede seleccionar el elemento deseado usando un HTML ​«identificación». esto se hace con 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 mediante un CSS selector. esto se hace con $$ 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 CÚPULA selección. Los elementos se incluirán en la colección final con la que puede trabajar con los métodos DOMmy.js.

Agregar 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: función Engancharse es una función integrada que actúa como acceso directo global entre navegadores para console.log. Si el navegador no es compatible con el objeto de la consola, la salida 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. Aplicar los métodos directamente al resultado. CÚPULA selección y el motor interno iterará apropiadamente a través de HTML elementos.

Puedes acceder ​«actual» en la iteración simp usando 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 HTML atributos:

// 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'});

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

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

Colocar CSS Estilos

Exactamente como HTML atributos, puede establecer y obtener CSS los valores a través 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 puedes ver, con los fuertes CSS método que puede:

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

Obtener y establecer HTML Contenido

Con html método que puede establecer y obtener los elementos HTML valor:

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

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

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

repetició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 desee trabajar con cada elemento manualmente, como al obtener contenido (por ejemplo, HTML contenido o contenido almacenado). En este caso, puede utilizar práctico para todo el mundo funciona 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');
});

El para todo el mundo la función es la forma preferida de iterar HTML colecciones de elementos usando DOMmy.js. Cuando se aplica a un elemento DOMmy.js, toma dos parámetros:

• elemento: El elemento DOMmy.js que seleccione. Puede aplicar 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, perteneciente a los elementos, donde puede almacenar tantos valores como desee y recuperarlos en el momento deseado. Puedes trabajar con el almacenamiento usando colocar y Lograr 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 elemento o varios elementos a la vez. Los artículos que almacenas pertenecen al artículo que seleccionas.

Nota: Tenga en cuenta que si selecciona varios elementos, el elemento se almacenará en cada uno de esos elementos, incluso si 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, para que pueda trabajar de manera segura con el almacenamiento y otros métodos DOMmy.js de manera consistente.

si almacenas CÚPULA elemento en una sola variable, que es la mejor manera de trabajar con HTML elementos, puede omitir llamadas simultáneas y ahorrar espacio en la memoria:

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

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

// get data
myEl.get('myStoredValue'); // 10

CSS3 animaciones

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

• un objeto, que representa CSS propiedad animada;
• 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 se complete la animación;
• un booleano que representa si encadenar las animaciones concurrentes o no. El valor predeterminado es falso.

Veamos cómo usar p.ej método, mediante la creación de dos animaciones simples.

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

Aquí simplemente modificamos CSS propiedades ancho y alto de #miel en el 2 segundos. En el siguiente ejemplo creamos la misma animación con una duración de 1 el segundo y con una función de devolución de llamada que editará HTML el contenido del elemento con ​«¡Listo!» cadena.

Puede acceder al elemento actual usando este palabra clave:

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

concatenación

Puedes crear magia con ​«encadenamiento de animación’: usando Verdadero como valor del cuarto parámetro, puedes encadenar tantas animaciones como quieras. Para hacer esto, use el método fx varias veces en un selector específico. En el siguiente ejemplo cambiamos el ancho de todo HTML elementos que coinciden con el selector «.myel» más de una vez:

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 junto. La estructura 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 en particular, debe configurar una devolución de llamada para esa animación.

Cree un controlador de eventos que active animaciones

Ahora, queremos configurar un fragmento para producir 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, un adecuado HTML el contenido se establecerá:

$('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, es muy fácil trabajar con DOMmy.js CSS3 animaciones Recuerda siempre esto este se refiere al elemento actual.

Ahora, queremos producir una animación encadenada que modifique CSS diseña un elemento en cuatro pasos diferentes utilizando cuatro devoluciones de llamada diferentes y activa esta animación cuando el usuario hace 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.