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:
- pisać kod (kawałek kodu) raz, a używać go wielokrotnie (zamiast powtarzać ten sam kawałek w wielu miejscach wiele razy),
- 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 funkcjacompileHbsTemplates
- rejestrowana jako właściwość/pole obiektuapp.helper
, a wywoływana wapp.init
- wywołanie poszczególnych szablonów odbywa się w
app.actions
, gdzie (jak na razie) mam 3 funkcje:displayHomepage
,displayAddBookForm
orazdisplayWishListPage
- rejestrowanie event handlerów też zostało wyjęte z
$(document).ready()
i przeniesione do globalnego obiektuapp
: w poluapp.eventHandlers
rejestruję funkcjęregisterEventHandlers
, którą wywołuję (tak samo jak funkcjęcompileHbsTemplates
) wapp.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