Cómo mejorar sus habilidades de JavaScript escribiendo su propio marco de desarrollo web

Imagen de @ryoji__iwata de Unsplash

¿Alguna vez te has preguntado cómo funciona un marco?

Cuando descubrí AngularJS después de aprender jQuery hace muchos años, AngularJS me pareció magia oscura.

Luego salió Vue.js, y al analizar cómo funciona bajo el capó, me animé a intentar escribir mi propio sistema de enlace bidireccional.

En este artículo, le mostraré cómo escribir un marco JavaScript moderno con atributos de elementos HTML personalizados, reactividad y doble enlace.

¿Cómo funciona la reactividad?

Sería bueno comenzar con una comprensión de cómo funciona la reactividad. La buena noticia es que esto es simple. En realidad, cuando declaras un nuevo componente en Vue.js, el framework proxificará cada propiedad (getters y setters) usando el patrón de diseño proxy.

Por lo tanto, podrá detectar cambios en el valor de la propiedad tanto del código como de las entradas del usuario.

Aspecto del patrón de diseño proxy

La idea detrás del patrón proxy es simplemente sobrecargar el acceso a un objeto. Una analogía en la vida real podría ser el acceso a su cuenta bancaria.

Por ejemplo, no puede acceder directamente al saldo de su cuenta bancaria y cambiar el valor según sus necesidades. Es necesario que le pida a alguien que tenga este permiso, en este caso, su banco.

En el ejemplo anterior, cuando se utiliza el objeto bancario para acceder al saldo de la cuenta, la función de obtención se sobrecarga y siempre devuelve 9,000,000 en lugar del valor de la propiedad, incluso si la propiedad no existe.

Al sobrecargar la función set, es posible manipular su comportamiento. Puede cambiar el valor para establecer, actualizar otra propiedad en su lugar, o incluso no hacer nada en absoluto.

Ejemplo de reactividad

Ahora que está seguro de cómo funciona el patrón de diseño de proxy, comencemos a escribir nuestro marco de JavaScript.

Para simplificarlo, imitaremos la sintaxis AngularJS para hacerlo. Declarar un controlador y vincular elementos de plantilla a las propiedades del controlador es bastante sencillo.

Primero, defina un controlador con propiedades. Luego use este controlador en una plantilla. Finalmente, use el atributo ng-bind para habilitar el doble enlace con el valor del elemento.

Analizar plantilla e instanciar el controlador

Para tener propiedades para vincular, necesitamos obtener un lugar (también conocido como controlador) para declarar esas propiedades. Por lo tanto, es necesario definir un controlador e introducirlo en nuestro marco.

Durante la declaración del controlador, el marco buscará elementos que tengan atributos ng-controller.

Si encaja con uno de los controladores declarados, creará una nueva instancia de este controlador. Esta instancia de controlador solo es responsable de esta pieza particular de plantilla.

Así es como se ve la declaración variable de controladores hechos a mano. El objeto de controladores contiene todos los controladores declarados dentro del marco llamando a addController.

Definición de controladores hechos a mano

Para cada controlador, se guarda una función de fábrica para crear una instancia de un nuevo controlador cuando sea necesario. El marco también almacena cada una de las nuevas instancias del mismo controlador utilizado en la plantilla.

Buscando enlaces

En este punto, tenemos una instancia del controlador y una plantilla usando esta instancia.

El siguiente paso es buscar elementos con enlaces que usen propiedades de controlador.

Muy simple, almacena todos los enlaces de un objeto (usado como un mapa hash). Esta variable contiene todas las propiedades para vincular con el valor actual y todos los elementos DOM que vinculan esta propiedad.

Declaración de enlaces hechos a mano

Propiedades del controlador de doble enlace

Después de que el marco haya realizado el trabajo preliminar, ahora viene la parte interesante: doble enlace.

Implica vincular la propiedad del controlador a los elementos DOM para actualizar el DOM cada vez que el código actualiza el valor de la propiedad.

Además, no olvide vincular los elementos DOM a la propiedad del controlador. De esta manera, cuando el usuario cambia el valor de entrada, actualizará la propiedad del controlador. Luego, también actualizará todos los demás elementos vinculados a esta propiedad.

Detecta actualizaciones de código con un proxy

Como se explicó anteriormente, Vue envuelve los componentes dentro de un proxy para reaccionar a los cambios de propiedad. Hagamos lo mismo mediante la representación del configurador solo para las propiedades vinculadas del controlador.

Cada vez que se establece una propiedad vinculada, el proxy verificará todos los elementos vinculados a esta propiedad. Luego los actualizará con el nuevo valor.

En este ejemplo, solo admitimos el enlace de elementos de entrada, porque solo se establece el atributo de valor.

Reaccionar a eventos de elementos

Lo último que debe hacer es reaccionar a las interacciones del usuario. Los elementos DOM desencadenan eventos cuando detectan un cambio de valor.

Escuche esos eventos y actualice la propiedad vinculada con el nuevo valor del evento. Todos los demás elementos vinculados a la misma propiedad se actualizarán automáticamente gracias al proxy.

Una vez que reúnes todo, obtienes entradas de doble enlace hechas a mano. Aquí hay una demostración funcional que incluye todo el código.

Gracias por leer. Espero que te haya ayudado a desmitificar cómo funcionan los frameworks de JavaScript.

¡Felicidades! ¡Has desarrollado características populares como atributos de elementos HTML personalizados, reactividad y doble enlace!

Si encuentra útil este artículo, haga clic en el botón varias veces para que otros encuentren el artículo y muestren su apoyo.

No olvides seguirme para recibir notificaciones de mis próximos artículos

Mira mis otras publicaciones

https://medium.com/@jbardon/latest

➥ Reaccionar para principiantes

  • Una guía rápida para aprender a reaccionar y cómo funciona su DOM virtual
  • Cómo llevar la reactividad a reaccionar con los estados

➥ JavaScript

  • Errores comunes a evitar al trabajar con Vue.js
  • Detenga la depuración dolorosa de JavaScript y adopte Intellij con el mapa fuente
  • Cómo reducir enormes paquetes de JavaScript sin esfuerzo