Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/javascript/artykuly/751-pseudo-mvc-z-wykorzystaniem-jquery.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Pseudo MVC z wykorzystaniem jQuery |
Wpisany przez Patryk yarpo Jar | |||
niedziela, 05 września 2010 16:24 | |||
Poprawiony artykuł dostepny na blogu autora "MVC w JavaScript zbudowane na jQuery". Kod HTML coraz częściej naszpikowany jest wieloma artybutami pomocnymi przy wdrażaniu kodu JS do projektu. Czy nie da się z tym czegoś zrobić? Dodatkowo bardzo często kod JS jest "brudny" przez mieszanie wartw: danych, prezentacji i logiki. W małym projekcie to znośne, ale w dużych zaczyna być nie do ogarnięcia. Spróbuję pokazać co można zmienić w tej kwestii.
Strona "spaghetti"Dawniej stosowało się określenia "spaghetti HTML", mając na myśli kod HTML naszpikowany artybutami nadającym stronie wygląd. Aby temu zapobiegać zaczęto stosować CSS. W przypadku JS także można zostawić kod HTML czystym od wszelkim artybutów "zdarzeniowych" (onclick, onmouseover itp.). Najpierw kod, gdzie tego nie zrobię i artybuty będą zaszyte w kodzie HTML:
Po kliknięciu na przycisk w kontenerze #conent zostanie podmieniony ciąg znaków. Czy jednak nie wydaje Ci się to nieelegancke?
Zebranie wszystkich akcji w jednym miejscuSpróbujmy do tego podejść trochę inaczej. Zamiast wstrzykiwać kod JS do artybutów znaczników, dajmy ten kod w jednym miejscu strony. W poniższym przykładzie użyję bibliteki jQuery. Jeśli nie używałeś jej nigdy, zachęcam do krótkiego tutorialu.
Kod HTML od razu stał się bardziej przejrzysty. Jednak nikt nie powiedział, że ten cały system będzie tak prosty. Mało który skrypt JS nie korzysta dzisiaj z ajaksa, często zmienia duże kawałki kodu HTML operując na modelu DOM. Może warto więc byłoby zrobić to trochę inaczej:
Tym sposobem ograniczyliśmy do jednej linii kod odpowiedzialny za przypisanie zdarzeniu jakiejś funkcji. Jednak skrypt rozrósł się nam trochę. Na dobrą sprawę w obiekcie yController dzieje się to samo, co działo się wcześniej w ciele anonimowej funkcji. Spróbujmy dodać jeszcze dodatkowe obiekty - jeden, który będzie "gmerał" w modelu DOM, a drugi który będzie uzyskiwał wymagane dane.
Model - View - Controller
Oraz kod pliku mvc.js
Jak widać bardzo często korzystam tu z faktu że w JS bardzo przyjemnie przekazuje się funkcje jako parametry do innych funkcji. Zobacz linię 37. Kiedy stwierdzisz, że co dane powinny się pojawić gdzie indziej ograniczysz liczbę zmian do jednego miejsca - w konstruktorze obiektu yView. A być może - patrząc przyszłościowo - także kod z `displayContent' da się wykorzystać jeszcze w kilku miejscach? Przykład wykorzystania tego podejścia w większym projekcie:
|