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 codul 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ă stare :

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 intră în joc conceptul de stat. 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 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.logdeclarația pentru a mă concentra asupra actualizării de stare.

Iată o reprezentare vizuală a acestei logici:

Inainte de

După

Există două stări și atunci când pastaPoteste creat prin intermediul Potprototipului, acesta are inițial un gol boilStatus. Dar apoi, există o schimbare de stat.

Alergăm pastaPot.startBoiling(), iar acum boilStatus(statul local) „fierbe”, întrucât starea globală stoveTempeste de 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 starea de pastaPotobiect pe care am creat în ultimul fragment pentru a determina dacă ar trebui să actualizeze statul chemat cookedStatusîn myMealla gătit.
  4. Deoarece starea boilStatusîn pastaPotera „fierbere“, pastele noastre este acum fierte!

Iată acest proces vizual:

Inainte de

După

So, we now have the local state of one object, that depends on the local state of another object. And that local state depended on some global state! You can see how this can be challenging. But, it is at least easy to follow for now, since states are updated explicitly.

Functional Method (without state)

In order to fully understand state, you should be able to find a way to accomplish the same outcome as the code above without actually modifying state. This is where functional programming helps!

Functional programming has two core values that separate it from OOP: immutability and pure functions.

I am not going to go into too much depth on those topics, but if you want to learn more, I encourage you to check out this guide to functional programming in JavaScript.

Both of these principles discourage the use of state modification in your code. That means that we can’t use local or global state.

Functional programming instead encourages us to pass in parameters to individual functions. We can use outside variables, but we can’t use them as state.

Here’s an example of a function that will boil the pasta:

const stoveTemp = 500;
const cookPasta = (temp) => { if(temp > 400) return 'cooked';}
console.log(cookPasta(stoveTemp));// 'cooked'

This code will successfully return a string of ‘cooked’. But notice — there is no object that we are updating. The function simply returns the value that will be used in the next step.

Instead, we are focused on the inputs and outputs of one function: cookPasta.

This perspective looks at the transformation of the food itself, rather than the tools that are used to cook it. It’s a little harder to visualize, but we don’t need to have the function depend on external state.

Here’s what it looks like:

Think of it as a “timeline view” for the progress of the meal — this particular function just covers the first part, the transition from dry pasta to cooked pasta.

Now let’s cover the second part as the food is served. Here’s the code that will serve the meal. It will come after the code block above:

const serveMeal = (pasta) => { if (pasta == 'cooked') return 'Dinner is ready.'}
console.log( serveMeal(cookPasta(stoveTemp)) );// 'Dinner is ready.'

Now, we are delivering the results of the cookPasta function directly into the serveMeal function. Again, we are able to do this without changing state, or changing data structures.

Here’s a diagram that uses the “timeline view” to show how these two functions work together:

Interested In More Visual Tutorials?

If you enjoyed this guide, give it a “clap”!

And, if you would like to read more visual tutorials about HTML, CSS and JavaScript, check out the main CodeAnalogies site for 50+ tutorials.