Tytuł oryginału: jQuery Design Patterns · Wprowadzenie do biblioteki Underscore.js 160 U ycie...

Tytuł oryginału: jQuery Design Patterns

Tłumaczenie: Piotr Pilch

ISBN: 978-83-283-2832-7

Copyright © Packt Publishing 2016.

First published in the English language under the title ‘jQuery Design Patterns – 9781785888687’.

Polish edition copyright © 2017 by Helion SAAll 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 HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: 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/bjqswp.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/bjqswpMoż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ść

http://helion.pl/rt/bjqswp

http://helion.pl/rf/bjqswp

http://helion.pl/ro/bjqswp

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze 9

O recenzencie 11

Przedmowa 13

Rozdzia 1. Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt 19

Biblioteka jQuery i obs uga skryptowa modelu DOM 20Modyfikowanie modelu DOM za pomoc biblioteki jQuery 21

Wzorzec Kompozyt 26Sposób wykorzystania wzorca Kompozyt przez bibliotek jQuery 26Porównanie korzy ci uzyskiwanych w przypadku rezygnacji

ze zwyk ego interfejsu API modelu DOM 29U ycie wzorca Kompozyt do projektowania aplikacji 31

Wzorzec Iterator 34Sposób wykorzystania wzorca Iterator przez bibliotek jQuery 34Powi zanie wzorca Iterator z wzorcem Kompozyt 36Zastosowanie wzorca Iterator 36

Podsumowanie 38

Rozdzia 2. Wzorzec Obserwator 39

Wprowadzenie do wzorca Obserwator 39Sposób wykorzystania wzorca Obserwator przez bibliotek jQuery 41Demonstracja przyk adowego przypadku u ycia 47Porównanie wzorca Obserwator z u yciem atrybutów zdarze 53Zapobieganie „wyciekom” pami ci 56

Wprowadzenie do wzorca Obserwator ze zdarzeniami delegowanymi 57Upraszczanie kodu przez wzorzec Obserwator ze zdarzeniami delegowanymi 58Porównanie korzy ci zwi zanych z wykorzystaniem pami ci 59

Podsumowanie 60

Poleć książkęKup książkę



Biblioteka jQuery. Sprawdzone wzorce projektowe

4

Rozdzia 3. Wzorzec Publikowanie/Subskrybowanie 61

Wprowadzenie do wzorca Publikowanie/Subskrybowanie 62Ró nice mi dzy wzorcem Publikowanie/Subskrybowanie i wzorcem Obserwator 63

Adaptowanie wzorca Publikowanie/Subskrybowanie przez bibliotek jQuery 64Zdarzenia niestandardowe w bibliotece jQuery 64Implementowanie schematu wzorca Publikowanie/Subskrybowanie

za pomoc zdarze niestandardowych 64Demonstracja przyk adowego przypadku u ycia 65

U ycie wzorca Publikowanie/Subskrybowanie w przyk adzie panelu sterowania 65Rozszerzanie implementacji 68U ycie dowolnego obiektu jako brokera 70

Zastosowanie przestrzeni nazw zdarze niestandardowych 70Podsumowanie 71

Rozdzia 4. Dziel i zwyci aj za pomoc wzorca Modu 73

Modu y i przestrzenie nazw 73Hermetyzowanie integralnych cz ci implementacji 74Unikanie zmiennych globalnych za pomoc przestrzeni nazw 74Korzy ci oferowane przez wzorce modu ów i przestrzeni nazw 75Powszechna akceptacja 75

Wzorzec Litera obiektu 76Wzorzec Modu 78

Blok konstrukcyjny wzorca IIFE 78Prosty wzorzec Modu IIFE 80Wariant wzorca Modu z przestrzeni nazw jako parametrem 82Wariant wzorca Modu zawartego we wzorcu IIFE 85

Wzorzec Modu udost pniaj cy 86U ycie funkcji Strict Mode j zyka ECMAScript 5 88Wprowadzenie do modu ów j zyka ECMAScript 6 88U ycie modu ów w aplikacjach jQuery 90

G ówny modu dashboard 91Modu categories 92Modu informationBox 93Modu counter 94Przegl d implementacji 95

Podsumowanie 96

Rozdzia 5. Wzorzec Fasada 97

Wprowadzenie do wzorca Fasada 97Zalety wzorca Fasada 98Sposób adaptacji wzorca Fasada przez bibliotek jQuery 99

Interfejs API biblioteki jQuery operacji przechodzenia w obr bie modelu DOM 100Interfejs API operacji modyfikowania i uzyskiwania dost pu do w a ciwo ci 103

Zastosowanie wzorca Fasada w aplikacjach 104Podsumowanie 107




Spis tre ci

5

Rozdzia 6. Wzorce Budowniczy i Fabryka 109

Wprowadzenie do wzorca Fabryka 109Wykorzystanie wzorca Fabryka przez bibliotek jQuery 110U ycie wzorca Fabryka w aplikacjach 112

Wprowadzenie do wzorca Budowniczy 116Wykorzystanie wzorca Budowniczy przez interfejs API biblioteki jQuery 117Zastosowanie wzorca Budowniczy wewn trznie przez bibliotek jQuery 120Wykorzystanie wzorca Budowniczy w aplikacjach 122

Podsumowanie 126

Rozdzia 7. Wzorce asynchronicznego przep ywu sterowania 127

Programowanie z wykorzystaniem wywo a zwrotnych 128U ycie prostych wywo a zwrotnych w j zyku JavaScript 129Konfigurowanie wywo a zwrotnych jako w a ciwo ci obiektu 129Zastosowanie wywo a zwrotnych w aplikacjach opartych na bibliotece jQuery 130Tworzenie metod akceptuj cych wywo ania zwrotne 132Organizowanie wywo a zwrotnych 133

Wprowadzenie do poj cia obiektów Promise 136U ycie obiektów Promise 138Zagadnienia zaawansowane 143

Tworzenie a cucha obiektów Promise 143Obs uga zg aszanych b dów 145

czenie obiektów Promise 146Sposób u ycia obiektów Promise przez bibliotek jQuery 147Transformacja obiektów Promise w obiekty innych typów 148Podsumowanie zalet obiektów Promise 149

Podsumowanie 150

Rozdzia 8. Wzorzec Atrapa obiektu 151

Wprowadzenie do wzorca Atrapa obiektu 151U ycie atrap obiektów w aplikacjach opartych na bibliotece jQuery 153

Definiowanie faktycznych wymaga us ugi 154Implementowanie atrapy us ugi 155U ycie atrapy us ugi 157

Podsumowanie 158

Rozdzia 9. Tworzenie szablonów klienckich 159

Wprowadzenie do biblioteki Underscore.js 160U ycie szablonów biblioteki Underscore.js w aplikacjach 161

Wprowadzenie do biblioteki Handlebars.js 164U ycie biblioteki Handlebars.js w aplikacjach 166

Asynchroniczne pobieranie szablonów HTML 169Adaptowanie dynamicznego adowania szablonów w istniej cej implementacji 170Moderacja to najlepsza rzecz 172

Podsumowanie 172





6

Rozdzia 10. Wzorce do projektowania dodatków i wid etów 173

Wprowadzenie do dodatków biblioteki jQuery 174Stosowanie zasad obowi zuj cych w bibliotece jQuery 174U ycie metody $.noCon ict() 177Opakowywanie z wykorzystaniem wzorca IIFE 177

Tworzenie dodatków do wielokrotnego wykorzystania 179Akceptowanie parametrów konfiguracyjnych 179Tworzenie stanowych dodatków biblioteki jQuery 182Implementowanie stanowego dodatku biblioteki jQuery 183Usuwanie instancji dodatku 185Implementowanie metod pobieraj cych i ustawiaj cych 186U ycie dodatku w aplikacji panelu sterowania 187

U ycie projektu dodatków jQuery Boilerplate 188Dodawanie metod do dodatku 190

Wybieranie nazwy 191Podsumowanie 192

Rozdzia 11. Wzorce optymalizacji 193

Umieszczanie skryptów w pobli u ko ca kodu strony 194Tworzenie pakunków i minifikowanie zasobów 194

U ycie parametrów wzorca IIFE 195Zastosowanie sieci CDN 196

Zastosowanie interfejsu API sieci CDN JSDelivr 197Optymalizowanie wspólnego kodu w JavaScripcie 197

Tworzenie lepszych p tli for 197Tworzenie wydajnych selektorów CSS 198Tworzenie efektywnego kodu jQuery 199

Minimalizowanie operacji przechodzenia w obr bie modelu DOM 199Nie przesadzaj 201Usprawnianie operacji modyfikacji modelu DOM 201U ycie obserwatorów ze zdarzeniami delegowanymi 205U ycie metody $.noop() 205U ycie dodatku $.single 206

„Leniwe” adowanie modu ów 208Podsumowanie 210

Skorowidz 213




1

Utrwalenie wiedzyo bibliotece jQueryi wzorcu Kompozyt

Przed pojawieniem si standardu Web 2.0 serwisy internetowe by y jedynie no nikiem opar-tym na dokumentach, który oferowa tylko wzajemne po czenie ró nych stron/dokumentóworaz obs ug skryptow po stronie klienta ograniczon przewa nie do sprawdzania poprawno-ci formularza. W 2005 roku pojawi y si serwisy Gmail i Google Maps, a JavaScript sta si

j zykiem u ywanym przez du e przedsi biorstwa do tworzenia aplikacji o du ej skali i zapewnia-nia rozbudowanych interakcji opartych na interfejsie u ytkownika.

Nawet pomimo tego, e od czasu pojawienia si j zyka JavaScript dokonano w nim bardzoniewielu zmian, znacz co zmieni y si oczekiwania wiata przedsi biorców wzgl dem mo liwo cistron internetowych. Odt d projektanci witryn internetowych musieli zapewnia z o one interak-cje z u ytkownikiem. Wreszcie na rynku zacz funkcjonowa termin „aplikacja internetowa”.W efekcie oczywiste zaczyna o stawa si to, e projektanci powinni tworzy pewne abstrak-cje kodu, definiowa sprawdzone procedury i adaptowa wszystkie mo liwe do zastosowaniawzorce projektowe (ang. design patterns), jakie informatyka mog a zaoferowa . Powszechnewykorzystanie j zyka JavaScript w przypadku aplikacji dla przedsi biorstw u atwi o jego rozwój,który zosta rozszerzony za pomoc specyfikacji EcmaScript2015/EcmaScript6 (ES6) w sposóbpozwalaj cy na atwe u ycie jeszcze wi kszej liczby wzorców projektowych.

W sierpniu 2006 roku po raz pierwszy zosta a udost pniona przez Johna Resiga bibliotekajQuery w witrynie o adresie http://jquery.com/. Biblioteka zosta a stworzona w celu zapew-nienia wygodnego w u yciu interfejsu API s u cego do lokalizacji elementów modelu DOM.Od tego czasu biblioteka stanowi integraln cz pakietu narz dziowego projektanta aplikacji





20

internetowych. U swoich podstaw biblioteka jQuery korzysta z kilku wzorców projektowychi próbuje zach ci projektanta do u ywania ich za po rednictwem zapewnianych przez siebiemetod. Wzorzec Kompozyt (ang. Composite Pattern) to jeden z tych wzorców ujawniany projek-tantowi za pomoc bardzo podstawowej metody jQuery(), która s u y do wykonywania opera-cji przemieszczania si w obr bie modelu DOM i stanowi jeden z najbardziej wyró niaj cychsi elementów biblioteki jQuery.

W tym rozdziale zosta y omówione nast puj ce zagadnienia: Utrwalenie wiedzy na temat obs ugi skryptowej modelu DOM za pomoc

biblioteki jQuery. Wprowadzenie do wzorca Kompozyt. Sposób wykorzystania wzorca Kompozyt przez bibliotek jQuery. Korzy ci wynikaj ce z u ycia biblioteki jQuery zamiast zwyk ych operacji

modyfikacji modelu DOM za pomoc kodu w JavaScripcie. Wprowadzenie do wzorca Iterator. Zastosowanie wzorca Iterator w przyk adowej aplikacji.

Biblioteka jQuery i obs uga skryptowamodelu DOMDzi ki obs udze skryptowej modelu DOM odwo ujemy si do dowolnej procedury zmieniaj cejlub przetwarzaj cej elementy strony internetowej po za adowaniu jej przez przegl dark . DOMAPI to interfejs API j zyka JavaScript poddany standaryzacji w 1998 roku. Zapewnia on projek-tantom aplikacji internetowych kolekcj metod, które pozwalaj na modyfikowanie elementówdrzewa modelu DOM tworzonych przez przegl dark po za adowaniu i poddaniu analiziesk adniowej kodu HTML strony internetowej.

Wi cej informacji o modelu DOM (Document Object Model) i jego interfejsach API znajdziesz na stronie inter-netowej o adresie https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction.

Wykorzystuj c interfejs API modelu DOM w swoim kodzie napisanym w JavaScripcie, projektan-ci aplikacji internetowych mog modyfikowa w z y tego modelu i dodawa nowe elementylub usuwa elementy istniej ce w obr bie strony. Pocz tkowo podstawowym przypadkiemu ycia obs ugi skryptowej modelu DOM by o jedynie sprawdzanie poprawno ci formularzypo stronie klienta. Jednak e z up ywem lat i w miar jak JavaScript zyskiwa uznanie w wiecieprzedsi biorstw zacz to implementowa bardziej z o one interakcje z u ytkownikiem.

Pocz tkowa wersja biblioteki jQuery pojawi a si w sierpniu 2006 roku. Jej zadaniem by o u a-twienie projektantom aplikacji internetowych modyfikowania drzewa modelu DOM i wykonywania




Rozdzia 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt

21

operacji przechodzenia w jego obr bie. Jednym z g ównych celów biblioteki by o zapewnienieabstrakcji, które umo liwia y tworzenie krótszego, bardziej czytelnego i mniej podatnego nab dy kodu, a jednocze nie zagwarantowanie zgodno ci z ró nymi przegl darkami.

Powy sze podstawowe zasady obowi zuj ce w przypadku biblioteki jQuery s wyra nie widocznena jej stronie internetowej, na której zaprezentowano je w nast puj cy sposób:

(…)szybka, niewielka i bogata w mo liwo ci biblioteka j zyka JavaScript. Sprawiaona, e takie dzia ania, jak modyfikowanie dokumentów HTML i przechodzeniew ich obr bie, obs uga zdarze , u ywanie animacji i technologii Ajax, s znacznieprostsze z wykorzystaniem prostego w u yciu interfejsu API, który wspó pracujez wieloma przegl darkami. cz c wszechstronno i rozszerzalno , bibliotekajQuery zmieni a sposób, w jaki miliony osób pisze kod w JavaScripcie.

Zapewniane od pocz tku przez bibliotek jQuery interfejsy API z abstrakcjami, a tak e sposób or-ganizacji ró nych wzorców projektowych, przyczyni y si do wysokiego poziomu akceptacjibiblioteki przez projektantów aplikacji internetowych. W rezultacie, zgodnie z kilkoma ród amiinformacji, takimi jak serwis BuiltWith.com (http://trends.builtwith.com/javascript/jQuery),biblioteka jQuery jest wykorzystywana przez ponad 60% najcz ciej odwiedzanych witryninternetowych z ca ego wiata.

Modyfikowanie modelu DOM za pomoc biblioteki jQueryAby utrwali informacje na temat biblioteki jQuery, omówimy przyk adow stron internetow ,w której przypadku s wykonywane proste operacje modyfikowania modelu DOM. W przyk adziezostanie za adowana prosta strona ze struktur , która pocz tkowo wygl da podobnie jak naponi szym rysunku.

Do zmiany tre ci i uk adu strony zostanie u yty kod jQuery. Aby efekty uruchomienia koduby y wyra nie widoczne, zostanie on tak skonfigurowany, eby dzia a przez oko o 700 milisekundod momentu za adowania strony. Wynik operacji modyfikowania zaprezentowano na rysunkuna nast pnej stronie.





22

Przejrzyjmy kod HTML u yty w poprzednim przyk adzie:

<!DOCTYPE html><html> <head> <title>Modyfikacje modelu DOM</title> <link rel="stylesheet" type="text/css" href="dom-manipulations.css"> </head> <body> <h1 id="pageHeader">Modyfikacje modelu DOM</h1> <div class="boxContainer"> <div> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! </p> </div> <div> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! </p> </div> <div> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! </p> </div> </div> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! </p> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! </p> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>





23

<script type="text/javascript" src="jquery-dom-manipulations.js"></script> </body></html>

U yty kod CSS jest do prosty. Zawiera on tylko trzy nast puj ce klasy arkuszy stylów CSS:

.box { padding: 7px 10px; border: solid 1px #333; margin: 5px 3px; box-shadow: 0 1px 2px #777;}.boxsizer { float: left; width: 33.33%;}.clear { clear: both; }

Powy szy kod generuje stron podobn do pokazanej na pierwszym rysunku (po wy wietleniu jejw przegl darce i przed wykonaniem kodu napisanego w JavaScripcie). W kodzie CSS zdefi-niowano najpierw kilka stylów podstawowych dla klas CSS box, boxsizer i clear. Aby ele-menty przypomina y pole, klasa box okre la style powi zanych elementów znajduj cych si nastronie przy u yciu dope niania, cienkiej ramki, marginesu oraz niewielkiego cienia poni ej ele-mentów. Klasa boxsizer sprawi, e korzystaj ce z niej elementy b d mie tylko jedn trzeciszeroko ci ich elementu nadrz dnego, a ponadto utworz uk ad z o ony z trzech kolumn. I wresz-cie klasa clear b dzie stosowana w elemencie w roli punktu przerwania dla uk adu kolumno-wego. W efekcie wszystkie elementy nast puj ce po tym elemencie zostan umiejscowioneponi ej niego. Klasy boxsizer i clear nie s pocz tkowo wykorzystywane przez aden elementzdefiniowany w kodzie HTML, ale b d u ywane po zmodyfikowaniu modelu DOM za pomockodu w JavaScripcie.

W elemencie <body> kodu HTML na pocz tku definiowany jest element nag ówka <h1> z identy-fikatorem pageHeader, aby z atwo ci element ten móg by wybierany w obr bie kodu JavaScript.Tu poni ej elementu <h1> definiujemy pi elementów akapitu (<p>) z klas box. Spo ródtych elementów pierwsze trzy opakowano za pomoc trzech elementów <div>, a nast pnieprzy u yciu kolejnego elementu <div> z klas boxContainer.

Po osi gni ciu dwóch znaczników <script> do czane jest najpierw odwo anie do bibliotekijQuery zapewnianej w ramach jej sieci CDN. Wi cej informacji mo esz znale pod adresemhttp://code.jquery.com/. W drugim znaczniku <script> ma miejsce odwo anie do pliku JavaScriptuz kodem wymaganym w omawianym przyk adzie. Ma on nast puj c posta :

setTimeout(function() { $('#pageHeader').css('font-size', '3em'); var $boxes = $('.boxContainer .box'); $boxes.append( '<br /><br /><i>W sytuacji, gdy niezb dne s proste rozwi zania</i>.');





24

$boxes.parent().addClass('boxsizer'); $('.boxContainer').append('<div class="clear">');}, 700);

W celu opó nienia jego wykonania, zgodnie z wcze niej opisanym przypadkiem u ycia, ca y kodopakowano za pomoc wywo ania funkcji setTimeout. Pierwszy parametr tego wywo ania tofunkcja anonimowa, która zostanie wykonana po up ywie 700 milisekund (okre lonych w drugimparametrze) mierzonych przez licznik.

W pierwszym wierszu funkcji anonimowej wywo ania zwrotnego u yto funkcji $() bibliotekijQuery, aby dokona przej cia w obr bie modelu DOM i zlokalizowa element o identyfikatorzepageHeader, a nast pnie zastosowa metod css() do zwi kszenia rozmiaru czcionki dla tegoelementu przez ustawienie warto ci 3em dla w a ciwo ci font-size. W dalszej kolejno ci funkcji$() zapewniany jest bardziej z o ony selektor CSS, co ma na celu zlokalizowanie wszystkichelementów z klas box, które s elementami potomnymi elementu z klas boxContainer. Wynikoperacji jest zapisywany w zmiennej o nazwie $boxes.

Konwencje nazewnicze dotycz ce zmiennych

W ród projektantów powszechn praktyk jest stosowanie konwencji nazewniczych w wypadku zmiennych,które przechowuj obiekty okre lonego typu. Korzystanie z takich konwencji nie tylko u atwia zapami -tywanie tego, co przechowuje zmienna, ale te sprawia, e napisany kod jest atwiejszy do zrozumieniaprzez innych programistów wchodz cych w sk ad zespo u. Projektanci biblioteki jQuery cz sto u ywajnazw zmiennych zaczynaj cych si od znaku $, gdy zmienna przechowuje wynik funkcji $() (znana równiejako obiekt kolekcji biblioteki jQuery).

Po zaj ciu si interesuj cymi nas elementami z klas box na ko cu ka dego z nich do czamydwie spacje ami ce i dodatkowy tekst w postaci kursywy. Dalej u ywana jest zmienna $boxesi za pomoc metody parent() wykonywana jest operacja przej cia o jeden poziom w gór drzewamodelu DOM. Metoda zwraca inny obiekt biblioteki jQuery przechowuj cy elementy nadrz dne<div> pocz tkowo wybranych pól. W ramach a cucha do czane jest nast pnie wywo anie metodyaddClass(), która przypisuje tym polom klas CSS boxsizer.

Je li konieczne jest przej cie wszystkich w z ów nadrz dnych wybranego elementu, mo esz skorzysta z me-tody $.fn.parents(). Aby jedynie znale pierwszy element nadrz dny zgodny z danym selektorem CSS,rozwa u ycie metody $.fn.closest().

Poniewa do uzyskania trójkolumnowego uk adu klasa boxsizer u ywa elementów unosz cych si ,musz one zosta wyczyszczone w klasie boxContainer. I tym razem przechodzenie mi dzy ele-mentami modelu DOM umo liwia prosty selektor CSS .boxContainer i funkcja $(). Dalej wywo-ywana jest metoda .append() w celu utworzenia nowego elementu <div> z klas CSS .clear.

Element wstawiany jest na ko cu kodu elementu boxContainer.





25

Po up ywie 700 milisekund wykonywanie kodu jQuery zostanie uko czone. Uzyskamy zapre-zentowany wcze niej trójkolumnowy uk ad. W swoim ko cowym stanie kod HTML elementuboxContainer b dzie mie nast puj c posta :

<div class="boxContainer"> <div class="boxsizer"> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! <br><br><i>W sytuacji, gdy niezb dne s proste rozwi zania</i>. </p> </div> <div class="boxsizer"> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! <br><br><i>W sytuacji, gdy niezb dne s proste rozwi zania</i>. </p> </div> <div class="boxsizer"> <p class="box"> J zyk JavaScript pozwala w atwy sposób modyfikowa model DOM! <br><br><i>W sytuacji, gdy niezb dne s proste rozwi zania</i>. </p> </div> <div class="clear"></div></div>

Tworzenie a cucha metod i interfejsy „p ynne”W poprzednim przyk adzie w a ciwie wykonano te jeden dodatkowy krok i po czono w jednwszystkie trzy instrukcje kodu powi zane z polami. Instrukcja ma nast puj c posta :

$('.boxContainer .box') .append('<br /><br /><i>W sytuacji, gdy niezb dne s prosterozwi zania</i>.') .parent() .addClass('boxsizer');

Ten wzorzec sk adni nosi nazw wzorca tworzenia a cucha metod i jest szczególnie zalecanyprzez twórców biblioteki jQuery oraz spo eczno j zyka JavaScript. Tworzenie a cucha metodjest cz ci wzorca implementacji obiektowej interfejsów „p ynnych”, w którego przypadkuka da metoda przekazuje swój kontekst wykonywania kolejnej metodzie.

Wi kszo metod biblioteki jQuery, które dotycz obiektu jQuery, zwraca te ten sam lub nowyobiekt kolekcji elementów jQuery. Pozwala to utworzy a cuch z o ony z kilku metod. Dzi kitemu uzyskuje si kod nie tylko bardziej czytelny i wyrazisty, ale te z mniejsz liczb nie-zb dnych deklaracji zmiennych.





26

Wzorzec KompozytW przypadku wzorca Kompozyt kluczowym zagadnieniem jest mo liwo traktowania kolekcjiobiektów w taki sam sposób, w jaki traktujemy instancj pojedynczego obiektu. Zmodyfiko-wanie kompozycji za pomoc metody kolekcji spowoduje uwzgl dnienie modyfikacji dla ka dejcz ci kompozycji. Metody te mog by pomy lnie stosowane, niezale nie od liczby elementównale cych do kolekcji kompozytu, nawet wtedy, gdy kolekcja nie zawiera elementów.

Ponadto obiekty kolekcji kompozytu niekoniecznie musz zapewnia dok adnie te same metody.Obiekt kompozytu mo e ujawnia tylko metody wspólne w przypadku obiektów kolekcji lub udo-st pnia interfejs API z abstrakcj i odpowiednio obs ugiwa odró nianie metod ka dego obiektu.

Wyja nijmy dalej, w jaki sposób intuicyjny interfejs API zapewniany przez bibliotek jQueryw du ym stopniu zale ny jest od wzorca Kompozyt.

Sposób wykorzystania wzorca Kompozytprzez bibliotek jQueryWzorzec Kompozyt stanowi integraln cz architektury biblioteki jQuery i stosowany jest z po-ziomu samej, bardzo podstawowej funkcji $(). Ka de wywo anie tej funkcji powoduje utwo-rzenie i zwrócenie obiektu kolekcji elementów, który cz sto jest po prostu nazywany obiektemjQuery. W a nie w tym przypadku widoczna jest pierwsza zasada wzorca Kompozyt. Okazuje si ,e zamiast pojedynczego elementu funkcja $() zwraca kolekcj elementów.

Zwracany obiekt jQuery to obiekt podobny do tablicy, który pe ni rol obiektu opakowuj cegoi przechowuje kolekcj pobranych elementów. Obiekt ten zapewnia te kilka nast puj cych do-datkowych w a ciwo ci:

w a ciwo length okre laj ca d ugo uzyskanej kolekcji elementów; w a ciwo context okre laj ca kontekst, w jakim obiekt zosta utworzony; w a ciwo CSS selector okre laj ca selektor u yty w wywo aniu funkcji $(); w a ciwo prevObject u ywana w sytuacji, gdy konieczne jest uzyskanie dost pu

do poprzedniej kolekcji elementów po dodaniu wywo ania metody do a cucha metod.

Korzystaj c z narz dzi programistycznych naszej ulubionej przegl darki, z atwo ci mo emypoeksperymentowa z obiektami jQuery zwracanymi przez funkcj $() i sprawdzi opisanewcze niej w a ciwo ci. Aby uruchomi te narz dzia w wi kszo ci przegl darek, niezb dnejest jedynie naci ni cie klawisza F12 w systemach Windows i Linux lub u ycie kombinacjiklawiszy Cmd+Opt+I w systemie Mac. Bezpo rednio po wykonaniu tej czynno ci mo na za-stosowa wywo ania funkcji $() w konsoli i klikn zwrócone obiekty w celu sprawdzenia ichw a ciwo ci.





27

Prosta definicja obiektu przypominaj cego tablic

Obiekt podobny do tablicy to obiekt { } j zyka JavaScript z w a ciwo ci numeryczn length i odpo-wiedni liczb w a ciwo ci o nazwach w postaci kolejnych liczb. Inaczej mówi c, obiekt przypominaj cytablic z w a ciwo ci length o warto ci 2 (length == 2) powinien te mie zdefiniowane dwie w a-ciwo ci "0" i "1". W wypadku tych w a ciwo ci obiekty podobne do tablicy umo liwiaj uzyskanie do-

st pu do ich zawarto ci za pomoc prostych p tli for z wykorzystaniem sk adni akcesorów w a ciwo ciz nawiasami klamrowymi j zyka JavaScript: for (var i = 0; i < obj.length; i++) { console.log(obj[i]); }

Na poni szym rysunku widoczny jest wynik wywo ania $('#pageHeader') u ytego we wcze-niejszym przyk adzie w przypadku narz dzi programistycznych przegl darki Firefox.

Wynik wywo ania $('.boxContainer .box') zosta przedstawiony na kolejnym rysunku.

To, e w bibliotece jQuery obiekty przypominaj ce tablic pe ni rol obiektów opakowuj cychzwracane elementy, pozwala tej bibliotece zapewni dodatkowe metody, które s stosowanewzgl dem zwróconej kolekcji. Jest to osi gane dzi ki dziedziczeniu prototypowemu obiektujQuery.fn. W efekcie ka dy obiekt jQuery ma te dost p do wszystkich metod zapewnianychprzez bibliotek jQuery. W ten sposób tworzony jest ca y wzorzec Kompozyt udost pniaj cymetody, które po zastosowaniu dla kolekcji s odpowiednio uwzgl dniane dla ka dego jej ele-mentu sk adowego. Poniewa biblioteka jQuery korzysta z obiektów przypominaj cych tablicz dziedziczeniem prototypowym, metody te z atwo ci mog zosta u yte jako w a ciwo ciw ka dym obiekcie jQuery. Zosta o to zaprezentowane w przyk adzie na pocz tku rozdzia u:





28

$('#pageHeader').css('font-size', '3em');. Co wi cej, biblioteka jQuery dodaje do swojegokodu modyfikuj cego model DOM kilka dodatkowych elementów, co ma na celu uzyskanie bardziejzwi z ego kodu, który jest mniej podatny na b dy. Gdy na przyk ad metoda jQuery.fn.html()u ywana jest do zmiany wewn trznego kodu HTML w z a modelu DOM, który zawiera juelementy podrz dne, biblioteka jQuery próbuje najpierw usun wszelkie dane i proceduryobs ugi zdarze powi zane z tymi elementami, zanim usunie je ze strony i do czy zapewnionykod HTML.

Przyjrzyjmy si temu, jak biblioteka jQuery implementuje takie metody stosowane wzgl dem ko-lekcji. W tym celu mo emy pobra i wy wietli kod ród owy ze strony witryny GitHub powi zanejz bibliotek jQuery (https://github.com/jquery/jquery/releases) lub skorzysta z narz dzia takiegojak jQuery Source Viewer, które jest dost pne pod adresem http://james.padolsey.com/jquery.

Zale nie od u ywanej wersji uzyskane wyniki mog si w pewnym stopniu ró ni . Najnowsza stabilnawersja biblioteki jQuery, która by a dost pna i wykorzystywana, gdy pisano t ksi k , to wersja 2.2.0.

Metoda jQuery.fn.empty() to jedna z najprostszych metod demonstruj cych, jak implementowa-ne s metody stosowane wzgl dem kolekcji. Implementacj tej metody z atwo ci mo eszzlokalizowa w kodzie ród owym biblioteki jQuery, wyszukuj c a cuch empty: lub u ywaj cnarz dzia jQuery Source Viewer i szukaj c a cucha jQuery.fn.empty. Skorzystanie z dowolnegoz tych sposobów pozwoli uzyska nast puj cy kod:

empty: function() { var elem, i = 0; for ( ; ( elem = this[ i ] ) != null; i++ ) { if ( elem.nodeType === 1 ) { // Zapobiegni cie „wyciekowi” pami ci jQuery.cleanData( getAll( elem, false ) ); // Usuni cie wszystkich pozosta ych w z ów elem.textContent = ""; } } return this;}

Jak wida , kod wcale nie jest z o ony. Biblioteka jQuery dokonuje iteracji wszystkich elementówobiektu kolekcji (przywo ywany w postaci s owa kluczowego this, poniewa ma to miejsce we-wn trz implementacji metody) przy u yciu zwyk ej p tli for. Dla ka dego elementu kolekcji,czyli w z a elementu, kod jQuery czy ci warto ci wszystkich w a ciwo ci data-* za pomocfunkcji pomocniczej jQuery.cleanData(). Bezpo rednio po tej operacji kod usuwa zawartoelementów, ustawiaj c dla nich a cuch pusty.

Wi cej informacji o ró nych okre lanych typach w z ów mo esz znale pod adresem https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType.





29

Porównanie korzy ci uzyskiwanych w przypadkurezygnacji ze zwyk ego interfejsu API modelu DOMAby wyra nie zademonstrowa korzy ci zapewniane przez wzorzec Kompozyt, zmodyfikuje-my przyk ad z pocz tku rozdzia u bez u ywania abstrakcji oferowanych przez bibliotek jQuery.U ywaj c tylko zwyk ego kodu napisanego w JavaScripcie i interfejsu API modelu DOM,mo emy utworzy równorz dny kod o nast puj cej postaci:

setTimeout(function() { var headerElement = document.getElementById('pageHeader'); if (headerElement) { headerElement.style.fontSize = '3em'; } var boxContainerElement = document.getElementsByClassName('boxContainer')[0]; if (boxContainerElement) { var innerBoxElements = boxContainerElement.getElementsByClassName('box'); for (var i = 0; i < innerBoxElements.length; i++) { var boxElement = innerBoxElements[i]; boxElement.innerHTML += '<br /><br /><i>W sytuacji, gdy niezb dne s proste rozwi zania</i>.'; boxElement.parentNode.className += ' boxsizer'; } var clearFloatDiv = document.createElement('div'); clearFloatDiv.className = 'clear'; boxContainerElement.appendChild(clearFloatDiv); }}, 700);

I tym razem u ywana jest funkcja setTimeout z funkcj anonimow . Jako drugi parametr ustawio-no czas 700 milisekund. Wewn trz samej funkcji zastosowano metod document.getElementByIddo pobrania elementów, w których przypadku wiadomo, e maj na stronie unikatowy identyfikator.W dalszej kolejno ci u ywana jest metoda document.getElementsByClassName, gdy niezb dnejest uzyskanie wszystkich elementów zawieraj cych konkretn klas . Zastosowano te metodboxContainerElement.getElementsByClassName('box') do pobrania wszystkich elementów z klasbox, które s elementami podrz dnymi elementu z klas boxContainer.

W tym wypadku najbardziej oczywist obserwacj jest to, e w celu osi gni cia identycznychwyników niezb dnych by o 18 wierszy kodu. Dla porównania: w przypadku korzystania z biblio-teki jQuery wymaganych by o tylko 9 wierszy kodu, czyli po owa tego, co zosta o u yte w powy -szej implementacji. Zastosowanie funkcji $() biblioteki jQuery z selektorem CSS by o prostszymsposobem uzyskania wymaganych elementów. Sposób ten zapewnia ponadto zgodno z przegl -darkami, które nie obs uguj metody getElementsByClassName(). Istnieje jednak wi cej korzy cini tylko mniejsza liczba wierszy kodu i zwi kszona czytelno . Implementuj c wzorzec Kompo-zyt, funkcja $() zawsze pobiera kolekcje elementów, dzi ki czemu kod staje si bardziej jednolity





30

w porównaniu z ró ni c si obs ug ka dej z zastosowanych metod getElement*. Funkcja $()u ywana jest dok adnie w taki sam sposób, niezale nie od tego, czy po dane jest uzyskaniejedynie elementu z unikatowym identyfikatorem, czy liczby elementów z konkretn klas .

W ramach dodatkowej korzy ci wynikaj cej ze zwracania obiektów przypominaj cych tablicbiblioteka jQuery mo e te zapewnia wygodniejsze metody przechodzenia w obr bie modelu DOMi modyfikowania go. S to na przyk ad metody .css(), .append() i .parent() zaprezentowanew pierwszym przyk adzie, dost pne jako w a ciwo ci zwracanego obiektu. Ponadto bibliotekajQuery oferuje metody dokonuj ce abstrakcji bardziej z o onych przypadków u ycia, takie jak.addClass() i .wrap(). W wypadku tych metod nie istniej odpowiadaj ce im metody, które scz ci interfejsu API modelu DOM.

Poniewa zwracane obiekty kolekcji biblioteki jQuery nie ró ni si niczym innym ni opakowy-wane przez nie elementy, w identyczny sposób mo emy u y dowolnej metody interfejsu APIbiblioteki jQuery. Jak wcze niej pokazano, metody te, niezale nie od liczby elementów, stosowanes dla ka dego elementu pobranej kolekcji. W efekcie nie ma potrzeby u ywania osobnej p tlifor w celu przeprowadzenia iteracji dla ka dego pobranego elementu, a tak e wykonywaniaosobno operacji modyfikowania (np. przy u yciu metody .addClass()), które s stosowanebezpo rednio wzgl dem obiektu kolekcji.

Aby w zamieszczonym dalej przyk adzie nadal zapewni takie same gwarancje dotycz ce bez-piecznego wykonania, konieczne jest równie dodanie kilku dodatkowych instrukcji if spraw-dzaj cych warto ci null. Jest to wymagane, poniewa je li na przyk ad nie znaleziono zmiennejheaderElement, wyst pi b d, a reszta wierszy kodu nigdy nie zostanie wykonana. Kto móg byuzna , e tego rodzaju sprawdzenia, takie jak if (headerElement) i if (boxContainerElement),nie s wymagane w tym przyk adzie i mog zosta pomini te. W tym przypadku mo e si to wy-dawa poprawne, ale w rzeczywisto ci jest to jeden z g ównych powodów pojawiania si b -dów podczas projektowania aplikacji o du ej skali, w których nieustannie elementy s tworzone,wstawiane i usuwane z drzewa modelu DOM. Niestety, w wypadku wszystkich j zyków i platformdocelowych programi ci tworz zwykle najpierw logik implementacji, a dopiero pó niej do-daj takie sprawdzenia. Cz sto ma to miejsce po pojawieniu si b du podczas testowaniaimplementacji.

Zgodnie z wzorcem Kompozyt nawet pusty obiekt kolekcji biblioteki jQuery (nie zawieraj cyadnych pobranych elementów) w dalszym ci gu jest poprawnym obiektem kolekcji, w którym

mo na bezpiecznie zastosowa dowoln metod zapewnian przez bibliotek jQuery. W rezulta-cie nie ma potrzeby u ywania dodatkowych instrukcji if do sprawdzenia przed zastosowaniemmetody takiej jak .css() (tylko po to, aby unikn b du rodowiska wykonawczego koduJavaScript), czy kolekcja faktycznie zawiera jakikolwiek element.

Ogólnie rzecz bior c, abstrakcje oferowane przez bibliotek jQuery z wykorzystaniem wzorcaKompozyt zapewniaj mniejsz liczb wierszy kodu, który jest bardziej czytelny i jednolity,a ponadto zawiera mniej wierszy podatnych na literówki (porównaj wpisywanie instrukcji$('#elementID') z instrukcj document.getElementById('elementID')).





31

U ycie wzorca Kompozyt do projektowania aplikacjiGdy ju wyja niono, jak biblioteka jQuery korzysta z wzorca Kompozyt w swojej architekturze,a tak e porównano korzy ci zapewniane przez wzorzec, spróbujmy samodzielnie utworzy przy-k adowy przypadek u ycia. Postaramy si uwzgl dni wszystkie zagadnienia zaprezentowanewcze niej w tym rozdziale. Kompozyt b dzie mie struktur obiektu przypominaj cego tablic .Ponadto wzorzec b dzie przetwarza obiekty o ca kowicie innej strukturze, zapewnia „p ynny”interfejs API umo liwiaj cy tworzenie a cucha metod oraz udost pnia metody, które stosowanes dla wszystkich elementów kolekcji.

Przyk adowy przypadek u yciaZa ó my, e istnieje aplikacja, która w pewnym momencie wymaga wykonania operacji na licz-bach. Z kolei elementy wymagane przez aplikacj do przetwarzania pochodz z ró nych ródei zupe nie nie s jednolite. Aby przyk ad by interesuj cy, przyjmijmy, e jedno ród o danychzapewnia zwyk e liczby, a inne obiekty z okre lon w a ciwo ci , która zawiera interesuj c nasliczb .

var numberValues = [2, 5, 8];var objectsWithValues = [ { value: 7 }, { value: 4 }, { value: 6 }, { value: 9 }];

Obiekty zwracane przez drugie ród o wyst puj ce w przyk adowym przypadku u ycia mogmie bardziej z o on struktur i prawdopodobnie kilka dodatkowych w a ciwo ci. Takie zmianyw aden sposób nie spowoduj zró nicowania przyk adowej implementacji, gdy podczastworzenia wzorca Kompozyt interesuje nas jedynie zapewnienie jednolitej obs ugi wspólnychcz ci elementów docelowych.

Implementacja kolekcji kompozytuZdefiniujmy funkcj konstruktora i prototyp opisuj ce przyk adowy obiekt kolekcji kompozytu:

function ValuesComposite() { this.length = 0;}ValuesComposite.prototype.append = function(item) { if ((typeof item === 'object' && 'value' in item) || typeof item === 'number') { this[this.length] = item; this.length++; } return this;};





32

ValuesComposite.prototype.increment = function(number) { for (var i = 0; i < this.length; i++) { var item = this[i]; if (typeof item === 'object' && 'value' in item) { item.value += number; } else if (typeof item === 'number') { this[i] += number; } } return this;};ValuesComposite.prototype.getValues = function() { var result = []; for (var i = 0; i < this.length; i++) { var item = this[i]; if (typeof item === 'object' && 'value' in item) { result.push(item.value); } else if (typeof item === 'number') { result.push(item); } } return result;};

Funkcja konstruktora ValuesComposite() w przyk adzie jest do prosta. W razie wywo ania zapomoc operatora new zwraca ona pusty obiekt z w a ciwo ci length równ zeru, która wskazuje,e kolekcja opakowywana przez funkcj jest pusta.

Wi cej informacji o opartym na prototypie modelu programowania j zyka JavaScript dost pnych jest na stronieinternetowej pod adresem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object--Oriented_JavaScript.

Konieczne jest najpierw zdefiniowanie sposobu umo liwiaj cego wype nienie obiektów kolekcjikompozytu. Zdefiniowano metod append, która sprawdza, czy zapewniony parametr jest jednegoz obs ugiwanych przez ni typów. Metoda do cza parametr w obiekcie kompozytu w wypadkunast pnej dost pnej w a ciwo ci numerycznej i inkrementuje warto w a ciwo ci length. Naprzyk ad pierwszy do czony element, niezale nie od tego, czy jest obiektem z w a ciwo ciw postaci warto ci czy zwyk ej liczby, zostanie udost pniony w a ciwo ci "0" obiektu kompozytui b dzie dost pny jako myValuesComposition[0]w ramach sk adni akcesorów w a ciwo ci z nawia-sami klamrowymi.

Metoda increment jest prezentowana jako prosta, przyk adowa metoda, która mo e modyfikowatakie kolekcje przez przetwarzanie wszystkich ich elementów. Jako parametr metoda akcep-tuje warto liczbow , a nast pnie odpowiednio j obs uguje, dodaj c j do ka dego elementukolekcji (zale nie od ich typu). Poniewa przyk adowy kompozyt to obiekt podobny do tablicy,





33

metoda increment korzysta z p tli for, aby dokona iteracji wszystkich elementów kolekcji,i zwi ksza albo warto item.value (w sytuacji, gdy element jest obiektem), albo faktycznprzechowywan warto liczbow (gdy zapisany element kolekcji to liczba). W ten sam sposóbmo emy kontynuowa dzia ania i implementowa inne metody, które na przyk ad umo liwipomno enie elementów kolekcji przez konkretn liczb .

Aby umo liwi utworzenie a cucha metod przyk adowego obiektu kompozytu, wszystkiemetody prototypu musz zwraca odwo anie do instancji obiektu. Cel ten osi gamy po prostuprzez dodanie instrukcji return this; jako ostatniego wiersza kodu w wypadku wszystkichmetod modyfikuj cych kolekcj , takich jak append i increment. Miej wiadomo tego, e takiemetody jak getValues, które nie modyfikuj kolekcji, lecz s u do zwrócenia wyniku, z za o-enia nie mog by dodawane do a cucha metod, aby przekaza instancj obiektu kolekcji

kolejnym wywo aniom metody.

I wreszcie metoda getValues implementowana jest jako wygodny sposób uzyskiwania rzeczywi-stych warto ci liczbowych wszystkich elementów kolekcji. Podobnie do metody increment metodagetValues dokonuje abstrakcji obs ugi dotycz cej ró nych typów elementów kolekcji. Metodaprzeprowadza iteracj elementów kolekcji, wyodr bnia ka d warto liczbow i do cza j dotablicy result, która jest zwracana elementowi wywo uj cemu metod .

Przyk ad wykonania koduPora zaznajomi si z faktycznym przyk adem korzystaj cym z w a nie zaimplementowanegoobiektu kompozytu:

var valuesComposition = new ValuesComposite();for (var i = 0; i < numberValues.length; i++) { valuesComposition.append(numberValues[i]);}for (var i = 0; i < objectsWithValues.length; i++) { valuesComposition.append(objectsWithValues[i]);}valuesComposition.increment(2) .append(1) .append(2) .append({ value: 3 });console.log(valuesComposition.getValues());

Wykonanie w przegl darce powy szego kodu po umieszczeniu go w obr bie istniej cej stronylub bezpo rednio w konsoli przegl darki zarejestruje ona nast puj cy wynik:

Array [ 4, 7, 10, 9, 6, 8, 11, 1, 2, 3 ].

Korzystamy ze róde danych, takich jak zmienne numberValues i objectsWithValues, którezaprezentowano wcze niej. W powy szym kodzie iterowane s obie zmienne, a ich elementys do czane do nowo utworzonej instancji obiektu kompozytu. Dalej inkrementowane s o 2warto ci kolekcji kompozytu. Bezpo rednio po tej operacji tworzony jest a cuch trzech metod





34

append wstawiaj cych element. Pierwsze dwie metody do czaj warto ci liczbowe, a trzecia do-daje obiekt z w a ciwo ci w postaci warto ci. Aby uzyska tablic z wszystkimi warto ciamiliczbowymi kolekcji i zarejestrowa j w konsoli przegl darki, na ko cu u ywana jest metodagetValues.

Implementacje alternatywneMiej wiadomo tego, e kompozyt nie musi by obiektem przypominaj cym tablic , ale jestto ogólnie preferowane, poniewa JavaScript u atwia utworzenie takiej implementacji. Ponadtoimplementacje podobne do tablicy zapewniaj te korzy w postaci umo liwiania iteracji ele-mentów kolekcji przy u yciu prostej p tli for.

Z kolei gdy obiekt przypominaj cy tablic nie jest preferowany, z atwo ci mo na skorzystaz w a ciwo ci w obiekcie kompozytu, aby przechowywa elementy kolekcji. Taka w a ci-wo mo e na przyk ad mie nazw items i s u y do przechowywania (za pomoc instrukcjithis.items.push(item)) oraz udost pniania (przy u yciu instrukcji this.items[i]) elementówkolekcji w obr bie metod.

Wzorzec IteratorKluczowym poj ciem zwi zanym z wzorcem Iterator jest zastosowanie funkcji jednej odpowiedzial-no ci w celu przechodzenia w obr bie kolekcji i zapewniania dost pu do jej elementów. Funkcjata jest znana jako iterator i umo liwia uzyskanie dost pu do elementów kolekcji bez ujawnia-nia szczegó ów implementacji oraz bazowej struktury danych u ywanej przez obiekt kolekcji.

Iteratory zapewniaj poziom hermetyzacji dotycz cy sposobu przeprowadzania iteracji elementówkolekcji, oddzielaj c ten proces od implementacji logiki konsumentów tych elementów.

Wi cej informacji o zasadzie jednej odpowiedzialno ci znajdziesz pod adresem http://www.oodesign.com/single-responsibility-principle.html.

Sposób wykorzystania wzorca Iteratorprzez bibliotek jQueryJak wspomniano wcze niej w tym rozdziale, podstawowa funkcja $() biblioteki jQuery zwracaobiekt przypominaj cy tablic , który opakowuje kolekcj elementów strony, a tak e zapewniafunkcj iteratora umo liwiaj c przechodzenie w obr bie kolekcji i uzyskiwanie dost pu do po-szczególnych elementów. W przypadku biblioteki jQuery wykonano w a ciwie jeden dodatkowykrok, udost pniaj c ogóln funkcj pomocnicz jQuery.each(), która mo e dokonywa iteracjitablic, obiektów podobnych do tablicy oraz w a ciwo ci obiektu.





35

Bardziej techniczny opis dost pny jest na stronie dokumentacji interfejsu API biblioteki jQuerypod adresem http://api.jquery.com/jQuery.each/, gdzie zamieszczono nast puj c informacjdotycz c metody jQuery.each():

Ogólna funkcja iteratora, która mo e pos u y do ci g ej iteracji zarówno obiektów,jak i tablic. Tablice i obiekty przypominaj ce tablic z w a ciwo ci d ugo ci (np. obiektargumentu funkcji) s iterowane przy u yciu indeksu liczbowego, od zera do warto cid ugo -1. Inne obiekty s iterowane z wykorzystaniem ich w a ciwo ci z nazwami.

Funkcja pomocnicza jQuery.each() u ywana jest wewn trznie w kilku miejscach kodu ró-d owego biblioteki jQuery. Jednym z zastosowa tej funkcji jest iteracja elementów obiektujQuery i, zgodnie z tym, co sugeruje wzorzec Kompozyt, wykonywanie operacji modyfikowaniadla ka dego z nich. Proste wyszukiwanie s owa kluczowego .each( zapewnia 56 dopasowa .

Gdy pisano ksi k , najnowsz stabiln wersj biblioteki by a wersja 2.2.0, której u yto do uzyskaniapowy szych statystyk.

Z atwo ci mo na prze ledzi implementacj funkcji w kodzie ród owym biblioteki jQuery,wyszukuj c a cuch each: (zauwa , e s dwa wyst pienia) lub u ywaj c narz dzia jQuery SourceViewer i szukaj c a cucha jQuery.each() (jak to mia o miejsce wcze niej w tym rozdziale):

each: function( obj, callback ) { var length, i = 0; if ( isArrayLike( obj ) ) { length = obj.length; for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } else { for ( i in obj ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } return obj;}

Ta funkcja pomocnicza jest te dost pna w dowolnym obiekcie jQuery dzi ki u yciu tego samegodziedziczenia prototypowego, które zaprezentowano wcze niej w przypadku metod takich jak.append(). Z atwo ci mo esz znale kod, który realizuje dok adnie co takiego. W tym celuza pomoc narz dzia jQuery Source Viewer wyszukaj a cuch jQuery.fn.each() lub w kodzie ró-d owym biblioteki jQuery bezpo rednio poszukaj a cucha each: (zauwa , e s dwa wyst pienia):





36

each: function( callback ) { return jQuery.each( this, callback );}

Zastosowanie wariantu z wyszukiwaniem a cucha .each() pozwala na bezpo redni iteracjelementów obiektu kolekcji biblioteki jQuery z wykorzystaniem wygodniejszej w u yciu sk adni.

Widoczny poni ej przyk adowy kod prezentuje, jak w kodzie mog zosta u yte dwa wariantyfunkcji .each():

// U ycie funkcji pomocniczej dla tablicy$.each([3, 5, 7], function(index){ console.log(this + 1);});// U ycie metody dla obiektu jQuery$('.boxContainer .box').each(function(index) { console.log('To jest pole o numerze ' + (index + 1)); // Indeks rozpoczyna si // od zera});

Po wykonaniu powy szy kod spowoduje zarejestrowanie w konsoli przegl darki wyniku wi-docznego na poni szym rysunku.

Powi zanie wzorca Iterator z wzorcem KompozytPoniewa wzorzec Kompozyt hermetyzuje kolekcj elementów w postaci jednego obiektu, a wzo-rzec Iterator mo e zosta u yty do iteracji struktury danych z abstrakcj , z atwo ci mo emyte dwa wzorce opisa jako uzupe niaj ce si .

Zastosowanie wzorca IteratorWzorzec Iterator mo e by stosowany w tworzonych aplikacjach w celu definiowania abstrakcjisposobu uzyskiwania dost pu do elementów struktury danych. Dla przyk adu za ó my, e ko-nieczne jest uzyskanie z nast puj cej struktury drzewa wszystkich elementów o warto ciwi kszej ni 4:





37

var collection = { nodeValue: 7, left: { nodeValue: 4, left: 2, right: { nodeValue: 6, left: 5, right: 9 } }, right: { nodeValue: 9, left: 8 }};

Zaimplementujmy teraz funkcj iteratora. Poniewa drzewiaste struktury danych mog zawierazagnie d anie, uzyskujemy nast puj c implementacj rekurencyjn :

function iterateTreeValues(node, callback) { if (node === null || node === undefined) { return; } if (typeof node === 'object') { if ('left' in node) { iterateTreeValues(node.left, callback); } if ('nodeValue' in node) { callback(node.nodeValue); } if ('right' in node) { iterateTreeValues(node.right, callback); } } else { // Poniewa jest to li , w ze jest warto ci callback(node); }}

Ostatecznie otrzymujemy nast puj c implementacj :

var valuesArray = [];iterateTreeValues(collection, function(value) { if (value > 4) { valuesArray.push(value); }});console.log(valuesArray);





38

Po wykonaniu powy szego kodu w konsoli przegl darki zostanie zarejestrowany nast puj cywynik:

Array [ 5, 6, 9, 7, 8, 9 ].

Wyra nie wida , e iterator upro ci kod. Nie ma potrzeby zajmowania si ju szczegó amiimplementacji struktury danych u ywanej ka dorazowo, gdy konieczne jest uzyskanie dost -pu do wybranych elementów spe niaj cych okre lone kryteria. Implementacja bazuje naogólnym interfejsie API udost pnianym przez iterator. Z kolei logika implementacji pojawiasi w wywo aniu zwrotnym zapewnianym iteratorowi.

Taka hermetyzacja umo liwia od czenie implementacji od u ywanej struktury danych, przyza o eniu, e b dzie dost pny iterator z takim samym interfejsem API. W omawianym przy-k adzie z atwo ci mo na zmieni stosowan struktur danych na sortowane drzewo binarnelub prost tablic , a ponadto zachowa bez zmian logik implementacji.

PodsumowanieW tym rozdziale utrwalili my wiedz dotycz c biblioteki jQuery i skryptowego interfejsuAPI modelu DOM j zyka JavaScript. Zaprezentowa em wzorzec Kompozyt i pokaza em, jakjest on wykorzystywany przez bibliotek jQuery. Wyja ni em, w jaki sposób wzorzec Kompozytupraszcza przep yw pracy po przebudowaniu przyk adowej strony bez u ycia kodu jQuery.Dalej przedstawi em przyk ad zastosowania wzorca Kompozyt w aplikacjach. I wreszcie do-kona em wprowadzenia do wzorca Iterator, a tak e pokaza em, jak dobrze mo e wspó dzia az wzorcem Kompozyt.

Po uko czeniu niniejszego wprowadzenia na temat tego, jak wa n rol odgrywa wzorzec Kompo-zyt w sposobie codziennego u ytkowania metod biblioteki jQuery, mo emy przej do nast pnegorozdzia u. Zaprezentujemy w nim wzorzec Obserwator oraz wygodny sposób wykorzystania gow obr bie stron bazuj cych na kodzie jQuery.




Skorowidz

Aanimacje, 202API modelu DOM, 29asynchroniczne

pobieranie szablonówHTML, 169

wywo ania zwrotne, 128asynchroniczny przep yw

sterowania, 127Atrapa obiektu, 151

przyk ad panelusterowania, 153

atrybuty zdarze , 53

Bbaza danych IndexedDB, 135biblioteka

Closure Compiler, 195Handlebars.js, 164jQuery, 19node-uui, 106UglifyJS, 195Underscore.js, 160, 161YUI Compressor, 195

biblioteki zewn trzne, 193broker, 62, 70Budowniczy, 116

przypadek u ycia, 122zastosowanie wzorca, 120

buforowanie obiektów, 200

CCDN, Content Delivery

Network, 196CSS

tworzenie wydajnychselektorów, 198

czas adowania strony, 169

Ddefiniowanie

przestrzeni nazw, 74wymaga us ugi, 154wywo ania zwrotnego, 41

dodatek$.single, 206Element Mutation

Observer, 183Mockjax, 157

dodatkiakceptowanie parametrów

konfiguracyjnych, 179do wielokrotnego

wykorzystania, 179dodawanie metod, 190projekt jQuery Boilerplate,

188stanowe, 182wybieranie nazwy, 191

dodawanie metod do dodatku,190

DOMminimalizowanie operacji

przechodzenia, 199usprawnianie operacji

modyfikacji, 201DOM, Document Object

Model, 20domkni cie, 40dost p do w a ciwo ci, 103dynamiczne adowania

szablonów, 170dziel i zwyci aj, 73

Eefektywny kod jQuery, 199

Ffabryka, 109

obiektów Promise, 138zastosowanie wzorca, 112

Fasada, 97zastosowanie wzorca, 104

formularz, 112funkcja Strict Mode, 88

Gglobalna przestrze nazw, 74

HHandlebars.js, 164





214

Iidentyfikator

$, 160_, 160

IIFE, Immediately InvokedFunction Expression, 78

opakowywanie, 177u ycie parametrów wzorca,

195wariant wzorca Modu , 85

implementacjaatrapy us ugi, 155dodatku, 175kolekcji kompozytu, 31metod pobieraj cych, 186metod ustawiaj cych, 186specyfikacji Promises/A+,

141stanowego dodatku, 183wzorca Publikowanie/

Subskrybowanie, 64interfejs API, 29

MutationObserver, 183oparty na obiektach

Promise, 138operacji modyfikowania,

103operacji przechodzenia

w modelu DOM, 100sieci CDN JSDelivr, 197uzyskiwania dost pu

do w a ciwo ci, 103interfejsy p ynne, 25iteracja list w z ów, 198iterator

powi zanie z wzorcemKompozyt, 36

wykorzystanie wzorca, 34zastosowanie, 36

JJavaScript

biblioteka Underscore.js,160

optymalizowanie wspólnegokodu, 197

wywo ania zwrotne, 129

j zykECMAScript, 88JavaScript, 129

jQuery, 19dodatki, 174obs uga modelu DOM, 21tworzenie efektywnego

kodu, 199u ycie modu ów, 90wykorzystanie obiektów

Promise, 147wykorzystanie wzorca

Budowniczy, 117Fabryka, 110Fasada, 99Iterator, 34Modu , 82Publikowanie/

Subskrybowanie, 64zdarzenia niestandardowe,

64

Kkolejkowanie, 133kompilowanie szablonów, 168kompozyt

implementacja kolekcji, 31implementacje

alternatywne, 34projektowanie aplikacji, 31wykorzystanie wzorca, 26

konfigurowanie wywo azwrotnych, 129

Lleniwe adowanie, 193, 208licznik jQuery.guid, 44litera obiektu, 76, 86

adowaniedynamiczne, 170bibliotek zewn trznych, 193leniwe, 208

a cuchmetod, 25, 176, 201obiektów, 143

czenie obiektów Promise, 146

Mmechanizm selektorów Sizzle,

198metoda

$.ajax(), 147, 181$.extend(), 100, 181$.fn, 174$.fn.end(), 201$.fn.extend(), 100$.fn.on(), 59$.fn.ready(), 45$.getScript(), 209$.noCon ict(), 177$.noop(), 205EventTarget.addEvent

Listener(), 53getModule(), 209Handlebars.compile(), 165jQuery.ajaxSettings.xhr, 111jQuery.ajaxSetup(), 181jQuery.fn.on(), 42then(), 143

metodyakceptuj ce wywo ania

zwrotne, 132pobieraj ce, 186ustawiaj ce, 186

minifikowanie zasobów, 194minimalizowanie operacji

przechodzenia, 199model

DOM, 20TDD, 152

moderacja, 172modu , 78

categories, 92counter, 94dashboard, 91funkcja

Strict Mode, 88hermetyzacja kodu, 73informationBox, 93udost pniaj cy, 86wzorzec IIFE, 79, 80




Skorowidz

215

z przestrzeni nazwjako parametrem, 82

zalety wzorca, 75modu y j zyka ECMAScript 6,

88modyfikowanie

modelu DOM, 21od czonych elementów,

204

Nnarz dzie

grunt, 195gulp, 195

nazwa dodatku, 191nazwy zmiennych, 24notacja

<% %>, 160<%- %>, 160<%= %>, 160

Oobiekt

broker, 62jqXHR, 147prototypowy, 174singletonowy, 209

obiektykolekcji kompozytu, 175Promise, 127, 136

czenie obiektów, 146obs uga b dów, 145transformacja obiektów,

148tworzenie kilku

kompozycji, 143tworzenie a cucha

obiektów, 143u ycie, 138zalety, 149

obiekty przypominaj ce tablice,27

obserwator, 39atrybuty zdarze , 53gotowo ci dokumentu, 45przypadek u ycia, 47upraszczanie kodu, 58

wyciek pami ci, 56wykorzystanie pami ci, 59wykorzystanie wzorca, 41zdarzenia delegowane, 57

obserwatory ze zdarzeniamidelegowanymi, 93, 205

obs ugab dów, 145modelu DOM, 20

oddzielanie szablonów HTML,162, 167

odroczone wywo ania zwrotne,128

odwo ania do filmów, 154opakowywanie, 177operacje przechodzenia

w obr bie modelu DOM, 100operator OR, 83optymalizowanie kodu, 193, 197organizowanie wywo a

zwrotnych, 133

Ppanel sterowania, 65

modu categories, 92modu counter, 94modu dashboard, 91modu informationBox, 93z atrap , 153zalety wzorca, 98zastosowanie dodatku, 187

parametry wzorca IIFE, 195partnerski obiekt buduj cy, 121p tla for, 197pobieranie asynchroniczne

szablonów, 169pocz tkowe renderowanie

strony, 194projekt jQuery Boilerplate, 188projektowanie

dodatków, 173wid etów, 173

prototypy, 205przestrze nazw, 74

zdarze niestandardowych,70

przetwarzanie obiektówkolekcji, 175

Publikowanie/Subskrybowanie,62

implementowanie schematuwzorca, 64

przyk ad panelu sterowania,65

przypadek u ycia, 65skalowalno , 68wzorzec Obserwator, 63

Rrozdzia zagadnie , 74, 162rozszerzanie implementacji

wzorcaPublikowanie/Subskrybowanie, 68

Sselektory

CSS, 101, 198Sizzle, 198

sieCDN, 196CDN JSDelivr, 197

specyfikacjaA+, 141Promises/A+, 139, 148

style, 202szablon Mustache, 164szablony

biblioteki Underscore.js,161

kodu HTML, 159

TTDD, Test Driven

Development, 152tematy, 62transformacja obiektów

Promise, 148tworzenie

dodatków stanowych, 182elementów modelu DOM,

202fragmentu dokumentu, 120





216

tworzeniea cucha metod, 25, 176,

201a cucha obiektów Promise,

143pakunków, 194szablonów klienckich, 159

Uumieszczanie skryptów

w kodzie, 194Underscore.js, 160unikanie zmiennych globalnych,

74upraszczanie kodu, 58uruchamianie wspó bie ne, 135usprawnianie operacji

modyfikacji, 201usuwanie instancji dodatku, 185u ycie

atrapy us ugi, 157atrybutów zdarze , 53biblioteki Handlebars.js,

166dodatku $.single, 206funkcji Strict Mode, 88metody $.noCon ict(), 177metody $.noop(), 205obserwatorów ze

zdarzeniamidelegowanymi, 205

parametrów wzorca IIFE,195

projektu dodatków jQueryBoilerplate, 188

szablonów bibliotekiUnderscore.js, 161

tematów, 62wzorca Publikowanie/

Subskrybowanie, 65

Wwielokrotne wykorzystanie

dodatków, 179w a ciwo ci obiektu, 129w a ciwo

context, 26CSS selector, 26length, 26prevObject, 26

wyciek pami ci, 56wywo ania zwrotne, 41, 128

asynchroniczne, 128konfigurowanie, 129odroczone, 128organizowanie, 133zastosowanie, 130

wzorceasynchronicznego

przep ywu sterowania,127

do projektowaniadodatków, 173wid etów, 173optymalizacji, 193projektowe, design patterns,

19wzorzec

Atrapa obiektu, 151Budowniczy, 109Fabryka, 109Fasada, 97IIFE, 46, 78Iterator, 34Kompozyt, 19, 26Litera obiektu, 76Modu , 73, 78Obserwator, 39Obserwator ze zdarzeniami

delegowanymi, 193Publikowanie/

Subskrybowanie, 61Py ek, 205tworzenia a cucha metod,

25

Zzasi g operacji przechodzenia,

200zastosowanie

wywo a zwrotnych, 130wzorca Iterator, 36

zdarzeniadelegowane, 57, 205niestandardowe, 70niestandardowe jQuery, 64

zmienne globalne, 74




http://program-partnerski.helion.pl

Tytuł oryginału: jQuery Design Patterns · Wprowadzenie do biblioteki Underscore.js 160 U ycie...

Documents

Transcript of Tytuł oryginału: jQuery Design Patterns · Wprowadzenie do biblioteki Underscore.js 160 U ycie...