Cómo realizar operaciones CRUD usando JavaScript vanilla

Hoy en día hay una serie de marcos de JavaScript como React, Angular, Vue, etc. Todos ofrecen un enfoque simple y fácil para el desarrollo de aplicaciones web, especialmente SPA.

Sin embargo, muchos estudiantes de JavaScript tienden a comenzar a aprender estos marcos y saben poco sobre cómo desarrollar aplicaciones similares en JavaScript vanilla.

Una de las operaciones más básicas en cualquier aplicación es CRUD (siglas de Create, Read, Update, Delete). Esto es algo que vamos a lograr hoy. Tomaremos un ejemplo básico y bueno: una aplicación Todo.

Aunque se usará JavaScript vanilla para este tutorial, usaremos la sintaxis ES6 en lugar de la sintaxis simple de JavaScript. Para lograr eso, usaremos el transpilador babel para convertir ES6 / ES7 a ES5, y usaremos webpack como herramienta de construcción.

Supongo que ya tiene la última versión de node.js en su computadora. La configuración de nuestro entorno llevará más tiempo, por lo que no es necesario entrar en estos detalles. Simplemente clone mi código repetitivo desde aquí (//github.com/zafar-saleem/hut) y ejecute "npm install" para instalar todas las dependencias.

Los nuevos archivos irán a la carpeta / src. Así que cree un nuevo archivo llamado Todo.js dentro de la carpeta / src / scripts / y escriba el siguiente código en ese archivo.

Como puede ver en el código anterior, estamos creando una clase Todo, y dentro de esa clase estamos escribiendo una función constructora. Aunque JavaScript no tiene clases por defecto, ES6 tiene clases (que es, en realidad, azúcar sintáctico sobre el prototipo de JavaScript).

Ahora, cuando creamos una nueva instancia de esta clase usando la nueva palabra clave, la función constructora se llama automáticamente. Ahí es donde agregaremos algunos atributos a la clase Todo a los que podremos acceder en toda esta clase usando la palabra clave this .

Ahora que tenemos el código anterior, siga adelante e importe el archivo anterior en el archivo src / index.js y cree una nueva instancia de esta clase como a continuación.

Ahora tenemos un código básico en Todo.js. También necesitamos algo de código html básico. Escriba el siguiente código en el archivo index.html en la carpeta raíz.

Ahora que tenemos el código html básico, volvamos a Todo.js y obtengamos la referencia a nuestro contenedor '.list-item'. Escribe el siguiente código dentro del constructor.

Después de obtener la referencia al elemento ".list-item", estoy llamando a la función de renderizado para representar una lista de elementos en la pantalla. Esta función aún no existe, así que la vamos a escribir a continuación.

Pero antes de escribir la función de renderizado, necesitamos algunos datos simulados que vamos a renderizar. Entonces, para el propósito de este tutorial, usaremos una matriz de objetos. Escriba el siguiente código en la parte superior del archivo Todo.js.

Ahora volvamos a la función de renderizado: a continuación se muestra toda la función de renderizado.

En esta función nos aseguramos de que el contenedor this.list esté vacío, es decir, no queremos que se agregue ningún elemento a los elementos existentes. La primera línea simplemente vacía el contenedor antes de agregar nuevos elementos.

A continuación, estamos haciendo un ciclo de la matriz mockData que creamos en la parte superior del archivo Todo.js usando la función forEach. Dentro de la función de devolución de llamada forEach, primero estamos creando algunos elementos DOM llamando a createDomElements (item.id); función, y estamos pasando la identificación del elemento actual a esa función. Escribiré esta función a continuación, pero antes de llegar, terminemos de escribir esta función.

Una vez que crea el nuevo elemento DOM (el elemento li) con elementos secundarios (botones en este caso), agrega ese elemento li a la clase Todo como un atributo usando la palabra clave "this". Ahora podemos acceder a ese elemento li en toda la clase Todo, así que estoy accediendo a ese elemento li y agregando el título usando la función insertAdjectedHTML ().

A continuación, estoy comprobando si el elemento actual está completo o hecho. Si es así, agrego una clase al elemento li actual que agrega un estilo de línea continua en el elemento.

Y finalmente agrego ese elemento li a this.list.

Ahora escribamos la función createDomElements () que se encuentra a continuación.

Esta función parece tener mucho código, pero es fácil de entender. Simplemente creo elementos li, elimino, edito y completo botones. Luego agrego algunas clases a todos estos botones y establezco el atributo data-id y asigno la identificación del elemento actual que pasamos como argumento de la función de renderizado. Luego coloco texto en estos botones (Editar, Eliminar y Completar) usando "innerHTML".

Finalmente, agrego estos botones al elemento li al que luego accedo en la función de renderizado para realizar más operaciones.

Ahora que tenemos la estructura básica, si ejecuta npm run dev y va a localhost: 2770 en el navegador, debería tener los siguientes elementos, un campo de entrada y un botón, y cuatro elementos con sus respectivos botones.

Hasta ahora, debería tener la parte "R" de CRUD. Estoy leyendo todos los elementos de mockData y colocándolos en la pantalla.

Ahora que la parte de lectura está lista, es hora de comenzar a trabajar en la parte C de CRUD. Escriba una función llamada crear y agregue el siguiente código.

La función Crear se explica por sí misma: todo lo que hace es obtener el valor del campo de texto. Crea un objeto newItem con atributos ID, título, terminado y fecha.

Finalmente, inserte ese elemento nuevo en la matriz mockData, vacíe el campo de texto y llame a la función de renderizado para representar todos los elementos con el elemento recién creado.

Ahora sigue adelante, prueba esto en tu navegador. Pon algo de texto en el campo de texto. Presione el botón Agregar, pero no verá ningún cambio. Eso es lo esperado, porque todavía hay una última parte de esto. Simplemente agregue un detector de eventos al botón "agregar" dentro del constructor y llame a la función de creación como se muestra a continuación:

Ahora pruébalo en tu navegador y listo. Tiene el nuevo elemento al final de la lista.

Se completan dos partes de las operaciones CRUD. La siguiente es la parte D, que es Eliminar.

Para eliminar un elemento, escriba una función de eliminación (eliminar es una palabra clave reservada en JavaScript y por esa razón la llamé eliminar) a continuación.

Esta función también es bastante simple: primero obtenga la identificación del elemento del botón de eliminación, que se agregó en la función createDomElements usando el atributo data-id. Filtre a través de mockData y marque la identificación del elemento actual con la identificación del botón de eliminar. Esta verificación simplemente devuelve todos los elementos excepto el elemento que esta verificación devuelve verdadero.

Después de esta operación, vuelva a renderizar todos los elementos llamando a la función render en la parte inferior.

Las cosas se ven bien, pero espere un minuto: esta función debe activarse llamando al botón Eliminar. Como recordará, este botón se agregó dinámicamente en la función "createDomElements". Agregar eventos a tales elementos es un poco complicado. Dado que estos elementos no estaban presentes cuando se cargó el DOM y se agregaron más tarde, agregar el detector de eventos directamente a los botones eliminar, actualizar y completar no funcionará.

Para que esto suceda, agregue el detector de eventos al objeto del documento y busque el botón en particular ("eliminar" en este caso) para realizar la operación de eliminación o eliminación.

Para llamar a eliminar, se utiliza la palabra propia. Dentro de la función de devolución de llamada, la palabra clave this pierde su referencia a la clase Todo. Por esa razón, cree una nueva variable llamada self y asígnele la palabra clave "this" en la parte superior de la construcción.

Dentro de la función de devolución de llamada, verifico si el elemento de clic tiene una clase 'btn-delete', es decir, ¿es un botón de eliminación? Luego, simplemente active la función de eliminación y pase el evento como parámetro. Utilizo esto dentro de la función de eliminación para obtener la identificación del elemento actual en el que se hizo clic para realizar la operación de eliminación.

La parte de Actualización es un poco complicada. Consta de dos funciones. La primera es renderizar el formulario de edición, que tiene un campo de texto y un botón de actualización. El segundo es actualizar la función que realiza la operación de actualización.

Todo lo que hace el código anterior es agregar y eliminar clases CSS para mostrar y ocultar el formulario de edición que ya está en el DOM con la clase emergente de edición. Obtenga la identificación del botón de edición y colóquela en el botón de actualización. Itere a través de mockData y verifique el elemento actual usando su id. Coloque el título del elemento de mockData en el campo de texto para editarlo.

Para activar esta función, siga la misma lógica para eliminar para agregar un detector de eventos, como este:

Ahora es el momento de escribir la operación de actualización. Siga el código a continuación:

Las primeras 2 líneas de esta función son para obtener la identificación del elemento y el valor del campo de texto y ponerlos en sus respectivas variables. Luego, mapee a través de mockData y marque para encontrar el elemento que debe actualizarse en función de la identificación. Una vez que se encuentra ese elemento, reemplace el título con un nuevo título "itemTobeUpdate". Finalmente, devuelva ese elemento actualizado del mapa.

Una vez realizada esa operación, oculte el formulario emergente de edición agregando y eliminando las respectivas clases de CSS. Luego vuelva a renderizar mockData llamando a la función render.

Para activar esta función, agregue el siguiente código dentro del constructor.

Ahora se han completado todas las operaciones CRUD. Hay un último paso que no es parte de CRUD pero es parte de la aplicación Todo. Eso es para marcar elementos como completados. La siguiente función logrará esto.

Nuevamente, siga el mismo patrón que el resto de funciones:

  • obtener la identificación del atributo de identificación de datos del botón
  • mapee a través de mockData y encuentre el elemento relevante y establezca su propiedad done en verdadero y devuelva ese elemento
  • finalmente, vuelva a renderizar mockData llamando a la función render.

Nuevamente, use la misma lógica para activar la función de eliminación y agregue el siguiente código dentro del constructor para establecer las tareas como completadas.

Aquí hay algo de CSS básico que utilicé para este tutorial: algo elegante.

¡Eso es todo para las operaciones CRUD de JavaScript vanilla! El siguiente paso es convertir esto en una aplicación Angular y React para ver la diferencia y descubrir qué tan convenientes son tales marcos.

Para obtener el código y el proyecto completo, clone el siguiente repositorio:

//github.com/zafar-saleem/todo