Создание облегченной системы уведомлений с использованием пользовательских событий javascript
Я не обычный конструктор библиотек, я всегда нахожу, что кто-то уже создал то, что я хочу использовать. Но я фронтенд-разработчик css-first (да, это моя должностная инструкция 😄), которому действительно нравится делать индивидуальные вещи, особенно когда дело доходит до аспекта брендинга, что означает, что время от времени я найти что-то, что либо не слишком настраиваемо, либо слишком велико для моего простого случая использования, когда я вытаскиваю свою шляпу инженера и иду на работу.
Заявление об ограничении ответственности: это определенно не универсальное решение, поэтому пока не пытайтесь его разветвлять и заменять SweetAlert. Но я надеюсь, что это заставит вас задуматься, прежде чем включать библиотеку 200 КБ только для уведомлений.
Итак, уведомления… мы любим их, ненавидим их, без них не обойтись, но затем они сводят нас с ума, поэтому мы снова их ненавидим… Я отвлекся. В итоге, уведомления действительно важны, и если вы прошли первую неделю обучения javascript, вы, вероятно, не слишком взволнованы использованием alert () для уведомлений вашего приложения. Но прелесть предупреждений в их простоте, так как вам не нужно думать, вы просто вызываете это сообщение, и вуаля появляется пользовательский интерфейс предупреждений.
Но нативные оповещения браузера - это не совсем потрясающие элементы пользовательского интерфейса, на самом деле я думаю, что было бы неплохо провести опрос в твиттере, чтобы увидеть, сколько людей используют их не только для целей отладки. Введите SweetAlert ()… .. нет, я имею в виду этот пост, введите этот пост… вот, мы, наконец, добрались сюда.
Итак, я недавно работал над небольшим проектом, и я действительно не хотел использовать какие-либо библиотеки, если это не было абсолютно необходимо, и тем более, если это была библиотека пользовательского интерфейса, потому что я думал про себя, что знаю css ... и некоторые js ... (рифму предназначено 😄) так что…
Верно, я не ... Итак, вернемся к проекту, над которым я работал, он достиг точки, в которой я хотел иметь, как вы уже догадались ... глобальную систему уведомлений и вместо того, чтобы тянуться к стабильной, протестированной в бою библиотеке, как любой другой уважая фронтендера, я подумал про себя: «ты знаешь, что было бы круто, если бы я делал это, просто используя систему событий dom». Я знаю, о чем ты думаешь, Уолтер, прежде чем идти дальше, почему бы тебе сначала * не дать * мне какой-нибудь код? 😎 ... Ну, как ни крути, добрый человек, ты, одна суть сразу подойдет ... ..
Итак, здесь происходит несколько вещей: первая строка, которая случайно оказалась во второй строке, создает элемент div-оболочки, к которому мы позже добавим наши уведомления. После этого мы даем ему имя класса уведомления и добавляем его в тело.
В шестой строке мы создаем слушателя для события «a-notification». (Заметка: если вам нравится креативность и оригинальность названия мероприятия 'a-notification', не стесняйтесь оставить мне пару аплодисментов, я не буду возражать 😊)
Затем мы извлекаем сообщение и параметры из возвращенного события и помещаем их в соответствующие переменные, затем в третьей строке мы берем извлеченные данные и помещаем их в новый объект, а именно _notification.
Если в этот момент вы думаете: «Излишне много? вы могли бы заменить строки 7 и 8 простым «const _notification = e.detail»…. я говорю вам: вспомните, когда я говорил об отказе от ответственности, когда я сказал, что это не производственный код ... Это означает, что я оставляю за собой право в любое время показать, что я знаю ES6 😊. И, конечно же, я также хотел дать вам заблаговременное представление о структуре данных (yap! Мы называем это так) объекта уведомления.
В строке 9 мы назначаем уведомлению идентификатор, состоящий из случайной строки, а также добавляем «a-notif» по очевидным причинам патентования 😂.
Наконец, мы вызываем функцию showNotification, передавая наш только что созданный объект _notification, чтобы, конечно же, показать уведомление.
Прежде чем мы рассмотрим функцию ShowNotification, давайте поговорим об инкапсуляции ...
Если это слово «экспорт» не имеет для вас смысла, используйте модули javascript… но суть (хе-хе) в том, что javascript просто стал крутым с такими вещами, как импорт и прочее. И снова, если = › выглядит незнакомым, просто используйте функции стрелки Google.
Начиная с функции notifEvent. Он служит абстракцией для создания настраиваемого события dom, просто получает сообщение и параметры настройки и возвращает настраиваемое событие a-notification, которое мы ожидаем… в таком чистом виде, как они приходят.
Затем функция notify, о которой все, кто пользуется библиотекой, должны знать. Он получает два аргумента: первый - это сообщение, а второй - необязательный объект с такими параметрами, как продолжительность, позиция размещения и тому подобное. Затем мы используем ES6 merge objects with spread, чтобы использовать наши параметры по умолчанию и переопределить это с помощью значений, которые отправляет пользователь. Затем мы вызываем функцию notifEvent с сообщением и параметрами, и она возвращает нам новое настраиваемое событие, и, как и хороший код, мы отправляем это событие в дикую местность, которая является домом.
Затем пользователь библиотеки может импортировать {notify} из «уведомителя» и начать уведомление следующим образом: notify («I can haz notifications»).
Наконец, функция showNotification просто добавляет элемент в созданную нами оболочку div и удаляет его по истечении указанного времени. Если вы хотите поддерживать сильные теги и такие вещи, как кнопка закрытия, вам нужно заменить innerText на innerHTML в строке 4.
Спасибо за чтение, оставьте мне свои мысли.
