Declarative rendering con JavaScript

4/37
Recursos

Aportes 14

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Existe un patrón de diseño llamado Observer que vemos en el Curso Profesional de JavaScript que puede ayudar a aplicar un tipo de observador de cambios a algún elemento y actualizar el estado de la aplicación en dado caso en que lo hagamos con Vanilla JavaScript.
.
El evento input ayuda a detectar cuando un usuario está introduciendo información en un campo de texto.
.
Dejo mi código 👀:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">

        <span></span>
        <input type="text">
        
    </div>

    <script>

        const data = {
            message: "Hola mundo"
        }

        const span = document.querySelector("span");
        span.innerText = data.message;

        const input = document.querySelector("input");
        input.value = data.message;

        input.addEventListener("input", () => {
            data.message = input.value;
            span.innerText = data.message;
        })

    </script>
    
</body>
</html>

Tema de Vscode del profesor: Moonlight II

Plugins recomendados para Vue js
Vue VSCode Snippets
vue-beautify
vue-format
vue-helper

Con vanilla podemos simular reactividad, para esto hacemos uso de addEventListener que nos permite registrar eventos a un elemento y que este reaccione según el comportamiento que se esta observando. Para esto normalmente pasamos dos parámetros, el primero de ellos es el tipo de evento que escucharemos, en esta clase vimos el evento input que detecta cuando un campo esta recibiendo información, existen otros eventos aparte de este. Y el segundo parámetro es conocido como listener que generalmente es una función que ejecuta una serie de instrucciones según nuestras necesidades, en nuestro caso actualizar el contenido de nuestro HTML. Adjunto parte del Javascript escrito en esta clase

<script>
    const data = {
      message: "Hola Mundo"
    };

    const span = document.querySelector("span");
    span.innerText = data.message;

    const input = document.querySelector("input");
    input.value = data.message;

    input.addEventListener("input", () => {
      data.message = input.value;
      span.innerText = data.message;
    });
 </script>

Está interesante el proceso de suscripción de eventos u Observe Pattern:

Y el echo es muy simple de analizar porque tenemos:

  • Un Sujeto, el encargo de comunicar que hay un evento.
  • Una Liste de observadores, los cuales son los encargados de notificar que hay un evento.
  • Los Observadores, los encargados de ejecutar un evento.
    Visto en nuestro código:
const span = document.querySelector("span"); // Observer
const input = document.querySelector("input"); // Subject
// Pattern Logic
input.addEventListener("input", ( ) => {
	data.message = input.value;
	span.innerText = data.message;
});

Dejo este recurso que les puede servir a algunos.

https://vue-native.io/declarative.html

Una alternativa a “npx http-server .” es utilizar el plugin Live Server en visual studio code. Este plugin es super fácil de usar y cuenta con hot reload.

Buena clase! A seguir!

⭐⭐⭐⭐⭐

Madre mia, por fin un buen curso. Este es de esos cursos que son como tesoritos dentro de platzi.

Esta muy bueno el curso, lastima que la apntalla del profe se ve muy pequeña y desde movil no se aprecia bien

Por si no les corre el comando

npx http-server

pueden usar:

npm install --global http-server

La sintaxis de addEventListener es muy sencilla:

elemento_que_se_escucha.addEventListener('evento',función_a_lanzar,booleano);

npx utilidad de npm y Node que permite ejecutar scripts de manera remota, y el comando http-server permite ejecutar un servidor de HTTP en el directorio en el que nos encontramos:

npx http-server .

Samuel Esta extensión la hiciste tú?