Állapot JavaScript-ben egy egyszerű étel elkészítésével magyarázható

Ha valaha főzött ételt otthon, akkor megértheti, hogyan kell állapotfájlos kódot írni objektum-orientált programozási módszerekkel a JavaScript-ben.

Amikor elkezdi írni az egyszerű JavaScript programokat, akkor nem kell aggódnia a használt változók száma, illetve a különböző függvények és objektumok együttes működése miatt.

Például a legtöbb ember sok globális változó, vagy a fájl legfelső szintjére ható változók használatával indul. Nem tartoznak egyetlen osztályhoz, objektumhoz vagy funkcióhoz sem.

Például ez egy állapotnak nevezett globális változó :

let state = "global";

De ha a program számos különféle funkciót és / vagy objektumot tartalmaz, akkor szigorúbb szabálykészletet kell létrehoznia a kód számára.

Itt játszik szerepet az állam fogalma. Az állam leírja a teljes program vagy egy objektum állapotát. Lehet szöveg, szám, logikai érték vagy más adattípus.

Ez egy általános eszköz a kód koordinálására. Például az állapot frissítése után egy csomó különböző funkció azonnal reagálhat erre a változásra.

Ez a cikk az állapotot ismerteti a React, egy népszerű JavaScript könyvtár összefüggésében.

De tudod mit? Még az állam is fejfájást okozhat, ha a kódja bonyolulttá válik! Az állapot megváltozása nem szándékos következményeket okozhat.

Álljunk meg ott. Az állam az objektumorientált programozás (OOP) népszerű eszköze. De sok programozó inkább a funkcionális programozást részesíti előnyben, ami elriasztja az állapotváltozásokat. A JavaScript mindkét paradigmát támogatja.

Oké, ez sok terminológia egyszerre. Meg akartam találni egy módszert annak bemutatására, hogy az OOP és a funkcionális programozás miként képes elérni ugyanazokat a célokat, még akkor is, ha a funkcionális programozás nem használja az állapotot.

Ez az oktatóanyag megmutatja, hogyan főzhet spagettit és mártást egy OOP-ból és funkcionális szempontból.

Itt van egy gyors áttekintés a két különböző megközelítésről:

Ugorjunk bele. A bemutató megértéséhez csak meg kell értenie a JavaScript funkcióit és objektumait.

Objektumorientált módszer (állam használata)

A fenti ábrán két különböző megközelítést mutattunk be ennek a tészta vacsorának az elkészítéséhez:

  1. Olyan módszer, amely a különböző eszközök állapotára összpontosít, mint például a tűzhely, a fazék és a tészta.
  2. Olyan módszer, amely magának az ételnek a fejlődésére összpontosít, nem említve az egyes eszközök állapotát (edények, kályhák stb.)

Az objektum-orientált megközelítés az állapot frissítésére összpontosít, így kódunk két különböző állapotban lesz:

  1. Globális, vagy ennek az egész étkezésnek az állapota.
  2. Helyi minden objektumhoz.

Az oktatóanyagok ES6 szintaxisát fogjuk használni objektumok létrehozásához. Íme egy példa a globális állapotra és a „Pot” prototípusra.

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

Megjegyzés: Egyszerűsítettem az console.logállítást, hogy az állapotfrissítésre összpontosítsak.

A logika vizuális ábrázolása:

Előtt

Után

Két állapot van, és amikor pastaPota Potprototípus révén létrejön , akkor kezdetben üres boilStatus. De aztán állapotváltozás következik be.

Futunk pastaPot.startBoiling(), és most a boilStatus(helyi állam) „forral”, mivel a globális állapot stoveTempmeghaladja a 400-at.

Most menjünk egy lépéssel tovább. Hagyjuk, hogy a tészta felforrjon az állapot miatt pastaPot.

Itt van a kód, amelyet hozzáadunk a fenti részlethez:

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

Azta! Ez egyszerre sok. Itt történt.

  1. Létrehoztunk egy új „Tészta” prototípust, ahol minden objektumnak lesz egy helyi állam, az úgynevezett cookedStatus
  2. Létrehoztuk a Pasta új példányát myMeal
  3. Mi használt az állam a pastaPottárgy, amit teremtett az elmúlt kódrészlet annak meghatározására, hogy mi kell frissíteni az állam nevezett cookedStatusbe myMeala főtt.
  4. Mivel az állam boilStatusaz pastaPotvolt, „forró”, a tészta most főtt!

Ez a folyamat vizuálisan:

Előtt

Után

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.