и почему это хорошая идея, если вы не используете фреймворк
Если вы не используете фреймворк JavaScript, такой как React, Angular или Vue (и это лишь некоторые из них), идея создания шаблона проектирования остается за разработчиками.
Но что, если ваш собственный сторонний проект или ваша компания использует jQuery (или просто старый добрый JavaScript), а использование фреймворка на данный момент нецелесообразно? Отличная идея — внедрить шаблон проектирования в ваше веб-приложение.
Прежде чем углубиться, вот несколько ключевых советов по написанию объектно-ориентированного JavaScript:
- Каждый компонент в DOM является объектом.
- Каждый компонент имеет свое состояние и методы.
- В ваших файлах JavaScript есть один достоверный источник для изучения поведения всех элементов в объекте document.
Я не буду вдаваться в подробности и принципы объектной ориентации в этом блоге для краткости, но если вы не знакомы с некоторыми принципами, я рекомендую вам ознакомиться с этим отличным блогом Александра Петкова.
Итак, как это работает?
Допустим, у вас есть один компонент (или элемент) в вашем веб-приложении. Вот пример простого счетчика с изюминкой:
Принцип работы этого приложения заключается в наличии счетчика, который начинается с нуля и увеличивается каждый раз, когда пользователь нажимает кнопку "тыкать". Приращение count действует как индекс массива сообщений, отображая их по одному.
Таким образом, мы можем сказать, что это приложение имеет определенное состояние (то есть счетчик и массив сообщений) и метод, увеличивающий счетчик.
Теперь вы создаете глобальную переменную с именем count и метод onClick для элемента ‹div›. И это, вероятно, было бы совершенно нормально сделать в этом сценарии, когда вам нужно иметь дело только с одним элементом.
Но что, если бы у вас было несколько компонентов счетчика на одном экране? У каждого будут свои собственные переменные count , свои ответы (в зависимости от личностей, которые вы им даете) и собственный набор методов. Управление различными глобальными переменными и функциями было бы кошмаром. Представьте себе создание отдельной глобальной переменной для количества каждого элемента следующим образом:
Внезапно объявление множества глобальных переменных и функций, вероятно, не лучший способ.
Лучшим подходом было бы создание конструктора, который создает объекты для каждого элемента DOM, который вам нужен, например, что-то вроде этого:
Здесь мы написали класс, содержащий функцию-конструктор, которая принимает состояние и методы, которые мы хотим определить для объекта. Теперь компонент Counter инкапсулирован в собственный класс, что дает нам свободу использовать его и создавать новые в любом контейнере, в который мы хотим его добавить!
Важно отметить, что здесь мы привязываем метод onClick к создаваемому нами экземпляру (см. строку 20). Если мы этого не сделаем, элемент this представляет нажатую кнопку, а не весь компонент, что приведет к ошибке, поскольку кнопка не имеет тех же значений состояния, что и компонент. .
