Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Робота з базою IndexedDB - Частина 2

by
Read Time:8 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Вітаю вас у другому посібнику серії, присвяченій IndexedDB. Я настійно рекомендую вам ознайомитися з першим, оскільки буду вважати, що ви вже знайомі з усіма розглянутими мною раніше поняттями. У цьому посібнику ми завершимо розгляд аспектів парадигми RUD (* 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
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.