Creation of the class and objects descendants to it

Question

Develop the HashStorage class (in the HashStorage.js file) for storing arbitrary key-value pairs. The key can be any string; A value can be of any type, including a complex one (an object, an array, or a function).

The class must have the following interface (that is, have the following public methods):
● addValue (key, value) - saves the specified value under the specified key;
● getValue (key) - returns the value at the specified key or undefined;
● deleteValue (key) - deletes the value with the specified key, returns true if the value was deleted and false if no such value was in the repository;
● getKeys () - returns an array consisting of only keys.

The class should not use any global variables; it should not “smudge the screen”. The class should be universal, i.e. do not depend on the structure of the stored data, nor on the method of their subsequent use (including it should not contain any references to the DOM, as it can be used without a web page at all).

Create a HashStorage class coctailsStorage descendant object for storing cocktail recipes. The key is the name of the drink, and its value is information about the drink (alcoholic or not, a string with ingredients, a recipe, etc. (optional)).

On the page to lay out the buttons:
● “recipe entry” - sequentially asks the name of the drink, whether it is alcoholic or not, what ingredients are necessary and in what proportions, the recipe for its preparation (etc.); stores all this information about the cocktail in the vault (coctailsStorage).
● “drink recipe” - asks for the name of the drink and issues information about it to the page (preferably) or to the console using the example below, or a message about the absence of such a drink in the storage.
● “recipe deletion” - asks for the name of the drink and removes it from the storage (if there is one) with the issuance of the appropriate message to the user.
● “list of all cocktails” - displays a list of names of cocktails from the storage.

Examples of the output / design of the recipe:

Cocktail "Margarita" (alcohol: yes)
Ingredients Required:
Vodka Finlandia 50ml
Coffee liqueur 25ml
Ice cubes 120 g
recipe:
Fill a glass with ice cubes to the top, then pour the coffee liqueur
25 ml, vodka 50 ml and stir with a cocktail spoon.
Cocktail "Pelican" (alcohol: no)
Ingredients Required:
Grenadine Monin 10ml
Strawberry syrup Monin 10ml
Peach Juice 150ml
Lemon Juice 15ml
Banana 110g
Strawberry 50g
Crushed ice 60g
Recipe:
Put in a blender the peeled and chopped half a banana and
strawberries 2 berries. Pour lemon juice 15 ml, grenadine 10 ml,
strawberry syrup 10 ml and peach juice 150 ml. Add to blender
a scoop of crushed ice and whisk. Pouring into a highball. Circle
banana and half a strawberry on a cocktail skewer.

My efforts:

function HashStorage(){ //добавление this.add = function addValue(key,value){ //публичный метод как элемент хэша this key=prompt('Название коктейля: '); coctailsStorage.key = {}; coctailsStorage.key.alcoholic = prompt('Алкогольный ли?'); coctailsStorage.key.ingredients = prompt('Ингредиенты и их пропорции:'); coctailsStorage.key.recipe = prompt('Рецепт приготовления:'); } //получение this.get = function getValue(key){ key=prompt('Название коктейля: '); if(key in coctailsStorage){ alert('Коктейль'+key+'(алкогольный'+coctailsStorage.key.alcoholic+')\n'+ 'Необходимые ингредиенты:\n'+coctailsStorage.key.ingredients+'\n рецепт приготовления:\n'+coctailsStorage.key.recipe); } else{ alert('Такого коктейля в списке нет'); } } //удаление this.delete = function deleteValue(key){ key=prompt('Название коктейля: '); if(key in coctailsStorage){ delete coctailsStorage.key; alert('Удален'); console.log('true'); } else{ alert('Такого коктейля в списке нет'); console.log('false'); } } //перечень ключей this.onlyKeys = function getKeys(){ for(key in coctailsStorage){ console.log(key) } } const coctailsStorage = new HashStorage(); coctailsStorage = {'Маргарита': {alcoholic:'да', ingredients:'Водка Finlandia 50мл\nКофейный ликер 25мл\n' + 'Лед в кубиках 120 г', recipe:'Наполни стакан кубиками льда доверху, затем налей кофейный ликер\\n\' +\n' + ' \'25 мл, водку 50 мл и размешай коктейльной ложкой.'}, 'Пеликан':{alcoholic:'нет', ingredients:'Гренадин Monin 10мл\n' + 'Клубничный сироп Monin 10мл\n' + 'Персиковый сок 150мл\n' + 'Лимонный сок 15мл\n' + 'Банан 110г\n' + 'Клубника 50г\n' + 'Дробленый лед 60г', recipe:'Положи в блендер очищенную и нарезанную половинку банана и \n' + 'клубнику 2 ягоды. Налей лимонный сок 15 мл, гренадин 10 мл,\n'+ 'клубничный сироп 10 мл и персиковый сок 150 мл. Добавь в блендер\n'+ 'совок дробленого льда и взбей. Перелей в хайбол. Укрась кружком\n'+ 'банана и половинкой клубники на коктейльной шпажке.'}}; }

I seem to be completely confused. I am particularly confused by the phrase from the assignment “should not contain any references to the DOM, since can be used without a web page at all. ” I can not understand how to properly attach buttons to functions. Used onclick = 'this.add ()' handler, but does not exit. I still do not understand how to write the values specifically in coctailsStorage (repository).

And if it breaks off in the middle (the curly bracket is at least not enough)
Maybe I just did not think that I need to write something else.
And braces ... I checked if everything was in order with them and somehow I did not find a mistake.

Accepted Answer · 2019-04-28T08:24:45

Judging by the code you have a mess in your head, or the code is not clear where.

Right now there will be a lot of text, but if not very interesting, then the answer is at the very end
Let's start with the fact that the class methods need to be written to the prototype, otherwise each instance will have its own method, which, with a large number of instances, will “eat” a lot of extra memory

 this.add = function() {}; // не очень хорошо HashStorage.prototype.add = function () {}; // уже лучше

Secondly: why did you put the creation of the instance into the designer itself, and besides, you are not using it correctly

 const coctailsStorage = new HashStorage(); // можем пользоваться методами coctailsStorage = { ... }; // взяли и перезаписали переменную, методы не доступны больше

The structure of your class itself is not correct, since an external variable is used for storage, which in fact should not have anything to do with the implementation. Plus, again, it is not used correctly, because you are again overwriting a completely variable and it seems there will be even a syntax error, since you are trying to access const before it is declared.

The essence of the task was to create a class that can be reused, the phrase

including should not contain any references to the DOM, since can be used without any webpage at all

means that the code can be run in another environment where you can execute js , but where there is no browser api and DOM , for example nodejs

As a result, we will write the HashStorage class, we will use the actual syntax using the classes

 class HashStorage { constructor() { this.store_ = {}; // хранилище для значений // подчеркивание в конце переменной говорит о том, что она приватная // так что на прямую ее использовать нельзя // но пока что это только соглашение } add(key, value) { this.store_[key] = value; // сохраняем значение в store } getValue(key) { return this.store_[key]; // тут все тоже просто и нативно } deleteValue(key) { if(!(key in this.store_)) { return false } return delete this.store_[key]; } getKeys() { return Object.keys(this.store_); } } // Теперь coctailsStorage может использовать методы // add, getValue etc. // Плюс экземпляр имеет свое собственное хранилище const coctailsStorage = new HashStorage(); coctailsStorage.add('vodka', {alcohol: true}); // добавляем значение coctailsStorage.add('tea', {alcohol: false}); // добавляем значение console.log(coctailsStorage.getValue('vodka')); console.log(coctailsStorage.getKeys()); console.log(coctailsStorage.deleteValue('vodka')); console.log(coctailsStorage.getValue('vodka')); console.log(coctailsStorage.getKeys());

As for the buttons, you just need to create an interlayer that will take the buttons, an instance of coctailsStorage and combine them, it may not even be a class, but just something related, for example, a set of functions. I will give an example for the add button, the rest you write yourself

 class HashStorage { constructor() { this.store_ = {}; // хранилище для значений } add(key, value) { this.store_[key] = value; // сохраняем значение в store } getValue(key) { return this.store_[key]; // тут все тоже просто и нативно } deleteValue(key) { if(!(key in this.store_)) { return false } return delete this.store_[key]; } getKeys() { return Object.keys(this.store_); } } const coctailsStorage = new HashStorage(); // Дальше буду описываться кнопки const addButton = document.getElementById('add-coctail'); addButton.onclick = function () { const coctail = {}; // получаем данные от пользовател const name = window.prompt('Введите название коктеля'); const isAlcohol = window.prompt('Напиток алкогольный?'); // Добавляем значение в наше хранилище coctailsStorage.add(name, {name, isAlcohol}); console.log('Coctail was added', coctailsStorage.getValue(name)); }

 <button id='add-coctail'>Добавить</button> <button id='delete-coctail'>Удалить</button> <button id='get-coctail'>Рецепт</button> <button id='all-coctails'>Список рецептов</button>

Creation of the class and objects descendants to it

1 answer 1

More articles: