Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00297 005336 12767667 na godz. na dobę w sumie
Mistrzowski JavaScript. Programowanie zorientowane obiektowo - książka
Mistrzowski JavaScript. Programowanie zorientowane obiektowo - książka
Autor: Liczba stron: 264
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3198-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).
JavaScript jest popularnym, rozwiniętym i dojrzałym językiem programowania, a jego zastosowanie znacząco wykracza dziś poza WWW, HTML i CSS: skrypty można uruchamiać na serwerze, komputerach PC, w urządzeniach przenośnych i układach wbudowanych. Dzięki tym możliwościom JavaScript stał się potężnym i wszechstronnym narzędziem. Co więcej, ten język świetnie nadaje się do programowania zorientowanego obiektowo i pozwala na pisanie solidnego kodu, a w efekcie na tworzenie nawet bardzo złożonych, skalowalnych i łatwych w utrzymaniu aplikacji.

Niniejsza książka jest przeznaczona dla osób, które mniej więcej znają JavaScript, ale chcą się nauczyć programować obiektowo w tym języku. Można tu znaleźć informacje o definiowaniu obiektów za pomocą klas ES6, metodach hermetyzacji oraz różnych sposobach dziedziczenia. Są tu niektóre zaawansowane wzorce projektowe i opis wykorzystania mechanizmu obietnic do pracy z procesami asynchronicznymi. Nie zabrakło również wyjaśnień zasad SOLID, dzięki którym tworzony kod staje się efektywny i niezawodny.

Niektóre zagadnienia omówione w książce:

JavaScript — pisz skrypty do zadań specjalnych!


Andrea Chiarelli — jest ekspertem programowania w różnych technologiach (C#, JavaScript, ASP.NET czy AngularJS, REST i PhoneGap/Cordova), a także autorem i współautorem licznych książek o programowaniu. Poza tym regularnie pisuje do takich magazynów, jak „Computer Programming” czy „ASP Today”. Pracuje na stanowisku starszego inżyniera oprogramowania we włoskim oddziale Apparound Inc., firmy, która urodziła się w samym sercu Doliny Krzemowej.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Mastering JavaScript Object-Oriented Programming Tłumaczenie: Łukasz Piwko ISBN: 978-83-283-3198-3 Copyright © 2016 Packt Publishing First published in the English language under the title ‘Mastering JavaScript Object-Oriented Programming (9781785889103)’. Polish edition copyright © 2017 by Helion SA All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/misjsp.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/misjsp Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści O autorze O recenzencie Wstęp Rozdział 1. Odświeżenie wiadomości o obiektach Literały obiektowe Konstruktory obiektów Prototypy obiektów Klasy Podsumowanie Rozdział 2. Zasady programowania obiektowego Zasady programowania obiektowego Czy JavaScript to obiektowy język programowania? Narzędzia abstrakcji i modelowania Przestrzeganie zasad obiektowości Obiektowość JavaScriptu a obiektowość klasyczna Podsumowanie Rozdział 3. Hermetyzacja i ukrywanie informacji Hermetyzacja i ukrywanie informacji Podejście konwencjonalne Określanie prywatności za pomocą domknięć Metadomknięcia Deskryptory własności Ukrywanie informacji w klasach ES6 Podsumowanie 7 9 11 15 15 19 23 25 27 29 30 31 31 34 42 43 45 45 46 47 52 58 66 68 Poleć książkęKup książkę Spis treści Rozdział 4. Dziedziczenie i domieszki Zalety dziedziczenia Obiekty i prototypy Dziedziczenie w ES6 Kontrolowanie dziedziczenia Implementacja wielodziedziczenia Tworzenie i używanie domieszek Podsumowanie Rozdział 5. Definiowanie kontraktów i kacze typizowanie Dynamiczna kontrola typów Kontrakty i interfejsy Kacze typizowanie Kacze typizowanie i polimorfizm Podsumowanie Rozdział 6. Zaawansowane techniki tworzenia obiektów Tworzenie obiektów Wzorce projektowe i tworzenie obiektów Tworzenie singletonu Fabryka obiektów Wzorzec Budowniczy Porównanie wzorców Fabryka i Budowniczy Recykling obiektów z puli Podsumowanie Rozdział 7. Prezentowanie danych użytkownikowi Interfejsy użytkownika Wzorce prezentacyjne Wzorzec Model-Widok-Kontroler Wzorzec Model-Widok-Prezenter Wzorzec Model-Widok-ModelWidoku Porównanie wzorców MV* Podsumowanie Rozdział 8. Wiązanie danych Czym jest wiązanie danych? Implementacja wiązania danych Wzorce Obserwator i Publikacja-Subskrypcja Obiekty pośrednie Podsumowanie 4 69 69 70 76 78 85 86 90 91 91 97 98 107 109 111 111 113 113 117 124 127 127 130 133 133 136 137 143 147 152 153 155 155 157 163 167 170 Poleć książkęKup książkę Spis treści Rozdział 9. Programowanie asynchroniczne i obietnice Czy JavaScript to język asynchroniczny? Pisanie kodu asynchronicznego Wprowadzenie do obietnic Generatory Podsumowanie Rozdział 10. Organizacja kodu Zakres globalny Tworzenie przestrzeni nazw Moduły Ładowanie modułów Moduły standardu ECMAScript 6 Podsumowanie Rozdział 11. Zasady SOLID Obiektowe zasady projektowania Zasada pojedynczej odpowiedzialności Zasada otwarte/zamknięte Zasada podstawiania Liskov Zasada segregacji interfejsów Zasada odwrócenia zależności Podsumowanie Rozdział 12. Nowoczesne architektury aplikacji Od skryptów do aplikacji Aplikacje klasyczne i jednostronicowe Architektura Zakasa-Osmaniego Funkcje przekrojowe i AOP Aplikacje izomorficzne Podsumowanie Skorowidz 171 171 173 180 190 193 195 195 197 200 207 217 220 221 221 222 226 230 232 234 240 243 244 246 249 256 258 259 261 5 Poleć książkęKup książkę Poleć książkęKup książkę 7 Prezentowanie danych użytkownikowi Jedną z najbardziej widocznych części aplikacji z oczywistych względów jest warstwa pre- zentacji danych użytkownikowi. Nieważne, czy aplikacja ma graficzny interfejs użytkownika, czy działa w wierszu poleceń — interakcja użytkownika z programem oraz dane, na których ten program operuje, zawsze mają kluczowe znaczenie. Zapewnienie użytkownikowi efektywnego dostępu do danych i zwracanie wyników lub informacji zwrotnych wymaga wykonywania skomplikowanych operacji, które często prowadzą do powstania nieczytelnego i trudnego w ob- słudze kodu. Istnieją jednak wzorce projektowe, które opisują zasady projektowania strukturalnego kodu w taki sposób, aby był jednocześnie elastyczny i łatwy w utrzymaniu. W tym rozdziale skupiam się właśnie na takich wzorcach, zwanych prezentacyjnymi, których głównym celem jest oddziele- nie prezentacji od modelu danych. Mówiąc konkretnie, w rozdziale zostały opisane następujące najbardziej znane wzorce prezentacyjne:  Model-Widok-Kontroler;  Model-Widok-Prezenter;  Model-Widok-ModelWidoku. Interfejsy użytkownika Jednym z największych wyzwań podczas tworzenia każdej aplikacji jest implementacja mecha- nizmów interakcji programu z użytkownikiem. Bez względu na sposób interakcji użytkownika z aplikacją obsługujący ją kod prawie zawsze jest skomplikowany i trudny w utrzymaniu. Dotyczy to zarówno interfejsów graficznych, jak i konsolowych. Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo Problemy dotyczące implementacji interfejsu użytkownika Główną przyczyną trudności jest konieczność opanowania trzech aspektów interakcji między użytkownikiem i aplikacją: stanu, logiki i synchronizacji. Stan to zbiór informacji reprezentujących aktualny obraz interfejsu użytkownika. Decyduje o tym, co użytkownik widzi w danym czasie i jak to może współpracować z aplikacją. Logika to zbiór operacji, które można wykonać na elementach interfejsu w celu pokazania lub ukrycia albo sprawdzenia poprawności danych. Logika może być bardzo skomplikowana, ale wszyst- ko zależy od rodzaju operacji wykonywanych na danych przedstawianych użytkownikowi. Synchronizacja to działania dotyczące wiązania danych pokazywanych użytkownikowi z danymi reprezentowanymi przez obiekty biznesowe używane przez aplikację. To właśnie kombinacja tych składników jest najbardziej złożonym elementem mechanizmu pre- zentacji danych użytkownikowi i interakcji z aplikacją. Interfejsy użytkownika i JavaScript Kwestie dotyczące interakcji z użytkownikiem zazwyczaj nie mają ścisłego związku z samym językiem programowania i dlatego także w aplikacjach JavaScriptu trzeba się borykać z wie- loma problemami. Jak wiadomo, interfejsy użytkownika przy użyciu języka JavaScript zwykle tworzy się z wyko- rzystaniem znaczników HTML-a. Podczas gdy HTML służy do opisywania interfejsu graficzne- go, JavaScript służy do manipulowania elementami tego języka za pomocą logiki, która może zmieniać stan i zapewniać synchronizację. JavaScript uzyskuje dostęp do elementów HTML-a poprzez obiektowy model dokumentu (ang. Document Object Model — DOM), czyli obiek- tową reprezentację kodu znacznikowego stanowiącego interfejs użytkownika. Przyjrzymy się typowemu przykładowi realizacji prostego interfejsu użytkownika za pomocą JavaScriptu i HTML-a. Najpierw spójrz na poniższy kod języka HTML: label Imię: input type= text id= txtName /label br/ label Nazwisko: input type= text id= txtSurname /label br/ div id= divMessage /div button id= btnSave Zapisz /button button id= btnReset Resetuj /button Jest to definicja prostego formularza, w którym użytkownik może podać imię i nazwisko oraz kliknąć przycisk, aby zapisać te informacje w bazie danych. Dodatkowo zostawiono pusty ele- ment na ewentualne wiadomości dla użytkownika. W przeglądarce internetowej formularz ten wyglądałby mniej więcej tak jak na poniższym rysunku: 134 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi Poniżej natomiast znajduje się typowy kod JavaScriptu obsługujący interakcję takiego formula- rza z użytkownikiem: var person; var txtName; var txtSurname; var btnSave; var divMessage; function Person(name, surname) { this.name = name; this.surname = surname; } function savePerson(person) { // zapisanie danych lokalnie lub wysłanie ich na serwer console.log( Zapisano! ); } window.onload = function() { txtName = document.getElementById( txtName ); txtSurname = document.getElementById( txtSurname ); btnSave = document.getElementById( btnSave ); btnReset = document.getElementById( btnReset ); divMessage = document.getElementById( divMessage ); person = new Person( Jan , Kowalski ); txtName.value = person.name; txtSurname.value = person.surname; btnSave.onclick = function() { if (txtName.value txtSurname.value) { person.name = txtName.value; person.surname = txtSurname.value; savePerson(person); divMessage.innerHTML = Zapisano! ; } else { divMessage.innerHTML = Wpisz imię i nazwisko! ; } }; 135 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo btnReset.onclick = function() { txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; person.name = ; person.surname = ; }; }; Zdefiniowaliśmy kilka zmiennych globalnych, konstruktor Person() do tworzenia obiektu bizne- sowego oraz funkcję savePerson(), która będzie zapisywała dane w odpowiednim miejscu. Następnie powiązaliśmy logikę ze zdarzeniem ładowania aktualnego okna przeglądarki. Logika ta umożliwia wyświetlanie w polach tekstowych aktualnych wartości własności obiektu repre- zentującego osobę oraz obsługuje działanie przycisków Zapisz i Resetuj. Kliknięcie przycisku Zapisz powoduje wywołanie funkcji savePerson(), jeśli wprowadzone przez użytkownika da- ne są prawidłowe, lub wyświetla komunikat o braku wymaganych informacji w przeciwnym przypadku. Przycisk Resetuj służy do kasowania zawartości pól formularza. Jest to w pełni funkcjonalny kod, choć pozostawia wiele do życzenia pod względem elastyczności i łatwości obsługi. Stan, logika i synchronizacja są ze sobą tak ściśle powiązane, że nawet pozornie prosta zmiana może być kłopotliwa. Zastanówmy się np., co musielibyśmy zrobić, gdybyśmy zdecydowali, że zamiast w elemencie div wiadomości dla użytkownika wolimy wyświetlać w ele- mencie textarea. Co by było, gdybyśmy chcieli przenieść całą logikę biznesową i synchroni- zację do innego rodzaju interfejsu użytkownika, np. wiersza poleceń? Musielibyśmy wprowadzić liczne zmiany w kodzie, co nie byłoby takie łatwe nawet mimo prostoty tego przykładu. W takich sytuacjach pomocne są właśnie wzorce prezentacyjne. Wzorce prezentacyjne Wzorce prezentacyjne to kategoria wzorców projektowych dotyczących sposobów prezentacji danych użytkownikowi. Są szeroko wykorzystywane przy programowaniu interfejsów użyt- kownika, a ich podstawową zasadą jest rozdzielenie niezwiązanych ze sobą spraw. Stan, logikę i synchronizację rozdziela się między komponenty, które wspólnie tworzą określony rodzaj archi- tektury zapewniającej elastyczność i łatwość utrzymania. W rozdziale spraw promowanym przez wzorce prezentacyjne chodzi głównie o dokładne wyodrębnienie obiektów biznesowych, które opisują świat realny, i obiektów prezentacyjnych, które są elementami graficznego interfejsu użytkownika widocznego na ekranie. Obiekty biznesowe powinny być całkowicie samodzielne i działać bez odnoszenia się do warstwy prezentacji. Ponadto powinny jednocześnie obsługiwać różne rodzaje prezentacji, takie jak np. interfejs graficzny i wiersz poleceń. 136 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi Model, widok i kontroler Tradycyjnie wzorzec prezentacyjny obejmuje trzy składniki. Pierwszy z nich to model — składają się nań obiekty biznesowe zawierające informacje, które mają zostać przedstawione użytkownikowi. Model można pobrać z usługi albo może być przechowywany w bazie danych. Nie posiada on żadnych informacji na temat sposobu prezen- towania danych użytkownikowi i nie zawiera żadnej logiki. To tylko dane. Widok to komponent odpowiedzialny za prezentację danych użytkownikowi i przechwytywanie zdarzeń interakcji z użytkownikiem. Stanowi on interfejs użytkownika i reprezentuje aktualny stan modelu. W aplikacjach sieciowych widok zazwyczaj obejmuje kod HTML-a, który opisuje użytkownikowi aktualny model i umożliwia wystąpienie interakcji. Trzeci komponent może mieć różne nazwy w zależności od wzorca. W najczęściej używanych wzorcach bywa nazywany kontrolerem, prezenterem albo widokiem modelu. Zazwyczaj za- wiera logikę architektury prezentacji i może koordynować przepływ informacji między wido- kiem a modelem. Innymi słowy: sprawuje nadzór nad synchronizacją bieżącego stanu i mo- delu danych. W kilku następnych podrozdziałach objaśniam trzy najczęściej używane wzorce prezentacyjne: Model-Widok-Kontroler (ang. Model-View-Controller — MVC), Model-Widok-Prezenter (ang. Model-View-Presenter — MVP) oraz Model-Widok-ModelWidoku (ang. Model-View-ViewModel — MVVM). Te wzorce i ich różne warianty czasami określa się mianem MV*, co oznacza, że model i widok to elementy stałe, choć ich rola może być różna. Sposób realizacji zasady roz- działu spraw przez każdy z tych trzech wzorców prześledzimy na podstawie implementacji według ich zasad przykładu opisanego powyżej. Opisanych w tym rozdziale wzorców prezentacyjnych nie ma w książce Bandy Czworga. Większość pro- gramistów uważa je za wzorce złożone, czyli takie, które można zbudować z innych wzorców. Na przykład widok i kontroler mają implementację strategii, sam widok może być implementacją złożoną, a widok i model mogą być synchronizowane przez wzorzec Obserwator. Jednak ze względu na ich rozpo- wszechnienie wzorce te opisuję jako odrębne jednostki. Wzorzec Model-Widok-Kontroler Wzorzec Model-Widok Kontroler (MVC) jest jednym z pierwszych prezentacyjnych wzorców projektowych, który opracowano w latach 70. jako zalecaną metodę implementacji graficznych interfejsów użytkownika. Z biegiem lat wraz z postępem technologii powstały liczne wersje tego wzorca, ale jego podstawowa struktura nie zmieniła się do dziś. Jak wskazuje nazwa, oprócz modelu i widoku, we wzorcu tym ważną rolę odgrywa kontroler. 137 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo Każdy element pełni istotną funkcję, a wszystkie te komponenty razem obsługują interakcję z użytkownikiem, jak pokazano na poniższym rysunku: Zadaniem widoku jest obsługa interakcji z użytkownikiem. Wyświetla on dane dostarczone przez model i odbiera dane od użytkownika. Kontroler współpracuje z modelem w wyniku reakcji na dane wprowadzane przez użytkownika. Kiedy użytkownik wprowadza dane do widoku, kontroler przejmuje je i dokonuje zmian w modelu. Rozdział zadań między te trzy komponenty ułatwia otrzymanie bardziej elastycznego i łatwiejszego w utrzymaniu kodu. Aby nie opierać się tylko na abstrakcyjnych opisach, przepiszemy kod z poprzedniej sekcji zgod- nie z założeniami architektury MVC. Zaczniemy od zdefiniowania modelu: var Model = (function () { function Model(name, surname) { this.name = name; this.surname = surname; } return Model; }()); Konstruktor ten definiuje osobę jako obiekt Model posiadający własności name i surname. Oczywi- ście model może też być klasą, jak w poniższym przykładzie: class Model { constructor(name, surname) { this.name = name; this.surname = surname; } } Widok będzie obsługiwał interakcję z użytkownikiem i wizualnie przedstawiał dane modelu. Oto jego implementacja: var View = (function () { function View(model, controller) { var self = this; 138 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var btnSave = document.getElementById( btnSave ); var btnReset = document.getElementById( btnReset ); self.controller = controller; txtName.value = model.name; txtSurname.value = model.surname; btnSave.onclick = function () { self.save(); }; btnReset.onclick = function () { self.clear(); }; } View.prototype.clear = function () { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var divMessage = document.getElementById( divMessage ); txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; }; View.prototype.save = function () { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var data = { name: txtName.value, surname: txtSurname.value }; this.controller.save(data); }; Object.defineProperty(View.prototype, message , { set: function (message) { var divMessage = document.getElementById( divMessage ); divMessage.innerHTML = message; }, enumerable: true, configurable: true }); return View; }()); 139 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo Jak widać, konstruktor pobiera argumenty model i controller. Odnosi się on do elementów HTML-a strony przez DOM i wstawia do nich wartości z modelu. Do konstruktora zostały dołączone metody clear() i save() powiązane ze zdarzeniem kliknięcia przycisków. Metoda clear() resetuje pola tekstowe formularza internetowego, a metoda save() pobiera aktualne wartości z tych pól i przekazuje je do metody save() kontrolera. Na koniec następuje dołączenie do widoku własności message. Wartość tej własności jest przekazywana do elementu div prze- znaczonego do wyświetlania wiadomości. Oczywiście jak zawsze widok można zdefiniować też przy użyciu składni klasowej: class View { constructor(model, controller) { var self = this; var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var btnSave = document.getElementById( btnSave ); var btnReset = document.getElementById( btnReset ); self.controller = controller; txtName.value = model.name; txtSurname.value = model.surname; btnSave.onclick = function() { self.save(); }; btnReset.onclick = function() { self.clear(); }; } clear() { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var divMessage = document.getElementById( divMessage ); txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; } set message(message) { var divMessage = document.getElementById( divMessage ); divMessage.innerHTML = message; } 140 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi save() { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var data = { name: txtName.value, surname: txtSurname.value }; this.controller.save(data); } } Konstruktor Controller() zawiera metodę initialize() ustawiającą referencję do modelu i widoku. Ponadto zawiera metodę save(), która sprawdza poprawność danych i wprowadza potrzebne zmiany w modelu. Dodatkowym zadaniem tej metody jest wyprowadzanie do widoku wiadomości dla użytkownika: var Controller = (function () { function Controller() { } Controller.prototype.initialize = function (model, view) { this.model = model; this.view = view; }; Controller.prototype.save = function (data) { if (data.name data.surname) { this.model.name = data.name; this.model.surname = data.surname; this.view.message = Zapisano! ; } else { this.view.message = Podaj imię i nazwisko! ; } }; return Controller; }()); Poniżej znajduje się ekwiwalentna definicja kontrolera w postaci klasy: class Controller { initialize(model, view) { this.model = model; this.view = view; } 141 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo save(data) { if (data.name data.surname) { this.model.name = data.name; this.model.surname = data.surname; this.view.message = Zapisano! ; } else { this.view.message = Podaj imię i nazwisko! ; } } } Po zdefiniowaniu tych trzech składników wzorca Model-Widok-Kontroler należy je jeszcze połączyć, aby ze sobą współpracowały. W związku z tym wiążemy poniższą funkcję ze zdarzeniem ładowania okna przeglądarki: window.onload = function() { var model = new Model( Jan , Kowalski ); var controller = new Controller(); var view = new View(model, controller); controller.initialize(model, view); }; Funkcja ta tworzy nowy model i kontroler. Następnie tworzy widok przy użyciu modelu i kontro- lera, przekazuje go do konstruktora i na koniec wywołuje metodę initialize() kontrolera. Ten kod działa dokładnie tak samo jak poprzednia wersja, ale jest tak zorganizowany, że o wiele łatwiej można go zmieniać i przystosowywać do innych sytuacji. Gdybyśmy np. zechcieli zmienić element div wyświetlający wiadomość dla użytkownika na textarea, musielibyśmy wprowadzić zmiany tylko w widoku. Inne komponenty pozostałyby niezmienione i modyfikacja ta nie miałaby dla nich znaczenia. To samo byłoby, gdybyśmy chcieli zmienić cały interfejs, np. zamiast strony internetowej postanowilibyśmy użyć wiersza poleceń. W takim przypadku musielibyśmy napisać nowy widok, ale nie musielibyśmy nicze- go zmieniać w modelu ani w kontrolerze. Gdybyśmy chcieli zmienić kryteria weryfikacji danych wprowadzanych przez użytkownika, musielibyśmy tylko zmienić kod kontrolera. Struktura kodu zbudowana według założeń wzorca MVC umożliwia łatwe znajdowanie kom- ponentu do modyfikacji na podstawie rodzaju potrzebnej zmiany. 142 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi Wzorzec Model-Widok-Prezenter Wzorzec Model-Widok-Kontroler zapewnia lepszą architekturę do prezentacji danych użyt- kownikowi. Każdemu komponentowi przydziela konkretne zadanie, dzięki czemu w razie ko- nieczności wprowadzenia zmian można ograniczyć się do modyfikacji tylko jednego komponentu. Mimo to te trzy komponenty pozostają wzajemnie powiązane: widok zna swój kontroler i model, a działanie kontrolera zależy od widoku i modelu. Na przykład zmiana modelu może wymagać zmian zarówno w widoku, jak i w kontrolerze. Wzorzec Model-Widok-Prezenter (MVP) opisuje architekturę warstwową z mniejszą liczbą zależności. W tym wzorcu widok przejmuje zdarzenia generowane przez użytkownika i prosi prezenter o dokonanie zmian w modelu. Oznacza to, że widok nie współpracuje bezpośrednio z modelem, ale działa na nim za pośrednictwem prezentera. W ten sposób zostają zlikwidowane wszelkie zależności między widokiem i modelem. Na poniższym schemacie przedstawione są relacje między poszczególnymi składnikami omawianego wzorca: Zobaczmy, jak będzie wyglądała implementacja na bazie wzorca MVP naszej przykładowej aplikacji. Implementacja modelu pozostaje taka sama jak w wersji MVC. Natomiast widok nieco się zmieni, co widać poniżej: var View = (function () { function View(presenter) { var self = this; var btnSave = document.getElementById( btnSave ); var btnReset = document.getElementById( btnReset ); self.presenter = presenter; btnSave.onclick = function () { self.save(); 143 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo }; btnReset.onclick = function () { self.clear(); }; } View.prototype.clear = function () { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var divMessage = document.getElementById( divMessage ); txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; }; Object.defineProperty(View.prototype, message , { set: function (message) { var divMessage = document.getElementById( divMessage ); divMessage.innerHTML = message; } }); Object.defineProperty(View.prototype, name , { set: function (value) { var txtName = document.getElementById( txtName ); txtName.value = value; } }); Object.defineProperty(View.prototype, surname , { set: function (value) { var txtSurname = document.getElementById( txtSurname ); txtSurname.value = value; }, enumerable: true, configurable: true }); View.prototype.save = function () { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var data = { name: txtName.value, surname: txtSurname.value }; this.presenter.save(data); }; return View; }()); 144 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi Główna różnica w stosunku do implementacji widoku według wzorca MVC dotyczy definicji własności name i surname. Wprowadziliśmy je po to, by zlikwidować zależność między widokiem i modelem. Ponieważ widok nie zna modelu, udostępnia te własności, które prezenter wiąże z modelem. Widok możemy też zdefiniować jako klasę, tak jak pokazano poniżej: class View { constructor(presenter) { var self = this; var btnSave = document.getElementById( btnSave ); var btnReset = document.getElementById( btnReset ); self.presenter = presenter; btnSave.onclick = function() { self.save(); }; btnReset.onclick = function() { self.clear(); }; } clear() { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var divMessage = document.getElementById( divMessage ); txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; } set message(message) { var divMessage = document.getElementById( divMessage ); divMessage.innerHTML = message; } set name(value) { var txtName = document.getElementById( txtName ); txtName.value = value; } set surname(value) { var txtSurname = document.getElementById( txtSurname ); txtSurname.value = value; } 145 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo save() { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var data = { name: txtName.value, surname: txtSurname.value }; this.presenter.save(data); } } Implementacja prezentera jest dość podobna do implementacji kontrolera we wzorcu MVC. Jedyna różnica w stosunku do wersji MVC dotyczy przypisania wartości modelu do własności widoku, co zaznaczono pogrubionym drukiem w poniższym kodzie: var Presenter = (function () { function Presenter() { } Presenter.prototype.initialize = function (model, view) { this.model = model; this.view = view; this.view.name = this.model.name; this.view.surname = this.model.surname; }; Presenter.prototype.save = function (data) { if (data.name data.surname) { this.model.name = data.name; this.model.surname = data.surname; this.view.message = Zapisano! ; } else { this.view.message = Podaj imię i nazwisko! ; } }; return Presenter; }()); Klasowa wersja prezentera może wyglądać tak: class Presenter { initialize(model,view) { this.model = model; this.view = view; this.view.name = this.model.name; this.view.surname = this.model.surname; } 146 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi save(data) { if (data.name data.surname) { this.model.name = data.name; this.model.surname = data.surname; this.view.message = Zapisano! ; } else { this.view.message = Podaj imię i nazwisko! ; } } } Teraz możemy utworzyć egzemplarze komponentów wzorca, jak w poniższym przykładzie: window.onload = function() { var model = new Model( Jan , Kowalski ); var presenter = new Presenter(); var view = new View(presenter); presenter.initialize(model, view); }; Wzorzec MVP posuwa zasadę rozdziału spraw między trzy komponenty o krok dalej niż MVC. Tylko prezenter „wie” o istnieniu zarówno modelu, jak i widoku. Dzięki temu można wpro- wadzać zmiany w modelu bez ruszania widoku. Zadaniem prezentera jest synchronizacja wi- doku i modelu. Jeśli chodzi o inne wzorce prezentacyjne, nawet MVP ma kilka różnych wariantów implementacyjnych. W prawdziwych zastosowaniach niektórzy nadal chcą umieszczać podstawową logikę wewnątrz widoku, a bardziej skomplikowaną w prezenterze, natomiast inni wolą całą logikę wstawić do prezentera. W efekcie powstają przynajmniej dwa wzorce pochodne: MVP z widokiem pasywnym, w którym logika doda- wana do widoku jest ograniczona do minimum, oraz kontroler nadzorczy (ang. Supervising Controller), w którym część logiki dotycząca prostych deklaratywnych operacji jest pozostawiona w widoku. Wzorzec Model-Widok-ModelWidoku Wzorzec Model-Widok-ModelWidoku (ang. Model-View-ViewModel — MVVM) jest próbą dalszej redukcji zależności między komponentami wzorca prezentacyjnego. Nowością w nim jest komponent model widoku, który zastępuje prezenter. Oczywiście zmiana nie dotyczy tylko wprowadzenia nowej nazwy. Zasady tego wzorca spróbujemy zrozumieć dzięki porównaniu go ze wzorcem MVP. Podobnie jak we wzorcu MVP, widok nie posiada żadnych informacji o istnieniu modelu. Jednak we wzorcu MVP widok „wiedział” o istnieniu jakiegoś komponentu pośredniego. We wzorcu MVVM modelem dla widoku jest „model widoku”. Zamiast prosić prezenter o związanie danych 147 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo i modyfikować model, widok posługuje się własnym modelem reprezentowanym przez „model widoku”. Pełni on więc funkcję opakowania prawdziwego modelu oraz przeprowadza pewne testy spójności i wykonuje inne działania związane z zarządzaniem danymi. Na poniższym schemacie ukazane są relacje między poszczególnymi komponentami wzorca MVVM: Zobaczmy, jak zaimplementować widok we wzorcu MVVM: var View = (function () { function View(modelView) { var self = this; var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var btnSave = document.getElementById( btnSave ); var btnReset = document.getElementById( btnReset ); self.modelView = modelView; txtName.value = modelView.name; txtSurname.value = modelView.surname; btnSave.onclick = function () { self.save(); }; btnReset.onclick = function () { self.clear(); }; } View.prototype.clear = function () { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var divMessage = document.getElementById( divMessage ); 148 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; }; View.prototype.setMessage = function (message) { var divMessage = document.getElementById( divMessage ); divMessage.innerHTML = message; }; View.prototype.save = function () { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var data = { name: txtName.value, surname: txtSurname.value }; this.modelView.save(data, this.setMessage); }; return View; }()); Jak widać, widok wykorzystuje przekazany w konstruktorze model widoku tak, jakby to był zwykły model. Wiąże własności modelu widoku z elementami interfejsu użytkownika i przetwarza go za pomocą metod modelu widoku. Poniżej znajduje się definicja widoku jako klasy: class View { constructor(modelView) { var self = this; var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var btnSave = document.getElementById( btnSave ); var btnReset = document.getElementById( btnReset ); self.modelView = modelView; txtName.value = modelView.name; txtSurname.value = modelView.surname; btnSave.onclick = function() { self.save(); }; btnReset.onclick = function() { self.clear(); }; } 149 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo clear() { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var divMessage = document.getElementById( divMessage ); txtName.value = ; txtSurname.value = ; divMessage.innerHTML = ; } setMessage(message) { var divMessage = document.getElementById( divMessage ); divMessage.innerHTML = message; } save() { var txtName = document.getElementById( txtName ); var txtSurname = document.getElementById( txtSurname ); var data = { name: txtName.value, surname: txtSurname.value }; this.modelView.save(data, this.setMessage); } } Jak napisałem wcześniej, model widoku opakowuje model i dodaje metody umożliwiające kon- trolowane modyfikowanie danych. Poniżej znajduje się implementacja modelu widoku dla na- szego przykładu: var ViewModel = (function () { function ViewModel(model) { this.model = model; } Object.defineProperty(ViewModel.prototype, name , { get: function () { return this.model.name; } }); Object.defineProperty(ViewModel.prototype, surname , { get: function () { return this.model.surname; } }); 150 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi ViewModel.prototype.save = function (data, callback) { if (data.name data.surname) { this.model.name = data.name; this.model.surname = data.surname; if (callback) { callback( Zapisano! ); } } else { if (callback) { callback( Podaj imię i nazwisko! ); } } }; return ViewModel; }()); Definicja modelu widoku udostępnia własności name i surname modelu przez swoje własności tylko do odczytu. Ponadto zawiera metodę save(), która umożliwia aktualizację modelu po sprawdzeniu poprawności danych. W tej metodzie ciekawym elementem jest obecność ar- gumentu callback. W tym argumencie wywołujący może przekazać funkcję, która ma zostać wywołana po aktualizacji modelu z informacjami o wyniku operacji. W naszym przypadku model widoku przekazuje jako parametr funkcji zwrotnej wiadomość do wyświetlenia. Użycie funkcji zwrotnej sprawia, że model widoku jest niezależny od widoku. Oczywiście istnieją też inne rozwiązania, np. metoda save() może zwracać wiadomość albo, jeszcze lepiej, kod. Cel jest taki, aby model widoku nie „wiedział” o używającym go widoku. Model widoku w postaci klasy może wyglądać następująco: class ViewModel { constructor(model) { this.model = model; } get name() { return this.model.name; } get surname() { return this.model.surname; } save(data, callback) { if (data.name data.surname) { this.model.name = data.name; this.model.surname = data.surname; 151 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo if (callback) { callback( Zapisano! ); } } else { if (callback) { callback( Podaj imię i nazwisko! ); } } } } Teraz możemy połączyć wszystkie komponenty w jedną działającą całość: window.onload = function() { var model = new Model( Jan , Kowalski ); var viewModel = new ViewModel(model); var view = new View(viewModel); }; W tym kodzie utworzyliśmy po kolei każdy komponent, przekazując jego konstruktorowi jedyny komponent, od którego jest zależny. Porównanie wzorców MV* Trzy opisane w tym rozdziale wzorce prezentacyjne mają wiele podobieństw. Wszystkie opierają się na trzech komponentach, między którymi występują podobne interakcje. Jednak każdy wzorzec ma pewne cechy szczególne, które sprawiają, że jest bardziej odpowiedni do określo- nych zastosowań. Podsumujemy najważniejsze cechy poszczególnych wzorców i zwrócimy szczególną uwagę na te, które odróżniają każdy z nich od pozostałych. Wzorzec MVC opisuje współpracę między trzema komponentami: modelem, widokiem i kon- trolerem. Każdy z nich pełni ściśle określoną funkcję i w jakiś sposób współpracuje z innymi. Widok używa modelu do początkowego wiązania, a kontroler zarządza żądaniami zmian mo- delu i przekazuje informacje zwrotne do widoku. Wzorzec ten jest pierwszą próbą dokonania rozdziału spraw, ale pewne zmiany w jednym komponencie mogą wymagać modyfikacji także w innych komponentach. MVC jest najstarszy ze wszystkich wzorców prezentacyjnych. Został opracowany w latach 70., czyli w czasach, gdy pierwsze graficzne interfejsy użytkownika były jeszcze bardzo proste. Wzorzec MVP zrywa zależność między widokiem i modelem, zlecając prezenterowi rolę po- średnika. Widok pozostaje jedynym komponentem odpowiedzialnym za obsługę interakcji z użytkownikiem, podczas gdy prezenter jest jedynym komponentem uprawnionym do pracy z modelem i reagowania na widok. Taka architektura, dzięki strukturze warstwowej, zapewnia większą niezależność komponentów. 152 Poleć książkęKup książkę Rozdział 7. • Prezentowanie danych użytkownikowi Wzorzec MVVM posuwa się jeszcze dalej, przypisując pośredniemu komponentowi, zwanemu modelem widoku, rolę specjalnego modelu dla widoku. Model widoku współpracuje z użyt- kownikiem i bezpośrednio przekazuje dane do tego, co dla niego jest modelem. W rzeczywi- stości model ten jest opakowaniem prawdziwego modelu, a jego nazwa „model widoku” wskazuje, że reprezentuje model dla widoku. Wzorzec ten podobnie jak MVP opisuje strukturę warstwową, ale każdy komponent zależy tylko od komponentu znajdującego się bezpośrednio pod nim. Zatem widok zależy od modelu widoku, ale nie odwrotnie. Zastosowanie wzorca MVVM wymaga, aby widok mógł wiązać dane i implementował trochę logiki. Dlatego wzorzec ten najlepiej sprawdza się na platformach obsługujących dwukierunkowe wiązanie i mających elementy graficzne o zaawansowanych możliwościach. Podsumowując: wzorzec MVC przydziela określone role każdemu komponentowi, ale nie roz- wiązuje kwestii wzajemnego sprzężenia komponentów. Widok i kontroler mogą współpracować ze sobą nawzajem i z modelem. Architektura ta może być efektywna pod względem wydajności, ale może również powodować powstawanie problemów dotyczących bezpieczeństwa, ponieważ widok ma dostęp do całego modelu. Wzorzec MVP lepiej zabezpiecza model, gdyż dostęp do niego ma tylko prezenter, ale sam pre- zenter może powodować problemy wydajnościowe w skomplikowanych aplikacjach. Te same wątpliwości natury wydajnościowej dotyczą wzorca MVVM, w którym część logiki jest przeniesiona z warstwy pośredniej do warstwy widoku. Podsumowanie W tym rozdziale omówiłem sposoby prezentacji danych użytkownikowi z punktu widzenia modelu obiektowego. Pokazałem, z jakimi trudnościami dotyczącymi rozszerzalności i obsługi serwisowej kodu musi się zmierzyć programista stosujący podejście niestrukturalne. Wzorce prezentacyjne pomagają w lepszym organizowaniu kodu oraz otrzymywaniu przejrzystszej i elastyczniejszej architektury. Opisane w tym rozdziale najbardziej znane wzorce prezentacyjne definiują trzy współpracujące ze sobą komponenty. Na początku opisałem wzorzec Model-Widok-Kontroler, którego komponenty mają wyraźnie określone role i wspólnie obsługują interakcje między użytkownikiem a modelem danych. Na- stępnie omówiłem wzorzec Model-Widok-Prezenter, który jest wariantem wzorca MVC opartym na systemie warstwowym. Założenia tego wzorca wykluczają bezpośredni dostęp widoku do modelu. Dostęp ten zawsze odbywa się za pośrednictwem prezentera. Ostatnim z opisanych wzorców jest Model-Widok-ModelWidoku, który charakteryzuje się warstwowym podej- ściem, jak w MVP, z dodatkiem nowego sposobu interpretacji roli komponenta pośredniego między widokiem i modelem. Jest to specjalny model dla widoku o nazwie „model widoku”. Na zakończenie rozdziału przedstawiłem porównanie tych trzech wzorców. Temat następnego rozdziału łączy się z wzorcami prezentacyjnymi. Omawiam w nim techniki wią- zania danych i synchronizacji oraz metody optymalnego prezentowania danych użytkownikowi. 153 Poleć książkęKup książkę Mistrzowski JavaScript. Programowanie zorientowane obiektowo 154 Poleć książkęKup książkę Skorowidz A abstrakcja, 31 agregacja, 30, 33 Ajax, 173 AMD, Asynchronous Module Definition, 211 anonimowe domknięcia, 201 AOP, Aspect-Oriented Programming, 256 aplikacja, 244 aplikacje izomorficzne, 258 jednostronicowe, 246 klasyczne, 246 architektura aplikacji, 243, 245 Zakasa-Osmaniego, 249 asocjacja, 30, 32 biblioteka bazowa, 256 binder, 161 błędy, 185 Budowniczy, 124 cele architektury, 245 CommonJS, 210 B C D dane zdalne, 249 definicja modułu asynchronicznego, AMD, 211 definicje globalne, 196 definiowanie bindera, 161 przestrzeni nazw, 199 deskryptory własności, 58 DOM, Document Object Model, 134 domieszka, 86 domieszkowanie klas, 89 prototypów, 87 domknięcia anonimowe, 201 domknięcie, 47, 49 dostęp do własności publicznych, 58 dynamiczna kontrola typów, 91 dynamiczne typy danych, 92 działanie konstruktorów, 114 dziedziczenie, 31, 36, 69, 75, 257 w ES6, 76 E eksport według nazw, 217 emulacja interfejsów, 102 ES7, 193 F Fabryka, 117 Fabryka Abstrakcyjna, 121 funkcje anonimowe, 53 async, 193 przekrojowe, 256 strzałkowe, 176 zwrotne, 174 G generatory, 190 generyczność, 40 Poleć książkęKup książkę Skorowidz H hakowanie własności, 160 hermetyzacja, 30, 34, 45 I IIFE, 52, 53, 199 implementacja definiowanie przestrzeni nazw, 199 interfejsu użytkownika, 134 kaczego typizowania, 99 obiektów obserwowanych, 165 wiązania danych, 157 wielodziedziczenia, 85 wielu interfejsów, 105 importowanie modułów, 202 interfejs, 97, 102, 105 użytkownika, 133 K kacze typizowanie, 91, 98, 107 Kierownik, 124 klasa, 25 klasy ES6, 66 pośrednie, 167 klasyczne aplikacje sieciowe, 246 Klient, 117 kod asynchroniczny, 172, 173 problemy, 179 komponent, 33 komponowanie modułów, 205 widoków, 248 kompozycja, 30, 34 kompozycje obietnic, 187 konstruktor Object(), 22 konstruktory, 75 obiektów, 19 kontrakty, 97 kontrola typów, 91 kontroler, 137 kontrolowanie dostępu do własności, 58 dziedziczenia, 78 262 L literały obiektowe, 15, 197 logika, 134 luźne wzbogacanie modułów, 204 Ł ładowanie modułów, 207, 219 łańcuch zakresów, 48 prototypów, 74 M mechanizm ładowania modułów, 208 metadomknięcia, 52 metoda, 16, 18 then(), 185 metody pobierające, 59 ustawiające, 59 model, 137 modelowanie, 31 Model-Widok-Kontroler, MVC, 137 Model-Widok-ModelWidoku, MVVM, 137, 147 Model-Widok-Prezenter, MVP, 137, 143 moduły, 200, 250 CommonJS, 210 ES6, 217, 219 importowanie, 202 komponowanie, 205 luźne wzbogacanie, 204 ładowanie, 207 mechanizm ładowania, 208 przesłanianie metod, 204 ścisłe wzbogacania modułów, 205 ścisłe wzbogacanie, 205 Universal Module Definition, 214 wzbogacanie, 203 modyfikatory dostępu, 46 MVC, Model-View-Controller, 137 MVP, Model-View-Presenter, 137 MVVM, Model-View-ViewModel, 137 N nadklasa, 37 narzędzia abstrakcji, 31 modelowania, 31 Poleć książkęKup książkę Skorowidz natychmiast wywoływane wyrażenie funkcyjne, 53 nawigacja, 248 notacja kropkowa, 17 O obiekt Fabryka, 117 Kierownik, 124 Klient, 117, 124 Produkt, 117, 122, 124 Podmiot, 163 obiektowe zasady projektowania, 221 obiektowość JavaScriptu, 42 klasyczna, 42 obiektowy model dokumentu, DOM, 134 obiekty, 70, 93 obserwowane, 165 pośrednie, 167 wielokrotnego użytku, 128 obietnice, 181 kompozycje, 187 oczekujące, 181 odrzucone, 181 spełnione, 181 tworzenie, 182 używanie, 183 załatwione, 182 obsługa dziennika, 256 odwrócenie kontroli, 239 zależności, 239 ogólne założenia architektury, 250 operator typeof, 94 opisywanie własności, 61 organizacja kodu, 195 P pętla zdarzeń, 172 piaskownica, 251 piramida zagłady, 179 podejście konwencjonalne, 46 podklasa, 37 Podmiot, 163 podmoduły, 206 polimorfizm, 31, 38, 107 dynamiczny, 40 inkluzyjny, 39 parametryczny, 40 podtypów, 41 statyczny, 40 połączenie modułu i AMD, 213 porównanie wzorców, 127 MV*, 152 porządkowanie wywołań zwrotnych, 178 poziomy prywatności, 50 prezentowanie danych, 133 Produkt, 117, 122, 124 programowanie aspektowe, AOP, 257 asynchroniczne, 171 obiektowe, 15, 29 prototyp, 70 obiektu, 23 prywatność, 47, 50 przechwytywanie błędów, 185 przeciążanie, 39 przesłanianie metod, 78 metod modułu, 204 własności, 80 przestrzeń nazw, 197 Pula Obiektów, 127 pułapka, 167 R rdzeń aplikacji, 253 recykling obiektów, 127 rejestracja konstruktorów, 120 ręczne wiązanie danych, 157 router, 248 S serwer, 247 singleton, 113, 115 składowe chronione, 81 prywatne, 50, 55 publiczne, 50 uprzywilejowane, 50 słaba referencja, 56 słowniki WeakMap, 56 słowo kluczowe this, 175 SOLID, 221 specyfikacja ES7, 193 standard ECMAScript 6, 217 struktura WeakMap, 56 synchronizacja, 134 263 Poleć książkęKup książkę wymagania biznesowe, 245 systemowe, 245 użytkownika, 245 wywołania zwrotne porządkowanie, 178 wzbogacanie modułów, 203 wzorce kreacyjne, 111 MV*, 137, 152 prezentacyjne, 133 projektowe, 111, 113 wzorzec Fasada, 252 Mediator, 254 Obserwator, 163 Publikacja-Subskrypcja, 164 returnExports, 215 wzorzec prezentacyjny Model-Widok-Kontroler, 137 Model-Widok-ModelWidoku, 137, 147 Model-Widok-Prezenter, 137, 143 wzorzec projektowy Budowniczy, 124 Fabryka, 117 Fabryka Abstrakcyjna, 121 Singleton, 113 Z zadania asynchroniczne, 191 zakres, 47 globalny, 195 zalety dziedziczenia, 69 zarządzanie zależnościami, 216 zasada odwrócenia zależności, 234 otwarte/zamknięte, 226 podstawiania Liskov, 230 pojedynczej odpowiedzialności, 222 segregacji interfejsów, 232 zasady programowania obiektowego, 30 SOLID, 221 zdarzenia, 173 Skorowidz T techniki wstrzykiwania zależności, 239 trasy, 248 tryb ścisły, 22, 196 tworzenie domieszek, 86 metadomknięcia, 53 obiektów, 72, 111 obietnic, 182 podklas, 37 przestrzeni nazw, 197 singletonu, 113 statycznych składowych prywatnych, 55 typizowanie danych, 93 U ukrywanie informacji, 36, 45, 66 UMD, Universal Module Definition, 214 uniemożliwianie rozszerzania, 83 uniwersalna definicja modułu, UMD, 214 używanie domieszek, 86 obietnic, 183 singletonów, 116 wzorca Budowniczy, 126 W wiązanie danych, 155 binder, 161 dwukierunkowe, 157 elementy procesu, 155 hakowanie własności, 160 implementacja, 157 jednokierunkowe, 157 monitorowanie zmian, 158 odwrotne jednokierunkowe, 157 przy użyciu pośredników, 168 ręczne, 157 wzorzec Obserwator, 163 wzorzec Publikacja-Subskrypcja, 164 widok, 137 wielodziedziczenie, 85 własności, 16 zdarzeń, 173 ze stanem wewnętrznym, 63 wstrzykiwanie zależności, 239 264 Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Mistrzowski JavaScript. Programowanie zorientowane obiektowo
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: