Create a class that will manage goods in JS?

Question

I do not know how to create a class that will manage the goods. 1. Sort by price. (you need to create a function) 2. Sort by name. (need to create f-tion)

I created a constructor which creates objects

class Products { constructor(name,price,description,img){ this.name = name; this.price = price; this.description = description; this.img = img; } } var nike = new Products("Nike", 100, "new-shoes","img/nike.png"); var adidas = new Products("Adidas", 120, "classic-shoes","img/adidas.png"); var puma = new Products("Puma",150,"new-shoes","img/puma.png"); var jordan = new Products("Jordan", 170, "outlet-shoes", "img/jordan.png"); var converse = new Products("Converse",70,"outlet-shoes","img/convrse.png") var nikeAirMax = new Products("Nike Air Max", 200, "shoes","img/nikeAirMax.png"); var newBal = new Products("New Balance 990",179,"new-shoes","img/newBal.png"); var arrGoods = [nike,adidas,puma,jordan,nikeAirMax,converse,newBal];

Then he created a function that displays the goods in the HTML file.

 function addGoods(item){ for (let i = 0; i<arrGoods.length; i++){ document.getElementById("products").innerHTML += `<div class="info-goods"> <div class="img"><img src=${item[i].img}></div> <div class="name">${item[i].name}</div> <div class="price">${item[i].price}</div> <div class="description">${item[i].description}</div> </div>` } } addGoods(arrGoods);

created functions that are sorted (by price and by name)

 function sortByPrise() { var div = document.querySelector("#products"); if (div){ div.innerHTML = ''; this.PriseSort(arrGoods); addGoods(arrGoods); }; } function sortByName() { var div = document.querySelector("#products"); if (div){ div.innerHTML = ''; nameSort(arrGoods); addGoods(arrGoods); }; } function PriseSort(arr){ arr.sort(function(a,b){ return a.price - b.price; }); }; function nameSort(arr){ arr.sort(function(a,b){ if(a.name > b.name){ return 1; } if (a.name < b.name){ return -1; } return 0; }); };

How to make these functions in a separate class (for example, class Menedger)

Accepted Answer · 2019-05-17T11:06:30

I doubt that you need a separate class for this purpose. If you want to organize all the related functionality somewhere in one place, then maybe you should use static methods. for example

 class Product { constructor(name, price, description, img) { this.name = name; this.price = price; this.description = description; this.img = img; Product.instances.push(this); } } Product.instances = []; var nike = new Product("Nike", 100, "new-shoes","img/nike.png"); var adidas = new Product("Adidas", 120, "classic-shoes","img/adidas.png"); var puma = new Product("Puma",150,"new-shoes","img/puma.png"); var jordan = new Product("Jordan", 170, "outlet-shoes", "img/jordan.png"); var converse = new Product("Converse",70,"outlet-shoes","img/convrse.png") var nikeAirMax = new Product("Nike Air Max", 200, "shoes","img/nikeAirMax.png"); var newBal = new Product("New Balance 990",179,"new-shoes","img/newBal.png"); // var arrGoods = [nike,adidas,puma,jordan,nikeAirMax,converse,newBal]; console.log(Product.instances);

First of all, pay attention to the fact that I renamed the Products class to the only number Product , since all the same, with its help, the objects created describe one product and not several. But these are trifles. The main thing is that the constructor itself now has an instances property in which we place each created product. It also eliminates the need to maintain arrGoods .

The function that displays the goods in HTML can also be made static method

 class Product { constructor(name, price, description, img) { this.name = name; this.price = price; this.description = description; this.img = img; Product.instances.push(this); } static addGoods() { for (let i = 0; i < this.instances.length; i++) { document.getElementById("products").innerHTML += `<div class="info-goods"> <div class="img"><img src=${this.instances[i].img}></div> <div class="name">${this.instances[i].name}</div> <div class="price">${this.instances[i].price}</div> <div class="description">${this.instances[i].description}</div> </div>` } } } Product.instances = []; var nike = new Product("Nike", 100, "new-shoes","img/nike.png"); var adidas = new Product("Adidas", 120, "classic-shoes","img/adidas.png"); Product.addGoods();

 <div id="products"></div>

Similarly with sorting functions, we do everything with static methods. Inside each of these, all existing products will be available as this.instances .

Can you advise me something (article, a book can a video that would help me in the code of such a project)?
I know the principles of OOP, I just don’t know how to use them in a real project
@Dmitspit is happy to help :) Unfortunately I will not recommend any books or videos, I do not know those.

Vitaly Shebanits Vitaly Shebanits 2,138 five 17 · Answer 2 · 2019-05-17T11:12:04

 class ProductService { //Все методы статические ProductService.Products = []; ProductService.Display = function() { for (let i = 0; i < Products.length; i++) { document.getElementById("products").innerHTML += `<div class="info-goods"> <div class="img"><img src=${Products[i].img}></div> <div class="name">${Products[i].name}</div> <div class="price">${Products[i].price}</div> <div class="description">${Products[i].description}</div> </div>` } } ProductService.sortByPrise = function { var div = document.querySelector("#products"); if (div) { div.innerHTML = ''; this.PriseSort(arrGoods); // поменяйте по контектсу Display(arrGoods); }; } // и т д }

It seems to me that even in the general case, it makes no sense to make a class with only static fields.
Do not forget that a class in JS is a function, and what is the point in a function that is never called?
For encapsulation (neymspeysing) the object literal will quite fit.
@smellyshovel well, let him not make statics ... I just do not use OOP in js, so I don’t know the nuances .... I would use static in another language.
Not so much about the "statics" I agree with you in general, just static fields do not necessarily wrap a separate "class", that's what I mean.

Create a class that will manage goods in JS?

2 answers 2

More articles: