polymer: 2. ciclo de vida y registro

En esta entrada veremos cómo se registran los custom elements en polymer y su ciclo de vida

Vincent Van Gogh

archivado en: JavaScript / 7 enero, 2016 / taller:

Eventos del lifecycle

Como vimos, los custom components tienen su propio «ciclo de vida» (lifecycle), esto es, una serie de eventos que se disparan en momentos clave, como la inserción en el dom (attachedCallback) o el cambio de un atributo (attributeChangedCallback), que podemos capturar mediante funciones callback.

Polymer permite manejar todos esos hitos en la vida de un custom element, pero con nombres más amables:

  • created: cuando se crea.
  • attached: cuando se inserta en el dom.
  • detached: cuando se quita.
  • atributeChanged: cuando cambia algún atributo.

Así, por ejemplo, retomando el componente <hola-mundo> que hicimos en la entrada anterior, podríamos cambiar el color de la fuente en el momento en que se inserta en el dom.

Polymer({

is: "hola-mundo",

attached: function() {

this.style.color = "#900"

}

});

Además, Polymer añade otros dos eventos propios que entenderemos mejor más adelante:

  • ready: cuando el elemento está en el dom y ya se ha configurado.
  • factoryImpl: cuando se crea un elemento utilizando un constructor.

Veamos en qué consisten.

factoryImpl

En javaScript es normal crear nodos al vuelo para insertarlos en algún sitio del dom y una manera habitual de hacerlo es combinando los métodos createElement() y appendChild(). Se crea el elemento, se hace algo con él, como darle algún estilo o definir su contenido, y luego se «cuelga», se inserta, en algún nodo que ya existe en el dom. Por ejemplo, así crearíamos un párrafo y lo insertaríamos en el body.

<script>

var miElemento = document.createElement("p");

miElemento.textContent = "Soy un párrafo creado al vuelo";

document.body.appendChild(miElemento);

</script>

En Polymer podemos usar los custom components de dos maneras. Una es como hemos visto, incluyendo el tag correspondiente en el dom.

<mi-elemento></mi-elemento>

Y otra es siguiendo esta técnica de insertar el nodo al vuelo, que podemos hacer a su vez de dos maneras. La forma más sencilla es justo como acabamos de ver con createElement():

<dom-module id="al-vuelo">

<template>

<p>Sic transit gloria mundi</p>

</template>

<script>

Polymer({

is: "al-vuelo"

});

/* Creamos un elemento */

var miElemento = document.createElement("al-vuelo");

/* Y lo appendeamos */

document.body.appendChild(miElemento);

</script>

</dom-module>

Y otra es usando una función constructora. Recordemos que esta manera de definir un objeto se caracteriza por crear instancias a partir de un objeto mediante la palabra reservada new y que cuando se instancia se pueden definir parámetros, de ahí que reciba el nombre de constructora.

var MiObjeto = function(a, b) {

this.miDevuelveSuma = function() {

var miVariable = 10;

return a+b+miVariable;

}

}

miInstancia = new MiObjeto(3, 4);

console.log(miInstancia.miDevuelveSuma()); // 17

En Polymer, decía, también podemos utilizar un objeto definiendo una instancia con una función constructora, que en este caso se recoge en el momento de instanciarse en el método factoryImpl. Esto se entiende mejor viendo directamente el código:

<dom-module id="al-vuelo">

<template>

<p>Sic transit gloria mundi</p>

</template>

<script>

/* Cacheamos el componente cuando lo creamos, gracias que el método polymer devuelve el propio componente (por convención, aquí usamos mayúsculas, como si fuera una clase) */

var MiComponente = Polymer({

is: "al-vuelo",

factoryImpl: function(cadena) {

this.textContent = cadena;

}

});

var miInstancia = new MiComponente("Timeo Danaos et dona ferentes");

document.body.appendChild(miInstancia);

</script>

</dom-module>

Orden de inicialización

No entraré ahora en detalle en el evento ready, pues para eso tendría que explicar varias cosas antes y esta entrada ya ha quedado bastante espesa, por lo que de momento vamos a quedarnos con que se dispara después de que el custom element haya sido insertado en el dom y todos sus posibles valores dinámicos se hayan definido. En cierta manera, equivale al final de las acciones que se ejecutarían en un $( document ).ready(...) de jQuery. Para entendernos con una marcianada de código:

$( document ).ready(function() {

// se inicializan datos

}).after(function() {

// el ready de polymer

});

Por lo tanto, la secuencia estándar del parto de un custom element sería esta:

  1. created: se crea.
  2. se crea el shadow dom del componente (local dom en polymeresco)
  3. ready: está listo e inicializado.
  4. factoryImpl: se crea una instancia.
  5. attached: se inserta en el dom.

Y a partir de ahí, pueden suceder dos cosas:

  1. attributeChanged: se cambia algún atributo (veremos esto en detalle más adelante).
  2. detached: se quita del dom.

Para terminar de entender esto podemos hacer un componente que recoja alguno de estos eventos. Algo así.

<dom-module id="life-cycle">

<template>

<h5>Ciclo de vida del componente</h5>

</template>

<script>

Polymer({

is: "life-cycle",

created: function() {

console.log( "created: " + Date.now() );

},

ready: function() {

console.log( "ready: " + Date.now() );

},

attached: function() {

console.log( "attached: " + Date.now() );

}

});

</script>

</dom-module>

Bueno, por hoy lo dejo aquí.

He subido todos los ejemplos de la entrada a github por si a alguien le interesa.

|| Tags: ,

valoración de los lectores sobre polymer: 2. ciclo de vida y registro

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (7 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!

2 respuestas a “polymer: 2. ciclo de vida y registro

  1. Hola,
    En primer lugar, felicidades por la magnífica explicación.

    Más que un comentario, es una pregunta.
    ¿Dónde puedo encontrar los argumentos que toma las funciones de los eventos lifecycles? Concretamente la función attibuteChanged? He visto ejemplos sin argumentos, con 2, con 3… Y quisiera conocer la documentación donde se explica. Gracias.

Aportar un comentario


*