7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Работа с базой IndexedDB - Часть 2

Scroll to top
Read Time: 8 mins

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Приветствую вас во втором руководстве серии, посвященной IndexedDB. Я настоятельно рекомендую вам ознакомиться с первым, поскольку буду считать, что вы уже знакомы со всеми рассмотренными мною ранее понятиями. В этом руководстве мы завершим рассмотрение аспектов парадигмы CRUD (* Create, Update, Read, Delete – создать, прочесть, обновить, удалить), которые еще не обсудили, и затем создадим приложение из реального мира разработки, которое будем использовать для демонстрации остальных концепций в последнем руководстве.


Обновление записей

Давайте начнем с обсуждения того, как обновить запись при помощи IndexedDB. Если помните, добавить данные в базу довольно просто:

Обновить данные не менее просто. Если мы предположим, что вы определили свойство под названием id в качестве ключа для вашего хранилища объектов, то можете просто воспользоваться методом put вместо add.

Как и в случае с методом add, при использовании метода put  вы можете назначать методы для асинхронной обработки результатов операции.


Удаление записей

Удаление записей осуществляется при помощи метода delete. (Как неожиданно.) Вы просто передаете уникальный идентификатор записи, которую хотите удалить. Ниже показан простой пример:

И как и при работе с другими методами IndexedDB, вы можете добавить ваши обработчики для асинхронной обработки результатов операции.

Что ж, как я упомянул, все это выглядит не очень захватывающе, что, вероятно, и хорошо. Вам нужно, чтобы ваши API были простыми, скучными и без неожиданностей. Теперь давайте воспользуемся тем, что уже изучили, и создадим приложение из реального мира разработки.


Приложение для ведения записей

Хорошо, наконец у нас имеются все (ладно, большинство) частей, необходимых для создания приложение из реального мира разработки. Поскольку мы еще этого не сделали (гм), мы разработаем простое приложение для ведения записей. Давайте рассмотрим несколько скриншотов и затем разберем код, необходимый для реализации описанного в них функционала. При запуске приложения происходит инициализация IndexedDB для приложения и отображение пустой таблицы. Изначально, все что вы можете выполнить в приложении, – добавить новую запись. (Вероятно, мы могли бы сделать интерфейс более удобным для пользователя.)

Note AppNote AppNote App

После нажатия кнопки Add Note появляется форма:

Note App - Add FormNote App - Add FormNote App - Add Form

После добавления некоторых данных формы вы можете затем сохранить запись.

Note App - Saved NoteNote App - Saved NoteNote App - Saved Note

Как вы видите, у вас имеется возможность отредактировать и удалить записи. Наконец, если вы нажмете по самой записи, то сможете ознакомиться с ее содержимым:

Note App - Note ViewNote App - Note ViewNote App - Note View

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

Сначала – отказ от ответственности. Рассматриваемое приложение было бы отличным кандидатом, для реализации которого стоило бы воспользоваться одним из многих фреймворков JavaScript. Уверен, что те из вас, кто используют Backbone или Angular, уже могут представить, как бы реализовали наше приложение. Однако, я принял смелое решение – не пользоваться фреймворком. Я переживал и за тех, кто, возможно, использует другой фреймворк, так и за тех, кто не использует их вообще. Я хотел бы, чтобы мы сфокусировались здесь только на вопросах, связанных с IndexedDB. Я уверен, что найдутся люди, не согласные с этим решением, однако, давайте обсудим это в разделе для комментариев.

Наш первый образец – HTML-файл. У нас он только один, и большая часть его содержимого – стандартный код для Bootstrap (* веб-фреймворк для создания дизайна веб-сайтов и веб-приложений).

Как упоминалось выше, значительная часть этого кода – стандартный код для Bootstrap. Интересующие нас части – элементы div с идентификаторами noteList, noteDetail и noteForm. Вы, вероятно, можете догадаться, что это те элементы div, которые мы будем обновлять после действий со стороны пользователя.

Пишем код главного файла приложения

Теперь давайте взглянем на app.js, главный файл, в котором содержится логика (* последовательность операций, выполняемых программно или аппаратно) нашего приложения.

Вы можете проигнорировать первую функцию, поскольку это просто вспомогательная функция для преобразования формата дат. Давайте перескочим к блоку кода, который добавляется в методе jQuery ready, зарегистрированный для объекта document.

Проверка поддержки IndexedDB браузером

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

После получения пары селекторов jQuery, которые мы будем использовать в коде нашего приложения, мы открываем соединение с базой данных IndexedDB. Код для работы с базой данных довольно прост. Вы видите, что мы создали одно хранилище объектов под названием note в обработчике onupgradeneeded. После того как код вышеуказанного обработчика выполнен, в обработчике onsuccess будет запущена функция displayNotes.

Функция displayNotes

Функция displayNotes выполняет то, что вы и ожидаете, – получает все данные и отображает их. Мы обсудили, как получить все данные в предыдущем руководстве, однако я хочу обратить здесь ваше внимание на один отличительный момент. Обратите внимание, что у нас имеется новый обработчик событий, oncomplete, который мы подвязали к самой транзакции (* групповая операция). Ранее вы использовали обработчики только внутри методов для выполнения действий, внутри транзакции, однако при помощи IndexedDB мы также можем использовать их и на верхнем уровне. Это становится особенно полезным в случаях вроде нашего. У нас имеется огромная строка, наша HTML-таблица, которую создали при итерации по нашим данным. Мы можем воспользоваться обработчиком транзакции oncomplete, чтобы обернуть порцию данных для отображения и отобразить ее при помощи единственного вызова jQuery.

Функции для удаления, редактирования и добавления записей

Наши следующие два метода (delete и edit) реализуются согласно тому же принципу. Поскольку в этом коде нет новых вызовов IndexedDB, то мы не будем на них обращать внимание. Большей частью «мяса» здесь являеются простые манипуляции с DOM (* Document Object Model – объектная модель документа) для выполнения определенных действий. Обработчик события click для кнопки, при помощи которой добавляются записи, как раз для этого и служит.

Функция Save

Следующий лакомый кусочек – функция save. В нее необходимо добавить немного логики, чтобы определить, происходит ли обновление или добавление данных, однако даже это довольно просто. И на этом все! Теперь у нас имеется готовое приложение, использующее IndexedDB. Вы можете поэкспериментировать с этой демоверсией, скачав прикрепленные файлы с исходный кодом.


В заключение

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.