Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00282 005007 12751600 na godz. na dobę w sumie
Język TypeScript. Tajniki kodu. Wydanie II - ebook/pdf
Język TypeScript. Tajniki kodu. Wydanie II - ebook/pdf
Autor: Liczba stron: 504
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3642-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).

Język TypeScript, który wraz z kompilatorem i zestawem narzędzi jest udostępniany na zasadach open source, zyskuje ogromne uznanie tysięcy projektantów aplikacji. TypeScript pozwala na pracę w zgodzie ze standardami języka JavaScript (ES5, ES6 i ES7), co pozwala programistom na używanie klas, interfejsów, typów ogólnych itd. Okazuje się, że TypeScript umożliwia tworzenie solidnych aplikacji przy wykorzystaniu technik obiektowych — i są to nie tylko aplikacje WWW, lecz także aplikacje serwerowe, aplikacje dla urządzeń mobilnych, a nawet oprogramowanie do sterowania urządzeniami w internecie rzeczy (IoT).

Niniejsza książka jest przewodnikiem po TypeScript dla programistów. Przedstawiono tu zarówno podstawy, jak i zaawansowane możliwości języka, takie jak typy ogólne i techniki programowania asynchronicznego. Sporo miejsca poświęcono prezentacji najpopularniejszych frameworków JavaScript. Opisano sposoby korzystania z mechanizmów ścisłej kontroli typów i omówiono techniki programowania obiektowego w języku TypeScript. Nie zabrakło również wskazówek dotyczących najlepszych praktyk projektowania aplikacji. Dzięki lekturze tej książki osiągnięcie profesjonalnego poziomu pisania aplikacji w TypeScript stanie się o wiele łatwiejsze!

Najważniejsze zagadnienia:

TypeScript: poznaj język najlepszych projektantów!


Nathan Rozentals — może pochwalić się imponującym doświadczeniem w kodowaniu: tworzył programy do analizy statystycznej na komputerach mainframe na długo przed erą internetu. Brał również udział w rozwiązywaniu tzw. problemu roku 2000. Perfekcyjnie poznał wiele obiektowych języków programowania, takich jak C++, Java czy C#. Ostatnio skoncentrował się na nowoczesnym programowaniu aplikacji internetowych, a język TypeScript okazał się jego ulubionym narzędziem. W chwilach wolnych od programowania zajmuje się windsurfingiem lub piłką nożną.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Mastering TypeScript, Second Edition Tłumaczenie: Piotr Rajca ISBN: 978-83-283-3641-4 Copyright © Packt Publishing 2017. First published in the English language under the title Mastering TypeScript - Second Edition - (9781786468710) 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/jeztyp.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jeztyp 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(cid:258)ci O autorze O recenzentach Wst(cid:218)p Rozdzia(cid:239) 1. TypeScript — dost(cid:218)pne narz(cid:218)dzia i frameworki Przedstawienie j(cid:218)zyka TypeScript Standard EcmaScript Zalety j(cid:218)zyka TypeScript Zintegrowane (cid:258)rodowiska programistyczne obs(cid:239)uguj(cid:200)ce j(cid:218)zyk TypeScript Kompilacja w (cid:258)rodowisku Node Visual Studio 2017 WebStorm Visual Studio Code Inne edytory Podsumowanie Rozdzia(cid:239) 2. Typy, zmienne oraz funkcje Typy podstawowe Typy w j(cid:218)zyku JavaScript Okre(cid:258)lanie typów w j(cid:218)zyku TypeScript Sk(cid:239)adnia okre(cid:258)lania typów Wnioskowanie typów Kacze typowanie (cid:146)a(cid:241)cuchy szablonów Tablice P(cid:218)tle for...in oraz for...of Typ any Jawne rzutowanie Typy wyliczeniowe Ustalone typy wyliczeniowe 15 17 19 25 27 27 28 36 36 38 44 48 55 57 59 60 60 61 62 64 65 66 67 68 69 70 71 73 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Sta(cid:239)e S(cid:239)owo kluczowe let Funkcje Typy warto(cid:258)ci zwracanych przez funkcje Funkcje anonimowe Parametry opcjonalne Parametry domy(cid:258)lne Parametr reszty Funkcje zwrotne Sygnatury funkcji Przeci(cid:200)(cid:285)anie funkcji Zaawansowane typy Typ unii Stra(cid:285)niki typów Nazwy zast(cid:218)pcze typów Warto(cid:258)(cid:202) null i undefined Reszta obiektu i rozproszenie Podsumowanie Rozdzia(cid:239) 3. Interfejsy, klasy i dziedziczenie Interfejsy W(cid:239)a(cid:258)ciwo(cid:258)ci opcjonalne Kompilacja interfejsów Klasy W(cid:239)a(cid:258)ciwo(cid:258)ci klas Implementacja interfejsów Konstruktory klas Funkcje klas Definicje funkcji interfejsów Modyfikatory klas Modyfikatory dost(cid:218)pu w konstruktorach W(cid:239)a(cid:258)ciwo(cid:258)ci tylko do odczytu Akcesory w(cid:239)a(cid:258)ciwo(cid:258)ci klas Funkcje statyczne W(cid:239)a(cid:258)ciwo(cid:258)ci statyczne Przestrzenie nazw Dziedziczenie Dziedziczenie interfejsów Dziedziczenie klas S(cid:239)owo kluczowe super Przeci(cid:200)(cid:285)anie funkcji Sk(cid:239)adowe chronione Klasy abstrakcyjne Domkni(cid:218)cia JavaScript Stosowanie interfejsów, klas i dziedziczenia — wzorzec projektowy Fabryka Wymagania biznesowe Co robi wzorzec Fabryka? Stosowanie klasy fabrykuj(cid:200)cej Podsumowanie 4 74 75 77 77 78 78 80 80 82 84 86 87 88 88 90 91 93 94 95 96 97 98 98 99 100 101 102 105 106 108 109 109 111 111 112 113 114 114 115 116 117 118 121 123 123 123 127 128 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 4. Dekoratory, typy ogólne i asynchroniczno(cid:258)(cid:202) Dekoratory Sk(cid:239)adnia dekoratorów Stosowanie wielu dekoratorów Fabryki dekoratorów Parametry dekoratorów klas Dekoratory w(cid:239)a(cid:258)ciwo(cid:258)ci Dekoratory w(cid:239)a(cid:258)ciwo(cid:258)ci statycznych Dekoratory metod Stosowanie dekoratorów metod Dekoratory parametrów Metadane dekoratorów Stosowanie metadanych dekoratorów Typy ogólne Sk(cid:239)adnia typów ogólnych Tworzenie instancji klas ogólnych Stosowanie typu T Ograniczenia typu T Interfejsy ogólne Tworzenie nowych obiektów w klasach ogólnych Mechanizmy programowania asynchronicznego Obietnice Sk(cid:239)adnia obietnic Stosowanie obietnic Sk(cid:239)adnia funkcji zwrotnych a sk(cid:239)adnia obietnic Zwracanie warto(cid:258)ci z obietnic S(cid:239)owa kluczowe async i await S(cid:239)owo kluczowe await a obs(cid:239)uga b(cid:239)(cid:218)dów Obietnice a sk(cid:239)adnia s(cid:239)owa kluczowego await Komunikaty a s(cid:239)owo kluczowe await Podsumowanie Rozdzia(cid:239) 5. Pisanie i stosowanie plików deklaracji Zmienne globalne Stosowanie bloków kodu JavaScript w kodzie HTML Dane strukturalne Pisanie w(cid:239)asnych plików deklaracji S(cid:239)owo kluczowe module Interfejsy Typy unii Scalanie modu(cid:239)ów Sk(cid:239)adnia plików deklaracji Przes(cid:239)anianie funkcji Zagnie(cid:285)d(cid:285)one przestrzenie nazw Klasy Przestrzenie nazw klas Przeci(cid:200)(cid:285)anie konstruktora klas 129 130 131 132 132 133 135 136 137 138 139 140 142 143 144 145 146 148 150 151 153 153 155 156 158 158 160 161 162 163 165 167 168 170 171 173 175 177 179 180 180 181 181 182 182 182 5 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu W(cid:239)a(cid:258)ciwo(cid:258)ci klas Funkcje klas W(cid:239)a(cid:258)ciwo(cid:258)ci i funkcje statyczne Funkcje globalne Sygnatury funkcji W(cid:239)a(cid:258)ciwo(cid:258)ci opcjonalne Scalanie funkcji i modu(cid:239)ów Podsumowanie Rozdzia(cid:239) 6. Biblioteki innych twórców Pobieranie plików definicji Stosowanie NuGet Stosowanie mened(cid:285)era pakietów Instalowanie plików deklaracji Stosowanie konsoli mened(cid:285)era pakietów Stosowanie narz(cid:218)dzia Typings Poszukiwanie pakietów Inicjalizacja Typings Instalowanie plików definicji Instalowanie konkretnej wersji pliku Ponowna instalacja plików definicji Stosowanie programu Bower Stosowanie npm i @types Stosowanie bibliotek innych twórców Wybór frameworka JavaScript Backbone Stosowanie dziedziczenia we frameworku Backbone Stosowanie interfejsów Stosowanie sk(cid:239)adni typów ogólnych Stosowanie j(cid:218)zyka ECMAScript 5 Zgodno(cid:258)(cid:202) frameworka Backbone z j(cid:218)zykiem TypeScript Angular Klasy Angular i zmienna $scope Zgodno(cid:258)(cid:202) frameworka AngularJS z j(cid:218)zykiem TypeScript Dziedziczenie — Angular kontra Backbone ExtJS Tworzenie klas w ExtJS Stosowanie rzutowania typów Kompilator TypeScript dla ExtJS Podsumowanie Rozdzia(cid:239) 7. Frameworki zgodne z j(cid:218)zykiem TypeScript Czym jest MVC? Model Widok Kontroler Podsumowanie wzorca MVC 6 183 183 183 184 184 184 185 185 187 188 190 190 191 191 192 193 194 194 195 195 196 196 197 197 198 199 201 201 202 203 203 205 207 207 208 208 210 211 211 213 214 215 215 216 217 Poleć książkęKup książkę Spis tre(cid:286)ci Zalety stosowania wzorca MVC Szkic przyk(cid:239)adowej aplikacji Stosowanie frameworka Backbone Wydajno(cid:258)(cid:202) wy(cid:258)wietlania Konfiguracja frameworka Backbone Modele Backbone Widok ItemView Widok CollectionView Aplikacja Backbone Stosowanie frameworka Aurelia Konfiguracja frameworka Aurelia Zagadnienia do rozwa(cid:285)enia Wydajno(cid:258)(cid:202) frameworka Aurelia Modele frameworka Aurelia Widoki frameworka Aurelia Wczytywanie aplikacji Aurelia Zdarzenia frameworka Aurelia Framework Angular 2 Konfiguracja frameworka Angular 2 Modele frameworka Angular 2 Widoki Angular 2 Wydajno(cid:258)(cid:202) frameworka Angular 2 Zdarzenia Angular 2 Stosowanie frameworka React Konfiguracja frameworka React Widoki React Wczytywanie aplikacji React Zdarzenia React Podsumowanie Rozdzia(cid:239) 8. Programowanie w oparciu o testy Programowanie w oparciu o testy Testy jednostkowe, integracyjne oraz akceptacyjne Testy jednostkowe Testy integracyjne Testy akceptacyjne Frameworki testów jednostkowych Jasmine Prosty test Jasmine Plik SpecRunner Obiekty dopasowuj(cid:200)ce Uruchamianie i ko(cid:241)czenie testów Testy bazuj(cid:200)ce na danych Stosowanie szpiegów Szpiegowanie funkcji zwrotnych Stosowanie szpiegów jako imitacji Testy asynchroniczne 218 219 220 221 222 223 224 225 227 228 228 229 230 230 231 232 233 234 234 235 235 237 237 238 238 240 243 245 246 247 248 249 250 250 250 251 251 252 252 254 256 256 258 259 261 261 7 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Stosowanie funkcji done() Modyfikacje DOM w Jasmine Zdarzenia DOM Mechanizmy wykonawcze Jasmine Testem Karma Protractor Stosowanie ci(cid:200)g(cid:239)ej integracji Zalety ci(cid:200)g(cid:239)ej integracji Wybór serwera budowy Raportowanie testów integracyjnych Podsumowanie Rozdzia(cid:239) 9. Testowanie frameworków zgodnych z j(cid:218)zykiem TypeScript Testowanie naszej aplikacji przyk(cid:239)adowej Modyfikacja aplikacji przyk(cid:239)adowej w celu umo(cid:285)liwienia testowania Testowanie frameworka Backbone Z(cid:239)o(cid:285)one modele Aktualizacje widoków Modyfikacje obs(cid:239)ugi zdarze(cid:241) DOM Testy modeli Testy modelu z(cid:239)o(cid:285)onego Testy wy(cid:258)wietlania Testy zdarze(cid:241) DOM Podsumowanie testów Backbone Testowanie frameworka Aurelia Komponenty frameworka Aurelia Model widoku komponentów Aurelia Komponent widoku frameworka Aurelia Wy(cid:258)wietlanie komponentu Konwencje nazewnicze frameworka Aurelia Konfiguracja testów we frameworku Aurelia Testy jednostkowe we frameworku Aurelia Testy wy(cid:258)wietlania Testy przekrojowe we frameworku Aurelia Podsumowanie testów frameworka Aurelia Testowanie frameworka Angular 2 Aktualizacja aplikacji Konfiguracja testów we frameworku Angular 2 Testy modelu w Angular 2 Testy wy(cid:258)wietlania w Angular 2 Testowanie DOM w Angular 2 Podsumowanie testów Angular 2 Testowanie frameworka React Wiele punktów wej(cid:258)cia Modyfikacje w aplikacji React Testy jednostkowe komponentów React 8 263 264 265 266 267 268 270 272 273 274 275 276 277 278 279 280 280 283 283 285 287 288 289 291 291 291 292 293 293 294 295 296 297 299 303 303 303 305 305 306 307 308 308 309 309 312 Poleć książkęKup książkę Spis tre(cid:286)ci Testy modelu i widoków React Testy zdarze(cid:241) we frameworku React Podsumowanie Rozdzia(cid:239) 10. Modularyzacja Podstawowe informacje o modu(cid:239)ach Eksportowanie modu(cid:239)ów Importowanie modu(cid:239)ów Zmiana nazwy modu(cid:239)u Eksporty domy(cid:258)lne Eksportowanie zmiennych Wczytywanie modu(cid:239)ów AMD Kompilacja modu(cid:239)ów AMD Konfiguracja modu(cid:239)ów AMD Konfiguracja Require Konfiguracja przegl(cid:200)darki dla modu(cid:239)ów AMD Zale(cid:285)no(cid:258)ci w modu(cid:239)ach AMD Wczytywanie frameworka Require Poprawianie b(cid:239)(cid:218)dów konfiguracji Require Wyczytywanie modu(cid:239)ów przy u(cid:285)yciu SystemJS Instalacja SystemJS Konfiguracja SystemJS do u(cid:285)ycia w przegl(cid:200)darce SystemJS i zale(cid:285)no(cid:258)ci modu(cid:239)ów Wczytywanie Jasmine Stosowanie Express i Node Konfiguracja Express Stosowanie modu(cid:239)ów w aplikacjach Express Okre(cid:258)lanie i obs(cid:239)uga tras w aplikacjach Express Stosowanie szablonów w Express Stosowanie Handlebars Zdarzenia POST we frameworku Express Przekierowywanie (cid:285)(cid:200)da(cid:241) HTTP Podsumowanie informacji o Node i Express Podsumowanie Rozdzia(cid:239) 11. Programowanie obiektowe Zasady programowania obiektowego Programowanie w oparciu o interfejsy Zasady SOLID Projektowanie interfejsu u(cid:285)ytkownika Projekt koncepcyjny Konfiguracja aplikacji Angular 2 Stosowanie frameworka Bootstrap Tworzenie panelu bocznego Tworzenie nak(cid:239)adki Koordynacja efektów przej(cid:258)(cid:202) 313 315 316 317 318 320 320 321 322 323 324 324 326 326 327 328 331 333 334 335 335 337 340 340 341 342 344 346 347 350 353 355 355 357 358 358 359 360 361 363 364 365 369 371 9 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Wzorzec Stan Interfejs stanu Konkretne stany Wzorzec Mediator Modularny kod Komponent Navbar Komponent SideNav Komponent RightScreen Komponenty podrz(cid:218)dne Implementacja interfejsu mediatora Klasa Mediator Stosowanie klasy Mediator Reagowanie na zdarzenia DOM Podsumowanie Rozdzia(cid:239) 12. Wstrzykiwanie zale(cid:285)no(cid:258)ci Wysy(cid:239)anie poczty elektronicznej Wykorzystanie pakietu nodemailer Ustawienia konfiguracyjne Stosowanie lokalnego serwera SMTP Wstrzykiwanie zale(cid:285)no(cid:258)ci Wzorzec Lokalizacja us(cid:239)ugi Lokalizacja us(cid:239)ugi — antywzorzec Wstrzykiwanie zale(cid:285)no(cid:258)ci Implementacja wstrzykiwania zale(cid:285)no(cid:258)ci Wyznaczanie interfejsów Wyznaczanie z u(cid:285)yciem typów wyliczeniowych Wyznaczanie nazwy klasy Wstrzykiwanie przy u(cid:285)yciu konstruktora Wstrzykiwanie przy u(cid:285)yciu dekoratora Stosowanie definicji klasy Analiza parametrów konstruktora Okre(cid:258)lanie typów parametrów Wstrzykiwanie w(cid:239)a(cid:258)ciwo(cid:258)ci Stosowanie wstrzykiwania zale(cid:285)no(cid:258)ci Wstrzykiwanie rekurencyjne Podsumowanie Rozdzia(cid:239) 13. Tworzenie aplikacji Interfejs u(cid:285)ytkownika Stosowanie edytora Brackets Stosowanie rozszerzenia Emmet Tworzenie panelu logowania Witryna korzystaj(cid:200)ca z frameworka Aurelia Kompilacja Node i frameworka Aurelia Udost(cid:218)pnianie aplikacji Aurelia Strony frameworka Aurelia w aplikacji Express 10 372 372 373 374 375 376 377 378 380 381 382 385 386 387 389 390 390 393 395 396 396 398 399 399 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 415 417 419 420 421 422 Poleć książkęKup książkę Spis tre(cid:286)ci Komponenty aplikacji Aurelia Przetwarzanie danych JSON Formularze we frameworku Aurelia Przesy(cid:239)anie danych Stosowanie komunikatów we frameworku Aurelia Witryna Angular 2 Konfiguracja Angular 2 Udost(cid:218)pnianie stron aplikacji Angular 2 Komponenty aplikacji Angular 2 Przetwarzanie danych JSON Przesy(cid:239)anie danych do aplikacji Witryna Express i React Express i React Udost(cid:218)pnianie aplikacji React Wi(cid:218)ksza liczba plików package.json Komponenty React Korzystanie z punktów ko(cid:241)cowych REST Komponent panelu logowania Wi(cid:200)zanie danych w aplikacji React Przesy(cid:239)anie danych JSON w (cid:285)(cid:200)daniach POST Podsumowanie Rozdzia(cid:239) 14. Czas zakasa(cid:202) r(cid:218)kawy! Aplikacja SurfDechy Wyj(cid:258)ciowa aplikacja Angular 2 Testy jednostkowe Testy implementacji wzorców projektowych Stan panelu logowania Integracja paneli Struktura danych JSON Komponent BoardList Testy jednostkowe (cid:285)(cid:200)da(cid:241) HTTP Wy(cid:258)wietlanie listy desek Testowanie zdarze(cid:241) interfejsu u(cid:285)ytkownika Widok szczegó(cid:239)ów deski Stosowanie filtra Panel logowania Architektura aplikacji Podsumowanie Skorowidz 424 425 427 430 431 434 434 434 437 440 442 443 443 445 447 448 451 452 454 456 457 459 460 461 463 464 468 471 474 476 477 483 484 487 489 492 496 497 499 11 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu ZESPÓ(cid:146) WYDANIA ORYGINALNEGO == osobny plik 12 Poleć książkęKup książkę 11 Programowanie obiektowe W 1995 roku tak zwany Gang Czworga (ang. Gang of Four, w skrócie GoF) opublikowa(cid:239) ksi(cid:200)(cid:285)k(cid:218) pt. Design Patterns: Elements of Reusable Object-Oriented Software1. Autorzy tej ksi(cid:200)(cid:285)ki — Erich Gamma, Richard Helm, Ralph Johnson oraz John Vlissides — opisali w niej szereg klasycz- nych programowych wzorców projektowych, stanowi(cid:200)cych proste i eleganckie rozwi(cid:200)zania po- wszechnie wyst(cid:218)puj(cid:200)cych problemów programistycznych. Je(cid:258)li nigdy nie s(cid:239)ysza(cid:239)e(cid:258) o wzorcach projektowych, takich jak Fabryka (ang. Factory), Kompozyt (ang. Composite), Obserwator (ang. Observer) czy te(cid:285) Singleton, gor(cid:200)co zach(cid:218)cam do przeczytania tej ksi(cid:200)(cid:285)ki. Wzorce projektowe zaprezentowane przez Gang Czworga zosta(cid:239)y zaimplementowane w wielu ró(cid:285)nych j(cid:218)zykach programowania, tak(cid:285)e w Javie i C#. Vilic Vane napisa(cid:239) ksi(cid:200)(cid:285)k(cid:218) pt. TypeScript Design Patterns, w której ka(cid:285)dy z wzorców przedstawionych przez Gang Czworga zosta(cid:239) zaimple- mentowany i opisany z perspektywy j(cid:218)zyka TypeScript. W trzecim rozdziale tej ksi(cid:200)(cid:285)ki, „Interfejsy, klasy i dziedziczenie”, po(cid:258)wi(cid:218)ci(cid:239)em nieco czasu na zaimplementowanie klasycznego wzorca projektowego Fabryka, b(cid:218)d(cid:200)cego jednym z bardziej popularnych wzorców opisanych w ksi(cid:200)(cid:285)ce autorstwa Gangu Czworga. TypeScript, wraz ze swoimi konstrukcjami zgodnymi ze standardami ES6 i ES7, jest doskona(cid:239)ym przyk(cid:239)adem obiektowego j(cid:218)zyka programowania. Ze swoimi mo(cid:285)li- wo(cid:258)ciami tworzenia klas, klas abstrakcyjnych, interfejsów, z dziedziczeniem oraz typami ogólnymi aplikacje pisane w j(cid:218)zyku TypeScript mog(cid:200) ju(cid:285) w pe(cid:239)ni korzysta(cid:202) ze wzorców projektowych opisanych w ksi(cid:200)(cid:285)ce Gangu Czworga. Przedstawienie implementacji ka(cid:285)dego z wzorców projektowych opisanych przez Gang Czworga napisanej w j(cid:218)zyku TypeScript jest zagadnieniem daleko wykraczaj(cid:200)cym poza ramy jednego 1 Polskie t(cid:239)umaczenie tej ksi(cid:200)(cid:285)ki zosta(cid:239)o wydane nak(cid:239)adem wydawnictwa Helion, pt. Wzorce projektowe. Elementy oprogramowania obiektowego wielokrotnego u(cid:285)ytku — przyp. t(cid:239)um. Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu rozdzia(cid:239)u, poza tym by(cid:239)oby to niesprawiedliwe wzgl(cid:218)dem wspania(cid:239)ej prezentacji tych wzorców napisanej przez Vilica Vane’a. Dlatego te(cid:285) w tym rozdziale skoncentrujemy si(cid:218) na procesie pisania kodu obiektowego, przedstawionym na przyk(cid:239)adzie dwóch wzorców projektowych, które dosko- nale wspó(cid:239)pracuj(cid:200) i u(cid:239)atwiaj(cid:200) obs(cid:239)ug(cid:218) z(cid:239)o(cid:285)onych interfejsów u(cid:285)ytkownika. Wzorcami tymi s(cid:200) Stan (ang. State) oraz Mediator (ang. Mediator), które koncentruj(cid:200) si(cid:218) na stanie aplikacji oraz sposobach wzajemnej interakcji pomi(cid:218)dzy obiektami. W tym rozdziale utworzymy aplikacj(cid:218) Angular 2 dysponuj(cid:200)c(cid:200) raczej z(cid:239)o(cid:285)onym interfejsem u(cid:285)ytkownika i korzystaj(cid:200)c(cid:200) z wyszukanych efektów przej(cid:258)(cid:202) CSS. Nast(cid:218)pnie rozpoczniemy proces przepisywania tej pocz(cid:200)tkowej wersji aplikacji tak, by korzysta(cid:239)a z zasad programowania obiektowego, a przy okazji poznamy wzajemne interakcje pomi(cid:218)dzy tworz(cid:200)cymi j(cid:200) obiektami. W ko(cid:241)cu, zaimplementujemy wzorce projektowe Stan i Mediator, aby hermetyzowa(cid:202) logik(cid:218) odpowiedzialn(cid:200) za okre(cid:258)lanie, które elementy interfejsu u(cid:285)ytkownika maj(cid:200) by(cid:202) w danej chwili widoczne, a które nie. W tym rozdziale zostan(cid:200) opisane nast(cid:218)puj(cid:200)ce zagadnienia. (cid:81) Zasady programowania obiektowego. (cid:81) Stosowanie interfejsów. (cid:81) Zasady SOLID. (cid:81) Projektowanie interfejsów u(cid:285)ytkownika. (cid:81) Wzorzec Stan. (cid:81) Wzorzec Mediator. (cid:81) Kod modularny. Zasady programowania obiektowego Ka(cid:285)d(cid:200) pisan(cid:200) aplikacj(cid:218) nale(cid:285)y ocenia(cid:202) pod k(cid:200)tem najlepszych praktyk programowania obiekto- wego. Robert Martin opublikowa(cid:239) tak zwane zasady projektowe SOLID, przy czym nazwa ta jest akronimem pi(cid:218)ciu praktyk programowania obiektowego. Post(cid:218)puj(cid:200)c zgodnie z tymi zasadami, (cid:239)atwiej sprawimy, (cid:285)e nasz kod b(cid:218)dzie: prosty do utrzymania, (cid:239)atwy do zrozumienia i rozszerza- nia, jak równie(cid:285) odporny na zmiany. W naszym b(cid:239)yskawicznie rozwijaj(cid:200)cym si(cid:218) (cid:258)wiecie zazwyczaj nie mo(cid:285)emy pozwoli(cid:202) sobie na luksus po(cid:258)wi(cid:218)cania du(cid:285)ych ilo(cid:258)ci czasu na modyfikowanie aplikacji i zaspokajanie nieustannie zmieniaj(cid:200)cych si(cid:218) wymaga(cid:241). Im szybciej b(cid:218)dziemy w stanie dostarcza(cid:202) aktualizacje spe(cid:239)niaj(cid:200)ce wymagania biznesowe, tym wi(cid:218)ksza szansa, (cid:285)e uda si(cid:218) wyprze- dzi(cid:202) konkurencj(cid:218). Post(cid:218)powanie zgodnie z zasadami SOLID b(cid:218)dzie stanowi(cid:202) doskona(cid:239)(cid:200) podstaw(cid:218), która zapewni mo(cid:285)liwo(cid:258)(cid:202) (cid:239)atwego wprowadzania zmian w istniej(cid:200)cym kodzie, niezb(cid:218)dn(cid:200) do za- spokojenia b(cid:239)yskawicznie zmieniaj(cid:200)cych si(cid:218) wymaga(cid:241) stawianych przed naszym kodem. Programowanie w oparciu o interfejsy Jednym z podstawowych za(cid:239)o(cid:285)e(cid:241) wykorzystywanych przez Gang Czworga jest to, (cid:285)e programi(cid:258)ci powinni programowa(cid:202) w oparciu o interfejsy, a nie implementacje. Oznacza to, (cid:285)e programy 358 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe powinny by(cid:202) tworzone w taki sposób, by wszystkie interakcje pomi(cid:218)dzy obiektami by(cid:239)y realizo- wane przy wykorzystaniu interfejsów. Dzi(cid:218)ki temu obiekty pe(cid:239)ni(cid:200)ce rol(cid:218) klientów nie musz(cid:200) nic wiedzie(cid:202) o wewn(cid:218)trznej logice dzia(cid:239)ania obiektów, od których s(cid:200) zale(cid:285)ne, gdy(cid:285) wtedy staj(cid:200) si(cid:218) znacznie bardziej odporne na zmiany. Definiuj(cid:200)c interfejs, zaczynamy tworzy(cid:202) API opisuj(cid:200)ce mo(cid:285)liwo(cid:258)ci funkcjonalne udost(cid:218)pniane przez dany obiekt, sposoby korzystania z danego obiektu oraz to, jak maj(cid:200) wygl(cid:200)da(cid:202) interakcje pomi(cid:218)dzy obiektami. Zasady SOLID Rozszerzeniem zasady programowania w oparciu o interfejsy s(cid:200) tak zwane zasady projektowe SOLID, bazuj(cid:200)ce na pomys(cid:239)ach Roberta Martina. SOLID to akronim nazw pi(cid:218)ciu ró(cid:285)nych zasad projektowych, o którym warto wspomina(cid:202) w ka(cid:285)dej dyskusji po(cid:258)wi(cid:218)conej zasadom progra- mowania obiektowego. Zasada jednej odpowiedzialno(cid:258)ci Idea le(cid:285)(cid:200)ca u podstaw wzorca jednej odpowiedzialno(cid:258)ci g(cid:239)osi, (cid:285)e obiekt powinien mie(cid:202) tylko jedn(cid:200) odpowiedzialno(cid:258)(cid:202). Ma robi(cid:202) tylko jedn(cid:200) rzecz i robi(cid:202) to naprawd(cid:218) dobrze. Przyk(cid:239)ady wykorzystania tej zasady mogli(cid:258)my zobaczy(cid:202) w wielu frameworkach TypeScript, których u(cid:285)ywali- (cid:258)my w tej ksi(cid:200)(cid:285)ce. Przyk(cid:239)adowo klasa Model jest u(cid:285)ywana do reprezentowania jednego modelu. Z kolei klasa Collection s(cid:239)u(cid:285)y do reprezentacji kolekcji takich modeli, a klasa View pozwala na wy(cid:258)wietlanie modeli i ich kolekcji. Je(cid:258)li zauwa(cid:285)ymy, (cid:285)e która(cid:258) z klas zaczyna stawa(cid:202) si(cid:218) superklas(cid:200), czyli zaczyna wykonywa(cid:202) operacje ró(cid:285)nych typów, stanowi to sygna(cid:239), (cid:285)e narusza ona zasad(cid:218) jednej odpowiedzialno(cid:258)ci. Oto prosty przyk(cid:239)ad: je(cid:258)li plik (cid:283)ród(cid:239)owy jakiej(cid:258) klasy zaczyna by(cid:202) bardzo d(cid:239)ugi, najprawdopo- dobniej klasa ta wykonuje zbyt wiele czynno(cid:258)ci. W takim przypadku nale(cid:285)y zastanowi(cid:202) si(cid:218), jaka jest jej podstawowa odpowiedzialno(cid:258)(cid:202), a nast(cid:218)pnie podzieli(cid:202) mo(cid:285)liwo(cid:258)ci funkcjonalne takiej klasy na mniejsze fragmenty i umie(cid:258)ci(cid:202) je w nowych klasach. Zasada otwarte-zamkni(cid:218)te Zasada otwarte-zamkni(cid:218)te g(cid:239)osi, (cid:285)e obiekt powinien by(cid:202) otwarty na rozszerzenia i zamkni(cid:218)ty na modyfikacje. Innymi s(cid:239)owy, po zaprojektowaniu interfejsu klasy jego zmiany pojawiaj(cid:200)ce si(cid:218) stopniowo wraz z up(cid:239)ywem czasu powinny by(cid:202) wprowadzane przy wykorzystaniu zasad dziedzi- czenia, a nie poprzez bezpo(cid:258)redni(cid:200) modyfikacj(cid:218) samego interfejsu. Koniecznie nale(cid:285)y zwróci(cid:202) uwag(cid:218), (cid:285)e podczas pisania bibliotek, które za po(cid:258)rednictwem udo- st(cid:218)pnianego API s(cid:200) u(cid:285)ywane przez innych programistów, zasada ta nabiera kluczowego znaczenia. Zmiany takiego publicznego API powinny by(cid:202) wprowadzane wy(cid:239)(cid:200)cznie poprzez udost(cid:218)pnianie jego nowej wersji opatrzonej nowym numerem i w celu zapewnienia zgodno(cid:258)ci wstecznej nigdy nie powinny powodowa(cid:202) problemów w dzia(cid:239)aniu istniej(cid:200)cych, wcze(cid:258)niejszych wersji API lub interfejsu. 359 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Zasada podstawienia Liskova Zasada podstawienia Liskova (ang. Liskov Substitution Principle, w skrócie LSP) g(cid:239)osi, (cid:285)e je(cid:258)li jeden obiekt dziedziczy po innym obiekcie, obu tych obiektów mo(cid:285)na u(cid:285)ywa(cid:202) zamiennie bez wywo(cid:239)ywania problemów z funkcjonowaniem kodu. Cho(cid:202) mo(cid:285)na by s(cid:200)dzi(cid:202), (cid:285)e zaimplemento- wanie tej zasady jest stosunkowo (cid:239)atwe, jednak okazuje si(cid:218), (cid:285)e mo(cid:285)e ono by(cid:202) z(cid:239)o(cid:285)onym proble- mem, zw(cid:239)aszcza w kontek(cid:258)cie regu(cid:239) dziedziczenia zwi(cid:200)zanych z bardziej z(cid:239)o(cid:285)onymi typami, takimi jak listy obiektów lub operacje na obiektach, które s(cid:200) powszechnie stosowane w kodzie ko- rzystaj(cid:200)cym z typów ogólnych. W takich przypadkach wprowadza si(cid:218) poj(cid:218)cie wariancji, a obiekty mog(cid:200) by(cid:202) kowariantne, kontrawariantne b(cid:200)d(cid:283) te(cid:285) inwariantne. W tej ksi(cid:200)(cid:285)ce nie b(cid:218)dziemy zag(cid:239)(cid:218)- bia(cid:202) si(cid:218) w tajniki wariancji, trzeba jednak pami(cid:218)ta(cid:202) o tej zasadzie w razie pisania bibliotek lub kodu korzystaj(cid:200)cego z typów ogólnych. Zasada segregacji interfejsów Ide(cid:200) tej zasady jest za(cid:239)o(cid:285)enie, (cid:285)e utworzenie wielu interfejsów jest lepszym rozwi(cid:200)zaniem ni(cid:285) utworzenie jednego du(cid:285)ego interfejsu ogólnego przeznaczenia. Je(cid:258)li po(cid:239)(cid:200)czymy t(cid:218) zasad(cid:218) z zasad(cid:200) jednej odpowiedzialno(cid:258)ci, zaczniemy postrzega(cid:202) nasze interfejsy jako wspó(cid:239)pracuj(cid:200)ce ze sob(cid:200) niewielkie elementy jednej du(cid:285)ej uk(cid:239)adanki, a nie jako du(cid:285)e interfejsy obejmuj(cid:200)ce znaczne obsza- ry mo(cid:285)liwo(cid:258)ci funkcjonalnych tworzonego rozwi(cid:200)zania. Zasada wstrzykiwania zale(cid:285)no(cid:258)ci Chodzi w niej o to, (cid:285)e tworzone rozwi(cid:200)zania powinny zale(cid:285)e(cid:202) od abstrakcji (czy te(cid:285) od interfej- sów), a nie od instancji konkretnych obiektów. Jest ona zbli(cid:285)ona do zasady programowania w opar- ciu o interfejsy, a nie implementacje. Projektowanie interfejsu u(cid:285)ytkownika W ramach przyk(cid:239)adu wykorzystania zasad projektowania SOLID napiszemy teraz aplikacj(cid:218) posiadaj(cid:200)c(cid:200) stosunkowo z(cid:239)o(cid:285)ony interfejs u(cid:285)ytkownika i przekonamy si(cid:218), jak mo(cid:285)na wykorzysta(cid:202) te zasady, by podzieli(cid:202) jej kod na mniejsze modu(cid:239)y, które b(cid:218)d(cid:200) u(cid:285)ywane przy wykorzystaniu interfejsów i które znacznie u(cid:239)atwi(cid:200) zarz(cid:200)dzanie baz(cid:200) kodu aplikacji. W tym podrozdziale napiszemy aplikacj(cid:218) Angular 2, której uk(cid:239)ad b(cid:218)dzie podzielony na panele przesuwane w poziomie. Do okre(cid:258)lania wygl(cid:200)du tej aplikacji wykorzystamy framework Bootstrap, który uzupe(cid:239)nimy o efekty przej(cid:258)(cid:202) CSS, daj(cid:200)ce mo(cid:285)liwo(cid:258)(cid:202) przesuwania paneli w prawo i lewo. W ten sposób postaramy si(cid:218) zapewni(cid:202) u(cid:285)ytkownikom nieco inne doznania ni(cid:285) te, jakie daje wi(cid:218)kszo(cid:258)(cid:202) witryn, których zawarto(cid:258)(cid:202) jest przewijana w pionie. 360 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe Projekt koncepcyjny Zobaczmy, jaka jest koncepcja dzia(cid:239)ania naszej witryny wraz z jej przesuwanymi panelami. Zosta(cid:239)a ona zilustrowana na rysunku 11.1. Rysunek 11.1. Projekt koncepcyjny interfejsu u(cid:285)ytkownika aplikacji z przesuwanymi panelami G(cid:239)ówn(cid:200) stron(cid:218) naszej aplikacji b(cid:218)dzie stanowi(cid:239) panel przegl(cid:200)dania wraz z panelem nag(cid:239)ówka oraz przyciskiem kontroluj(cid:200)cym wy(cid:258)wietlanie i ukrywanie bocznego panelu nawigacyjnego umieszczonego z lewej strony. W momencie otwierania lewego panelu b(cid:218)dzie on wy(cid:258)wietlany z wykorzystaniem animacji CSS, które utworz(cid:200) efekt przypominaj(cid:200)cy wsuwanie panelu do wi- docznego obszaru strony. Analogicznie taki sam efekt b(cid:218)dzie u(cid:285)ywany podczas zamykania tego panelu — b(cid:218)dzie on wysuwany na lewo. I podobnie, po klikni(cid:218)ciu przycisku w celu wy(cid:258)wietlenia drugiego panelu (Panel 2) b(cid:218)dzie on wsuwany z prawej strony i zajmie obszar panelu przegl(cid:200)da- nia; tak(cid:285)e w tym przypadku efekt wizualny zostanie uzyskany dzi(cid:218)ki zastosowaniu animacji CSS. Rysunek 11.2 przedstawia panel przegl(cid:200)dania wraz z panelem nag(cid:239)ówka oraz panelem nawigacyjnym. Na rysunku wyra(cid:283)nie wida(cid:202) panel nawigacyjny umieszczony u góry strony, panel nawigacyjny umieszczony z lewej strony oraz dwa przyciski. Pierwszy z przycisków jest widoczny po lewej stronie tekstu Wybierz opcj(cid:218): i widzimy na nim jedynie znak mniejszo(cid:258)ci ( ) informuj(cid:200)cy, (cid:285)e klikni(cid:218)cie przycisku ukryje panel. Klikni(cid:218)cie tego przycisku uruchomi animacj(cid:218) CSS, która wysunie panel w lewo, tak (cid:285)e przestanie by(cid:202) widoczny. Posta(cid:202) strony w trakcie tej animacji zosta(cid:239)a przedstawiona na rysunku 11.3. Na tym rysunku animacja zosta(cid:239)a zatrzymana, tak by by(cid:239)o wida(cid:202), (cid:285)e lewy panel jest w trakcie ukrywania, a panel g(cid:239)ówny poszerza si(cid:218), by zaj(cid:200)(cid:202) ca(cid:239)y obszar strony panelu przegl(cid:200)dania. Przy tej okazji warto zwróci(cid:202) uwag(cid:218), (cid:285)e posta(cid:202) przycisku do obs(cid:239)ugi panelu nawigacyjnego zosta(cid:239)a zmie- niona z na . Ta drobna zmiana informuje, (cid:285)e panel boczny mo(cid:285)na ponownie wy(cid:258)wietli(cid:202), kli- kaj(cid:200)c przycisk . 361 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Rysunek 11.2. G(cid:239)ówny panel przegl(cid:200)dania wraz z widocznym lewym panelem nawigacyjnym Rysunek 11.3. Animacja ukrywaj(cid:200)ca lewy panel nawigacyjny Z kolei klikni(cid:218)cie przycisku Szczegó(cid:239)y spowoduje, (cid:285)e zarówno lewy panel nawigacyjny, jak i panel g(cid:239)ówny zostan(cid:200) wysuni(cid:218)te w lewo, dzi(cid:218)ki czemu pojawi si(cid:218) drugi panel — panel szczegó(cid:239)ów. Tak(cid:285)e i ta operacja b(cid:218)dzie wykonywana przy wykorzystaniu animacji CSS, której posta(cid:202) zosta(cid:239)a przedstawiona na rysunku 11.4. Na tym rysunku wida(cid:202), jak panel szczegó(cid:239)ów jest wysuwany z prawej ku lewej, natomiast oba panele widoczne wcze(cid:258)niej — nawigacyjny oraz g(cid:239)ówny — s(cid:200) wysuwane w lewo. 362 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe Rysunek 11.4. Animacja wy(cid:258)wietlaj(cid:200)ca panel szczegó(cid:239)ów Konfiguracja aplikacji Angular 2 Skoro ju(cid:285) wiemy, jaka jest koncepcja wygl(cid:200)du naszej aplikacji, mo(cid:285)emy zaj(cid:200)(cid:202) si(cid:218) implementacj(cid:200) tego uk(cid:239)adu, zaczynaj(cid:200)c od utworzenia i skonfigurowania aplikacji Angular 2. Jak mogli(cid:258)my si(cid:218) przekona(cid:202) podczas prac nad poprzednimi projektami korzystaj(cid:200)cymi z tego frameworka, now(cid:200) aplikacj(cid:218) mo(cid:285)na utworzy(cid:202), wykonuj(cid:200)c z poziomu wiersza polece(cid:241) komend(cid:218) ng new. Ten pro- ces spowoduje zainstalowanie wszelkich niezb(cid:218)dnych zale(cid:285)no(cid:258)ci wymaganych przez framework oraz utworzy pocz(cid:200)tkowe pliki aplikacji, w tym app.component.ts oraz app.component.html. Plik app/app.component.ts nie mo(cid:285)e chyba by(cid:202) prostszy: import { Component } from @angular/core ; @Component({ selector: app-root , templateUrl: ./app.component.html , styleUrls: [ ./app.component.css ] }) export class AppComponent { title = Wybierz opcj(cid:218): ; } Na pocz(cid:200)tku pliku importujemy modu(cid:239) Component, tak jak robili(cid:258)my ju(cid:285) wcze(cid:258)niej, a nast(cid:218)pnie definiujemy trzy w(cid:239)a(cid:258)ciwo(cid:258)ci, które przekazujemy do dekoratora @Component. Nale(cid:285)y zwróci(cid:202) uwag(cid:218), (cid:285)e zamiast okre(cid:258)la(cid:202) warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci template, która normalnie zawiera kod HTML, okre(cid:258)lili(cid:258)my warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci templateUrl. Informuje ona framework o tym, ze powinien wczyta(cid:202) z dysku plik o podanej nazwie, a nast(cid:218)pnie u(cid:285)y(cid:202) jego zawarto(cid:258)ci jako szablonu. I analo- gicznie, u(cid:285)ywaj(cid:200)c w(cid:239)a(cid:258)ciwo(cid:258)ci styleUrls, podali(cid:258)my adres arkusza stylów CSS, który ma by(cid:202) u(cid:285)ywany przez nasz komponent. Umieszczona poni(cid:285)ej definicja klasy AppComponent zawiera ju(cid:285) tylko jedn(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie title. 363 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Zastosowanie w(cid:239)a(cid:258)ciwo(cid:258)ci templateUrl do wczytania oddzielnego pliku zawieraj(cid:200)cego kod HTML szablonu jest przyk(cid:239)adem zastosowania zasady wstrzykiwania zale(cid:285)no(cid:258)ci. Nasza klasa AppComponent jest zale(cid:285)na od szablonu HTML, który jest niezb(cid:218)dny do wy(cid:258)wietlenia komponentu w przegl(cid:200)- darce. W przypadku stosowania w(cid:239)a(cid:258)ciwo(cid:258)ci template pojawia si(cid:218) silne powi(cid:200)zanie pomi(cid:218)dzy szablonem HTML i klas(cid:200). Pojawienie si(cid:218) takiego (cid:258)cis(cid:239)ego powi(cid:200)zania oznacza, (cid:285)e wszelkie zmiany wprowadzane w kodzie szablonu b(cid:218)d(cid:200) wymusza(cid:202) ponown(cid:200) kompilacj(cid:218) modu(cid:239)u. Po przeniesieniu kodu szablonu do osobnego pliku mo(cid:285)emy wyeliminowa(cid:202) to (cid:258)cis(cid:239)e powi(cid:200)zanie, a klasa modu(cid:239)u b(cid:218)dzie mog(cid:239)a by(cid:202) modyfikowana zupe(cid:239)nie niezale(cid:285)nie od kodu HTML szablonu. Na obecnym etapie prac nad aplikacj(cid:200) plik app.component.html tak(cid:285)e jest bardzo prosty; jego kod zosta(cid:239) przedstawiony poni(cid:285)ej: div {{title}} /div div button szczegó(cid:239)y /button /div Jak wida(cid:202), ca(cid:239)(cid:200) zawarto(cid:258)(cid:202) tego pliku stanowi(cid:200) dwa elementy div . Pierwszy z nich zawiera tytu(cid:239), a drugi — pojedynczy przycisk. Stosowanie frameworka Bootstrap Skoro przygotowali(cid:258)my ju(cid:285) podstawow(cid:200) struktur(cid:218) naszej aplikacji, mo(cid:285)emy zaj(cid:200)(cid:202) si(cid:218) uatrakcyjnie- niem jej wygl(cid:200)du. Do tego celu u(cid:285)yjemy frameworka o nazwie Bootstrap. Jest to framework HTML i CSS s(cid:239)u(cid:285)(cid:200)cy do tworzenia komponentów stron WWW, zapewniaj(cid:200)cy przewa(cid:285)aj(cid:200)c(cid:200) wi(cid:218)kszo(cid:258)(cid:202) mo(cid:285)liwo(cid:258)ci funkcjonalnych oraz stylów potrzebnych do tworzenia nowoczesnych witryn i aplikacji internetowych. Zaczynaj(cid:200)c od przycisków i ikon, poprzez karty, ró(cid:285)nego rodzaju komunikaty i niemal wszystkie inne powszechnie u(cid:285)ywane elementy stron, Bootstrap udost(cid:218)pnia prost(cid:200) sk(cid:239)adni(cid:218) pozwalaj(cid:200)c(cid:200) na (cid:239)atwe dodawanie do naszych stron profesjonalnie wygl(cid:200)daj(cid:200)- cych elementów interfejsu u(cid:285)ytkownika. Bootstrap powsta(cid:239) jako framework responsywny, co oznacza, (cid:285)e automatycznie dostosowuje si(cid:218) i dobiera optymalny sposób prezentacji dla urz(cid:200)dze(cid:241) mobilnych, tabletów i komputerów biurkowych. Aby zastosowa(cid:202) Bootstrap w naszym projekcie, trzeba go najpierw zainstalowa(cid:202) przy u(cid:285)yciu narz(cid:218)dzia npm: npm install bootstrap --save Aby do(cid:239)(cid:200)czy(cid:202) do generowanych stron plik CSS Bootstrapa, wystarczy otworzy(cid:202) w edytorze plik angular.cli.json zapisany w g(cid:239)ównym katalogu projektu i doda(cid:202) do niego w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) styles, tak jak pokazano na poni(cid:285)szym przyk(cid:239)adzie: styles : [ styles.css , ../node_modules/bootstrap/dist/css/bootstrap.min.css ], 364 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe Teraz mo(cid:285)emy ju(cid:285) przyst(cid:200)pi(cid:202) do upi(cid:218)kszania naszej strony app.component.html; zaczniemy od dodania paska nawigacyjnego, który b(cid:218)dzie umieszczony u góry. Oto jego kod HTML: nav class= navbar navbar-inverse bg-inverse navbar-toggleable-sm a class= navbar-brand nbsp; /a div class= nav navbar-nav a class= nav-item nav-link active Strona g(cid:239)ówna /a a class= nav-item nav-link Produkty /a a class= nav-item nav-link O nas /a /div /nav Powy(cid:285)szy fragment kodu odpowiada za wy(cid:258)wietlenie paska nawigacyjnego. Sk(cid:239)ada si(cid:218) on ze znacznika nav u(cid:285)ywaj(cid:200)cego kilku klas CSS frameworka Bootstrap, dzi(cid:218)ki którym zostanie wy(cid:258)wietlony jako pasek zajmuj(cid:200)cy górny fragment strony. Wewn(cid:200)trz znacznika nav jest umiesz- czony pusty znacznik a , a nast(cid:218)pnie zagnie(cid:285)d(cid:285)ony element div zawieraj(cid:200)cy trzy kolejne zagnie(cid:285)d(cid:285)one znaczniki a . Te trzy odno(cid:258)niki maj(cid:200) —odpowiednio — tytu(cid:239)y: Strona g(cid:239)ówna, Produkty oraz O nas i b(cid:218)d(cid:200) prezentowane jako elementy nawigacyjne. Nale(cid:285)y zwróci(cid:202) uwag(cid:218), (cid:285)e w tym rozdziale u(cid:285)ywamy frameworka Bootstrap w wersji 4.0.0-alpha.4, który pod wieloma wzgl(cid:218)dami ró(cid:285)ni si(cid:218) od wcze(cid:258)niejszych wersji. Je(cid:258)li powy(cid:285)szy pasek nawiga- cyjny nie b(cid:218)dzie wy(cid:258)wietlany prawid(cid:239)owo, nale(cid:285)y sprawdzi(cid:202) plik package.json i upewni(cid:202) si(cid:218), (cid:285)e jest zainstalowana odpowiednia wersja frameworka Bootstrap: dependencies : { ... inne biblioteki npm ... bootstrap : ^4.0.0-alpha.4 , ... inne biblioteki npm ... } Tworzenie panelu bocznego Teraz zajmiemy si(cid:218) przygotowaniem lewego panelu strony. Doskona(cid:239)ym miejscem do poznawania elementów HTML, stylów CSS oraz animacji jest witryna http://w3schools.com. Jej dzia(cid:239) doku- mentacji zawiera bardzo wiele przyk(cid:239)adów prezentuj(cid:200)cych, jak tworzy(cid:202) pokazy slajdów, modalne okna dialogowe, paski post(cid:218)pów, responsywne tabele i wiele innych elementów stron. W naszej aplikacji wykorzystamy przyk(cid:239)ad bocznej sekcji nawigacyjnej o nazwie Sidenav Push Content. Pokazuje on, jak utworzy(cid:202) boczny ekran nawigacyjny, który podczas otwierania wypycha na bok g(cid:239)ówn(cid:200) cz(cid:218)(cid:258)(cid:202) strony, a nie przes(cid:239)ania jej. Zaczniemy od dodania do pliku app.component.html poni(cid:285)szego fragmentu kodu HTML: div id= mySidenav class= sidenav a href= # Informacje /a a href= # Us(cid:239)ugi /a a href= # Klienci /a a href= # Kontakt /a /div Ten fragment kodu przedstawia element div o identyfikatorze mySidenav, do którego dodali(cid:258)my klas(cid:218) CSS sidenav. Wewn(cid:200)trz niego umieszczone zosta(cid:239)y cztery odno(cid:258)niki. Aby przekszta(cid:239)ci(cid:202) 365 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu ten fragment kodu HTML w atrakcyjny pasek nawigacyjny, musimy otworzy(cid:202) w edytorze plik app.component.css i doda(cid:202) do niego poni(cid:285)sz(cid:200) definicj(cid:218) stylu: /* Boczne menu nawigacyjne */ .sidenav { height: 100 ; /* 100 pe(cid:225)na wysoko(cid:286)(cid:252) */ width: 250px; /* lub 0 - zmieniane przy u(cid:298)yciu JavaScriptu */ position: fixed; /* pozostaje na miejscu */ z-index: 1; /* pozostaje nad innymi elementami */ top: 50px; left: 0; background-color: #111; /* czarne t(cid:225)o */ overflow-x: hidden; /* bez poziomego paska przewijania */ padding-top: 60px; /* tre(cid:286)(cid:252) przesuni(cid:266)ta w dó(cid:225) o 60px */ transition: 0.3s; } /* odno(cid:286)niki nawigacyjne */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } /* zmiana koloru po wskazaniu odno(cid:286)nika mysz(cid:261) */ .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } Dzi(cid:218)ki tym paru stylom CSS nasz boczny panel nawigacyjny zaczyna wygl(cid:200)da(cid:202) ciekawiej, co wida(cid:202) na poni(cid:285)szym rysunku 11.5. Rysunek 11.5. Prosty boczny panel nawigacyjny po zastosowaniu stylów CSS 366 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe Jak wida(cid:202), po zastosowaniu stylów uzyskali(cid:258)my atrakcyjny boczny panel nawigacyjny. Niestety g(cid:239)ówna zawarto(cid:258)(cid:202) strony zosta(cid:239)a pod nim ukryta, a to z kolei oznacza, (cid:285)e b(cid:218)dziemy musieli przesu- n(cid:200)(cid:202) g(cid:239)ówny panel tre(cid:258)ci w prawo, wykorzystuj(cid:200)c do tego celu zewn(cid:218)trzny element div i odpo- wiednie style CSS. Poni(cid:285)ej przedstawiona zosta(cid:239)a zmodyfikowana wersja kodu HTML panelu g(cid:239)ównego: div id= main class= main-content-panel div class= row div class= col-sm-1 button class= btn button-no-borders (click)= showHideSideClicked() span id= show-hide-side-button class= fa /span /button /div div class= col-sm-11 div class= row-content-header {{title}} /div /div /div div class= main-content button class= btn btn-primary (click)= buttonClickedDetail() szczegó(cid:239)y /button /div /div Jak wida(cid:202), g(cid:239)ówn(cid:200) tre(cid:258)(cid:202) strony umie(cid:258)cili(cid:258)my wewn(cid:200)trz elementu div o identyfikatorze main , do którego dodali(cid:258)my tak(cid:285)e klas(cid:218) main-content-panel . Obszar tego elementu podzielili(cid:258)my nast(cid:218)pnie na dwie kolumny, których szeroko(cid:258)ci wynosz(cid:200) — odpowiednio — 1 i 11. Ten wiersz zawiera przycisk do ukrywania i wy(cid:258)wietlania panelu bocznego oraz element {{title}}. Poni(cid:285)ej tego wiersza nag(cid:239)ówka znajduje si(cid:218) g(cid:239)ówna zawarto(cid:258)(cid:202) strony, która obecnie sk(cid:239)ada si(cid:218) z jednego przycisku z napisem szczegó(cid:239)y. Poni(cid:285)ej przedstawione zosta(cid:239)y style CSS okre(cid:258)laj(cid:200)ce posta(cid:202) tej cz(cid:218)(cid:258)ci strony: #main { margin-left: 250px; transition: .3s; } #main-body { transition: .3s; } .main-content { padding: 20px; } .row-content-header { padding: 5px; font-size: 20px; } 367 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Powy(cid:285)szy arkusz zawiera dwie kluczowe regu(cid:239)y, które maj(cid:200) wp(cid:239)yw na posta(cid:202) tre(cid:258)ci prezentowa- nych na stronie. Pierwsz(cid:200) z nich jest regu(cid:239)a margin-left: 250px stylu #main. U(cid:285)ycie w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) margin-left CSS spowoduje przesuni(cid:218)cie g(cid:239)ównej tre(cid:258)ci strony w prawo, kiedy b(cid:218)dzie widoczny lewy panel nawigacyjny. Odpowiada ona szeroko(cid:258)ci bocznego panelu nawigacyjnego, okre(cid:258)lonej przez styl .sidenav { width: 250px; }. Innymi s(cid:239)owy, panel boczny ma szeroko(cid:258)(cid:202) 250px i tak(cid:200) sam(cid:200) szeroko(cid:258)(cid:202) ma lewy margines g(cid:239)ównego panelu strony. Po(cid:239)(cid:200)czone zastosowanie tych dwóch stylów pozwala wy(cid:258)wietli(cid:202) boczny panel nawigacyjny i jednocze(cid:258)nie przesuwa w prawo panel g(cid:239)ówny. Pó(cid:283)niej b(cid:218)dziemy zmienia(cid:202) te warto(cid:258)ci z 250px na 0px i na odwrót, by ukrywa(cid:202) i ponownie wy(cid:258)wietla(cid:202) panel boczny. Drugim kluczowym stylem jest styl zawieraj(cid:200)cy regu(cid:239)(cid:218) CSS transition: .3s;. Okre(cid:258)la ona, ile ma trwa(cid:202) animacja, która b(cid:218)dzie ukrywa(cid:202) lub wy(cid:258)wietla(cid:202) panel boczny, jak równie(cid:285) odpowied- nio przesuwa(cid:202) g(cid:239)ówny panel strony. Po dodaniu tych stylów do arkusza mo(cid:285)emy dopisa(cid:202) do strony prosty kod JavaScript, który b(cid:218)dzie uruchamia(cid:239) efekt przej(cid:258)cia. W tym celu w kodzie HTML strony musimy zarejestrowa(cid:202) funkcj(cid:218) obs(cid:239)uguj(cid:200)c(cid:200) zdarzenia klikni(cid:218)cia, a nast(cid:218)pnie zde- finiowa(cid:202) t(cid:218) funkcj(cid:218) w pliku app.component.ts. Zacznijmy od przedstawienia kodu definiuj(cid:200)cego obs(cid:239)ug(cid:218) zdarze(cid:241) klikni(cid:218)cia, umieszczonego w pliku app.component.html: button class= btn button-no-borders (click)= showHideSideClicked() span id= show-hide-side-button class= fa /span /button Kolejny fragment kodu przedstawia funkcj(cid:218) showHideSideClicked, która b(cid:218)dzie wywo(cid:239)ywana po ka(cid:285)dym klikni(cid:218)ciu przycisku do ukrywania i wy(cid:258)wietlania bocznego panelu nawigacyjnego. Oto zmiany, jakie nale(cid:285)y wprowadzi(cid:202) w kodzie pliku app.component.ts: export class AppComponent { title = Wybierz opcj(cid:218): ; isSideNavVisible = true; showHideSideClicked() { if (this.isSideNavVisible) { document.getElementById( main ).style.marginLeft = 0px ; document.getElementById( mySidenav ).style.width = 0px ; this.isSideNavVisible = false; } else { document.getElementById( main ).style.marginLeft = 250px ; document.getElementById( mySidenav ).style.width = 250px ; this.isSideNavVisible = true; } } } Jak wida(cid:202), w powy(cid:285)szym fragmencie kodu dodali(cid:258)my do klasy AppComponent now(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie isSideNavVisible, której pocz(cid:200)tkowo przypisujemy warto(cid:258)(cid:202) true. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) ta b(cid:218)dzie przechowywa(cid:202) informacj(cid:218) o tym, czy boczny panel nawigacyjny jest widoczny, czy nie. Poni(cid:285)ej umieszczona zosta(cid:239)a implementacja funkcji showHideSideClicked. Je(cid:258)li panel boczny jest widoczny, w(cid:239)a(cid:258)ciwo(cid:258)ci marginLeft panelu g(cid:239)ównego przypisujemy warto(cid:258)(cid:202) 0px, podobnie jak w(cid:239)a(cid:258)ciwo(cid:258)ci 368 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe with elementu mySideNav. Operacje te odpowiadaj(cid:200) zwini(cid:218)ciu panelu bocznego i przesuni(cid:218)ciu panelu g(cid:239)ównego w lewo, tak by zaj(cid:200)(cid:239) ca(cid:239)(cid:200) szeroko(cid:258)(cid:202) strony. Je(cid:258)li natomiast boczny panel nawiga- cyjny jest zwini(cid:218)ty, post(cid:218)pujemy odwrotnie, czyli w(cid:239)a(cid:258)ciwo(cid:258)ciom marginLeft oraz width odpo- wiednich elementów przypisujemy warto(cid:258)(cid:202) 250px, a dodatkowo w(cid:239)a(cid:258)ciwo(cid:258)ci isSideNavVisible przypisujemy warto(cid:258)(cid:202) true. Po uruchomieniu aplikacji na obecnym etapie prac mo(cid:285)emy ju(cid:285) ukry- wa(cid:202) i wy(cid:258)wietla(cid:202) panel nawigacyjny, który dzi(cid:218)ki zastosowaniu w(cid:239)a(cid:258)ciwo(cid:258)ci CSS transition: .3s jest animowany w atrakcyjny sposób. Tworzenie nak(cid:239)adki Teraz mo(cid:285)emy skoncentrowa(cid:202) si(cid:218) na drugiej stronie, która po klikni(cid:218)ciu przycisku szczegó(cid:239)y b(cid:218)dzie wsuwa(cid:202) si(cid:218) na stron(cid:218) od prawej kraw(cid:218)dzi okna do lewej. T(cid:218) drug(cid:200) stron(cid:218) definiuje po- ni(cid:285)szy fragment kodu HTML: div id= mySidenav class= sidenav ... kod panelu bocznego ... /div div id= myRightScreen class= overlay button class= btn button-no-borders (click)= closeClicked() span class= fa fa-chevron-left /span /button div class= overlay-content h1 strona 2. /h1 /div /div ... istniej(cid:200)cy panel g(cid:239)ówny ... div id= main class= main-content-panel Jak wida(cid:202), do kodu pliku app.component.html wstawili(cid:258)my element div o identyfikatorze myRightScreen i dodali(cid:258)my do niego klas(cid:218) CSS overlay. Ten prosty element div zawiera umieszczony u góry przycisk, w którym zdefiniowali(cid:258)my funkcj(cid:218) obs(cid:239)uguj(cid:200)c(cid:200) zdarzenia click (closeClikck) oraz element h1 wy(cid:258)wietlaj(cid:200)cy nag(cid:239)ówek strona 2. Podobnie jak w przypadku poprzednich elementów strony, tak(cid:285)e teraz do okre(cid:258)lenia postaci tego fragmentu strony b(cid:218)dziemy potrzebowali arkusza stylów. Arkusz ten b(cid:218)dzie musia(cid:239) spe(cid:239)nia(cid:202) dwa podstawowe cele. Przede wszystkim ta druga strona musi by(cid:202) pocz(cid:200)tkowo przesuni(cid:218)ta w prawo, a my musimy dysponowa(cid:202) sposobem, by przesun(cid:200)(cid:202) j(cid:200) w lewo po klikni(cid:218)ciu przycisku szczegó(cid:239)y. Poni(cid:285)ej przedstawiony zosta(cid:239) kod CSS okre(cid:258)laj(cid:200)cy posta(cid:202) tego elementu: /* nak(cid:225)adka - strona 2. (t(cid:225)o) */ .overlay { height: 100 ; width: 100 ; position: fixed; /* ma pozostawa(cid:252) w miejscu */ z-index: 1; /* ma by(cid:252) widoczna nad innymi elementami */ left: 0; 369 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu top: 54px; overflow-x: hidden; /* wy(cid:225)(cid:261)czamy poziomy pasek przewijania */ transition: 0.3s; transform: translateX(100 ); border-left: 1px solid; } Tak(cid:285)e w tym arkuszu u(cid:285)ywane s(cid:200) dwie regu(cid:239)y stylów kontroluj(cid:200)ce sposób wy(cid:258)wietlania tej strony. Pierwsz(cid:200) z nich jest transform: translateX(100 ), a drug(cid:200) transition: 0.3s. Pierwsza w tym przypadku zmienia pocz(cid:200)tkow(cid:200) wspó(cid:239)rz(cid:218)dn(cid:200) X elementu div na 100 . Domy(cid:258)lnie oznacza to, (cid:285)e przesuni(cid:218)cie elementu na osi X ma wynosi(cid:202) 100 szeroko(cid:258)ci strony, czyli (cid:285)e element b(cid:218)dzie ca(cid:239)kowicie wysuni(cid:218)ty poza ni(cid:200). Z kolei druga regu(cid:239)a — transition: 0.3s — okre(cid:258)la jedynie animacj(cid:218) pokazywania i ukrywania elementu. Aby pokaza(cid:202) dzia(cid:239)anie tych efektów, zaimplementujemy obs(cid:239)ug(cid:218) klikni(cid:218)(cid:202) na stronie. Najpierw zajmiemy si(cid:218) przyciskiem szczegó(cid:239)y; oto kod u(cid:285)ywanej przez niego funkcji obs(cid:239)ugi zdarze(cid:241) click: buttonClickedDetail() { document.getElementById( myRightScreen ) .style.transform = translateX(0 ) ; document.getElementById( main ) .style.transform = translateX(-100 ) ; } Powy(cid:285)sza funkcja wykonuje dwie operacje. Pierwsz(cid:200) jest przypisanie w(cid:239)a(cid:258)ciwo(cid:258)ci transform drugiej strony warto(cid:258)ci translateX(0 ). Jej efekt jest przeciwie(cid:241)stwem u(cid:285)ycia warto(cid:258)ci translateX(100 ): przypisuje pocz(cid:200)tkowej warto(cid:258)ci wspó(cid:239)rz(cid:218)dnej X elementu div warto(cid:258)(cid:202) 0 . Dzi(cid:218)ki zastoso- waniu w(cid:239)a(cid:258)ciwo(cid:258)ci translate uzyskujemy interesuj(cid:200)cy nas efekt przesuwania elementu od pra- wej do lewej. Natomiast drug(cid:200) wykonywan(cid:200) operacj(cid:200) jest przypisanie w(cid:239)a(cid:258)ciwo(cid:258)ci transform elementu div strony g(cid:239)ównej warto(cid:258)ci translate(-100 ). Zapewni to efekt wysuni(cid:218)cia panelu g(cid:239)ównego w lewo. Zanim przetestujemy dzia(cid:239)anie tych efektów przej(cid:258)(cid:202), zaimplementujemy jeszcze funkcj(cid:218) closeClicked, która b(cid:218)dzie zamyka(cid:202) prawy panel strony. Jej kod zosta(cid:239) przedstawiony poni(cid:285)ej: closeClicked() { document.getElementById( myRightScreen ) .style.transform = translateX(100 ) ; document.getElementById( main ) .style.transform = translateX(0 ) ; } Ta funkcja dzia(cid:239)a odwrotnie ni(cid:285) przedstawiona wcze(cid:258)niej funkcja buttonClickedDetail, a jej przeznaczeniem jest wysuni(cid:218)cie panelu szczegó(cid:239)ów na prawo, tak by g(cid:239)ówny panel strony ponow- nie sta(cid:239) si(cid:218) widoczny. Obie te funkcje wspó(cid:239)pracuj(cid:200), przypisuj(cid:200)c odpowiednie warto(cid:258)ci transformX w(cid:239)a(cid:258)ciwo(cid:258)ciom transform obu elementów div , czyli g(cid:239)ównemu panelowi strony oraz elemen- towi o identyfikatorze myRightScreen. 370 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe Je(cid:258)li teraz wy(cid:258)wietlimy stron(cid:218) w przegl(cid:200)darce, b(cid:218)dziemy ju(cid:285) mogli klikn(cid:200)(cid:202) przycisk szczegó(cid:239)y, aby zobaczy(cid:202), jak drugi panel wysuwa si(cid:218) zza prawej kraw(cid:218)dzi okna przegl(cid:200)darki. Koordynacja efektów przej(cid:258)(cid:202) Dotychczas uda(cid:239)o si(cid:218) utworzy(cid:202) prost(cid:200) aplikacj(cid:218) internetow(cid:200) sk(cid:239)adaj(cid:200)c(cid:200) si(cid:218) z panelu g(cid:239)ównego, lewego panelu nawigacyjnego oraz dodatkowego panelu szczegó(cid:239)ów; elementy te upi(cid:218)kszyli(cid:258)my przy u(cid:285)yciu stylów wzbogaconych o efekty przej(cid:258)(cid:202), które pozwoli(cid:239)y uzyska(cid:202) atrakcyjn(cid:200) wizu- alnie struktur(cid:218) strony. Niestety w bie(cid:285)(cid:200)cej implementacji naszej aplikacji wyst(cid:218)puj(cid:200) pewne problemy. Kiedy jednocze(cid:258)nie b(cid:218)dzie widoczna strona g(cid:239)ówna oraz lewy panel nawigacyjny, klikni(cid:218)cie przycisku szczegó(cid:239)y nie spowoduje zamkni(cid:218)cia panelu nawigacyjnego przed wsuni(cid:218)- ciem panelu szczegó(cid:239)ów. W efekcie ta strona szczegó(cid:239)ów zostanie nasuni(cid:218)ta na panel i b(cid:218)dzie go cz(cid:218)(cid:258)ciowo przes(cid:239)ania(cid:202), tak jak pokazano na rysunku 11.6. Rysunek 11.6. Prawy panel szczegó(cid:239)ów nak(cid:239)adaj(cid:200)cy si(cid:218) na panel nawigacyjny Problem ten mogliby(cid:258)my rozwi(cid:200)za(cid:202), wywo(cid:239)uj(cid:200)c zaimplementowan(cid:200) ju(cid:285) funkcj(cid:218) showHideSide (cid:180)Clicked, która pozwoli(cid:239)aby ukry(cid:202) panel nawigacyjny. Cho(cid:202) w taki sposób mogliby(cid:258)my wyelimi- nowa(cid:202) problem z nak(cid:239)adaniem si(cid:218) prawego i lewego panelu, jednak takie rozwi(cid:200)zanie przyczyni- (cid:239)oby si(cid:218) do wyst(cid:200)pienia innego b(cid:239)(cid:218)du: gdyby(cid:258)my przy pocz(cid:200)tkowo widocznym panelu nawigacyj- nym wy(cid:258)wietlili, a nast(cid:218)pnie ukryli panel szczegó(cid:239)ów, panel nawigacyjny pozosta(cid:239)by niewidoczny. I cho(cid:202) mogliby(cid:258)my próbowa(cid:202) poradzi(cid:202) sobie z tym problemem, ponownie wywo(cid:239)uj(cid:200)c funkcj(cid:218) showHideSideClicked, tak(cid:285)e i to rozwi(cid:200)zanie przyczyni(cid:239)oby si(cid:218) do wyst(cid:218)powania nowych, dziwacz- nych b(cid:239)(cid:218)dów. Chocia(cid:285) mogliby(cid:258)my dopracowa(cid:202) logik(cid:218) aplikacji tak, by wyeliminowa(cid:202) wszystkie te b(cid:239)(cid:218)dy, jednak szybko wpadliby(cid:258)my we frustruj(cid:200)cy kr(cid:200)g, w którym próby poprawienia jednego b(cid:239)(cid:218)dy prowadzi(cid:239)yby do wyst(cid:218)powania kolejnych problemów. W naszej aplikacji przyda(cid:239)by si(cid:218) jaki(cid:258) mechanizm pozwalaj(cid:200)cy na (cid:258)ledzenie wszystkich elementów wizualnych oraz kontrolowanie reakcji aplikacji na interakcje z u(cid:285)ytkownikiem. I to w(cid:239)a(cid:258)nie w takich przypadkach bardzo przy- daj(cid:200) si(cid:218) wzorce projektowe Stan oraz Mediator. 371 Poleć książkęKup książkę J(cid:266)zyk TypeScript. Tajniki kodu Wzorzec Stan Jednymi z wielu wzorców projektowych opisanych w ksi(cid:200)(cid:285)ce Gangu Czworga s(cid:200) wzorce Stan (ang. State) oraz Mediator (ang. Mediator). Pierwszy z nich do opisania konkretnego stanu u(cid:285)ywa grupy konkretnych klas maj(cid:200)cych wspóln(cid:200) klas(cid:218) bazow(cid:200). W ramach przyk(cid:239)adu wyobra(cid:283)my sobie typ wyliczeniowy opisuj(cid:200)cy stany, w jakich mog(cid:200) znajdowa(cid:202) si(cid:218) drzwi. W pierwszym odruchu zapewne uznamy, (cid:285)e drzwi mog(cid:200) by(cid:202) Otwarte lub Zamkni(cid:218)te. Zastanówmy si(cid:218) jednak, co si(cid:218) stanie z naszym przep(cid:239)ywem sterowania oraz logik(cid:200) dzia(cid:239)ania aplikacji, je(cid:258)li b(cid:218)dziemy tak(cid:285)e potrzebowali stanów Zamkni(cid:218)teNaKlucz oraz Otworzone b(cid:200)d(cid:283) te(cid:285) je(cid:258)li b(cid:218)dziemy chcieli opisa(cid:202) stany drzwi przesuwnych, takie jak LekkoUchylone, Pó(cid:239)Otwarte, PrawieOtwarte oraz Ca(cid:239)kowicieOtwarte. Wzorzec projektowy Stan pozwala na bardzo proste defi- niowanie wszystkich tych stanów oraz dostosowywanie logiki na podstawie bie(cid:285)(cid:200)cego stanu obiektu. Je(cid:258)li zastanowimy si(cid:218) nad nasz(cid:200) aplikacj(cid:200), dojdziemy do wniosku, (cid:285)e jej ekran w ka(cid:285)dej chwili b(cid:218)dzie si(cid:218) znajdowa(cid:239) w konkretnym stanie. Mo(cid:285)e w niej by(cid:202) widoczny b(cid:200)d(cid:283) to panel g(cid:239)ówny, b(cid:200)d(cid:283) te(cid:285) panel szczegó(cid:239)ów. Tak(cid:285)e lewy panel nawigacyjny mo(cid:285)e by(cid:202) widoczny lub ukryty. Potencjalne kombinacje pozwalaj(cid:200) wskaza(cid:202) trzy stany aplikacji: (cid:81) widoczny tylko panel g(cid:239)ówny, (cid:81) widoczne panele g(cid:239)ówny i nawigacyjny, (cid:81) widoczny panel szczegó(cid:239)ów. Interfejs stanu Wzorzec projektowy Stan u(cid:239)atwia definiowanie takich stanów w kodzie programu. Podstawow(cid:200) zasad(cid:200), na jakiej opiera si(cid:218) ten wzorzec projektowy, jest utworzenie interfejsu lub abstrakcyjnej klasy bazowej oraz konkretnych klas dla ka(cid:285)dej z mo(cid:285)liwych specjalizacji. W naszej aplikacji Stan musi zapewnia(cid:202) odpowiedzi na dwa pytania. (cid:81) Czy boczny panel nawigacyjny jest widoczny? (cid:81) Czy jest widoczny panel g(cid:239)ówny, czy panel szczegó(cid:239)ów? Je(cid:258)li dodatkowo aktualnie jest widoczny panel g(cid:239)ówny, musimy wiedzie(cid:202), czy w jego lewym, górnym rogu nale(cid:285)y wy(cid:258)wietla(cid:202) przycisk ze strza(cid:239)k(cid:200) , czy te(cid:285) ze strza(cid:239)k(cid:200) . Nasz interfejs stanu b(cid:218)dzie zatem mia(cid:239) nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): export enum StateType { MainPanelOnly, MainPanelWithSideNav, DetailPanel } export enum PanelType { Primary, Detail } 372 Poleć książkęKup książkę Rozdzia(cid:225) 11. • Programowanie obiektowe export interface IState { getPanelType() : PanelType; getStateType() : StateType; isSideNavVisible() : boolean; getPanelButtonClass() : string; } Powy(cid:285)szy fragment kodu zaczyna si(cid:218) od definicji typu wyliczeniowego StateType, który b(cid:218)dzie przekazywa(cid:239) informacj(cid:218) o tym, w którym z trzech stanów aplikacja si(cid:218) aktualnie znajduje. Nast(cid:218)p- nie zdefiniowali(cid:258)my typ wyliczeniowy PanelType, który b(cid:218)dzie s(cid:239)u(cid:285)y(cid:239) do okre(cid:258)lania, czy aktualnie jest widoczny panel g(cid:239)ówny (Primary), czy te(cid:285) panel szczegó(cid:239)ów (Detail). Nasz interfejs stanu IState okre(cid:258)la cztery funkcje. Pierwsza z nich, getPanelType, zwraca warto(cid:258)(cid:202) typu PanelType; a druga, getStatePanel, warto(cid:258)(cid:202) typu StateType. Kolejna funkcja, isSideNavVisible, zwraca war- to(cid:258)(cid:202) logiczn(cid:200) okre(cid:258)laj(cid:200)c(cid:200), czy boczny panel nawigacyjny jest widoczny, czy nie. I w ko(cid:241)cu ostatnia z funkcji, getPanelButtonClass, b(cid:218)dzie zwraca(cid:202) nazw(cid:218) klasy CSS pozwalaj(cid:200)c(cid:200) na zmian(cid:218) przyci- sku na , zale(cid:285)nie od stanu bocznego panelu nawigacyjnego. Tworz(cid:200)c ten interfejs, zdefiniowali(cid:258)my jednocze(cid:258)nie pytania, które mo(cid:285)emy zadawa(cid:202) ka(cid:285)dej z konkretnych klas reprezentuj(cid:200)cych stany naszej aplikacji. Odpowiedzi na te pytania b(cid:218)d(cid:200) nieco inne w zale(cid:285)no(cid:258)ci od tego, czy widoczny b(cid:218)dzie panel g(cid:239)ówny, czy panel szczegó(cid:239)ów. Tak wygl(cid:200)- daj(cid:200) podstawowe za(cid:239)o(cid:285)enia wzorca projektowego Stan. Nale(cid:285)y zdefiniowa(cid:202) interfejs zwracaj(cid:200)cy odpowiedzi na wszelkie pytania dotycz(cid:200)ce stanu, a nast(cid:218)pnie u(cid:285)ywa(cid:202) go w kodzie aplikacji. Takie rozwi(cid:200)zanie pozwala odseparowa(cid:202) implementowan(cid:200) logik(cid:218) korzystaj(cid:200)c(cid:200) ze stanów od samej definicji tych stanów. Innymi s(cid:239)owy, dodawanie nowych czy te(cid:285) usuwanie istniej(cid:200)cych stanów nie b(cid:218)dzie mia(cid:239)o (cid:285)adnego wp(cid:239)ywu na kod korzystaj(cid:200)cy z interfejsu IState. Konkretne stany A teraz przyjrzyjmy si(cid:218) trzem konkretnym klasom, reprezentuj(cid:200)cym stany, w jakich mo(cid:285)e si(cid:218) znajdowa(cid:202) aplikacja. Oto pierwsza z nich: export class MainPanelOnly implements IState { getPanelType() : PanelType { return PanelType.Primary; } getStateType() : StateType { return StateType.MainPanelOnly; } getPanelButtonClass() : string { return fa-chevron-right ;} isSideNavVisible() : boolean { return false; } } Powy(cid:285)szy fragment kodu przedstawia definicj(cid:218) klasy MainPageOnly opisuj(cid:200)cej stan w sytuacji, gdy boczny panel nawigacyjny nie jest widoczny, a wy(cid:258)wietlony jest panel g(cid:239)ówny. To naprawd(cid:218) bardzo prosta klasa implementuj(cid:200)ca interfejs IState, a dz
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Język TypeScript. Tajniki kodu. Wydanie II
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ą: