Как улучшить программу с помощью ооп?

Question

[atumbochka]

Заранее хочу сказать, что я новичок и только начинаю изучать js. Нужно сделать так, чтобы из имеющихся данных выстраивалась таблица. Вот, собственно, они:

let data = [
    {
        "name": "tapochek 1",
        "size": "35",
        "isThere": "12",
        "price": "1234"
    },
    {
        "name": "tapochek 2",
        "size": "37",
        "isThere": "0",
        "price": "4326"
    },
    {
        "name": "tapochek 3",
        "size": "15",
        "isThere": "28",
        "price": "1124,80"
    },
    {
        "name": "tapochek 4",
        "size": "40",
        "isThere": "93",
        "price": "1443"
    }
];

Мне нужно сделать это с помощью ооп, но у меня никак не получается. Я просто не могу связать классы, объекты и методы с этим заданием. Я написал код, в котором ооп вообще не задействовано:

let tr1 = document.querySelector(".tr1");
let tr2 = document.querySelector(".tr2");
let tr3 = document.querySelector(".tr3");
let tr4 = document.querySelector(".tr4");
let tr5 = document.querySelector(".tr5");

for (let i = 0; i < data.length; i++) {
    let firstTd = document.createElement("td");
    firstTd.textContent = data[i].name;
    tr1.appendChild(firstTd);

    let secondTd = document.createElement("td");
    secondTd.textContent = data[i].size;
    tr2.appendChild(secondTd);

    let thirdTd = document.createElement("td");
    thirdTd.textContent = data[i].isThere;

    let fourthTd = document.createElement("td");
    fourthTd.textContent = data[i].price;
    tr4.appendChild(fourthTd);

    let fifthTd = document.createElement("td");
    let fifthTdButton = document.createElement("button");
    fifthTdButton.className = "plusButton";
    
    if (data[i].isThere == "0") {
        fifthTd.textContent = "Невозможно";
        thirdTd.textContent = "Нет в наличии";
        tr5.appendChild(fifthTd);
        tr3.appendChild(thirdTd);
    } else {
        fifthTdButton.textContent = "+";
        fifthTd.appendChild(fifthTdButton);
        tr5.appendChild(fifthTd);
        tr3.appendChild(thirdTd);
    }
}

<table border="1">
        <tr class="tr1">
            <td>Имя</td>
        </tr>
        <tr class="tr2">
            <td>Размер</td>
        </tr>
        <tr class="tr3">
            <td>Наличие</td>
        </tr>
        <tr class="tr4">
            <td>Цена</td>
        </tr>
        <tr class="tr5">
            <td>Добавить в корзину</td>
        </tr>
    </table>

Так вот. Я хочу вас очень попросить о двух вещах:
1. В моём коде есть очень много повторяющихся частей и я не знаю, как можно оптимизировать их.
2. Я не знаю, как сделать данное задание с помощью ооп (и при этом мне известна теория, но я не могу применить её на практике).

Подскажите пожалуйста.

Comments

[Victor Bomberow]

К концу первой трети прочтения книги Фаулера "Рефакторинг" у вас появится понимание. А если отложить чтение и ориентироваться на содержание, вы сможете сделать&понять рефакторинг и ООП за один вечер.

[atumbochka]

Victor Bomberow, большое спасибо! Обязательно посмотрю!

[Kovalsky]

"1. В моём коде есть очень много повторяющихся частей и я не знаю, как можно оптимизировать их." - ну вот например классы на tr у вас лишние, индексы рядов вы вполне можете брать из того же цикла в котором распихиваете эти данные по ячейкам. Сохранять ссылки на ряды (tr) вроде бы тоже не очень нужно,

"2. Я не знаю, как сделать данное задание с помощью ооп (и при этом мне известна теория, но я не могу применить её на практике)." - ну я тоже не вижу как сюда можно врубить классы. ООП же оно существует не для того чтоб им обильно полить любой код и увидеть как он превращается в лилию, ООП существует для конкретных нужд, вот почитайте. Мне кажется для практики ооп лучше взять другое задание. Потому что придумывать в таком крошечном примере куда впихнуть ооп это задача сложнее чем применить ооп))

Answer 1

[Tim]

Просто отрендерить данные достаточно этого

Comments

[WbICHA]

И где тут ООП?

[Tim]

WbICHA, зачем тут ооп?

[WbICHA]

Tim, автор хочет.

Как улучшить программу с помощью ооп?

[Tim]

WbICHA, тут ооп не нужно. Хотеть лишь потому что кто-то сказал и везде впихивать - бред. Я ему сократил его код, а про применение ооп пусть читает

Answer 2

[Виктор Л]

Не надо думать что ООП это прям святой грааль, и как только вы начнете все писать через классы у вас прям и кода станет меньше и он будет оптимальный. Единственное назначение ООП - существенно облегчить разработку и последующее сопровождение сложного софта (больших проектов).
бессмысленный код "типа" ООП

const datas = [
{
  description: "new",
  img: "https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png",
  name: "Nike1",
  price: 100
}, {
  description: "classic",
  img: "https://www.freepnglogos.com/uploads/puma-logo-png-1.png",
  name: "Adidas1",
  price: 120
},
{
  description: "new",
  img: "https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png",
  name: "Nike2",
  price: 200
}, {
  description: "classic",
  img: "https://www.freepnglogos.com/uploads/puma-logo-png-1.png",
  name: "Adidas2",
  price: 320
}
]

class Products {
  constructor(name, price, description, img){
    this.name = name;
    this.price = price;
    this.description = description;
    this.img = img;
 }    
}

class Manager {
 constructor(selector = '#tables', data = []) {
   this.root = document.querySelector(selector) || document.body;
   this.products = data.length === 0 ? this._demoProducts() : data;
 }
 _demoProducts() {
        let nike = new Products("Nike", 100, "new-shoes","https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png");
        let adidas = new Products("Adidas", 120, "classic-shoes","https://www.freepnglogos.com/uploads/puma-logo-png-1.png");
        return [nike, adidas];
    }
 getHTMLTemplate() {
   return this.products.map(function(product, i) {
     return `<div class="info-goods" data-id='${i}'>
            <div class="img"><img src=${product.img} width="80" height="80" alt='${product.name}'></div>
            <div class="name">${product.name}</div>
            <div class="price">${product.price}</div>
            <div class="description">${product.description}</div>
           </div>`
   });
 } 
 init(){
  this.root.insertAdjacentHTML('beforeend', this.getHTMLTemplate().join('<hr>'));
 }
}

const manager = new Manager();
      manager.init();