de Zafar Saleem

Cum se efectuează operații CRUD folosind JavaScript vanilat

În zilele noastre există o serie de cadre JavaScript în jur, cum ar fi React, Angular, Vue și așa mai departe. Toate oferă o abordare simplă și ușoară către dezvoltarea de aplicații web, în ​​special SPA-uri.

Cu toate acestea, mulți cursanți JavaScript tind să înceapă să învețe aceste cadre și știu puțin despre cum să dezvolte aplicații similare în JavaScript vanilat.

Cum se efectueaza operatii CRUD folosind JavaScript vanilat

Una dintre cele mai de bază operațiuni în orice aplicație este CRUD (înseamnă Creați, Citiți, Actualizați, Ștergeți). Acesta este ceva ce vom realiza astăzi. Vom lua un exemplu vechi de bază și bun: o aplicație Todo.

Chiar dacă JavaScript vanilat va fi folosit pentru acest tutorial, vom folosi sintaxa ES6 în loc de sintaxa JavaScript simplă și veche. Pentru a realiza acest lucru, vom folosi transponderul babel pentru a converti ES6 / ES7 în ES5 și vom folosi webpack ca instrument de construire.

Presupun că aveți deja cea mai recentă versiune de node.js pe computer. Configurarea mediului nostru va dura ceva timp suplimentar, deci nu este nevoie să intrați în aceste detalii. Pur și simplu clonați codul meu de aici (https://github.com/zafar-saleem/hut) și rulați „npm install” pentru a instala toate dependențele.

Noile fișiere vor intra în folderul / src. Deci, creați un fișier nou numit Todo.js în folderul / src / scripts / și scrieți codul de mai jos în acel fișier.

După cum puteți vedea în codul de mai sus, creăm o clasă Todo, iar în cadrul clasei respective scriem o funcție constructor. Chiar dacă JavaScript nu are clase în mod implicit, ES6 are clase (care este, în realitate, zahăr sintactic deasupra prototipului JavaScript).

Acum, când creăm o nouă instanță a acestei clase utilizând noul cuvânt cheie, funcția constructor este apelată automat. Acolo vom adăuga câteva atribute clasei Todo la care vom putea accesa în toată această clasă folosind cuvântul cheie acest.

Acum că avem codul de mai sus, continuați și importați fișierul de mai sus în fișierul src / index.js și creați o nouă instanță din această clasă ca mai jos.

Acum avem un cod de bază în Todo.js. Avem nevoie, de asemenea, de câteva coduri html de bază. Scrieți codul de mai jos în fișierul index.html din folderul rădăcină.

Acum că avem codul html de bază, să revenim la Todo.js și să obținem referința la containerul nostru „.list-item”. Scrieți codul de mai jos în interiorul constructorului.

După ce am primit referința la elementul „.list-item”, apelez funcția de redare pentru a reda o listă de elemente pe ecran. Această funcție nu există încă, așa că o vom scrie în continuare.

Dar înainte de a scrie funcția de redare, avem nevoie de niște date simulate pe care le vom reda. Deci, în scopul acestui tutorial, vom folosi o serie de obiecte. Scrieți codul de mai jos în partea de sus a fișierului Todo.js.

Acum revenim la funcția de redare: mai jos este întreaga funcție de redare.

În această funcție ne asigurăm că containerul this.list este gol, adică nu dorim ca niciun articol să fie atașat articolelor existente. Prima linie pur și simplu face containerul gol înainte de a adăuga elemente noi.

În continuare, facem o buclă a matricei mockData pe care am creat-o în partea de sus a fișierului Todo.js folosind funcția forEach. În funcția forEach callback, mai întâi creăm câteva elemente DOM apelând createDomElements (item.id); funcție și trecem ID-ul articolului curent la acea funcție. Voi scrie această funcție în continuare, dar înainte de a ajunge acolo să terminăm de scris această funcție.

Odată ce creează noul element DOM (elementul li) cu elemente copil (butoane în acest caz), adaugă acel element li în clasa Todo ca atribut folosind cuvântul cheie „acest”. Acum putem accesa acel element li în întreaga clasă Todo, așa că accesez acel element li și adaug titlul folosind funcția insertAdjacentHTML ().

În continuare verific dacă elementul curent este finalizat sau terminat. Dacă este, atunci adaug o clasă la elementul curent li, care adaugă un stil liniar pe element.

Și, în cele din urmă, adaug acest element li la această listă.

Acum să scriem funcția createDomElements () care se află mai jos.

Această funcție pare să aibă o mulțime de cod, dar este ușor de înțeles. Pur și simplu creez elemente li, șterg, editez și completez butoane. Apoi adaug câteva clase la toate aceste butoane și setez atributul data-id și aloc ID-ul elementului curent pe care l-am trecut ca argument din funcția de redare. Apoi am pus text pe aceste butoane (Edit, Delete și Complete) folosind „innerHTML”.

În cele din urmă, adaug aceste butoane elementului li la care accesez ulterior în funcția de redare pentru a efectua operațiuni ulterioare.

Acum că avem structura de bază, dacă rulați npm rulați dev și mergeți la localhost: 2770 în browser, ar trebui să aveți elementele de mai jos, un câmp de intrare și un buton și patru elemente cu butoanele respective.

Până acum ar trebui să aveți partea „R” din CRUD – citesc toate elementele din mockData și le plasez pe ecran.

Acum, după ce ați terminat partea de citire, este timpul să începeți lucrul la partea C a CRUD. Scrieți o funcție numită creați și adăugați codul de mai jos.

Funcția Creați este destul de explicativă: tot ce face este să obțineți valoarea din câmpul de text. Se creează un obiect newItem cu atribute ID, titlu, terminat și dată.

În cele din urmă, împingeți noul element în matricea mockData și goliți câmpul text și apelați funcția de redare pentru a reda toate elementele cu elementul nou creat.

Acum, încercați acest lucru în browserul dvs. Introduceți un text în câmpul de text. Apăsați butonul Adăugare – dar nu vedeți nicio modificare. Acest lucru este de așteptat, deoarece există încă o ultimă parte în acest sens. Pur și simplu adăugați un ascultător de evenimente la butonul „adăugați” din interiorul constructorului și apelați funcția de creare după cum urmează:

Acum, încercați-l în browser și în voilà. Aveți noul articol în partea de jos a listei.

Două părți ale operațiunilor CRUD sunt finalizate. Următoarea este partea D care este Ștergere.

Pentru ștergerea unui articol, să scriem o funcție de eliminare (ștergerea este un cuvânt cheie rezervat în JavaScript și din acest motiv l-am numit eliminare) funcția de mai jos.

Această funcție este, de asemenea, destul de simplă: obțineți mai întâi id-ul din elementul buton de ștergere, care a fost adăugat în funcția createDomElements folosind atributul data-id. Filtrează prin mockData și plasează o verificare pe ID-ul elementului curent cu ID-ul butonului de ștergere. Această verificare returnează pur și simplu toate articolele, cu excepția articolului, această verificare revine adevărat.

După această operațiune, redați din nou toate elementele apelând funcția de redare din partea de jos.

Lucrurile arată bine, dar rețineți un minut: această funcție trebuie declanșată prin apelarea butonului de ștergere. După cum vă amintiți, acest buton a fost adăugat dinamic în funcția „createDomElements”. Adăugarea de evenimente la astfel de elemente este puțin dificilă. Deoarece aceste elemente nu au fost prezente la încărcarea DOM și au fost adăugate ulterior, adăugarea ascultătorului de evenimente direct la butoanele de ștergere, actualizare și completare nu va funcționa.

Pentru a face acest lucru, adăugați ascultătorul de evenimente la obiectul document și găsiți butonul special („ștergere” în acest caz) pentru a efectua operația de ștergere sau eliminare.

Pentru a apela eliminare, se folosește cuvântul auto. În cadrul funcției de apel invers, acest cuvânt cheie își pierde referința la clasa Todo. Din acest motiv, creați o nouă variabilă numită auto și atribuiți-i cuvântul cheie „acesta” în partea de sus a construcției.

În interiorul funcției de apel invers, verific dacă elementul de clic are o clasă „btn-delete” – adică este un buton de ștergere? Apoi, pur și simplu declanșați funcția de eliminare și treceți evenimentul ca parametru. Folosesc acest lucru în interiorul funcției de eliminare pentru a obține id-ul elementului curent făcut clic pentru a efectua operația de ștergere.

Partea Actualizare este ușor complicată. Se compune din două funcții. Primul este să redați formularul de editare, care are un câmp de text și un buton de actualizare. Al doilea este actualizarea funcției care efectuează operația de actualizare.

Tot ceea ce face codul de mai sus este să adăugați și să eliminați clase CSS pentru a afișa și ascunde formularul de editare care se află deja în DOM cu clasa de editare-pop-up. Obțineți ID-ul din butonul de editare și plasați-l pe butonul de actualizare. Iterează prin mockData și verifică elementul curent folosind id-ul acestuia. Puneți titlul elementului din mockData în câmpul text pentru a-l edita.

Pentru a declanșa această funcție, urmați aceeași logică pentru ștergere pentru a adăuga un ascultător de evenimente, astfel:

Acum este timpul să scrieți operațiunea de actualizare. Urmați codul de mai jos:

Primele 2 rânduri ale acestei funcții sunt de a obține id-ul articolului și valoarea din câmpul de text și de a le pune în variabilele lor respective. Apoi mapați prin mockData și plasați o verificare pentru a găsi elementul care trebuie actualizat pe baza id-ului. Odată ce acel element este găsit, înlocuiți titlul cu un nou titlu „itemTobeUpdate”. În cele din urmă returnați acel element actualizat de pe hartă.

Odată ce acțiunea a fost efectuată, ascundeți formularul de editare-popup prin adăugarea și eliminarea respectivelor clase CSS. Apoi, redați din nou mockData apelând funcția de redare.

Pentru a declanșa această funcție, adăugați codul de mai jos în interiorul constructorului.

Acum toate operațiunile CRUD au fost finalizate. Există un ultim pas care nu face parte din CRUD, ci face parte din aplicația Todo. Adică pentru a marca articolele ca terminate. Funcția de mai jos va realiza acest lucru.

Din nou, urmați același model ca și restul funcțiilor:

  • obțineți ID-ul din atributul data-id al butonului
  • mapează prin mockData și găsește elementul relevant și setează-i proprietatea făcută la adevărat și returnează acel element
  • în cele din urmă, redați din nou mockData apelând funcția de redare.

Din nou, utilizați aceeași logică pentru a declanșa funcția de ștergere și adăugați codul de mai jos în interiorul constructorului pentru a seta sarcinile finalizate.

Iată câteva CSS de bază pe care le-am folosit pentru acest tutorial – othing fancy.

Asta este pentru operațiunile CRUD cu vanilie JavaScript! Următorul pas este de a ascunde acest lucru într-o aplicație Angular și React pentru a vedea diferența și pentru a afla cât de convenabile sunt aceste cadre.

Pentru a obține codul și proiectul complet, clonați mai jos de depozit:

https://github.com/zafar-saleem/todo