Това, което ме насочи по пътя на програмирането, по ирония на съдбата беше неспособността ми да създам уебсайт за портфолио. По това време беше за моя фотографски бизнес, но все пак сайт за портфолио. Когато 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на човека в последната стая, ще се натъкнете на проблем, защото не можете да видите кой е в стаята. Тази врата е затворена и вие нямате достъп до нея. Въпреки това, ако бяхте в стаята (обхват на функцията), вече щяхте да знаете стойността на името. Когато се опита да извика функцията 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, чувствам, че основите са положени, за да мога да продължа да надграждам върху това, което знам за обхвата.

Това бяха само малка част от предизвикателствата, с които се сблъсках, докато изграждах приложението си за динамично портфолио. Бях утешен от факта, че успях да използвам основите, които съм научил, за да преодолея новите проблеми, с които се сблъсках, и с нетърпение очаквам да надградя това, което знам.