Учитывая все происходящее, JavaScript был своего рода вызовом. Я углублюсь в сложности синтаксиса, потока и частых обновлений, но я буду решать проблемы, с которыми я столкнулся в первую очередь, начиная с уроков. Из-за COVID-19, внезапной смены когорты, начала новой должности в аэропорту и семейных проблем казалось, что мой импульс сильно замедлился. Лаборатории JS были удачными или нет, и мне было трудно понять несколько концепций, таких как определенные методы ES6 (…расширение, уменьшение, установка тайм-аута, функция стрелки), а также полное понимание сериализаторов. Я знал, что когда начнется проектная неделя, мне придется потратить 3/4 дня на кодирование и исследование каждого компонента создания моего приложения. От настройки идентификаторов div#id в моем html-коде, его стилизации с помощью CSS и создания асинхронного кода. Возможность спланировать мою заявку была чрезвычайно важна для моего успеха.

  • Определяемся с идеей приложения
  • Я смог использовать draw.io для создания диаграммы, представляющей мои модели и их отношения. Я хотел сделать что-то довольно простое, но достаточное, чтобы показать свое мастерство в JavaScript и создание API с Rails на бэкенде. В первую очередь я руководил созданием карточного приложения, затем поддельного приложения для твиттера или игры в пинг-понг. Я решил остановиться на простом приложении-викторине. Я мог бы легко сохранить и удалить пользователя с помощью функции JSON fetch(), «затем» получить обещания загрузить моих пользователей, вопросы и ответы с моего внутреннего сервера, чтобы манипулировать DOM, чтобы добавить их в тело html.

После прочтения ресурсов по планированию проекта структурирование моего кода не показалось мне слишком сложным, после того как я определился со своим приложением. Вертикальное построение помогло моему потоку понять смысл, помогая довольно легко перейти от бэкенда к фронту. Это также помогло мне не забыть настроить все связанные идентификаторы и классы.

Мои модели/отношения:

Викторина пользователя — много вопросов Вопрос — принадлежит :quiz, has_many :answers Ответ — принадлежит :question

Часто используемые методы.

(For in) часто использовался, так как я создавал коллекцию объектов. Я определяю свой объект (единственное число), который происходит от моих объектов (множественное число), и затем я могу манипулировать каждой итерацией объектов.

function grabUsers() { fetch(${BASE_URL}/users) .then(res => res.json()) .then(users =>{ for (let user of users){ let u = new User(user.id, user.username, user.total) u.renderUser();

Статические методы — полная противоположность методам экземпляра. Static позволяет вам вызывать функцию для фактического объекта без его создания/инициализации.

Кроме того, мой инструктор рассказал об эффективном использовании console.log для отслеживания того, что вы записываете. Функция console.log() может принимать 2 аргумента («строка», переменная). Это позволяет отслеживать ваши журналы с помощью значимых «строк», связанных с переменными. Крутой трюк!!

-Дополнения, проблемы и вещи для обзора

-Выполнение требований Это руководство также помогло мне убедиться, что я выполняю все необходимые шаги для продолжения оценки. x README.md x объектно-ориентированный JavaScript (классы) x модель предметной области, обслуживаемая серверной частью Rails, должна включать ресурс, по крайней мере, с одним отношением has-many x 3 вызова AJAX, охватывающих как минимум 2 из Create, Read, Update и Delete ( КРУД). x код JavaScript должен использовать выборку с соответствующей HTTP-командой, а ваш API Rails должен использовать соглашения RESTful. x Использование классов и функций x Ответы JSON в объекты модели JavaScript с использованием синтаксиса класса или функции конструктора ES6 x Возможности ES6 x Следуйте соглашениям Rails MVC и RESTful. x Стремитесь к большому количеству небольших коммитов

Теперь вещи, которые я буду продолжать рассматривать до времени оценки, будут:

  • переменные
  • структуры данных
  • функции
  • подъем
  • сфера
  • контекст
  • это
  • закрытия
  • Синтаксис ES6
  • пусть, константа
  • стрелочные функции
  • Используйте render json: для рендеринга сериализованного JSON
  • Выбор, создание и изменение узлов DOM
  • Прикрепите прослушиватели к узлам DOM, чтобы реагировать на взаимодействие с пользователем.
  • Используйте preventDefault для управления поведением при отправке формы
  • Используйте выборку с HTTP-методами GET, POST, PATCH и DELETE.
  • Создайте объект JavaScript с синтаксисом класса ES6.
  • Создавайте экземпляры объектов JavaScript и вызывайте для них методы.

Скоро будет больше, но не стесняйтесь проверить мое приложение-викторину, и я приветствую отзывы! Это заняло некоторое время, но я чувствую себя прекрасно!!!

Первоначально опубликовано на https://rshield1.github.io 4 августа 2020 г.