Теперь пришло время сделать проект по основному проекту списка книг.
Прежде чем перейти к манипулированию DOM, давайте создадим его базовую и типичную структуру пользовательского интерфейса:
‹!DOCTYPE html›
‹html язык="ru"›
‹метакодировка="UTF-8›
‹meta name=”viewport” content=”width=device-width, initial-scale=1.0›
‹ссылка rel="таблица стилей" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css›
‹название›Список книг | JS ‹/название›
тело{
фон: #c2e59c; /* запасной вариант для старых браузеров */
фон: -webkit-linear-gradient(вправо, #64b3f4, #c2e59c); /* Chrome 10–25, Safari 5.1–6 */
фон: линейный градиент (справа, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
кнопка{
цвет фона: #e74c3c;
черный цвет;
}
‹класс div=”контейнер”›
‹h1›Добавить книгу‹/h1›
‹идентификатор формы="книга-форма"›
‹див›
‹label for="title"›Заголовок‹/метка›
‹тип ввода=”текст” id=”название” класс=”u-полная ширина”›
‹/дел›
‹див›
‹label for="title"›Автор‹/метка›
‹тип ввода=”текст” id=”автор” класс=”u-полная ширина”›
‹/дел›
‹див›
‹label for="title"›ISBN#‹/label›
‹тип ввода=”текст” id=”isbn” класс=”u-полная ширина”›
‹/дел›
‹див›
‹button type=”button submit” class=”u-full-width btn btn-primary” ›Отправить‹/кнопка›
‹/дел›
<hr>
‹класс таблицы=”u-полная ширина”›
‹голова›
<tr>
‹th›Название‹/th›
‹th›Автор‹/th›
‹th›ISBN‹/th›
<th></th>
</tr>
‹/голова›
‹tbody id="список книг"›
‹/тело›
‹script src="app.js"›‹/script›
‹/дел›
‹/html›
Теперь пришло время немного JS-кодирования:
Принимая во внимание объектно-ориентированный аспект JS, сначала нам нужно установить 2 конструктора: Book (название, автор, isbn) и пустой конструктор пользовательского интерфейса для дальнейших манипуляций с пользовательским интерфейсом.
Затем нам нужно добавить прослушиватели событий в форму веб-страницы.
Сначала мы берем идентификатор формы и присоединяем прослушиватель событий отправки с функцией обратного вызова. Функция обратного вызова утверждает, что изначально вы берете все значения title, author, isbn, используя document.getElementById(‘id’).value;
Затем следует создание экземпляра конструктора книги, который вы объявили выше в const book.
Затем вам также необходимо создать экземпляр этого пустого конструктора UI() в const ui . Затем ui (где создается пустой пользовательский интерфейс конструктора) используется для вызова функции, объявленной выше addBooktoList, с аргументом, который является константой книги (которая содержит конструктор книги) и таким же, как ui.clearFields() для очистки полей формы каждый раз, когда вы подать одну запись.
Теперь пустой конструктор используется для вызова прототипа с вызываемой функцией. Чтобы проверить, когда вы будете использовать консоль конструктора пользовательского интерфейса, вы найдете __proto__, который будет иметь функцию-прототип addBooktoList. Это то, чего мы хотим достичь здесь.
Таким образом, пустой конструктор вызовет функцию prototype.addBooktoList, чтобы получить идентификатор tbody «book-list» и изначально создать элемент «tr».
Затем внутренний html добавляется в ‹tr› с помощью конструктора книги, который хранится в const book. и, наконец, к захваченному элементу tbody добавляется ‹tr›.
То же самое происходит и с другой функцией clearField(), где значения перехватываются, чтобы инициализировать их с помощью ‘ ‘ .
Вот как выглядит пользовательский интерфейс с некоторой частью объектно-ориентированных манипуляций с JS.
Мы можем добавить дополнительные функции в этот список книг: ПРОВЕРКА
После создания экземпляров обоих конструкторов мы можем выполнить условия if-else, так что если что-то в содержимом пустое, оно просто приведет нас к функции showalert(), в противном случае список книг работает нормально, как указано выше.
В showalert() мы передаем msg и error в качестве прототипа. Нет, нам нужно сделать одну вещь, нам нужно добавить css двух классов .error и .success в тег ‹style›.
Теперь функции работают таким образом, что цель проста. Нам нужно добавить div типа предупреждения перед формой. Итак, сначала мы создаем элемент ‹div› для сообщения об ошибке. Теперь нам нужно добавить классы «предупреждение» и «ошибка» (переданные из вызова функции) и стиль которых мы только что определили в теге «стиль».
Теперь нам нужно добавить текст в div с помощью document.createTextNode() и добавить его в константу div. Теперь сообщение с предупреждением в div готово. Остается только разместить его перед элементом формы.
Мы берем основной контейнер и форму для этого. Теперь нам нужно вставить предупреждение перед формой с помощью InsertBefore, которое будет принимать div.insertBefore(‘div to be add’, ‘Before which to be add’) простыми словами.
Мы можем добавить функцию setTimeOut() для исчезновения ошибки через 3 секунды, если хотите.
Теперь пришло время удалить книгу:
Помните, что нам нужно создать отдельный прослушиватель событий для функции удаления и прикрепить к нему прослушиватель событий. Затем нам нужно вызвать ui.deleteBook(e.target)
Функция deletebook() находит имя класса e.targert.. если оно равно
имя класса cross-sign(X), т. е. «удалить». ряд.
И тогда мы можем использовать ui.showalert() для отображения ошибок или успехов!
Мы можем преобразовать наши js в классы ES6 следующим образом:
учебник{
конструктор(название, автор, ISBN) {
this.title = название;
this.author = автор;
this.isbn = isbn;
}
}
интерфейс класса{
addBookToList(книга) {
const list = document.getElementById('список-книг');
// Создаем элемент tr
const row = document.createElement(‘tr’);
// Вставляем столбцы
row.innerHTML = `
‹td›${book.title}‹/td›
‹td›${book.author}‹/td›
‹td›${book.isbn}‹/td›
‹td›‹a href="#" class="delete"›X‹a›‹/td›
`;
list.appendChild(строка);
}
showAlert(сообщение, className) {
// Создаем div
const div = document.createElement(‘div’);
// Добавляем классы
div.className = `предупреждение ${className}`;
// Добавляем текст
div.appendChild(document.createTextNode(сообщение));
// Получить родителя
const container = document.querySelector(‘.container’);
// Получить форму
const form = document.querySelector('#book-form');
// Вставить предупреждение
container.insertBefore(div, form);
// Тайм-аут через 3 секунды
setTimeout(function(){
document.querySelector(‘.alert’).remove();
}, 3000);
}
удалитьКнигу(цель){
if(target.className === 'удалить') {
target.parentElement.parentElement.remove();
}
}
clearFields() {
document.getElementById('title').value = '';
document.getElementById('автор').value = '';
document.getElementById('isbn').value = '';
}
}
// Прослушиватель событий для добавления книги
document.getElementById('форма-книги').addEventListener('отправить', function(e){
// Получить значения формы
const title = document.getElementById(‘title’).value,
автор = document.getElementById('автор').value,
isbn = document.getElementById(‘isbn’).value
// Создание экземпляра книги
const book = new Book(название, автор, isbn);
// Создание экземпляра пользовательского интерфейса
const ui = новый интерфейс();
console.log(ui);
// Проверка
if(title === '' || автор === '' || isbn === '') {
// Оповещение об ошибке
ui.showAlert('Пожалуйста, заполните все поля', 'ошибка');
} иначе {
// Добавляем книгу в список
ui.addBookToList(книга);
// Показать успех
ui.showAlert('Книга добавлена!', 'успешно');
// Очистить поля
ui.clearFields();
}
e.preventDefault();
});
// Прослушиватель событий для удаления
document.getElementById('список-книг').addEventListener('щелчок', function(e){
// Создание экземпляра пользовательского интерфейса
const ui = новый интерфейс();
// Удалить книгу
ui.deleteBook(e.target);
// Показать сообщение
ui.showAlert('Книга удалена!', 'успешно');
e.preventDefault();
});
Теперь последняя часть — использовать метод прототипа для функции localStorage.
Итак, сначала нам нужно определить класс для хранения и добавить в него несколько статических функций. Для сказать:
класс Магазин
{
статические getBooks()
{
}
статическое отображение книг ()
{
}
статический addBook()
{
}
статическое удаление книги ()
{
}
}
Теперь в нижеприведенных прослушивателях событий, где вы добавили книгу в список, добавьте функцию для добавления книги в LocalStorage (LS), то же самое для удаления книги из LS.
Также каждый раз, когда страница перезагружается, книги должны отображаться после определенных манипуляций в окне с помощью:
Теперь вам нужно определить его в StoreClass :
поэтому для getBooks () нам нужно получить книги со страницы, для этого нам нужно проверить, есть ли в локальном хранилище книги, затем получить их с помощью JSON.parse и вернуть.
Теперь о двух других функциях, например, addBook().. получить книгу с помощью Store.getBooks(), а затем вставить их в объект книги, а затем установить ее в локальном хранилище с помощью LocalStorage.setItem() при их упорядочении.
То же самое для displayBooks(), получить книги с помощью Store,getBooks() и создать новый конструктор пользовательского интерфейса. Затем используйте цикл forEach для обхода каждой книги и добавления ее в список с помощью addToBookList().
Последняя функция состоит в том, чтобы удалитьBooks() для того, что ранее мы нацелились на номер isbn книги, используя previousSibling.textContent, а затем здесь мы передаем аргумент относительно этого, чтобы мы сравнивали номер isbn no каждой книги с аргументом isbn no, используя цикл forEach, если передано, мы соответствующим образом соединяем эту строку и соответствующим образом устанавливаем обновленные элементы после удаления с помощью localStorage.setItem().
Вот как мы можем повысить уровень функций DOM, используя методы и классы-прототипы.
Надеюсь, вам понравилось это, и вы узнали что-то наверняка!
