Учитывая все происходящее, 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 г.