Зафар Салема
В настоящее время существует ряд JavaScript Frameworks, таких как реагирование, угловые, Vue и так далее. Все они предлагают простой и легкий подход к разработке веб-приложений, особенно спа.
Тем не менее, многие учащиеся JavaScript, как правило, начинают изучать эти рамки и мало что знают о том, как разработать аналогичные приложения в ванильном JavaScript.
Одна из самых основных операций в любом приложении является Crud (обозначает создание, чтение, обновление, удаление). Это то, что мы собираемся достичь сегодня. Мы возьмем базовый и хороший старый пример: приложение Todo.
Несмотря на то, что ванильный JavaScript будет использоваться для этого учебника, мы будем использовать синтаксис ES6 вместо простого старого синтаксиса JavaScript. Для того, чтобы сделать это, мы будем использовать транспортер Babel для преобразования ES6/ES7 на ES5, и мы будем использовать WebPack в качестве инструмента сборки.
Я предполагаю, что у вас уже есть последняя версия Node.js на вашем компьютере. Настройка нашей среды займет дополнительное время, поэтому нет необходимости войти в эти детали. Просто клонируйте мой код котельной отсюда ( https://github.com/zafar-saleem/hut ) и запустите «npm Установить», чтобы установить все зависимости.
Новые файлы будут переходить в папку/SRC. Поэтому создайте новый файл под названием ToDo.js внутри/SRC/Scripts/папку и напишите ниже код в этот файл.
Как вы можете видеть в вышеуказанном коде, мы создаем класс TODO, а внутри этого класса мы пишем функцию конструктора. Несмотря на то, что JavaScript не имеет классов по умолчанию, ES6 имеет классы (что на самом деле, синтаксический сахар сверху прототипа JavaScript).
Теперь, когда мы создаем новый экземпляр этого класса, используя новое ключевое слово, функция конструктора автоматически вызывается. То есть где мы добавим некоторые атрибуты классу TODO, которое мы сможем доступ к этому классу, используя ключевое слово Это Отказ
Теперь, когда у нас выше код, продолжайте и импортируйте вышеуказанный файл в файле SRC/index.js и внесите новый экземпляр этого класса, как ниже.
Теперь у нас есть какой-то базовый код в ToDo.js. Нам также нужен базовый HTML-код. Напишите следующий код в файле index.html в корневой папке.
Теперь, когда у нас есть базовый HTML-код, давайте вернемся к ToDo.js и получите ссылку на наш контейнер «.list-item». Напишите код ниже внутри конструктора.
После получения ссылки на элемент «.List-item» я вызываю функцию рендера, чтобы сделать список элементов на экране. Эта функция еще не существует, поэтому мы собираемся написать ее дальше.
Но перед записью функции рендера нам нужны данные издевательства, которые мы собираемся оказывать. Таким образом, для целей этого учебника мы собираемся использовать массив объектов. Напишите следующий код в верхней части файла todo.js.
Теперь обратно в функцию рендеринга: ниже вся функция рендеринга.
В этой функции мы гарантируем, что этот контейнер с этого. Первая строка просто делает контейнер пустой перед добавлением новых элементов.
Затем мы зацикливаем массив Mockdata, который мы создали в верхней части файла todo.js, используя функцию foreach. Внутри функции обратного вызова FOREACH мы впервые создаем некоторые элементы DOM, вызывая создание создания (item.id); Функция, и мы передаем идентификатор текущего элемента к этой функции. Я напишу эту функцию следующую, но прежде чем добраться, давайте закончим запись этой функции.
Как только он создает новый элемент DOM (элемент Li) с дочерними элементами (кнопки в этом случае), он добавляет этот элемент Li в класс Todo в качестве атрибута с использованием ключевого слова «Это». Теперь мы можем получить доступ к этому Li Element по всему классу Todo, поэтому я получаю доступ к этому элементу Li и добавляя заголовок с помощью функции insertadjacenthtml ().
Затем я проверяю, завершен ли текущий элемент или сделан. Если это так, то я добавляю класс к текущему элементу Li, который добавляет стиль линии на элементе.
И, наконец, я добавил этот элемент li к этому.
Теперь давайте напишем функцию создателей (), которая ниже.
Эта функция, по-видимому, имеет много кода, но это просто понять. Я просто создаю элементы Li, удалить, редактировать и полные кнопки. Затем я добавляю несколько классов на все эти кнопки и установите атрибут данных и назначить идентификатор текущего элемента, который мы передали как аргумент от функции рендеринга. Затем я вставляю текст на этих кнопках (редактирование, удаление и полное) с использованием «innerhtml».
Наконец, я добавляю эти кнопки в элемент Li, который я позже доступа к функции Render для выполнения дополнительных операций.
Теперь, когда у нас есть основная структура, если вы запустите NPM запускаете Dev и перейдите в Localhost: 2770 в браузере, у вас должны быть следующие элементы, входное поле и кнопка, и четыре элемента с их соответствующими кнопками.
До сих пор вы должны иметь частью «R» Crud – я читаю все элементы из Mockdata и поместив их на экран.
Теперь, когда чтение сделана, настало время начать работу над C части CRUD. Напишите функцию, называемую создать и добавьте код ниже.
Функция создания красивая самоуверенность: все, что он делает, получает значение из текстового поля. Он создает объект Newitem с идентификатором атрибутов, заголовка, сделано и дату.
Наконец, нажимайте этот NewITEM на массив Mockdata и опустошите текстовое поле и вызовите функцию Render, чтобы рендерировать все элементы с вновь созданным элементом.
Теперь идите вперед, попробуйте это в вашем браузере. Поместите текст в текстовом поле. Нажмите кнопку «Добавить» – но вы не видите никаких изменений. Это ожидается, потому что есть еще одна последняя часть для этого. Просто добавьте слушатель событий на кнопку «Добавить» внутри конструктора и вызовите функцию создания, как показано ниже:
Теперь попробуйте в своем браузере и вуаля. У вас есть новый элемент в нижней части списка.
Две части операций CRUD завершены. Далее – часть d, которая удаляет.
Для удаления элемента давайте напишем удалить (удалить зарезервированное ключевое слово в JavaScript и по этой причине я назвал его удаление) функцию ниже.
Эта функция также довольно проста: сначала получите идентификатор из элемента кнопки удаления, который был добавлен в функцию создания создания, используя атрибут идентификатора данных. Фильтр через Mockdata и поместите проверку на идентификатор текущего пункта с идентификатором кнопки удаления. Эта проверка просто возвращает все элементы, кроме элемента, которые этот чек возвращает true.
После этой операции перенесите все элементы, вызывая функцию рендеринга внизу.
Вещи выглядят хорошо, но держитесь в минуту: эта функция должна быть запущена, вызывая кнопку удаления. Как вы можете вспомнить, эта кнопка была добавлена динамически в функции «Ребенности». Добавление событий в такие элементы немного сложно. Поскольку эти предметы не присутствовали, когда Дом был загружен и был добавлен позже, добавив слушатель события непосредственно к удалению, обновлению и полных кнопках не собирается работать.
Чтобы это произошло, добавьте слушатель событий в объект документа и найдите конкретную кнопку («Удалить» в этом случае), чтобы выполнить операцию удаления или удаления.
Чтобы вызвать удалить, самостоятельное слово используется. Внутри функции обратного вызова то это ключевое слово теряет его ссылку на класс Todo. По этой причине создайте новую переменную, называемую Self и назначить ключевое слово «это» в верхней части конструкции.
Внутри функции обратного вызова я проверяю, имеет ли элемент Click Class ‘BTN-DELETE’ – то есть это кнопка удаления? Затем просто запустите функцию удаления и пропустите событие в качестве параметра. Я использую это внутри функции удаления, чтобы получить идентификатор текущего щелчка элемента для выполнения операции удаления.
Часть обновления немного сложна. Он состоит из двух функций. Первый – сделать форму редактирования, которая имеет текстовое поле и кнопку обновления. Во-вторых – обновить функцию, которая выполняет операцию обновления.
Все вышеуказанные код, предназначенные для добавления и удаления классов CSS, чтобы показать и скрыть форму редактирования, которая уже находится в доме с классом редактирования. Получите идентификатор из кнопки «Редактировать» и поместите его на кнопку «Обновить». Итайте через Mockdata и проверьте на текущий элемент, используя его i др. Поместите название элемента из Mockdata в текстовое поле, чтобы отредактировать его.
Чтобы вызвать эту функцию, выполните то же логику для удаления, чтобы добавить слушатель события, как это:
Теперь пришло время написать операцию обновления. Следуйте за кодом ниже:
Первые 2 строки этой функции должны получить идентификатор элемента и значение из текстового поля и поместить их в соответствующие переменные. Затем карта через Mockdata и поместите проверку, чтобы найти предмет, который необходимо обновить на основе идентификатора. Как только этот элемент найден, замените заголовок новым заголовом «itemTobeUpdate». Наконец, верните этот обновленный товар на карте.
После того, как эта операция выполнена, скройте форму редактирования, добавив и удалив соответствующие классы CSS. Затем перенесите Mockdata, вызывая функцию рендеринга.
Чтобы запускать эту функцию, добавьте код ниже внутри конструктора.
Теперь все операции CRUD были завершены. Существует один последний шаг, который не является частью Crud, но является частью приложения Todo. То есть для маркировки предметов как завершено. Функция ниже достигнет этого.
Опять же, следуйте тому же шаблону, что и остальные функции:
- Получите идентификатор из атрибута идентификатора данных кнопки
- Карта через Mockdata и найдите соответствующий элемент и установите его выполненное свойство в True и верните этот элемент
- Наконец, повторно рендеринг Mockdata, вызывая функцию рендеринга.
Опять же, используйте ту же логику для запуска функции удаления и добавить код ниже внутри конструктора, чтобы установить задачи, как завершено.
Вот несколько основных CSS, которые я использовал для этого учебника – othing Fancy.
Это это для операций Vanilla JavaScript Crud! Следующим шагом является скрыть это в угловом и реакцию приложение, чтобы увидеть разницу и узнать, насколько удобны такие рамки.
Чтобы получить код и полный проект, клон ниже репозитория:
https://github.com/zafar-saleem/todo
Оригинал: “https://www.freecodecamp.org/news/crud-operations-using-vanilla-javascript-cd6ee2feff67/”