Navedite u JavaScript-u objašnjeno kuhanjem jednostavnog obroka

Ako ste ikada kuhali obrok kod kuće, tada možete razumjeti kako pisati kod s pomoću objektno orijentiranih metoda programiranja u JavaScript-u.

Kad započnete pisati jednostavne JavaScript programe, ne morate se brinuti o broju varijabli koje koristite ili o tome kako različite funkcije i objekti rade zajedno.

Na primjer, većina ljudi započinje korištenjem puno globalnih varijabli ili varijabli koje su obuhvaćene na najvišoj razini datoteke. Nisu dio niti jedne pojedinačne klase, predmeta ili funkcije.

Na primjer, ovo je globalna varijabla koja se naziva stanje :

let state = "global";

Ali kad vaš program počne uključivati ​​mnogo različitih funkcija i / ili objekata, morat ćete stvoriti rigorozniji skup pravila za svoj kod.

Tu nastupa koncept države. State opisuje status cijelog programa ili pojedinog objekta. To može biti tekst, broj, logička vrijednost ili druga vrsta podataka.

To je uobičajeni alat za koordinaciju koda. Na primjer, nakon što ažurirate stanje, hrpa različitih funkcija može trenutno reagirati na tu promjenu.

Ovaj članak opisuje stanje u kontekstu React-a, popularne JavaScript biblioteke.

Ali pogodite što? Čak i država može zadati glavobolju kad se vaš kod zakomplicira! Promjena stanja može prouzročiti neželjene posljedice.

Stanimo odmah. State je popularan alat u objektno orijentiranom programiranju ili OOP-u. Ali mnogi programeri preferiraju funkcionalno programiranje, koje obeshrabruje promjene stanja. JavaScript podržava obje paradigme.

Dobro, to je puno terminologije odjednom. Htio sam pronaći način da pokažem kako OOP i funkcionalno programiranje mogu postići iste ciljeve, čak i ako funkcionalno programiranje ne koristi stanje.

Ovaj će vodič pokazati kako možete skuhati obrok od špageta i umaka iz OOP-a i iz funkcionalne perspektive.

Evo kratkog pregleda dva različita pristupa:

Uskočimo u to. Da biste razumjeli ovaj vodič, samo trebate razumjeti funkcije i objekte u JavaScript-u.

Objektno orijentirana metoda (pomoću stanja)

Na gornjoj grafici prikazali smo dva različita pristupa pripremi ove večere od tjestenine:

  1. Metoda koja je usredotočena na stanje različitih alata, poput štednjaka, lonca i tjestenine.
  2. Metoda koja je usredotočena na napredovanje same hrane, bez spominjanja stanja pojedinog alata (lonci, šporeti itd.)

Objektno orijentirani pristup usredotočen je na ažuriranje stanja, tako da će naš kod imati stanje na dvije različite razine:

  1. Globalno, ili stanje cijelog ovog obroka.
  2. Lokalno za svaki objekt.

U ovom ćemo uputstvu koristiti sintaksu ES6 za stvaranje objekata. Evo primjera globalne države i prototipa "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'; }

Napomena: Pojednostavio sam console.logizjavu kako bih se usredotočio na ažuriranje stanja.

Evo vizualnog prikaza te logike:

Prije

Nakon

Postoje dva stanja i kada pastaPotse kreira putem Potprototipa, u početku ima prazno boilStatus. Ali onda, dolazi do promjene države.

Trčimo pastaPot.startBoiling(), a sada boilStatus(lokalna država) "kipi", budući da je globalna država stoveTemppreko 400.

Idemo sada korak dalje. Dopustit ćemo da tjestenina prokuha zbog stanja pastaPot.

Evo koda koji ćemo dodati u gornji isječak:

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! To je puno odjednom. Evo što se dogodilo.

  1. Stvorili smo novi prototip "tjestenine", gdje će svaki objekt imati lokalnu državu cookedStatus
  2. Stvorili smo novu instancu tjestenine pod nazivom myMeal
  3. Koristili smo državu iz pastaPotpredmeta koje smo stvorili u posljednjem isječak kako bi se utvrdilo ako mi treba ažurirati stanje zove cookedStatusu myMealse kuha.
  4. Budući da je stanje boilStatusu pastaPot"ključalo", naša je tjestenina sada kuhana!

Evo tog postupka vizualno:

Prije

Nakon

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.