Märkige JavaScriptis, selgitades lihtsa söögikorra valmistamist

Kui olete kunagi kodus toitu valmistanud, saate aru, kuidas kirjutada olekukoodi JavaScripti objektorienteeritud programmeerimismeetodite abil.

Lihtsate JavaScripti programmide kirjutamise alustamisel ei pea te muretsema kasutatavate muutujate arvu ega erinevate funktsioonide ja objektide koosmõju pärast.

Näiteks alustavad enamik inimesi paljudest globaalsetest muutujatest või muutujatest, mis on hõlmatud faili ülemisel tasemel. Need ei kuulu ühegi konkreetse klassi, objekti ega funktsiooni hulka.

Näiteks on see globaalne muutuja, mida nimetatakse olekuks :

let state = "global";

Kuid kui teie programm hakkab kaasama palju erinevaid funktsioone ja / või objekte, peate looma oma koodile rangemad reeglid.

Siin tuleb mängu riigi mõiste. Olek kirjeldab kogu programmi või üksiku objekti olekut. See võib olla tekst, arv, tõeväärtus või muu andmetüüp.

See on tavaline tööriist koodi koordineerimiseks. Näiteks kui olekut värskendate, saab hulk erinevaid funktsioone sellele muutusele koheselt reageerida.

Selles artiklis kirjeldatakse olekut populaarse JavaScripti teegi React kontekstis.

Aga arvake ära? Isegi kui riik võib teile peavalu valmistada, kui teie kood muutub keeruliseks! Oleku muutmine võib põhjustada soovimatuid tagajärgi.

Peatume sealsamas. Osariik on populaarne tööriist objektorienteeritud programmeerimisel ehk OOP. Kuid paljud programmeerijad eelistavad funktsionaalset programmeerimist, mis pärsib olekumuutusi. JavaScript toetab mõlemat paradigmat.

Olgu, see on korraga palju terminoloogiat. Tahtsin leida viisi, kuidas näidata, kuidas OOP ja funktsionaalne programmeerimine suudavad saavutada samu eesmärke, isegi kui funktsionaalne programmeerimine ei kasuta olekut.

See õpetus näitab, kuidas võiksite spagettidest ja kastmest sööki valmistada OOP-st ja funktsionaalsest vaatenurgast.

Siin on kiire ülevaade kahest erinevast lähenemisviisist:

Hüppame sellesse. Selle õpetuse mõistmiseks peate lihtsalt mõistma JavaScripti funktsioone ja objekte.

Objektorienteeritud meetod (olekut kasutades)

Ülaloleval graafikul näitasime selle pastaõhtusöögi valmistamiseks kahte erinevat lähenemist:

  1. Meetod, mis keskendub erinevate tööriistade olekule, nagu pliit, pott ja pasta.
  2. Meetod, mis on keskendunud toidu enda progresseerumisele, mainimata üksikute tööriistade (potid, pliidid jne) olekut

Objektorienteeritud lähenemine keskendub oleku värskendamisele, seega on meie koodi olek kahel erineval tasemel:

  1. Globaalne ehk kogu selle söögikorra olek.
  2. Iga objekti jaoks lokaalne.

Objektide loomiseks kasutame selles õpetuses ES6 süntaksit. Siin on näide globaalsest riigist ja "Pot" prototüübist.

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'; }

Märkus. Lihtsustasin console.logavaldust, et keskenduda olekuvärskendusele.

Siin on selle loogika visuaalne esitus:

Enne

Pärast

On kaks olekut ja kui prototüübi pastaPotkaudu luuakse Pot, on sellel esialgu tühi boilStatus. Kuid siis toimub olekumuutus.

Me jookseme pastaPot.startBoiling()ja nüüd boilStatus(kohalik riik) „keeb“, kuna globaalne riik stoveTempon üle 400.

Nüüd läheme veel ühe sammu edasi. Me laseme makaronil oleku tõttu keeda pastaPot.

Siin on kood, mille lisame ülaltoodud koodilõigule:

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! Seda on korraga palju. Juhtus nii.

  1. Lõime uue "Pasta" prototüübi, kus igal objektil on kohalik riik cookedStatus
  2. Lõime Pasta uue eksemplari nimega myMeal
  3. Me kasutasime olekusse pastaPotobjekti, mida me loodud viimase snippet teha kindlaks, kas peaksime uuendada riigi nimega cookedStatussisse myMealkeedetud.
  4. Kuna seisund boilStatuson pastaPotolnud "keeb", meie pasta on nüüd keedetud!

Siin on see protsess visuaalselt:

Enne

Pärast

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:

Mõelge sellele kui söögikordade edenemise „ajaskaalavaatele” - see konkreetne funktsioon hõlmab lihtsalt esimest osa, üleminekut kuivast pastast keedetud pastale.

Nüüd kajastame teist osa, kui toitu serveeritakse. Siin on kood, mis sööki serveerib. See tuleb pärast ülaltoodud koodiplokki:

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

Nüüd edastame cookPastafunktsiooni tulemused otse serveMealfunktsiooni. Jällegi oleme võimelised seda tegema ilma olekut muutmata või andmestruktuure muutmata.

Siin on diagramm, mis kasutab ajaskaala vaadet, et näidata, kuidas need kaks funktsiooni koos töötavad:

Kas olete huvitatud visuaalsematest õpetustest?

Kui teile see juhend meeldis, andke sellele „plaks“!

Ja kui soovite lugeda rohkem visuaalseid õpetusi HTML-i, CSS-i ja JavaScripti kohta, vaadake CodeAnalogies peamist saiti 50 + õpetuse jaoks.