Что такое императивное и декларативное программирование?

Давайте расшифруем эти два понятия
Что такое императивное программирование по сравнению с декларативным? Существует множество логических примеров того, как это работает. Самое популярное объяснение этих двух понятий: императивное — это то, как вы что-то делаете, а декларативное — то, что вы хотите сделать. Эти примеры могут быть непонятны, если вы новичок в программировании или даже опытный инженер. Поэтому я хотел бы углубиться в различие между этими двумя понятиями. Большинство профессиональных инженеров объясняют императивное программирование тем, что вы думаете, как ваш компьютер. В то время как декларативное делает синтаксис программирования более удобным для пользователя. Яркий пример — разница между Vanilla JavaScript и ReactJS. Давайте посмотрим на это ниже.

В этом примере мы создадим список на JavaScript и добавим его в DOM. Что рассматривается как
императивный способ выполнения. Он выполняется шаг за шагом в определенном порядке. Как только каждый шаг выполнен, ТОГДА вы получаете результат.


// Vanilla JavaScript

addButton.addEventListener(“click”, function() {

 const input = document.getElementById(“item-input”);

 console.log(input.value);

 const list = document.getElementById(“ingredient-list”);

 const createList = document.createElement(“li”);

 const textNode = document.createTextNode(input.value);

 createList.appendChild(textNode);

 list.appendChild(listNode);

});
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь взгляните на этот пример ниже. По сути, это тот же способ, но React берет на себя большую часть грязной работы под капотом. Здесь мы используем useState, который представляет собой метод, возвращающий значение состояния, и функцию для его обновления. Этот синтаксис избавляет нас от лишних шагов. По сравнению с ванильным JavaScript, React — это декларативный синтаксис между ними.

//ReactJS

/*In ReactJS, the UI is already 
set to keep the entire state 
of your listed items in a JS variable.*/

const [items, setItems] = useState([“cilantro”, “beef”, “Onions”]);

/*Which will then be displayed in 
JSX by mapping (looping) over each item, 
and returning a list element for each one:*/

<ul>

   {items.map(item => (

       <li key={item}>{item}</li>

   ))}

</ul>
Вход в полноэкранный режим Выход из полноэкранного режима

Как видите, те же результаты с разными шагами. Теперь у вас есть представление о том, что такое императивное и декларативное программирование… Надеюсь. Итак, прежде чем вы решите, что чтение окончено, позвольте мне зайти с другой стороны. Давайте вернемся к названию этого блога. Что именно представляет собой императивное и декларативное программирование? Самый большой аргумент заключается в том, что декларативный синтаксис «удобен для пользователя». Так ли это? Я хочу оспорить это мнение. Например, Vanilla JS может потребовать больше инициативных шагов для выполнения задачи. Хотя это может быть правдой, синтаксис Reacts содержит достаточное количество действий для выполнения слушателя событий, отображения над массивами или любого компонента, который вы решите сделать и которым будете манипулировать.
Простота, на мой взгляд, не всегда лучше. И JS, и React могут быть использованы для конкретных ситуаций. Эта тема может касаться и любого другого языка программирования. В некотором смысле, некоторые части JavaScript также можно определить как декларативные. Разве цикл по массиву или использование forEach для перебора объектов не является декларативным? Вы говорите, что именно вы хотите, чтобы ваша программа делала. Я даже могу утверждать, что декларативные языки могут поставить вас в невыгодное положение, поскольку вы не можете заглянуть под капот, как это можно сделать с императивными. В моем исследовании определение того, что такое императивное и декларативное программирование, может быть открытой дискуссией. Так что дайте мне знать, каково ваше мнение об этих двух языках. Как бы вы расшифровали эти два понятия своими словами?

Оцените статью
devanswers.ru
Добавить комментарий