Реализация корзины покупок в ООП против FP в JavaScript

В одной из наших предыдущих статей мы уже показывали вам, как реализовать в стиле ООП и ФП. ООП означает объектно-ориентированное программирование. ООП влечет за собой инкапсуляцию, абстракцию, наследование, полиморфизм. FP означает функциональное программирование. FP влечет за собой составление вместо наследования. Функционирует как граждане первого класса. Создавайте чистые и повторно используемые функции. Но у ООП и ФП есть нюансы, которые трудно уловить на нескольких примерах. Чтобы отточить эти концепции, хорошо иметь много примеров и сравнивать их, чтобы увидеть различия между ними. В этой статье мы покажем вам еще одно сравнение стиля ООП и ФП на примере JavaScript.

Это лишь одна из множества статей об ИТ. Мы разбиваем сложные темы на небольшие и удобоваримые для вас содержания. Не стесняйтесь подписаться или поддержать pandaquests, чтобы получить больше интересного контента о JavaScript, веб-разработке и разработке программного обеспечения. Мы стараемся публиковаться несколько раз в неделю. Не пропустите ни одного из наших замечательных материалов.

Вот пример функции, которая вычисляет общую стоимость корзины как в объектно-ориентированном, так и в функциональном стиле.

Наш объектно-ориентированный стиль выглядит так:

class ShoppingCart {
  constructor(items) {
    this.items = items;
  }

  addItem(item) {
    this.items.push(item);
  }

  removeItem(itemName) {
    for (let i = 0; i < this.items.length; i++) {
      if (item.name === itemName) {
        this.items.splice(i, 1);
      }
    }
  }

  getTotalPrice() {
    let total = 0;
    for (let i = 0; i < this.items.length; i++) {
      total += this.items[i].price;
    }
    return total;
  }
}

const cart = new ShoppingCart([
  { name: "item1", price: 10 },
  { name: "item2", price: 20 },
  { name: "item3", price: 30 }
]);
console.log(cart.getTotalPrice()); // Output: 60
cart.addItem({ name: "item4", price: 40 });
console.log(cart.getTotalPrice()); // Output: 100
cart.removeItem("item3");
console.log(cart.getTotalPrice()); // Output: 50

В объектно-ориентированном стиле мы создаем класс с именем ShoppingCart с конструктором, который принимает массив элементов и устанавливает для него свойство items. Мы также определяем методы для добавления товара, удаления товара и получения общей стоимости товаров в корзине. Обратите внимание, что мы используем циклы и мутации, чтобы удалить предмет и рассчитать общую стоимость.

И наш код функционального стиля выглядит так:

const addItem = (item, cart) => [...cart, item];
const removeItem = (itemName, cart) => cart.filter(item => item.name !== itemName);
const getTotalPrice = cart => cart.reduce((acc, item) => acc + item.price, 0);

const cart = [
  { name: "item1", price: 10 },
  { name: "item2", price: 20 },
  { name: "item3", price: 30 }
];
console.log(getTotalPrice(cart)); // Output: 60
cart = addItem({ name: "item4", price: 40 }, cart);
console.log(getTotalPrice(cart)); // Output: 100
cart = removeItem("item3", cart);
console.log(getTotalPrice(cart)); // Output: 50

В функциональном стиле мы создаем три функции: addItem, removeItem, getTotalPrice, которые принимают состояние корзины в качестве входных данных и возвращают новое состояние корзины или общую стоимость. Затем мы используем функции для расчета общей стоимости и обновления состояния корзины.

В этом примере объектно-ориентированный стиль основан на использовании классов и объектов и использует ключевое слово this для ссылки на свойства и методы текущего объекта. Также наш код ООП использует циклы и побочные эффекты для изменения данных. С другой стороны, функциональный стиль основан на использовании чистых функций, которые не полагаются на использование классов или объектов, и используют переменные и аргументы функций для передачи данных между функциями. Что отличает стиль FFP, так это отсутствие циклов и каких-либо побочных эффектов, например. массив корзины не изменяется, вместо этого каждый раз при добавлении нового элемента или удалении элемента создается новый массив.

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

Если вам нравится такое сравнение между ООП и ФП, взгляните на эти статьи, где у нас есть больше примеров:

Вот оно. Надеемся, вам понравилась эта статья. Есть вопросы? Дайте нам знать и прокомментируйте ниже.

Мы публикуем несколько статей в неделю. Мы разбиваем сложные темы на небольшие и удобоваримые для вас материалы. Чтобы не пропустить ни одного из них, следите и подписывайтесь на pandaquests. Если вы хотите поддержать нас напрямую, вы можете либо дать чаевые, либо подать заявку на членство по этой ссылке. Используя эту ссылку, 50% вашего вознаграждения перейдет непосредственно к нам. Только благодаря вашей щедрой поддержке мы сможем сохранить частые и качественные наши статьи. Заранее спасибо и удачного кодирования!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.