Для проекта разработки программного обеспечения фазы 4 Flatiron School учащиеся должны создать одностраничное приложение с использованием ванильного JavaScript. Внешний интерфейс также должен взаимодействовать с внутренним API, созданным с использованием Ruby on Rails. Фаза 4 программы Software Engineering охватила массу информации и временами казалась ошеломляющей. Однако в конце концов я влюбился в JavaScript из-за интерактивности, которую он обеспечивает, а также из-за объектной ориентации JavaScript с использованием классов, поскольку это было очень знакомо. До этого момента в программе основное внимание уделялось Ruby, который также является объектно-ориентированным языком, поэтому, даже если это не совсем то же самое, сходство облегчало понимание и понимание.
Объектная ориентация в JavaScript дает вам возможность хранить связанные с классом данные и поведения вместе в одном объекте. Использование синтаксиса классов в JavaScript было частью ES6, новой версии JavaScript, представленной в 2015 году. Классы — это просто шаблон для создания объекта. Внутри класса объект создается с помощью конструктора для создания экземпляра класса. Например…
Как видите, в JavaScript, когда объект ссылается на себя, он использует ключевое слово this, а не self, как в Ruby. В приведенном выше примере мы устанавливаем переменную торт (пусть торт), затем вызываем конструктор, используя ключевое слово «новый», за которым следует имя класса (новый торт), и, наконец, передаем его свойства в качестве параметров для создания экземпляра нового экземпляра класса. класс торт. Сделав это, мы теперь можем получить доступ к свойствам этого экземпляра, используя имя переменной, за которым следует .property_name, например, cake.flavor, как показано в примере выше. Вы также можете использовать переменную торта для вызова функции/метода экземпляра, такого как cake.nameEvent(), как показано в примере выше.
Класс также может иметь общедоступные функции/методы. Они записываются с использованием ключевого слова static перед именем функции, например, static displayAllCakes(). Эти статические функции/методы вызываются не для экземпляра класса, а для самого класса. Это как методы класса в Ruby. Однако способ вызова метода класса в JavaScript заключается в использовании имени класса, за которым следует имя статической функции, например Cake.displayAllCakes(). Вы также можете определить статические переменные класса, которые будут использоваться только этим конкретным классом. Доступ к ним осуществляется с использованием имени класса, предшествующего имени переменной, таким же образом, как мы вызывали функцию/метод статического класса. Однако важно отметить, что эти переменные можно использовать, если другой класс расширяет этот класс посредством наследования и использует префикс super для доступа к этим переменным. Чтобы узнать больше об этом, нажмите здесь.
В JavaScript можно сделать несколько творческих вещей, которые сделают его еще более похожим на Ruby. Один из моих любимых — пример ниже, где вы можете создать статическую переменную класса all и установить ее равной пустому массиву. Затем вы можете использовать этот массив для добавления новых экземпляров класса, в который вы создаете экземпляр, чтобы к ним можно было получить доступ позже без необходимости постоянно делать запросы на выборку. Например…
Единственное, с чем вам нужно быть осторожным при этом, это когда вы удаляете экземпляр класса, тогда вам также нужно будет удалить этот экземпляр из статического массива всех переменных. То же самое касается обновления объектов. Вам нужно будет удалить предыдущие, прежде чем вставлять более новые, обновленные версии. Итак, как видите, это умная идея, но она также может быть немного сложной и вызвать проблемы, если вы не будете слишком осторожны.
Некоторые из преимуществ использования объектно-ориентированного подхода в JavaScript заключаются в написании меньшего количества кода и простоте внесения изменений, если это необходимо. Поскольку все экземпляры создаются через конструктор, если свойство необходимо изменить, то есть только одно место, которое необходимо обновить. Код также хорошо организован и логичен. Разбивая файлы в приложении на отдельные файлы классов, легче найти то, что вы ищете, чем просматривать один невероятно длинный файл. Просто в этом тоже больше смысла. Это также гарантирует, что каждый создаваемый объект будет иметь схожие свойства и поведение. Чтобы узнать больше об объектной ориентации в JavaScript с использованием классов, нажмите здесь.
Пожалуйста, ознакомьтесь с моим проектом и дайте мне знать, что вы думаете…
Видео прохождение:
Репозитории GitHub:
Интерфейс-https://github.com/grantba/marvel_character_collection_app.git
Бэкенд-https://github.com/grantba/marvel_character_collection_api.git
