2

Разработать класс HashStorage (в файле HashStorage.js) для хранения произвольных пар ключ-значение. Ключом может быть любая строка; значение может иметь любой тип, в том числе сложный (объект, массив или функция).

Класс должен иметь следующий интерфейс (т.е. иметь следующие публичные методы):
● addValue(key,value) — сохраняет указанное значение под указанным ключом;
● getValue(key) — возвращает значение по указанному ключу либо undefined;
● deleteValue(key) — удаляет значение с указанным ключом, возвращает true если значение было удалено и false если такого значения не было в хранилище;
● getKeys() — возвращает массив, состоящий из одних ключей.

Класс не должен использовать никаких глобальных переменных, не должен «пачкать экран». Класс должен быть универсальным, т.е. не зависеть ни от структуры хранимых данных, ни от способа их последующего использования (в т.ч. не должен содержать никаких ссылок на DOM, т.к. может использоваться и вообще без веб- страницы).

Создать объект-потомок coctailsStorage класса HashStorage для хранения рецептов коктейлей. Ключом является название напитка, а его значением — информация о напитке (алкогольный напиток или нет, строка с ингредиентами, с рецептом приготовления и т.д. (по желанию)).

На странице сверстать кнопки:
● «ввод рецепта» — последовательно спрашивает название напитка, алкогольный он или нет, какие ингредиенты необходимы и в каких пропорциях, рецепт его приготовления (и т.д.); сохраняет всю эту информацию о коктейле в хранилище (coctailsStorage).
● «рецепт напитка» — спрашивает название напитка и выдаёт на страницу (желательно) или в консоль информацию о нём по примеру, приведённому ниже, либо сообщение об отсутствии такого напитка в хранилище.
● «удаление рецепта» — спрашивает название напитка и удаляет его из хранилища (если он там есть) с выдачей соответствующего сообщения пользователю.
● «перечень всех коктейлей» — выводит список названий коктейлей из хранилища.

Примеры вывода/оформления рецепта:

  1. Коктейль "Маргарита" (алкогольный: да)
    Необходимые ингредиенты:
    Водка Finlandia 50мл
    Кофейный ликер 25мл
    Лед в кубиках 120 г
    рецепт приготовления:
    Наполни стакан кубиками льда доверху, затем налей кофейный ликер
    25 мл, водку 50 мл и размешай коктейльной ложкой.

  2. Коктейль "Пеликан" (алкогольный: нет)
    Необходимые ингредиенты:
    Гренадин Monin 10мл
    Клубничный сироп Monin 10мл
    Персиковый сок 150мл
    Лимонный сок 15мл
    Банан 110г
    Клубника 50г
    Дробленый лед 60г
    Рецепт приготовления:
    Положи в блендер очищенную и нарезанную половинку банана и
    клубнику 2 ягоды. Налей лимонный сок 15 мл, гренадин 10 мл,
    клубничный сироп 10 мл и персиковый сок 150 мл. Добавь в блендер
    совок дробленого льда и взбей. Перелей в хайбол. Укрась кружком
    банана и половинкой клубники на коктейльной шпажке.

Мои старания:

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'+
            'банана и половинкой клубники на коктейльной шпажке.'}};

    }

Кажется, я окончательно запуталась. Особенно меня смущает фраза из задания 'не должен содержать никаких ссылок на DOM, т.к. может использоваться и вообще без веб-страницы'. Не могу понять, как правильно кнопкам присоединить функции. Использовала обработчик onclick = 'this.add()', но не выходит. Еще не понимаю, как записать значения конкретно в coctailsStorage(хранилище).

3
  • А точно весь код? А то будто обрывается на середине ( фигурной скобки как минимум не хватает )
    – ThisMan
    28 апр 2019 в 7:52
  • Дак не проще тогда уже реально на классах писать?
    – And
    28 апр 2019 в 7:56
  • Вроде как весь. Может я просто не додумалась, что нужно написать что-то ещё. А фигурные скобки... Я проверяла, всё ли с ними в порядке и как-то ошибку не нашла. WS не ругается
    – user336121
    28 апр 2019 в 7:57

1 ответ 1

3

Судя по коду у вас каша в голове, либо код взят не понятно откуда.

Щас будет много текста, но если не особо интересно, то ответ в самом конце
Начнем, с того что методы класса нужно записывать в прототип, в ином случае для каждого экземпляра будет создаваться свой метод, что при большом кол-ве экземпляров будет "кушать" много лишней памяти

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

Во вторых: зачем вы засунули создание экземпляра в сам конструктор, да и к тому же дальше вы используете его не правильно

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

Сама структура вашего класса не правильна, так как для хранилища используется внешняя переменная, которая по сути к реализации никакого отношения иметь не должна. Плюс, опять же, используется не правильно, потому что вы же опять перезаписываете полностью переменную и, кажется, будет даже синтаксическая ошибка, так как вы пытаетесь обратиться к const раньше чем он объявлен.

Суть задания была создать класс, который можно переиспользовать, фраза

в т.ч. не должен содержать никаких ссылок на DOM, т.к. может использоваться и вообще без веб- страницы

означает, что код может быть запущен в другом окружении, где можно исполнять js, но где нет браузерного апи и DOM, например nodejs

Что в итоге: напишем класс HashStorage, будем использовать актуальный синтаксис, используя классы

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());

Что касается кнопок, вам нужно просто создать прослойку, которая будет брать кнопки, экземпляр coctailsStorage и объединять их, это может даже быть не класс, а просто что-то связанное, например набор функций. Я приведу пример для кнопки add, остальные вы уже напишите сами

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.