de Kevin Kononenko

Afirmați în JavaScript explicat prin prepararea unei mese simple

Dacă ați gătit vreodată o masă acasă, atunci puteți înțelege cum să scrieți un cod de stare folosind metode de programare orientate obiect în JavaScript.

Când începeți să scrieți programe JavaScript simple, nu trebuie să vă faceți griji cu privire la numărul de variabile pe care le utilizați sau la modul în care funcțiile și obiectele diferite funcționează împreună.

De exemplu, majoritatea oamenilor încep folosind o mulțime de variabile globale sau variabile care sunt cuprinse la nivelul superior al fișierului. Nu fac parte din nicio clasă, obiect sau funcție individuală.

De exemplu, aceasta este o variabilă globală numită stat:

let state = "global";

Dar odată ce programul dvs. începe să implice multe funcții și / sau obiecte diferite, va trebui să creați un set de reguli mai riguros pentru codul dvs.

Aici se află conceptul de stat intră în joc. Statul descrie starea întregului program sau a unui obiect individual. Poate fi text, un număr, un boolean sau un alt tip de date.

Este un instrument comun pentru coordonarea codului. De exemplu, odată ce actualizați starea, o grămadă de funcții diferite pot reacționa instantaneu la această modificare.

Acest articol descrie starea în contextul React, o populară bibliotecă JavaScript.

Dar ghicește ce? Chiar și starea vă poate da dureri de cap odată ce codul dvs. se complică! Schimbarea stării poate provoca consecințe neintenționate.

Să ne oprim chiar acolo. State este un instrument popular în programarea orientată pe obiecte sau OOP. Dar mulți programatori preferă programarea funcțională, care descurajează schimbările de stare. JavaScript acceptă ambele paradigme.

Bine, asta este o mulțime de terminologie deodată. Am vrut să găsesc o modalitate de a arăta cum modul OOP și programarea funcțională pot atinge aceleași obiective, chiar dacă programarea funcțională nu folosește starea.

Acest tutorial va arăta cum puteți găti o masă de spaghete și sos dintr-o perspectivă funcțională și OOP.

Iată o previzualizare rapidă a celor două abordări diferite:

Să sărim în el. Pentru a înțelege acest tutorial, trebuie doar să înțelegeți funcțiile și obiectele din JavaScript.

Metodă orientată pe obiecte (folosind starea)

În graficul de mai sus, am arătat două abordări diferite pentru a face această cină cu paste:

1. O metodă care se concentrează pe starea diferitelor instrumente, cum ar fi aragazul, oala și pastele.
2. O metodă care se concentrează pe progresia alimentelor în sine, fără menționarea stării instrumentelor individuale (oale, sobe etc.)

Abordarea orientată pe obiecte se concentrează pe actualizarea stării, astfel încât codul nostru va avea starea la două niveluri diferite:

1. Global sau starea întregii mese.
2. Local pentru fiecare obiect.

Vom folosi sintaxa ES6 în acest tutorial pentru a crea obiecte. Iată un exemplu de stare globală și prototipul „Pot”.

let stoveTemp = 500;

function Pot(){  this.boilStatus="";  this.startBoiling = function(){    if( stoveTemp > 400)      this.boilStatus = "boiling";  }}

let pastaPot = new Pot();pastaPot.startBoiling();

console.log(pastaPot);// Pot { boilStatus="boiling"; }

Notă: Am simplificat console.log declarație pentru a se concentra asupra actualizării de stat.

Iată o reprezentare vizuală a acestei logici:

Inainte de

După

Există două stări și când pastaPot este creat prin Pot prototip, are inițial un gol boilStatus. Dar apoi, există o schimbare de stat.

Noi fugim pastaPot.startBoiling(), iar acum boilStatus (statul local) „fierbe”, din moment ce starea globală a stoveTemp este peste 400.

Acum hai să facem un pas mai departe. Vom permite ca pastele să fie fierte din cauza stării de pastaPot.

Iată codul pe care îl vom adăuga la fragmentul de mai sus:

function Pasta (){  this.cookedStatus = false;  this.addToPot = function (boilStatus){    if(boilStatus == "boiling")      this.cookedStatus = true;  }}

let myMeal = new Pasta();myMeal.addToPot(pastaPot.boilStatus);

console.log(myMeal.cookedStatus);// true

Woah! Asta e mult deodată. Iată ce s-a întâmplat.

1. Am creat un nou prototip de „Pasta”, unde fiecare obiect va avea un stat local numit cookedStatus
2. Am creat o nouă instanță de Pasta numită myMeal
3. Am folosit statul din pastaPot obiect pe care l-am creat în ultimul fragment pentru a determina dacă ar trebui să actualizăm starea apelată cookedStatus în myMeal la gătit.
4. De când starea de boilStatus în pastaPot a „fiert”, pastele noastre sunt acum fierte!

Iată acest proces vizual:

Inainte de

După

Deci, avem acum starea locală a unui obiect, care depinde de starea locală a unui alt obiect. Și acel stat local depindea de un stat global! Puteți vedea cum poate fi o provocare. Dar, este cel puțin ușor de urmărit deocamdată, deoarece stările sunt actualizate în mod explicit.

Metoda funcțională (fără stare)

Pentru a înțelege pe deplin starea, ar trebui să puteți găsi o modalitate de a obține același rezultat ca și codul de mai sus, fără a modifica de fapt starea. Aici ajută programarea funcțională!

Programarea funcțională are două valori de bază care o separă de OOP: imuabilitatea și funcțiile pure.

Nu am de gând să aprofundez prea mult aceste subiecte, dar dacă doriți să aflați mai multe, vă încurajez să faceți acest lucru consultați acest ghid de programare funcțională în JavaScript.

Ambele principii descurajează utilizarea modificării stării în codul dvs. Asta înseamnă că nu putem folosi statul local sau global.

Programarea funcțională ne încurajează în schimb să trecem parametrii la funcții individuale. Putem folosi variabile externe, dar nu le putem folosi ca stare.

Iată un exemplu de funcție care va fierbe pastele:

const stoveTemp = 500;

const cookPasta = (temp) => {  if(temp > 400)    return 'cooked';}

console.log(cookPasta(stoveTemp));// 'cooked'

Acest cod va returna cu succes un șir de „gătit”. Dar observați – nu există niciun obiect pe care îl actualizăm. Funcția returnează pur și simplu valoarea care va fi utilizată în pasul următor.

În schimb, ne concentrăm pe intrările și ieșirile unei funcții: cookPasta.

Această perspectivă privește transformarea alimentelor în sine, mai degrabă decât instrumentele folosite pentru a le găti. Este puțin mai greu de vizualizat, dar nu este nevoie ca funcția să depindă de starea externă.

Iată cum arată:

Gândiți-vă la aceasta ca la o „vedere cronologică” pentru progresul mesei – această funcție specială acoperă doar prima parte, trecerea de la pastele uscate la pastele fierte.

Acum să acoperim a doua parte, pe măsură ce mâncarea este servită. Iată codul care va servi masa. Va veni după blocul de cod de mai sus:

const serveMeal = (pasta) => { if (pasta == 'cooked')   return 'Dinner is ready.'}

console.log( serveMeal(cookPasta(stoveTemp)) );// 'Dinner is ready.'

Acum, oferim rezultatele cookPasta funcționează direct în serveMeal funcţie. Din nou, putem face acest lucru fără a schimba starea sau a schimba structurile de date.

Iată o diagramă care folosește „vizualizarea cronologiei” pentru a arăta cum funcționează împreună aceste două funcții:

Vă interesează mai multe tutoriale vizuale?

Dacă ți-a plăcut acest ghid, dă-i „palme”!

Și, dacă doriți să citiți mai multe tutoriale vizuale despre HTML, CSS și JavaScript, consultați site-ul principal CodeAnalogies pentru peste 50 de tutoriale.