.

.

poniedziałek, 20 marca 2017

Wydrajowałam kod ;) Hurrra!

Ostatnie dni wypełniły mi mentalne zmagania z samą sobą, sprowadzające się do roztrząsania fundamentalnych kwestii egzystencji i szukania odpowiedzi na pytanie: czy to wszystko ma sens? (Pół żartem pół serio.) Oraz boksowanie się z biblioteką Handlebars.js.

Zrobiłam sobie kilkudniowy reset i przerwę w nauce, żeby się zdystansować i sprawdzić swoją motywację (na zasadzie: jak kocham, to zatęsknię ;)). No i wczoraj może nie aż tęsknota, ale jakaś taka ciekawość, co też tam z tymi Handlebarsami, funkcjami i obiektami można porobić, przywiodła mnie z powrotem do BUKI. Ze wzmożonym zapałem wzięłam się do roboty, czego efektem jest nowa struktura pliku app.js, inspirowana zasadą DRY (Don't Repeat Yourself).


O ile to rozumiem, w regule tej chodzi przede wszystkim o to, żeby:
  1. pisać kod (kawałek kodu) raz, a używać go wielokrotnie (zamiast powtarzać ten sam kawałek w wielu miejscach wiele razy),
  2. pisać kod tak, aby możliwa była zmiana jakiegoś elementu w jednym miejscu, a efekty tej zmiany widoczne w wielu miejscach (gdzie ten kod jest używany).

W mojej raczkującej aplikacji zdecydowanie łamałam pierwszy z powyższych punktów. (Swoją drogą, to zadziwiające, że tak rażące naruszenie zasady DRY można zrobić w zaledwie paru linijkach kodu. A co dopiero w dużych systemach. Strach się bać! ;))

PRZED
Na załączonym obrazku widać wyraźne, że w trzech miejscach powtarzałam te same linijki. Czyli sytuacja: aż się prosi, by zrobić z tego funkcję. :)


Poza tym ogólnie miałam tu groch z kapustą, ponieważ wszystko działo się w $(document).ready(), mianowicie:
  • kompilowanie szablonu Handlebars, czyli przekazywanie szablonu HTML ze znacznikami Handlebars do funkcji kompilującej Handlebars.compile()
  • zapisywanie wyniku funkcji Handlebars.compile() w zmiennej, która od tego momentu sama staje się funkcją
  • wywołanie szablonu (powyższej funkcji) z przekazaniem jako parametru obiektu z odpowiednimi danymi (czyli: otrzymanie wynikowego kodu HTML, który ma zostać wyświetlony)
  • rejestrowanie event handlerów i wyświetlanie wynikowego kodu HTML

PO
W wyniku DRY'owania kodu został stworzony globalny obiekt app, który ustawia to, co przy uruchomieniu aplikacji istotne (kawałki, które będą reużywane podczas jej działania) - i tak:
  • za kompilowanie szablonu Handlebars odpowiada funkcja compileSingleHbsTemplate
  • zapisywanie wyniku funkcji Handlebars.compile() w zmiennych wykonuje funkcja compileHbsTemplates - rejestrowana jako właściwość/pole obiektu app.helper, a wywoływana w app.init
  • wywołanie poszczególnych szablonów odbywa się w app.actions, gdzie (jak na razie) mam 3 funkcje: displayHomepage, displayAddBookForm oraz displayWishListPage
  • rejestrowanie event handlerów też zostało wyjęte z $(document).ready() i przeniesione do globalnego obiektu app: w polu app.eventHandlers rejestruję funkcję registerEventHandlers, którą wywołuję (tak samo jak funkcję compileHbsTemplates) w app.init

Dzięki temu wszystkiemu event $(document).ready() został maksymalnie odchudzony i teraz jest tu tylko wywoływana funkcja app.init, czyli ta, która "setapuje" wyjściowe, inicjalne funkcje aplikacji.

Uff...

Kod w jego obecnym kształcie można oczywiście zobaczyć na githubie. A tak poza tym, to ku przestrodze:


;-)

Brak komentarzy:

Prześlij komentarz