Состояние в JavaScript объясняется приготовлением простой еды

Автор оригинала: FreeCodeCamp Community Member.

Кевином Кононенко

Если вы когда-либо готовили еду на дому, вы можете понять, как записать код, с помощью объектно-ориентированных методов программирования в JavaScript.

Когда вы начинаете написать простые программы JavaScript, вам не нужно беспокоиться о количестве переменных, которые вы используете, или насколько разные функции и объекты работают вместе.

Например, большинство людей начинаются с использованием много глобальных переменных или переменных, которые находятся на верхнем уровне файла. Они не являются частью любого отдельного класса, объекта или функции.

Например, это глобальная переменная под названием Государство :

let state = "global";

Но как только ваша программа начнет привлекать множество различных функций и/или объектов, вам нужно будет создать более строгий набор правил для вашего кода.

Это где концепция Государство вступает в игру. Государство описывает состояние всей программы или отдельный объект. Это может быть текст, число, логический или другой тип данных.

Это общий инструмент для координационного кода. Например, как только вы обновите состояние, куча разных функций может мгновенно реагировать на это изменение.

В этой статье описывается государство в контексте реагирования , популярная библиотека JavaScript.

Но угадайте, что? Даже государство может дать вам головные боли, как только ваш код усложняется! Изменение состояния может привести к непреднамеренным последствиям.

Давайте остановимся прямо там. Государство является популярным инструментом в объектно-ориентированном программировании или OOP. Но многие программисты предпочитают функциональное программирование, которое препятствует изменениям состояния. JavaScript поддерживает как парадигмы.

Хорошо, это много терминологии одновременно. Я хотел найти способ показать, как OOP и функциональное программирование могут выполнять те же цели, даже если функциональное программирование не использует состояние.

Этот учебник покажет, как вы можете приготовить еду спагетти и соус от ООП и функциональной перспективы.

Вот быстрый превью двух разных подходов:

Давайте прыгнем в него. Чтобы понять этот учебник, вам просто нужно понимать функции и объекты в JavaScript.

Объектно-ориентированный метод (с использованием состояния)

В графике выше, мы показали два разных подхода к созданию этого ужина в пасту:

1. Способ, который ориентирован на состояние различных инструментов, таких как плита, горшок и макароны.
2. Метод, который сосредоточен на прогрессировании самого пищи, без упоминания о состоянии отдельных инструментов (горшков, печей и т. Д.)

Объектно-ориентированный подход фокусируется на обновлении состояния, поэтому наш код будет иметь государство на двух разных уровнях:

1. Глобальный или состояние всей еды.
2. Локальный для каждого объекта.

Мы собираемся использовать синтаксис ES6 в этом руководстве для создания объектов. Вот пример глобального состояния и прототипа «горшка».

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

Примечание: Я упростил console.log утверждение, чтобы сосредоточиться на государственном обновлении.

Вот визуальное представление этой логики:

Перед

После

Есть два состояния, а когда Pastapot создается через Горшок Прототип, это изначально имеет пустую CourtStatus Отказ Но затем есть изменение состояния.

Мы бежим pastapot.startboiling () , а теперь CourtStatus (местное государство) – «кипячение», поскольку глобальное состояние STOVETEMP более 400.

Теперь давайте пойдем на шаг дальше. Мы позвольте макаронным макарям зарекомендовать из-за состояния Pastapot Отказ

Вот код, который мы добавим к фрагменту выше:

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

Вуа! Это много сразу. Вот что случилось.

1. Мы создали новый прототип «пасты», где каждый объект будет иметь местное состояние под названием вареньестатус
2. Мы создали новый экземпляр пасты под названием MyMeal
3. Мы использовали состояние из Pastapot Объект, который мы создали в последнем фрагменте, чтобы определить, следует ли нам обновить состояние под названием cookedstatus в MyMeal приготовить.
4. С государством CourtStatus в Pastapot Был «кипящий», наша паста теперь приготовлена!

Вот этот процесс визуально:

Перед

После

Итак, теперь у нас есть местное состояние одного объекта, что зависит от местного состояния другого объекта. И это местное государство зависело от какого-то глобального государства! Вы можете увидеть, как это может быть сложно. Но, по крайней мере, легко следовать, поскольку государства явно обновляются.

Функциональный метод (без состояния)

Чтобы полностью понять государство, вы сможете найти способ выполнить тот же результат, что и код выше, не модифицируя состояние. Вот где помогает функциональное программирование!

Функциональное программирование имеет два основных значения, которые отделяют его от OOP: неизменность и чистые функции.

Я не собираюсь идти в слишком много глубины на те темы, но если вы хотите узнать больше, я призываю вас к Проверьте это руководство по функциональному программированию в JavaScript.

Оба эти принципы обескураживают использование модификации состояния в вашем коде. Это означает, что мы не можем использовать местное или глобальное состояние.

Функциональное программирование вместо этого побуждает нас пройти параметры для отдельных функций. Мы можем использовать внешние переменные, но мы не можем использовать их как состояние.

Вот пример функции, которая кипятят макароны:

const stoveTemp = 500;

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

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

Этот код успешно вернет строку «приготовленного». Но обратите внимание, нет объекта, который мы обновляем. Функция просто возвращает значение, которое будет использоваться на следующем шаге.

Вместо этого мы сосредоточены на входах и выходах одной функции: Cookpasta Отказ

Эта перспектива смотрит на преобразование самой пищевой продукции, а не инструменты, которые используются для его приготовления. Это немного сложнее визуализировать, но нам не нужно, чтобы функция зависела от внешнего состояния.

Вот что похоже:

Подумайте об этом как об этом как «взгляд временной шкалы» для прогресса еды – эта конкретная функция просто охватывает первую часть, переход от сухой макарон для приготовления макаронных изделий.

Теперь давайте охвачем вторую часть, поскольку еда подается. Вот код, который будет служить еду. Он придет после блока кода выше:

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

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

Теперь мы доставляем результаты Cookpasta функционируйте непосредственно в Сервера функция. Опять же, мы можем сделать это без изменения состояния или изменения структур данных.

Вот диаграмма, которая использует «вид временной шкалы», чтобы показать, как эти две функции работают вместе:

Заинтересованы в более визуальных руководствах?

Если вам понравилось это руководство, дайте ему «хлопать»!

И если вы хотите прочитать больше визуальных учебных пособий о HTML, CSS и JavaScript, проверьте Основные коденалологии сайта на 50+ учебников.