По иронии судьбы, на путь программирования меня натолкнула моя неспособность создать сайт-портфолио. В то время это был мой фотобизнес, но, тем не менее, сайт-портфолио. Когда разразился COVID, я обнаружил страсть к программированию, которая в конечном итоге привела меня к участию в программе Flatiron, которую я сейчас посещаю. Сейчас я завершаю четвертый этап программы, и нам было поручено создать приложение, использующее JavaScript, CSS и HTML для внешнего интерфейса, а также Ruby Rails для внутреннего сервера. Когда мне в голову пришла идея, что я могу создать веб-сайт-портфолио, который покажет все, чему я научился, и поможет мне проверить свои новые навыки на практике, это казалось уместным. Я бы солгал, если бы сказал, что создание этого приложения не было крутым процессом и я понял, что могу решить проблемы, которые возникали у меня при создании оригинального сайта-портфолио.

Теперь, хотя я смог решить проблемы, которые у меня были до того, как я начал учиться программировать, это ни в коем случае не означает, что у меня не было набора новых задач. Самое главное, что я заметил, это то, как я справлялся с проблемами, с которыми сталкивался. Я смог быстро сузить область возникновения проблемы и найти точку, с которой я мог приступить к отладке проблемы. Я также смог использовать средство отслеживания ошибок, которое я создал на этапе 3, чтобы отслеживать свои ошибки. Я обнаружил, что время, потраченное на то, чтобы подумать о том, в чем на самом деле была проблема, чтобы я мог отследить ошибку, часто давало мне необходимое решение или место для начала исследования.

При создании приложения с нуля первой проблемой, с которой я столкнулся, было обеспечение того, чтобы каждый файл имел единственную ответственность, но также мог правильно взаимодействовать с другими файлами. Я справился с этим, создав каждый нужный мне файл, а затем загрузив их все в основной файл HTML (в данном случае это был index.html). Я сохранил этот файл вместе с моим основным файлом JavaScript в корневом каталоге внешнего репозитория.

Я хотел, чтобы другие файлы с определенными ролями и функциями были отделены друг от друга и просто взаимодействовали с основным файлом JavaScript. Это представлено файлами comment.js, commentService.js, post.js и postService.js, находящимися в подкаталоге src. Мои файлы комментариев и сообщений создавали соответствующие классы и имели методы экземпляров, которые позволяли мне создавать новые экземпляры и вызывать их атрибуты. Использование этого стиля объектно-ориентированного программирования сделало очень простым создание/чтение/обновление узлов в DOM. Файлы commentService и postService содержали все запросы на выборку для соответствующего класса. Когда мне нужно было отправить запрос PATCH для обновления понравившихся сообщений, postService отправил запрос на выборку на сервер RAILS API. Когда я создавал элементы сообщения, я использовал метод конструктора в post.js вместе с методами экземпляра для создания контента, необходимого на веб-странице. Это позволило установить четкую ответственность за каждый файл в приложении.

Чтобы убедиться, что все различные файлы могут правильно взаимодействовать, я обязательно загрузил их в файл index.html. Я поместил их в конец тега body, чтобы весь HTML-контент загружался перед попыткой загрузки файлов JavaScript, что позволило мне отказаться от прослушивания событий для DOMContentLoadedв моемindex.js файле.

После тестирования, чтобы убедиться, что index.html может взаимодействовать с каждым из файлов, мне нужно было убедиться, что я знаю область действия всех различных переменных, которые я создавал. С введением ES6 появилась возможность использовать let и const в наших приложениях JavaScript. Это позволяет вам использовать область блока в дополнение к функции и глобальной области. Я использовал планировку офиса, чтобы закрепить в голове концепцию масштаба.

Если вы находитесь в отеле, у всех есть доступ к коридору. Это соответствует глобальной области видимости. Любой желающий может зайти в коридор и посмотреть, что там (в данном случае функция сказать привет). Область действия показана в верхней части изображения. Если бы вы были в коридоре (глобальная область видимости) и хотели бы sayHiк человеку в последней комнате, вы бы столкнулись с проблемой, потому что не можете видеть, кто находится в комнате. Эта дверь закрыта, и у вас нет к ней доступа. Однако, если бы вы были в комнате (объем функции), вы бы уже знали значение имени. Когда он пытается вызвать функцию sayHi, он видит, что его нет в комнате, и выходит в коридор (глобальная область видимости), чтобы попытаться найти его. Когда он находит его в коридоре (глобальная область видимости), он может вызвать его. Область действия блока демонстрируется в нижней половине коридора с помощью оператора if.

if (condition) {
  # variables defined here will not be accessible in the global scope (the hallwall can't see inside this room)
}

Когда вы используете скобки после условного выражения, вы открываете начало области вашего блока. Переменные внутри этого блока имеют доступ к другим переменным, а также ко всем другим переменным, определенным на уровнях выше (коридор).

Если это кажется немного трудным для понимания, просто знайте, что вы не одиноки. Я нашел пару статей, которые очень помогли мне понять эти концепции:

JavaScript: Introduction to Scope (function scope, block scope)
JavaScript Scope W3Schools
A Simple Explanation of Scope in JavaScript

В конце концов, console.log() и debugger оказались самыми полезными инструментами для выяснения того, какие функции и методы имеют доступ друг к другу. Эти два инструмента имели первостепенное значение для меня, поскольку я мог на самом деле увидеть, что такое область действия, если бы у меня был доступ к переменным, которые, как я думал, у меня есть, а если нет, то как я мог бы получить к ним доступ. Хотя я ни в коем случае не являюсь профессионалом в работе с областью действия в JavaScript, я чувствую, что основа уже заложена, поэтому я могу продолжать опираться на то, что знаю о области видимости.

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