Как заметил Махатма Ганди, : «Жизнь — это нечто большее, чем просто увеличение ее скорости».
Быть быстрым в кодировании связано не только с быстрым написанием, иногда нам нужно связать его с простыми советами вместо сложных строк кода.
В JavaScript вы можете поразить HTML некоторыми элементами, используя createElement, и добавить к нему, или используя литералы шаблона или метки шаблона (``), а затем внутри этого, чтобы тело вашего HTML [ см. это ниже меня ].
Вам нравится метод element + "просто пустое место" + Another_element для объединения элементов ? или вы идете с деньгами знак пути?
Для меня выбор второго пути облегчил мою карьеру, много лет назад я не использовал эти литералы шаблонов в своих проектах, и создавать с их помощью большие проекты было кошмаром, но теперь моим друзьям и разработчикам, которых я знаю, это понравилось. это так много, когда я посоветовал им включить это в свои коды.
Теперь мы увидим небольшой пример, который покажет вам разницу!
Давайте представим, что у нас есть корзина, и она содержит продукты с их ценами плюс количество каждого из них, поэтому здесь мы хотим показать корзину, а также товары, которые мы выбрали, сколько товаров у нас есть и как много нам нужно заплатить.
Мы сделаем это вместе, используя 2 метода: ДАВАЙТЕ КАТАТЬСЯ!
Способ 1: использование createElement:
Сначала начнем с файла index.html, куда мы добавим два элемента DOM корзины, и включим файл script.js, который мы создадим на следующем шаге.
Давайте перенесем эти две тележки, используя document.getElementById (или вы можете использовать document.querySelector со знаком #, например: #cart).
Заполните некоторые продукты с названием, ценой, количеством (Вы не собираетесь платить за это в реале, это просто демо — Ххх СМЕШНО)
Затем давайте создадим две стрелочные функции, которые помогут нам создавать и добавлять: первая создает данный элемент, а вторая добавляет данный элемент к заданному родителю ( Если вы меня не поняли, я объясню, просто следуйте моим словам).
Хорошо, теперь давайте создадим небольшую функцию с именем renderCart1, которую мы начнем с заголовка, создадим , дадим ей текст и добавим его (звучит сложно для маленького заголовка).
Время показывать продукты после этого названия , здесь нужно создать элемент ‹ul› и сопоставить продукты, пока колесо округляется , создать ‹li› для каждого продукта, включая название, цену и количество, затем добавьте их к ‹ul› и вне карту, где останавливается колесо, добавьте список в корзину, как указано ниже.
Работа выполнена ! чего так не хватает? Да, количество всех товаров и общая цена, это легко сделать с помощью reduce(), но что это?
Согласно MDN Web Docs of Mozilla , метод reduce() выполняет функцию reducer (которую вы предоставляете) для каждого элемента массива, в результате чего получается одно выходное значение, которое принимает:
- Аккумулятор
- Текущая стоимость
- Текущий индекс
- Исходный массив
Затем возвращаемое функцией значение присваивается аккумулятору, значение которого запоминается при каждой итерации по всему массиву и в конечном итоге становится окончательным единственным результирующим значением… подробнее.
Хорошо, давайте применим это в нашем небольшом проекте, создадим элементы для суммы, количества, цены и элемента брейка (необязательно, потому что здесь я не буду использовать css).
Затем укажите текст переменной количества общего количества с уменьшением, примененным к массиву продуктов, и начиная с 0 в качестве начального значения, с которого начинается сокращение.
То же самое для цены, а затем мы добавляем 3 элемента к общему элементу (родительскому), затем, наконец, заканчиваем добавлением всего этого к элементу корзины.
Взволнованный ! затем выполните функцию, и фильм начнется!
Способ 2: использование шаблонных литералов (волшебным образом):
Насколько проще начать с небольшого заголовка в одной строке
Добавление продуктов на вечеринку! [ Послушайте, я объясню это ]
Позвольте мне объяснить, после заголовка вы поместите функцию карты товаров в список, а затем, используя знак доллара ($) , вы можете сообщить г-ну JavaScript, что хотите показать название, цену и количество текущей версии продукта, чтобы сделайте это, не используя часто +, я знаю, что вы спрашиваете о .join() , это просто разделитель, который вы можете использовать для разделения элементы на итерации, подробнее об этом можно прочитать здесь.
Теперь я хочу, чтобы вы на мгновение прокрутили вверх и увидели первый код сопоставления в методе #1. Что вы видите? (Ответить мне в комментарии).
Наконец, показывая общее количество и общую цену, я чувствую, что добавляю компоненты один за другим ВОУ!
Хорошо сделано и хорошо структурировано, теперь просмотрите результаты, добавивэто и выполнив функцию renderCart2.
Спасибо, что уделили мне время и прочитали мои слова, надеюсь, это поможет, вы можете поделиться ими со своими друзьями, если хотите.
Ваши лайки и комментарии приветствуются!
Проект на GitHub:https://github.com/kamdevofficial/js-templateticks
Проект на CodePen: https://codepen.io/mohamed-kamal-the-decoder/details/OJpGjOz
