Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00328 005954 13429989 na godz. na dobę w sumie
Biblioteka jQuery. Sprawdzone wzorce projektowe - ebook/pdf
Biblioteka jQuery. Sprawdzone wzorce projektowe - ebook/pdf
Autor: Liczba stron: 216
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-2833-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).
jQuery jest lekką, wszechstronną i rozszerzalną biblioteką języka JavaScript o ogromnych możliwościach. Zapewnia prosty w użyciu API, który jest bezproblemowo obsługiwany przez różne przeglądarki i znacząco ułatwia wykonywanie modyfikacji i operacji przechodzenia w obrębie modelu DOM dokumentów HTML, obsługę zdarzeń, uruchamianie animacji i korzystanie z technologii Ajax. Pozwala to na coraz bardziej złożone interakcje z użytkownikiem oraz na obsługę dużych implementacji aplikacji.
Niniejsza książka jest przeznaczona dla projektantów, którzy pracując z biblioteką jQuery, chcą wykorzystywać różne standardowe wzorce branżowe. Docenią ją zespoły programistów, którym ułatwi pisanie dobrze zorganizowanych i rozszerzalnych implementacji. Zaprezentowano tu różne wzorce projektowe, takie jak Fasada, Obserwator czy wzorce optymalizacji. Omówiono również techniki i biblioteki związane z tworzeniem szablonów klienckich, a także przedstawiono kilka wzorców projektowania dodatków. Nie zabrakło opisu sprawdzonych procedur i wskazówek dotyczących wydajności, dzięki którym maksymalnie wykorzystasz możliwości biblioteki jQuery!

W książce między innymi:

jQuery — maksymalna efektywność wdrożeń o dużej skali!


Thodoris Greasidis pochodzi z Grecji. Jest projektantem, implementuje aplikacje internetowe o dużej skali z intuicyjnymi interfejsami oraz usługi sieciowe o dużej dostępności. Jest jednym z twórców biblioteki AngularUI. Greasidis brał udział w wielu projektach open source, zwłaszcza dotyczących Mozilli. Jest entuzjastą języka JavaScript, a jego pasją są operacje bitowe.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 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/bjqswp.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/bjqswp 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 recenzencie Przedmowa Rozdzia(cid:239) 1. Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt Biblioteka jQuery i obs(cid:239)uga skryptowa modelu DOM Modyfikowanie modelu DOM za pomoc(cid:200) biblioteki jQuery Wzorzec Kompozyt Sposób wykorzystania wzorca Kompozyt przez bibliotek(cid:218) jQuery Porównanie korzy(cid:258)ci uzyskiwanych w przypadku rezygnacji ze zwyk(cid:239)ego interfejsu API modelu DOM U(cid:285)ycie wzorca Kompozyt do projektowania aplikacji Wzorzec Iterator Sposób wykorzystania wzorca Iterator przez bibliotek(cid:218) jQuery Powi(cid:200)zanie wzorca Iterator z wzorcem Kompozyt Zastosowanie wzorca Iterator Podsumowanie Rozdzia(cid:239) 2. Wzorzec Obserwator Wprowadzenie do wzorca Obserwator Sposób wykorzystania wzorca Obserwator przez bibliotek(cid:218) jQuery Demonstracja przyk(cid:239)adowego przypadku u(cid:285)ycia Porównanie wzorca Obserwator z u(cid:285)yciem atrybutów zdarze(cid:241) Zapobieganie „wyciekom” pami(cid:218)ci Wprowadzenie do wzorca Obserwator ze zdarzeniami delegowanymi Upraszczanie kodu przez wzorzec Obserwator ze zdarzeniami delegowanymi Porównanie korzy(cid:258)ci zwi(cid:200)zanych z wykorzystaniem pami(cid:218)ci Podsumowanie 9 11 13 19 20 21 26 26 29 31 34 34 36 36 38 39 39 41 47 53 56 57 58 59 60 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe Rozdzia(cid:239) 3. Wzorzec Publikowanie/Subskrybowanie Wprowadzenie do wzorca Publikowanie/Subskrybowanie Ró(cid:285)nice mi(cid:218)dzy wzorcem Publikowanie/Subskrybowanie i wzorcem Obserwator Adaptowanie wzorca Publikowanie/Subskrybowanie przez bibliotek(cid:218) jQuery Zdarzenia niestandardowe w bibliotece jQuery Implementowanie schematu wzorca Publikowanie/Subskrybowanie za pomoc(cid:200) zdarze(cid:241) niestandardowych Demonstracja przyk(cid:239)adowego przypadku u(cid:285)ycia U(cid:285)ycie wzorca Publikowanie/Subskrybowanie w przyk(cid:239)adzie panelu sterowania Rozszerzanie implementacji U(cid:285)ycie dowolnego obiektu jako brokera Zastosowanie przestrzeni nazw zdarze(cid:241) niestandardowych Podsumowanie Rozdzia(cid:239) 4. Dziel i zwyci(cid:218)(cid:285)aj za pomoc(cid:200) wzorca Modu(cid:239) Modu(cid:239)y i przestrzenie nazw Hermetyzowanie integralnych cz(cid:218)(cid:258)ci implementacji Unikanie zmiennych globalnych za pomoc(cid:200) przestrzeni nazw Korzy(cid:258)ci oferowane przez wzorce modu(cid:239)ów i przestrzeni nazw Powszechna akceptacja Wzorzec Litera(cid:239) obiektu Wzorzec Modu(cid:239) Blok konstrukcyjny wzorca IIFE Prosty wzorzec Modu(cid:239) IIFE Wariant wzorca Modu(cid:239) z przestrzeni(cid:200) nazw jako parametrem Wariant wzorca Modu(cid:239) zawartego we wzorcu IIFE Wzorzec Modu(cid:239) udost(cid:218)pniaj(cid:200)cy U(cid:285)ycie funkcji Strict Mode j(cid:218)zyka ECMAScript 5 Wprowadzenie do modu(cid:239)ów j(cid:218)zyka ECMAScript 6 U(cid:285)ycie modu(cid:239)ów w aplikacjach jQuery G(cid:239)ówny modu(cid:239) dashboard Modu(cid:239) categories Modu(cid:239) informationBox Modu(cid:239) counter Przegl(cid:200)d implementacji Podsumowanie Rozdzia(cid:239) 5. Wzorzec Fasada Wprowadzenie do wzorca Fasada Zalety wzorca Fasada Sposób adaptacji wzorca Fasada przez bibliotek(cid:218) jQuery Interfejs API biblioteki jQuery operacji przechodzenia w obr(cid:218)bie modelu DOM Interfejs API operacji modyfikowania i uzyskiwania dost(cid:218)pu do w(cid:239)a(cid:258)ciwo(cid:258)ci Zastosowanie wzorca Fasada w aplikacjach Podsumowanie 4 61 62 63 64 64 64 65 65 68 70 70 71 73 73 74 74 75 75 76 78 78 80 82 85 86 88 88 90 91 92 93 94 95 96 97 97 98 99 100 103 104 107 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 6. Wzorce Budowniczy i Fabryka Wprowadzenie do wzorca Fabryka Wykorzystanie wzorca Fabryka przez bibliotek(cid:218) jQuery U(cid:285)ycie wzorca Fabryka w aplikacjach Wprowadzenie do wzorca Budowniczy Wykorzystanie wzorca Budowniczy przez interfejs API biblioteki jQuery Zastosowanie wzorca Budowniczy wewn(cid:218)trznie przez bibliotek(cid:218) jQuery Wykorzystanie wzorca Budowniczy w aplikacjach Podsumowanie Rozdzia(cid:239) 7. Wzorce asynchronicznego przep(cid:239)ywu sterowania Programowanie z wykorzystaniem wywo(cid:239)a(cid:241) zwrotnych U(cid:285)ycie prostych wywo(cid:239)a(cid:241) zwrotnych w j(cid:218)zyku JavaScript Konfigurowanie wywo(cid:239)a(cid:241) zwrotnych jako w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu Zastosowanie wywo(cid:239)a(cid:241) zwrotnych w aplikacjach opartych na bibliotece jQuery Tworzenie metod akceptuj(cid:200)cych wywo(cid:239)ania zwrotne Organizowanie wywo(cid:239)a(cid:241) zwrotnych Wprowadzenie do poj(cid:218)cia obiektów Promise U(cid:285)ycie obiektów Promise Zagadnienia zaawansowane Tworzenie (cid:239)a(cid:241)cucha obiektów Promise Obs(cid:239)uga zg(cid:239)aszanych b(cid:239)(cid:218)dów (cid:146)(cid:200)czenie obiektów Promise Sposób u(cid:285)ycia obiektów Promise przez bibliotek(cid:218) jQuery Transformacja obiektów Promise w obiekty innych typów Podsumowanie zalet obiektów Promise Podsumowanie Rozdzia(cid:239) 8. Wzorzec Atrapa obiektu Wprowadzenie do wzorca Atrapa obiektu U(cid:285)ycie atrap obiektów w aplikacjach opartych na bibliotece jQuery Definiowanie faktycznych wymaga(cid:241) us(cid:239)ugi Implementowanie atrapy us(cid:239)ugi U(cid:285)ycie atrapy us(cid:239)ugi Podsumowanie Rozdzia(cid:239) 9. Tworzenie szablonów klienckich Wprowadzenie do biblioteki Underscore.js U(cid:285)ycie szablonów biblioteki Underscore.js w aplikacjach Wprowadzenie do biblioteki Handlebars.js U(cid:285)ycie biblioteki Handlebars.js w aplikacjach Asynchroniczne pobieranie szablonów HTML Adaptowanie dynamicznego (cid:239)adowania szablonów w istniej(cid:200)cej implementacji Moderacja to najlepsza rzecz Podsumowanie 109 109 110 112 116 117 120 122 126 127 128 129 129 130 132 133 136 138 143 143 145 146 147 148 149 150 151 151 153 154 155 157 158 159 160 161 164 166 169 170 172 172 5 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe Rozdzia(cid:239) 10. Wzorce do projektowania dodatków i wid(cid:285)etów Wprowadzenie do dodatków biblioteki jQuery Stosowanie zasad obowi(cid:200)zuj(cid:200)cych w bibliotece jQuery U(cid:285)ycie metody $.noCon(cid:288)ict() Opakowywanie z wykorzystaniem wzorca IIFE Tworzenie dodatków do wielokrotnego wykorzystania Akceptowanie parametrów konfiguracyjnych Tworzenie stanowych dodatków biblioteki jQuery Implementowanie stanowego dodatku biblioteki jQuery Usuwanie instancji dodatku Implementowanie metod pobieraj(cid:200)cych i ustawiaj(cid:200)cych U(cid:285)ycie dodatku w aplikacji panelu sterowania U(cid:285)ycie projektu dodatków jQuery Boilerplate Dodawanie metod do dodatku Wybieranie nazwy Podsumowanie Rozdzia(cid:239) 11. Wzorce optymalizacji Umieszczanie skryptów w pobli(cid:285)u ko(cid:241)ca kodu strony Tworzenie pakunków i minifikowanie zasobów U(cid:285)ycie parametrów wzorca IIFE Zastosowanie sieci CDN Zastosowanie interfejsu API sieci CDN JSDelivr Optymalizowanie wspólnego kodu w JavaScripcie Tworzenie lepszych p(cid:218)tli for Tworzenie wydajnych selektorów CSS Tworzenie efektywnego kodu jQuery Minimalizowanie operacji przechodzenia w obr(cid:218)bie modelu DOM Nie przesadzaj Usprawnianie operacji modyfikacji modelu DOM U(cid:285)ycie obserwatorów ze zdarzeniami delegowanymi U(cid:285)ycie metody $.noop() U(cid:285)ycie dodatku $.single „Leniwe” (cid:239)adowanie modu(cid:239)ów Podsumowanie Skorowidz 173 174 174 177 177 179 179 182 183 185 186 187 188 190 191 192 193 194 194 195 196 197 197 197 198 199 199 201 201 205 205 206 208 210 213 6 Poleć książkęKup książkę 1 Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt Przed pojawieniem si(cid:218) standardu Web 2.0 serwisy internetowe by(cid:239)y jedynie no(cid:258)nikiem opar- tym na dokumentach, który oferowa(cid:239) tylko wzajemne po(cid:239)(cid:200)czenie ró(cid:285)nych stron/dokumentów oraz obs(cid:239)ug(cid:218) skryptow(cid:200) po stronie klienta ograniczon(cid:200) przewa(cid:285)nie do sprawdzania poprawno- (cid:258)ci formularza. W 2005 roku pojawi(cid:239)y si(cid:218) serwisy Gmail i Google Maps, a JavaScript sta(cid:239) si(cid:218) j(cid:218)zykiem u(cid:285)ywanym przez du(cid:285)e przedsi(cid:218)biorstwa do tworzenia aplikacji o du(cid:285)ej skali i zapewnia- nia rozbudowanych interakcji opartych na interfejsie u(cid:285)ytkownika. Nawet pomimo tego, (cid:285)e od czasu pojawienia si(cid:218) j(cid:218)zyka JavaScript dokonano w nim bardzo niewielu zmian, znacz(cid:200)co zmieni(cid:239)y si(cid:218) oczekiwania (cid:258)wiata przedsi(cid:218)biorców wzgl(cid:218)dem mo(cid:285)liwo(cid:258)ci stron internetowych. Odt(cid:200)d projektanci witryn internetowych musieli zapewnia(cid:202) z(cid:239)o(cid:285)one interak- cje z u(cid:285)ytkownikiem. Wreszcie na rynku zacz(cid:200)(cid:239) funkcjonowa(cid:202) termin „aplikacja internetowa”. W efekcie oczywiste zaczyna(cid:239)o stawa(cid:202) si(cid:218) to, (cid:285)e projektanci powinni tworzy(cid:202) pewne abstrak- cje kodu, definiowa(cid:202) sprawdzone procedury i adaptowa(cid:202) wszystkie mo(cid:285)liwe do zastosowania wzorce projektowe (ang. design patterns), jakie informatyka mog(cid:239)a zaoferowa(cid:202). Powszechne wykorzystanie j(cid:218)zyka JavaScript w przypadku aplikacji dla przedsi(cid:218)biorstw u(cid:239)atwi(cid:239)o jego rozwój, który zosta(cid:239) rozszerzony za pomoc(cid:200) specyfikacji EcmaScript2015/EcmaScript6 (ES6) w sposób pozwalaj(cid:200)cy na (cid:239)atwe u(cid:285)ycie jeszcze wi(cid:218)kszej liczby wzorców projektowych. W sierpniu 2006 roku po raz pierwszy zosta(cid:239)a udost(cid:218)pniona przez Johna Resiga biblioteka jQuery w witrynie o adresie http://jquery.com/. Biblioteka zosta(cid:239)a stworzona w celu zapew- nienia wygodnego w u(cid:285)yciu interfejsu API s(cid:239)u(cid:285)(cid:200)cego do lokalizacji elementów modelu DOM. Od tego czasu biblioteka stanowi integraln(cid:200) cz(cid:218)(cid:258)(cid:202) pakietu narz(cid:218)dziowego projektanta aplikacji Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe internetowych. U swoich podstaw biblioteka jQuery korzysta z kilku wzorców projektowych i próbuje zach(cid:218)ci(cid:202) projektanta do u(cid:285)ywania ich za po(cid:258)rednictwem zapewnianych przez siebie metod. Wzorzec Kompozyt (ang. Composite Pattern) to jeden z tych wzorców ujawniany projek- tantowi za pomoc(cid:200) bardzo podstawowej metody jQuery(), która s(cid:239)u(cid:285)y do wykonywania opera- cji przemieszczania si(cid:218) w obr(cid:218)bie modelu DOM i stanowi jeden z najbardziej wyró(cid:285)niaj(cid:200)cych si(cid:218) elementów biblioteki jQuery. W tym rozdziale zosta(cid:239)y omówione nast(cid:218)puj(cid:200)ce zagadnienia: (cid:81) Utrwalenie wiedzy na temat obs(cid:239)ugi skryptowej modelu DOM za pomoc(cid:200) biblioteki jQuery. (cid:81) Wprowadzenie do wzorca Kompozyt. (cid:81) Sposób wykorzystania wzorca Kompozyt przez bibliotek(cid:218) jQuery. (cid:81) Korzy(cid:258)ci wynikaj(cid:200)ce z u(cid:285)ycia biblioteki jQuery zamiast zwyk(cid:239)ych operacji modyfikacji modelu DOM za pomoc(cid:200) kodu w JavaScripcie. (cid:81) Wprowadzenie do wzorca Iterator. (cid:81) Zastosowanie wzorca Iterator w przyk(cid:239)adowej aplikacji. Biblioteka jQuery i obs(cid:239)uga skryptowa modelu DOM Dzi(cid:218)ki obs(cid:239)udze skryptowej modelu DOM odwo(cid:239)ujemy si(cid:218) do dowolnej procedury zmieniaj(cid:200)cej lub przetwarzaj(cid:200)cej elementy strony internetowej po za(cid:239)adowaniu jej przez przegl(cid:200)dark(cid:218). DOM API to interfejs API j(cid:218)zyka JavaScript poddany standaryzacji w 1998 roku. Zapewnia on projek- tantom aplikacji internetowych kolekcj(cid:218) metod, które pozwalaj(cid:200) na modyfikowanie elementów drzewa modelu DOM tworzonych przez przegl(cid:200)dark(cid:218) po za(cid:239)adowaniu i poddaniu analizie sk(cid:239)adniowej kodu HTML strony internetowej. Wi(cid:218)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(cid:200)c interfejs API modelu DOM w swoim kodzie napisanym w JavaScripcie, projektan- ci aplikacji internetowych mog(cid:200) modyfikowa(cid:202) w(cid:218)z(cid:239)y tego modelu i dodawa(cid:202) nowe elementy lub usuwa(cid:202) elementy istniej(cid:200)ce w obr(cid:218)bie strony. Pocz(cid:200)tkowo podstawowym przypadkiem u(cid:285)ycia obs(cid:239)ugi skryptowej modelu DOM by(cid:239)o jedynie sprawdzanie poprawno(cid:258)ci formularzy po stronie klienta. Jednak(cid:285)e z up(cid:239)ywem lat i w miar(cid:218) jak JavaScript zyskiwa(cid:239) uznanie w (cid:258)wiecie przedsi(cid:218)biorstw zacz(cid:218)to implementowa(cid:202) bardziej z(cid:239)o(cid:285)one interakcje z u(cid:285)ytkownikiem. Pocz(cid:200)tkowa wersja biblioteki jQuery pojawi(cid:239)a si(cid:218) w sierpniu 2006 roku. Jej zadaniem by(cid:239)o u(cid:239)a- twienie projektantom aplikacji internetowych modyfikowania drzewa modelu DOM i wykonywania 20 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt operacji przechodzenia w jego obr(cid:218)bie. Jednym z g(cid:239)ównych celów biblioteki by(cid:239)o zapewnienie abstrakcji, które umo(cid:285)liwia(cid:239)y tworzenie krótszego, bardziej czytelnego i mniej podatnego na b(cid:239)(cid:218)dy kodu, a jednocze(cid:258)nie zagwarantowanie zgodno(cid:258)ci z ró(cid:285)nymi przegl(cid:200)darkami. Powy(cid:285)sze podstawowe zasady obowi(cid:200)zuj(cid:200)ce w przypadku biblioteki jQuery s(cid:200) wyra(cid:283)nie widoczne na jej stronie internetowej, na której zaprezentowano je w nast(cid:218)puj(cid:200)cy sposób: (…)szybka, niewielka i bogata w mo(cid:285)liwo(cid:258)ci biblioteka j(cid:218)zyka JavaScript. Sprawia ona, (cid:285)e takie dzia(cid:239)ania, jak modyfikowanie dokumentów HTML i przechodzenie w ich obr(cid:218)bie, obs(cid:239)uga zdarze(cid:241), u(cid:285)ywanie animacji i technologii Ajax, s(cid:200) znacznie prostsze z wykorzystaniem prostego w u(cid:285)yciu interfejsu API, który wspó(cid:239)pracuje z wieloma przegl(cid:200)darkami. (cid:146)(cid:200)cz(cid:200)c wszechstronno(cid:258)(cid:202) i rozszerzalno(cid:258)(cid:202), biblioteka jQuery zmieni(cid:239)a sposób, w jaki miliony osób pisze kod w JavaScripcie. Zapewniane od pocz(cid:200)tku przez bibliotek(cid:218) jQuery interfejsy API z abstrakcjami, a tak(cid:285)e sposób or- ganizacji ró(cid:285)nych wzorców projektowych, przyczyni(cid:239)y si(cid:218) do wysokiego poziomu akceptacji biblioteki przez projektantów aplikacji internetowych. W rezultacie, zgodnie z kilkoma (cid:283)ród(cid:239)ami informacji, takimi jak serwis BuiltWith.com (http://trends.builtwith.com/javascript/jQuery), biblioteka jQuery jest wykorzystywana przez ponad 60 najcz(cid:218)(cid:258)ciej odwiedzanych witryn internetowych z ca(cid:239)ego (cid:258)wiata. Modyfikowanie modelu DOM za pomoc(cid:200) biblioteki jQuery Aby utrwali(cid:202) informacje na temat biblioteki jQuery, omówimy przyk(cid:239)adow(cid:200) stron(cid:218) internetow(cid:200), w której przypadku s(cid:200) wykonywane proste operacje modyfikowania modelu DOM. W przyk(cid:239)adzie zostanie za(cid:239)adowana prosta strona ze struktur(cid:200), która pocz(cid:200)tkowo wygl(cid:200)da podobnie jak na poni(cid:285)szym rysunku. Do zmiany tre(cid:258)ci i uk(cid:239)adu strony zostanie u(cid:285)yty kod jQuery. Aby efekty uruchomienia kodu by(cid:239)y wyra(cid:283)nie widoczne, zostanie on tak skonfigurowany, (cid:285)eby dzia(cid:239)a(cid:239) przez oko(cid:239)o 700 milisekund od momentu za(cid:239)adowania strony. Wynik operacji modyfikowania zaprezentowano na rysunku na nast(cid:218)pnej stronie. 21 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe Przejrzyjmy kod HTML u(cid:285)yty w poprzednim przyk(cid:239)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(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! /p /div div p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! /p /div div p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! /p /div /div p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! /p p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! /p script type= text/javascript src= https://code.jquery.com/jquery-2.2.0.min.js /script 22 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt script type= text/javascript src= jquery-dom-manipulations.js /script /body /html U(cid:285)yty kod CSS jest do(cid:258)(cid:202) prosty. Zawiera on tylko trzy nast(cid:218)puj(cid:200)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(cid:285)szy kod generuje stron(cid:218) podobn(cid:200) do pokazanej na pierwszym rysunku (po wy(cid:258)wietleniu jej w przegl(cid:200)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(cid:239)y pole, klasa box okre(cid:258)la style powi(cid:200)zanych elementów znajduj(cid:200)cych si(cid:218) na stronie przy u(cid:285)yciu dope(cid:239)niania, cienkiej ramki, marginesu oraz niewielkiego cienia poni(cid:285)ej ele- mentów. Klasa boxsizer sprawi, (cid:285)e korzystaj(cid:200)ce z niej elementy b(cid:218)d(cid:200) mie(cid:202) tylko jedn(cid:200) trzeci(cid:200) szeroko(cid:258)ci ich elementu nadrz(cid:218)dnego, a ponadto utworz(cid:200) uk(cid:239)ad z(cid:239)o(cid:285)ony z trzech kolumn. I wresz- cie klasa clear b(cid:218)dzie stosowana w elemencie w roli punktu przerwania dla uk(cid:239)adu kolumno- wego. W efekcie wszystkie elementy nast(cid:218)puj(cid:200)ce po tym elemencie zostan(cid:200) umiejscowione poni(cid:285)ej niego. Klasy boxsizer i clear nie s(cid:200) pocz(cid:200)tkowo wykorzystywane przez (cid:285)aden element zdefiniowany w kodzie HTML, ale b(cid:218)d(cid:200) u(cid:285)ywane po zmodyfikowaniu modelu DOM za pomoc(cid:200) kodu w JavaScripcie. W elemencie body kodu HTML na pocz(cid:200)tku definiowany jest element nag(cid:239)ówka h1 z identy- fikatorem pageHeader, aby z (cid:239)atwo(cid:258)ci(cid:200) element ten móg(cid:239) by(cid:202) wybierany w obr(cid:218)bie kodu JavaScript. Tu(cid:285) poni(cid:285)ej elementu h1 definiujemy pi(cid:218)(cid:202) elementów akapitu ( p ) z klas(cid:200) box. Spo(cid:258)ród tych elementów pierwsze trzy opakowano za pomoc(cid:200) trzech elementów div , a nast(cid:218)pnie przy u(cid:285)yciu kolejnego elementu div z klas(cid:200) boxContainer. Po osi(cid:200)gni(cid:218)ciu dwóch znaczników script do(cid:239)(cid:200)czane jest najpierw odwo(cid:239)anie do biblioteki jQuery zapewnianej w ramach jej sieci CDN. Wi(cid:218)cej informacji mo(cid:285)esz znale(cid:283)(cid:202) pod adresem http://code.jquery.com/. W drugim znaczniku script ma miejsce odwo(cid:239)anie do pliku JavaScriptu z kodem wymaganym w omawianym przyk(cid:239)adzie. Ma on nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): setTimeout(function() { $( #pageHeader ).css( font-size , 3em ); var $boxes = $( .boxContainer .box ); $boxes.append( br / br / i W sytuacji, gdy niezb(cid:218)dne s(cid:200) proste rozwi(cid:200)zania /i . ); 23 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe $boxes.parent().addClass( boxsizer ); $( .boxContainer ).append( div class= clear ); }, 700); W celu opó(cid:283)nienia jego wykonania, zgodnie z wcze(cid:258)niej opisanym przypadkiem u(cid:285)ycia, ca(cid:239)y kod opakowano za pomoc(cid:200) wywo(cid:239)ania funkcji setTimeout. Pierwszy parametr tego wywo(cid:239)ania to funkcja anonimowa, która zostanie wykonana po up(cid:239)ywie 700 milisekund (okre(cid:258)lonych w drugim parametrze) mierzonych przez licznik. W pierwszym wierszu funkcji anonimowej wywo(cid:239)ania zwrotnego u(cid:285)yto funkcji $() biblioteki jQuery, aby dokona(cid:202) przej(cid:258)cia w obr(cid:218)bie modelu DOM i zlokalizowa(cid:202) element o identyfikatorze pageHeader, a nast(cid:218)pnie zastosowa(cid:202) metod(cid:218) css() do zwi(cid:218)kszenia rozmiaru czcionki dla tego elementu przez ustawienie warto(cid:258)ci 3em dla w(cid:239)a(cid:258)ciwo(cid:258)ci font-size. W dalszej kolejno(cid:258)ci funkcji $() zapewniany jest bardziej z(cid:239)o(cid:285)ony selektor CSS, co ma na celu zlokalizowanie wszystkich elementów z klas(cid:200) box, które s(cid:200) elementami potomnymi elementu z klas(cid:200) boxContainer. Wynik operacji jest zapisywany w zmiennej o nazwie $boxes. Konwencje nazewnicze dotycz(cid:200)ce zmiennych W(cid:258)ród projektantów powszechn(cid:200) praktyk(cid:200) jest stosowanie konwencji nazewniczych w wypadku zmiennych, które przechowuj(cid:200) obiekty okre(cid:258)lonego typu. Korzystanie z takich konwencji nie tylko u(cid:239)atwia zapami(cid:218)- tywanie tego, co przechowuje zmienna, ale te(cid:285) sprawia, (cid:285)e napisany kod jest (cid:239)atwiejszy do zrozumienia przez innych programistów wchodz(cid:200)cych w sk(cid:239)ad zespo(cid:239)u. Projektanci biblioteki jQuery cz(cid:218)sto u(cid:285)ywaj(cid:200) nazw zmiennych zaczynaj(cid:200)cych si(cid:218) od znaku $, gdy zmienna przechowuje wynik funkcji $() (znana równie(cid:285) jako obiekt kolekcji biblioteki jQuery). Po zaj(cid:218)ciu si(cid:218) interesuj(cid:200)cymi nas elementami z klas(cid:200) box na ko(cid:241)cu ka(cid:285)dego z nich do(cid:239)(cid:200)czamy dwie spacje (cid:239)ami(cid:200)ce i dodatkowy tekst w postaci kursywy. Dalej u(cid:285)ywana jest zmienna $boxes i za pomoc(cid:200) metody parent() wykonywana jest operacja przej(cid:258)cia o jeden poziom w gór(cid:218) drzewa modelu DOM. Metoda zwraca inny obiekt biblioteki jQuery przechowuj(cid:200)cy elementy nadrz(cid:218)dne div pocz(cid:200)tkowo wybranych pól. W ramach (cid:239)a(cid:241)cucha do(cid:239)(cid:200)czane jest nast(cid:218)pnie wywo(cid:239)anie metody addClass(), która przypisuje tym polom klas(cid:218) CSS boxsizer. Je(cid:258)li konieczne jest przej(cid:258)cie wszystkich w(cid:218)z(cid:239)ów nadrz(cid:218)dnych wybranego elementu, mo(cid:285)esz skorzysta(cid:202) z me- tody $.fn.parents(). Aby jedynie znale(cid:283)(cid:202) pierwszy element nadrz(cid:218)dny zgodny z danym selektorem CSS, rozwa(cid:285) u(cid:285)ycie metody $.fn.closest(). Poniewa(cid:285) do uzyskania trójkolumnowego uk(cid:239)adu klasa boxsizer u(cid:285)ywa elementów unosz(cid:200)cych si(cid:218), musz(cid:200) one zosta(cid:202) wyczyszczone w klasie boxContainer. I tym razem przechodzenie mi(cid:218)dzy ele- mentami modelu DOM umo(cid:285)liwia prosty selektor CSS .boxContainer i funkcja $(). Dalej wywo- (cid:239)ywana jest metoda .append() w celu utworzenia nowego elementu div z klas(cid:200) CSS .clear. Element wstawiany jest na ko(cid:241)cu kodu elementu boxContainer. 24 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt Po up(cid:239)ywie 700 milisekund wykonywanie kodu jQuery zostanie uko(cid:241)czone. Uzyskamy zapre- zentowany wcze(cid:258)niej trójkolumnowy uk(cid:239)ad. W swoim ko(cid:241)cowym stanie kod HTML elementu boxContainer b(cid:218)dzie mie(cid:202) nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): div class= boxContainer div class= boxsizer p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! br br i W sytuacji, gdy niezb(cid:218)dne s(cid:200) proste rozwi(cid:200)zania /i . /p /div div class= boxsizer p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! br br i W sytuacji, gdy niezb(cid:218)dne s(cid:200) proste rozwi(cid:200)zania /i . /p /div div class= boxsizer p class= box J(cid:218)zyk JavaScript pozwala w (cid:239)atwy sposób modyfikowa(cid:202) model DOM! br br i W sytuacji, gdy niezb(cid:218)dne s(cid:200) proste rozwi(cid:200)zania /i . /p /div div class= clear /div /div Tworzenie (cid:239)a(cid:241)cucha metod i interfejsy „p(cid:239)ynne” W poprzednim przyk(cid:239)adzie w(cid:239)a(cid:258)ciwie wykonano te(cid:285) jeden dodatkowy krok i po(cid:239)(cid:200)czono w jedn(cid:200) wszystkie trzy instrukcje kodu powi(cid:200)zane z polami. Instrukcja ma nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): $( .boxContainer .box ) .append( br / br / i W sytuacji, gdy niezb(cid:218)dne s(cid:200) proste rozwi(cid:200)zania /i . ) .parent() .addClass( boxsizer ); Ten wzorzec sk(cid:239)adni nosi nazw(cid:218) wzorca tworzenia (cid:239)a(cid:241)cucha metod i jest szczególnie zalecany przez twórców biblioteki jQuery oraz spo(cid:239)eczno(cid:258)(cid:202) j(cid:218)zyka JavaScript. Tworzenie (cid:239)a(cid:241)cucha metod jest cz(cid:218)(cid:258)ci(cid:200) wzorca implementacji obiektowej interfejsów „p(cid:239)ynnych”, w którego przypadku ka(cid:285)da metoda przekazuje swój kontekst wykonywania kolejnej metodzie. Wi(cid:218)kszo(cid:258)(cid:202) metod biblioteki jQuery, które dotycz(cid:200) obiektu jQuery, zwraca te(cid:285) ten sam lub nowy obiekt kolekcji elementów jQuery. Pozwala to utworzy(cid:202) (cid:239)a(cid:241)cuch z(cid:239)o(cid:285)ony z kilku metod. Dzi(cid:218)ki temu uzyskuje si(cid:218) kod nie tylko bardziej czytelny i wyrazisty, ale te(cid:285) z mniejsz(cid:200) liczb(cid:200) nie- zb(cid:218)dnych deklaracji zmiennych. 25 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe Wzorzec Kompozyt W przypadku wzorca Kompozyt kluczowym zagadnieniem jest mo(cid:285)liwo(cid:258)(cid:202) traktowania kolekcji obiektów w taki sam sposób, w jaki traktujemy instancj(cid:218) pojedynczego obiektu. Zmodyfiko- wanie kompozycji za pomoc(cid:200) metody kolekcji spowoduje uwzgl(cid:218)dnienie modyfikacji dla ka(cid:285)dej cz(cid:218)(cid:258)ci kompozycji. Metody te mog(cid:200) by(cid:202) pomy(cid:258)lnie stosowane, niezale(cid:285)nie od liczby elementów nale(cid:285)(cid:200)cych do kolekcji kompozytu, nawet wtedy, gdy kolekcja nie zawiera elementów. Ponadto obiekty kolekcji kompozytu niekoniecznie musz(cid:200) zapewnia(cid:202) dok(cid:239)adnie te same metody. Obiekt kompozytu mo(cid:285)e ujawnia(cid:202) tylko metody wspólne w przypadku obiektów kolekcji lub udo- st(cid:218)pnia(cid:202) interfejs API z abstrakcj(cid:200) i odpowiednio obs(cid:239)ugiwa(cid:202) odró(cid:285)nianie metod ka(cid:285)dego obiektu. Wyja(cid:258)nijmy dalej, w jaki sposób intuicyjny interfejs API zapewniany przez bibliotek(cid:218) jQuery w du(cid:285)ym stopniu zale(cid:285)ny jest od wzorca Kompozyt. Sposób wykorzystania wzorca Kompozyt przez bibliotek(cid:218) jQuery Wzorzec Kompozyt stanowi integraln(cid:200) cz(cid:218)(cid:258)(cid:202) architektury biblioteki jQuery i stosowany jest z po- ziomu samej, bardzo podstawowej funkcji $(). Ka(cid:285)de wywo(cid:239)anie tej funkcji powoduje utwo- rzenie i zwrócenie obiektu kolekcji elementów, który cz(cid:218)sto jest po prostu nazywany obiektem jQuery. W(cid:239)a(cid:258)nie w tym przypadku widoczna jest pierwsza zasada wzorca Kompozyt. Okazuje si(cid:218), (cid:285)e zamiast pojedynczego elementu funkcja $() zwraca kolekcj(cid:218) elementów. Zwracany obiekt jQuery to obiekt podobny do tablicy, który pe(cid:239)ni rol(cid:218) obiektu opakowuj(cid:200)cego i przechowuje kolekcj(cid:218) pobranych elementów. Obiekt ten zapewnia te(cid:285) kilka nast(cid:218)puj(cid:200)cych do- datkowych w(cid:239)a(cid:258)ciwo(cid:258)ci: (cid:81) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) length okre(cid:258)laj(cid:200)ca d(cid:239)ugo(cid:258)(cid:202) uzyskanej kolekcji elementów; (cid:81) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) context okre(cid:258)laj(cid:200)ca kontekst, w jakim obiekt zosta(cid:239) utworzony; (cid:81) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) CSS selector okre(cid:258)laj(cid:200)ca selektor u(cid:285)yty w wywo(cid:239)aniu funkcji $(); (cid:81) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) prevObject u(cid:285)ywana w sytuacji, gdy konieczne jest uzyskanie dost(cid:218)pu do poprzedniej kolekcji elementów po dodaniu wywo(cid:239)ania metody do (cid:239)a(cid:241)cucha metod. Korzystaj(cid:200)c z narz(cid:218)dzi programistycznych naszej ulubionej przegl(cid:200)darki, z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)emy poeksperymentowa(cid:202) z obiektami jQuery zwracanymi przez funkcj(cid:218) $() i sprawdzi(cid:202) opisane wcze(cid:258)niej w(cid:239)a(cid:258)ciwo(cid:258)ci. Aby uruchomi(cid:202) te narz(cid:218)dzia w wi(cid:218)kszo(cid:258)ci przegl(cid:200)darek, niezb(cid:218)dne jest jedynie naci(cid:258)ni(cid:218)cie klawisza F12 w systemach Windows i Linux lub u(cid:285)ycie kombinacji klawiszy Cmd+Opt+I w systemie Mac. Bezpo(cid:258)rednio po wykonaniu tej czynno(cid:258)ci mo(cid:285)na za- stosowa(cid:202) wywo(cid:239)ania funkcji $() w konsoli i klikn(cid:200)(cid:202) zwrócone obiekty w celu sprawdzenia ich w(cid:239)a(cid:258)ciwo(cid:258)ci. 26 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt Prosta definicja obiektu przypominaj(cid:200)cego tablic(cid:218) Obiekt podobny do tablicy to obiekt { } j(cid:218)zyka JavaScript z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) numeryczn(cid:200) length i odpo- wiedni(cid:200) liczb(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci o nazwach w postaci kolejnych liczb. Inaczej mówi(cid:200)c, obiekt przypominaj(cid:200)cy tablic(cid:218) z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) length o warto(cid:258)ci 2 (length == 2) powinien te(cid:285) mie(cid:202) zdefiniowane dwie w(cid:239)a- (cid:258)ciwo(cid:258)ci 0 i 1 . W wypadku tych w(cid:239)a(cid:258)ciwo(cid:258)ci obiekty podobne do tablicy umo(cid:285)liwiaj(cid:200) uzyskanie do- st(cid:218)pu do ich zawarto(cid:258)ci za pomoc(cid:200) prostych p(cid:218)tli for z wykorzystaniem sk(cid:239)adni akcesorów w(cid:239)a(cid:258)ciwo(cid:258)ci z nawiasami klamrowymi j(cid:218)zyka JavaScript: for (var i = 0; i obj.length; i++) { console.log(obj[i]); } Na poni(cid:285)szym rysunku widoczny jest wynik wywo(cid:239)ania $( #pageHeader ) u(cid:285)ytego we wcze- (cid:258)niejszym przyk(cid:239)adzie w przypadku narz(cid:218)dzi programistycznych przegl(cid:200)darki Firefox. Wynik wywo(cid:239)ania $( .boxContainer .box ) zosta(cid:239) przedstawiony na kolejnym rysunku. To, (cid:285)e w bibliotece jQuery obiekty przypominaj(cid:200)ce tablic(cid:218) pe(cid:239)ni(cid:200) rol(cid:218) obiektów opakowuj(cid:200)cych zwracane elementy, pozwala tej bibliotece zapewni(cid:202) dodatkowe metody, które s(cid:200) stosowane wzgl(cid:218)dem zwróconej kolekcji. Jest to osi(cid:200)gane dzi(cid:218)ki dziedziczeniu prototypowemu obiektu jQuery.fn. W efekcie ka(cid:285)dy obiekt jQuery ma te(cid:285) dost(cid:218)p do wszystkich metod zapewnianych przez bibliotek(cid:218) jQuery. W ten sposób tworzony jest ca(cid:239)y wzorzec Kompozyt udost(cid:218)pniaj(cid:200)cy metody, które po zastosowaniu dla kolekcji s(cid:200) odpowiednio uwzgl(cid:218)dniane dla ka(cid:285)dego jej ele- mentu sk(cid:239)adowego. Poniewa(cid:285) biblioteka jQuery korzysta z obiektów przypominaj(cid:200)cych tablic(cid:218) z dziedziczeniem prototypowym, metody te z (cid:239)atwo(cid:258)ci(cid:200) mog(cid:200) zosta(cid:202) u(cid:285)yte jako w(cid:239)a(cid:258)ciwo(cid:258)ci w ka(cid:285)dym obiekcie jQuery. Zosta(cid:239)o to zaprezentowane w przyk(cid:239)adzie na pocz(cid:200)tku rozdzia(cid:239)u: 27 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe $( #pageHeader ).css( font-size , 3em );. Co wi(cid:218)cej, biblioteka jQuery dodaje do swojego kodu modyfikuj(cid:200)cego model DOM kilka dodatkowych elementów, co ma na celu uzyskanie bardziej zwi(cid:218)z(cid:239)ego kodu, który jest mniej podatny na b(cid:239)(cid:218)dy. Gdy na przyk(cid:239)ad metoda jQuery.fn.html() u(cid:285)ywana jest do zmiany wewn(cid:218)trznego kodu HTML w(cid:218)z(cid:239)a modelu DOM, który zawiera ju(cid:285) elementy podrz(cid:218)dne, biblioteka jQuery próbuje najpierw usun(cid:200)(cid:202) wszelkie dane i procedury obs(cid:239)ugi zdarze(cid:241) powi(cid:200)zane z tymi elementami, zanim usunie je ze strony i do(cid:239)(cid:200)czy zapewniony kod HTML. Przyjrzyjmy si(cid:218) temu, jak biblioteka jQuery implementuje takie metody stosowane wzgl(cid:218)dem ko- lekcji. W tym celu mo(cid:285)emy pobra(cid:202) i wy(cid:258)wietli(cid:202) kod (cid:283)ród(cid:239)owy ze strony witryny GitHub powi(cid:200)zanej z bibliotek(cid:200) jQuery (https://github.com/jquery/jquery/releases) lub skorzysta(cid:202) z narz(cid:218)dzia takiego jak jQuery Source Viewer, które jest dost(cid:218)pne pod adresem http://james.padolsey.com/jquery. Zale(cid:285)nie od u(cid:285)ywanej wersji uzyskane wyniki mog(cid:200) si(cid:218) w pewnym stopniu ró(cid:285)ni(cid:202). Najnowsza stabilna wersja biblioteki jQuery, która by(cid:239)a dost(cid:218)pna i wykorzystywana, gdy pisano t(cid:218) ksi(cid:200)(cid:285)k(cid:218), to wersja 2.2.0. Metoda jQuery.fn.empty() to jedna z najprostszych metod demonstruj(cid:200)cych, jak implementowa- ne s(cid:200) metody stosowane wzgl(cid:218)dem kolekcji. Implementacj(cid:218) tej metody z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)esz zlokalizowa(cid:202) w kodzie (cid:283)ród(cid:239)owym biblioteki jQuery, wyszukuj(cid:200)c (cid:239)a(cid:241)cuch empty: lub u(cid:285)ywaj(cid:200)c narz(cid:218)dzia jQuery Source Viewer i szukaj(cid:200)c (cid:239)a(cid:241)cucha jQuery.fn.empty. Skorzystanie z dowolnego z tych sposobów pozwoli uzyska(cid:202) nast(cid:218)puj(cid:200)cy kod: empty: function() { var elem, i = 0; for ( ; ( elem = this[ i ] ) != null; i++ ) { if ( elem.nodeType === 1 ) { // Zapobiegni(cid:266)cie „wyciekowi” pami(cid:266)ci jQuery.cleanData( getAll( elem, false ) ); // Usuni(cid:266)cie wszystkich pozosta(cid:225)ych w(cid:266)z(cid:225)ów elem.textContent = ; } } return this; } Jak wida(cid:202), kod wcale nie jest z(cid:239)o(cid:285)ony. Biblioteka jQuery dokonuje iteracji wszystkich elementów obiektu kolekcji (przywo(cid:239)ywany w postaci s(cid:239)owa kluczowego this, poniewa(cid:285) ma to miejsce we- wn(cid:200)trz implementacji metody) przy u(cid:285)yciu zwyk(cid:239)ej p(cid:218)tli for. Dla ka(cid:285)dego elementu kolekcji, czyli w(cid:218)z(cid:239)a elementu, kod jQuery czy(cid:258)ci warto(cid:258)ci wszystkich w(cid:239)a(cid:258)ciwo(cid:258)ci data-* za pomoc(cid:200) funkcji pomocniczej jQuery.cleanData(). Bezpo(cid:258)rednio po tej operacji kod usuwa zawarto(cid:258)(cid:202) elementów, ustawiaj(cid:200)c dla nich (cid:239)a(cid:241)cuch pusty. Wi(cid:218)cej informacji o ró(cid:285)nych okre(cid:258)lanych typach w(cid:218)z(cid:239)ów mo(cid:285)esz znale(cid:283)(cid:202) pod adresem https:// developer.mozilla.org/en-US/docs/Web/API/Node/nodeType. 28 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt Porównanie korzy(cid:258)ci uzyskiwanych w przypadku rezygnacji ze zwyk(cid:239)ego interfejsu API modelu DOM Aby wyra(cid:283)nie zademonstrowa(cid:202) korzy(cid:258)ci zapewniane przez wzorzec Kompozyt, zmodyfikuje- my przyk(cid:239)ad z pocz(cid:200)tku rozdzia(cid:239)u bez u(cid:285)ywania abstrakcji oferowanych przez bibliotek(cid:218) jQuery. U(cid:285)ywaj(cid:200)c tylko zwyk(cid:239)ego kodu napisanego w JavaScripcie i interfejsu API modelu DOM, mo(cid:285)emy utworzy(cid:202) równorz(cid:218)dny kod o nast(cid:218)puj(cid:200)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(cid:218)dne s(cid:200) proste rozwi(cid:200)zania /i . ; boxElement.parentNode.className += boxsizer ; } var clearFloatDiv = document.createElement( div ); clearFloatDiv.className = clear ; boxContainerElement.appendChild(clearFloatDiv); } }, 700); I tym razem u(cid:285)ywana jest funkcja setTimeout z funkcj(cid:200) anonimow(cid:200). Jako drugi parametr ustawio- no czas 700 milisekund. Wewn(cid:200)trz samej funkcji zastosowano metod(cid:218) document.getElementById do pobrania elementów, w których przypadku wiadomo, (cid:285)e maj(cid:200) na stronie unikatowy identyfikator. W dalszej kolejno(cid:258)ci u(cid:285)ywana jest metoda document.getElementsByClassName, gdy niezb(cid:218)dne jest uzyskanie wszystkich elementów zawieraj(cid:200)cych konkretn(cid:200) klas(cid:218). Zastosowano te(cid:285) metod(cid:218) boxContainerElement.getElementsByClassName( box ) do pobrania wszystkich elementów z klas(cid:200) box, które s(cid:200) elementami podrz(cid:218)dnymi elementu z klas(cid:200) boxContainer. W tym wypadku najbardziej oczywist(cid:200) obserwacj(cid:200) jest to, (cid:285)e w celu osi(cid:200)gni(cid:218)cia identycznych wyników niezb(cid:218)dnych by(cid:239)o 18 wierszy kodu. Dla porównania: w przypadku korzystania z biblio- teki jQuery wymaganych by(cid:239)o tylko 9 wierszy kodu, czyli po(cid:239)owa tego, co zosta(cid:239)o u(cid:285)yte w powy(cid:285)- szej implementacji. Zastosowanie funkcji $() biblioteki jQuery z selektorem CSS by(cid:239)o prostszym sposobem uzyskania wymaganych elementów. Sposób ten zapewnia ponadto zgodno(cid:258)(cid:202) z przegl(cid:200)- darkami, które nie obs(cid:239)uguj(cid:200) metody getElementsByClassName(). Istnieje jednak wi(cid:218)cej korzy(cid:258)ci ni(cid:285) tylko mniejsza liczba wierszy kodu i zwi(cid:218)kszona czytelno(cid:258)(cid:202). Implementuj(cid:200)c wzorzec Kompo- zyt, funkcja $() zawsze pobiera kolekcje elementów, dzi(cid:218)ki czemu kod staje si(cid:218) bardziej jednolity 29 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe w porównaniu z ró(cid:285)ni(cid:200)c(cid:200) si(cid:218) obs(cid:239)ug(cid:200) ka(cid:285)dej z zastosowanych metod getElement*. Funkcja $() u(cid:285)ywana jest dok(cid:239)adnie w taki sam sposób, niezale(cid:285)nie od tego, czy po(cid:285)(cid:200)dane jest uzyskanie jedynie elementu z unikatowym identyfikatorem, czy liczby elementów z konkretn(cid:200) klas(cid:200). W ramach dodatkowej korzy(cid:258)ci wynikaj(cid:200)cej ze zwracania obiektów przypominaj(cid:200)cych tablic(cid:218) biblioteka jQuery mo(cid:285)e te(cid:285) zapewnia(cid:202) wygodniejsze metody przechodzenia w obr(cid:218)bie modelu DOM i modyfikowania go. S(cid:200) to na przyk(cid:239)ad metody .css(), .append() i .parent() zaprezentowane w pierwszym przyk(cid:239)adzie, dost(cid:218)pne jako w(cid:239)a(cid:258)ciwo(cid:258)ci zwracanego obiektu. Ponadto biblioteka jQuery oferuje metody dokonuj(cid:200)ce abstrakcji bardziej z(cid:239)o(cid:285)onych przypadków u(cid:285)ycia, takie jak .addClass() i .wrap(). W wypadku tych metod nie istniej(cid:200) odpowiadaj(cid:200)ce im metody, które s(cid:200) cz(cid:218)(cid:258)ci(cid:200) interfejsu API modelu DOM. Poniewa(cid:285) zwracane obiekty kolekcji biblioteki jQuery nie ró(cid:285)ni(cid:200) si(cid:218) niczym innym ni(cid:285) opakowy- wane przez nie elementy, w identyczny sposób mo(cid:285)emy u(cid:285)y(cid:202) dowolnej metody interfejsu API biblioteki jQuery. Jak wcze(cid:258)niej pokazano, metody te, niezale(cid:285)nie od liczby elementów, stosowane s(cid:200) dla ka(cid:285)dego elementu pobranej kolekcji. W efekcie nie ma potrzeby u(cid:285)ywania osobnej p(cid:218)tli for w celu przeprowadzenia iteracji dla ka(cid:285)dego pobranego elementu, a tak(cid:285)e wykonywania osobno operacji modyfikowania (np. przy u(cid:285)yciu metody .addClass()), które s(cid:200) stosowane bezpo(cid:258)rednio wzgl(cid:218)dem obiektu kolekcji. Aby w zamieszczonym dalej przyk(cid:239)adzie nadal zapewni(cid:202) takie same gwarancje dotycz(cid:200)ce bez- piecznego wykonania, konieczne jest równie(cid:285) dodanie kilku dodatkowych instrukcji if spraw- dzaj(cid:200)cych warto(cid:258)ci null. Jest to wymagane, poniewa(cid:285) je(cid:258)li na przyk(cid:239)ad nie znaleziono zmiennej headerElement, wyst(cid:200)pi b(cid:239)(cid:200)d, a reszta wierszy kodu nigdy nie zostanie wykonana. Kto(cid:258) móg(cid:239)by uzna(cid:202), (cid:285)e tego rodzaju sprawdzenia, takie jak if (headerElement) i if (boxContainerElement), nie s(cid:200) wymagane w tym przyk(cid:239)adzie i mog(cid:200) zosta(cid:202) pomini(cid:218)te. W tym przypadku mo(cid:285)e si(cid:218) to wy- dawa(cid:202) poprawne, ale w rzeczywisto(cid:258)ci jest to jeden z g(cid:239)ównych powodów pojawiania si(cid:218) b(cid:239)(cid:218)- dów podczas projektowania aplikacji o du(cid:285)ej skali, w których nieustannie elementy s(cid:200) tworzone, wstawiane i usuwane z drzewa modelu DOM. Niestety, w wypadku wszystkich j(cid:218)zyków i platform docelowych programi(cid:258)ci tworz(cid:200) zwykle najpierw logik(cid:218) implementacji, a dopiero pó(cid:283)niej do- daj(cid:200) takie sprawdzenia. Cz(cid:218)sto ma to miejsce po pojawieniu si(cid:218) b(cid:239)(cid:218)du podczas testowania implementacji. Zgodnie z wzorcem Kompozyt nawet pusty obiekt kolekcji biblioteki jQuery (nie zawieraj(cid:200)cy (cid:285)adnych pobranych elementów) w dalszym ci(cid:200)gu jest poprawnym obiektem kolekcji, w którym mo(cid:285)na bezpiecznie zastosowa(cid:202) dowoln(cid:200) metod(cid:218) zapewnian(cid:200) przez bibliotek(cid:218) jQuery. W rezulta- cie nie ma potrzeby u(cid:285)ywania dodatkowych instrukcji if do sprawdzenia przed zastosowaniem metody takiej jak .css() (tylko po to, aby unikn(cid:200)(cid:202) b(cid:239)(cid:218)du (cid:258)rodowiska wykonawczego kodu JavaScript), czy kolekcja faktycznie zawiera jakikolwiek element. Ogólnie rzecz bior(cid:200)c, abstrakcje oferowane przez bibliotek(cid:218) jQuery z wykorzystaniem wzorca Kompozyt zapewniaj(cid:200) mniejsz(cid:200) liczb(cid:218) 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(cid:200) document.getElementById( elementID )). 30 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt U(cid:285)ycie wzorca Kompozyt do projektowania aplikacji Gdy ju(cid:285) wyja(cid:258)niono, jak biblioteka jQuery korzysta z wzorca Kompozyt w swojej architekturze, a tak(cid:285)e porównano korzy(cid:258)ci zapewniane przez wzorzec, spróbujmy samodzielnie utworzy(cid:202) przy- k(cid:239)adowy przypadek u(cid:285)ycia. Postaramy si(cid:218) uwzgl(cid:218)dni(cid:202) wszystkie zagadnienia zaprezentowane wcze(cid:258)niej w tym rozdziale. Kompozyt b(cid:218)dzie mie(cid:202) struktur(cid:218) obiektu przypominaj(cid:200)cego tablic(cid:218). Ponadto wzorzec b(cid:218)dzie przetwarza(cid:202) obiekty o ca(cid:239)kowicie innej strukturze, zapewnia(cid:202) „p(cid:239)ynny” interfejs API umo(cid:285)liwiaj(cid:200)cy tworzenie (cid:239)a(cid:241)cucha metod oraz udost(cid:218)pnia(cid:202) metody, które stosowane s(cid:200) dla wszystkich elementów kolekcji. Przyk(cid:239)adowy przypadek u(cid:285)ycia Za(cid:239)ó(cid:285)my, (cid:285)e istnieje aplikacja, która w pewnym momencie wymaga wykonania operacji na licz- bach. Z kolei elementy wymagane przez aplikacj(cid:218) do przetwarzania pochodz(cid:200) z ró(cid:285)nych (cid:283)róde(cid:239) i zupe(cid:239)nie nie s(cid:200) jednolite. Aby przyk(cid:239)ad by(cid:239) interesuj(cid:200)cy, przyjmijmy, (cid:285)e jedno (cid:283)ród(cid:239)o danych zapewnia zwyk(cid:239)e liczby, a inne (cid:650) obiekty z okre(cid:258)lon(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200), która zawiera interesuj(cid:200)c(cid:200) nas liczb(cid:218). var numberValues = [2, 5, 8]; var objectsWithValues = [ { value: 7 }, { value: 4 }, { value: 6 }, { value: 9 } ]; Obiekty zwracane przez drugie (cid:283)ród(cid:239)o wyst(cid:218)puj(cid:200)ce w przyk(cid:239)adowym przypadku u(cid:285)ycia mog(cid:200) mie(cid:202) bardziej z(cid:239)o(cid:285)on(cid:200) struktur(cid:218) i prawdopodobnie kilka dodatkowych w(cid:239)a(cid:258)ciwo(cid:258)ci. Takie zmiany w (cid:285)aden sposób nie spowoduj(cid:200) zró(cid:285)nicowania przyk(cid:239)adowej implementacji, gdy(cid:285) podczas tworzenia wzorca Kompozyt interesuje nas jedynie zapewnienie jednolitej obs(cid:239)ugi wspólnych cz(cid:218)(cid:258)ci elementów docelowych. Implementacja kolekcji kompozytu Zdefiniujmy funkcj(cid:218) konstruktora i prototyp opisuj(cid:200)ce przyk(cid:239)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; }; 31 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe 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(cid:239)adzie jest do(cid:258)(cid:202) prosta. W razie wywo(cid:239)ania za pomoc(cid:200) operatora new zwraca ona pusty obiekt z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) length równ(cid:200) zeru, która wskazuje, (cid:285)e kolekcja opakowywana przez funkcj(cid:218) jest pusta. Wi(cid:218)cej informacji o opartym na prototypie modelu programowania j(cid:218)zyka JavaScript dost(cid:218)pnych jest na stronie internetowej pod adresem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object- -Oriented_JavaScript. Konieczne jest najpierw zdefiniowanie sposobu umo(cid:285)liwiaj(cid:200)cego wype(cid:239)nienie obiektów kolekcji kompozytu. Zdefiniowano metod(cid:218) append, która sprawdza, czy zapewniony parametr jest jednego z obs(cid:239)ugiwanych przez ni(cid:200) typów. Metoda do(cid:239)(cid:200)cza parametr w obiekcie kompozytu w wypadku nast(cid:218)pnej dost(cid:218)pnej w(cid:239)a(cid:258)ciwo(cid:258)ci numerycznej i inkrementuje warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci length. Na przyk(cid:239)ad pierwszy do(cid:239)(cid:200)czony element, niezale(cid:285)nie od tego, czy jest obiektem z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) w postaci warto(cid:258)ci czy zwyk(cid:239)ej liczby, zostanie udost(cid:218)pniony w(cid:239)a(cid:258)ciwo(cid:258)ci 0 obiektu kompozytu i b(cid:218)dzie dost(cid:218)pny jako myValuesComposition[0]w ramach sk(cid:239)adni akcesorów w(cid:239)a(cid:258)ciwo(cid:258)ci z nawia- sami klamrowymi. Metoda increment jest prezentowana jako prosta, przyk(cid:239)adowa metoda, która mo(cid:285)e modyfikowa(cid:202) takie kolekcje przez przetwarzanie wszystkich ich elementów. Jako parametr metoda akcep- tuje warto(cid:258)(cid:202) liczbow(cid:200), a nast(cid:218)pnie odpowiednio j(cid:200) obs(cid:239)uguje, dodaj(cid:200)c j(cid:200) do ka(cid:285)dego elementu kolekcji (zale(cid:285)nie od ich typu). Poniewa(cid:285) przyk(cid:239)adowy kompozyt to obiekt podobny do tablicy, 32 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt metoda increment korzysta z p(cid:218)tli for, aby dokona(cid:202) iteracji wszystkich elementów kolekcji, i zwi(cid:218)ksza albo warto(cid:258)(cid:202) item.value (w sytuacji, gdy element jest obiektem), albo faktyczn(cid:200) przechowywan(cid:200) warto(cid:258)(cid:202) liczbow(cid:200) (gdy zapisany element kolekcji to liczba). W ten sam sposób mo(cid:285)emy kontynuowa(cid:202) dzia(cid:239)ania i implementowa(cid:202) inne metody, które na przyk(cid:239)ad umo(cid:285)liwi(cid:200) pomno(cid:285)enie elementów kolekcji przez konkretn(cid:200) liczb(cid:218). Aby umo(cid:285)liwi(cid:202) utworzenie (cid:239)a(cid:241)cucha metod przyk(cid:239)adowego obiektu kompozytu, wszystkie metody prototypu musz(cid:200) zwraca(cid:202) odwo(cid:239)anie do instancji obiektu. Cel ten osi(cid:200)gamy po prostu przez dodanie instrukcji return this; jako ostatniego wiersza kodu w wypadku wszystkich metod modyfikuj(cid:200)cych kolekcj(cid:218), takich jak append i increment. Miej (cid:258)wiadomo(cid:258)(cid:202) tego, (cid:285)e takie metody jak getValues, które nie modyfikuj(cid:200) kolekcji, lecz s(cid:239)u(cid:285)(cid:200) do zwrócenia wyniku, z za(cid:239)o- (cid:285)enia nie mog(cid:200) by(cid:202) dodawane do (cid:239)a(cid:241)cucha metod, aby przekaza(cid:202) instancj(cid:218) obiektu kolekcji kolejnym wywo(cid:239)aniom metody. I wreszcie metoda getValues implementowana jest jako wygodny sposób uzyskiwania rzeczywi- stych warto(cid:258)ci liczbowych wszystkich elementów kolekcji. Podobnie do metody increment metoda getValues dokonuje abstrakcji obs(cid:239)ugi dotycz(cid:200)cej ró(cid:285)nych typów elementów kolekcji. Metoda przeprowadza iteracj(cid:218) elementów kolekcji, wyodr(cid:218)bnia ka(cid:285)d(cid:200) warto(cid:258)(cid:202) liczbow(cid:200) i do(cid:239)(cid:200)cza j(cid:200) do tablicy result, która jest zwracana elementowi wywo(cid:239)uj(cid:200)cemu metod(cid:218). Przyk(cid:239)ad wykonania kodu Pora zaznajomi(cid:202) si(cid:218) z faktycznym przyk(cid:239)adem korzystaj(cid:200)cym z w(cid:239)a(cid:258)nie zaimplementowanego obiektu 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(cid:200)darce powy(cid:285)szego kodu po umieszczeniu go w obr(cid:218)bie istniej(cid:200)cej strony lub bezpo(cid:258)rednio w konsoli przegl(cid:200)darki zarejestruje ona nast(cid:218)puj(cid:200)cy wynik: (cid:23) Array [ 4, 7, 10, 9, 6, 8, 11, 1, 2, 3 ]. Korzystamy ze (cid:283)róde(cid:239) danych, takich jak zmienne numberValues i objectsWithValues, które zaprezentowano wcze(cid:258)niej. W powy(cid:285)szym kodzie iterowane s(cid:200) obie zmienne, a ich elementy s(cid:200) do(cid:239)(cid:200)czane do nowo utworzonej instancji obiektu kompozytu. Dalej inkrementowane s(cid:200) o 2 warto(cid:258)ci kolekcji kompozytu. Bezpo(cid:258)rednio po tej operacji tworzony jest (cid:239)a(cid:241)cuch trzech metod 33 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe append wstawiaj(cid:200)cych element. Pierwsze dwie metody do(cid:239)(cid:200)czaj(cid:200) warto(cid:258)ci liczbowe, a trzecia do- daje obiekt z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) w postaci warto(cid:258)ci. Aby uzyska(cid:202) tablic(cid:218) z wszystkimi warto(cid:258)ciami liczbowymi kolekcji i zarejestrowa(cid:202) j(cid:200) w konsoli przegl(cid:200)darki, na ko(cid:241)cu u(cid:285)ywana jest metoda getValues. Implementacje alternatywne Miej (cid:258)wiadomo(cid:258)(cid:202) tego, (cid:285)e kompozyt nie musi by(cid:202) obiektem przypominaj(cid:200)cym tablic(cid:218), ale jest to ogólnie preferowane, poniewa(cid:285) JavaScript u(cid:239)atwia utworzenie takiej implementacji. Ponadto implementacje podobne do tablicy zapewniaj(cid:200) te(cid:285) korzy(cid:258)(cid:202) w postaci umo(cid:285)liwiania iteracji ele- mentów kolekcji przy u(cid:285)yciu prostej p(cid:218)tli for. Z kolei gdy obiekt przypominaj(cid:200)cy tablic(cid:218) nie jest preferowany, z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)na skorzysta(cid:202) z w(cid:239)a(cid:258)ciwo(cid:258)ci w obiekcie kompozytu, aby przechowywa(cid:202) elementy kolekcji. Taka w(cid:239)a(cid:258)ci- wo(cid:258)(cid:202) mo(cid:285)e na przyk(cid:239)ad mie(cid:202) nazw(cid:218) items i s(cid:239)u(cid:285)y(cid:202) do przechowywania (za pomoc(cid:200) instrukcji this.items.push(item)) oraz udost(cid:218)pniania (przy u(cid:285)yciu instrukcji this.items[i]) elementów kolekcji w obr(cid:218)bie metod. Wzorzec Iterator Kluczowym poj(cid:218)ciem zwi(cid:200)zanym z wzorcem Iterator jest zastosowanie funkcji jednej odpowiedzial- no(cid:258)ci w celu przechodzenia w obr(cid:218)bie kolekcji i zapewniania dost(cid:218)pu do jej elementów. Funkcja ta jest znana jako iterator i umo(cid:285)liwia uzyskanie dost(cid:218)pu do elementów kolekcji bez ujawnia- nia szczegó(cid:239)ów implementacji oraz bazowej struktury danych u(cid:285)ywanej przez obiekt kolekcji. Iteratory zapewniaj(cid:200) poziom hermetyzacji dotycz(cid:200)cy sposobu przeprowadzania iteracji elementów kolekcji, oddzielaj(cid:200)c ten proces od implementacji logiki konsumentów tych elementów. Wi(cid:218)cej informacji o zasadzie jednej odpowiedzialno(cid:258)ci znajdziesz pod adresem http://www.oodesign.com/ single-responsibility-principle.html. Sposób wykorzystania wzorca Iterator przez bibliotek(cid:218) jQuery Jak wspomniano wcze(cid:258)niej w tym rozdziale, podstawowa funkcja $() biblioteki jQuery zwraca obiekt przypominaj(cid:200)cy tablic(cid:218), który opakowuje kolekcj(cid:218) elementów strony, a tak(cid:285)e zapewnia funkcj(cid:218) iteratora umo(cid:285)liwiaj(cid:200)c(cid:200) przechodzenie w obr(cid:218)bie kolekcji i uzyskiwanie dost(cid:218)pu do po- szczególnych elementów. W przypadku biblioteki jQuery wykonano w(cid:239)a(cid:258)ciwie jeden dodatkowy krok, udost(cid:218)pniaj(cid:200)c ogóln(cid:200) funkcj(cid:218) pomocnicz(cid:200) jQuery.each(), która mo(cid:285)e dokonywa(cid:202) iteracji tablic, obiektów podobnych do tablicy oraz w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu. 34 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt Bardziej techniczny opis dost(cid:218)pny jest na stronie dokumentacji interfejsu API biblioteki jQuery pod adresem http://api.jquery.com/jQuery.each/, gdzie zamieszczono nast(cid:218)puj(cid:200)c(cid:200) informacj(cid:218) dotycz(cid:200)c(cid:200) metody jQuery.each(): Ogólna funkcja iteratora, która mo(cid:285)e pos(cid:239)u(cid:285)y(cid:202) do ci(cid:200)g(cid:239)ej iteracji zarówno obiektów, jak i tablic. Tablice i obiekty przypominaj(cid:200)ce tablic(cid:218) z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) d(cid:239)ugo(cid:258)ci (np. obiekt argumentu funkcji) s(cid:200) iterowane przy u(cid:285)yciu indeksu liczbowego, od zera do warto(cid:258)ci d(cid:239)ugo(cid:258)(cid:202)-1. Inne obiekty s(cid:200) iterowane z wykorzystaniem ich w(cid:239)a(cid:258)ciwo(cid:258)ci z nazwami. Funkcja pomocnicza jQuery.each() u(cid:285)ywana jest wewn(cid:218)trznie w kilku miejscach kodu (cid:283)ró- d(cid:239)owego biblioteki jQuery. Jednym z zastosowa(cid:241) tej funkcji jest iteracja elementów obiektu jQuery i, zgodnie z tym, co sugeruje wzorzec Kompozyt, wykonywanie operacji modyfikowania dla ka(cid:285)dego z nich. Proste wyszukiwanie s(cid:239)owa kluczowego .each( zapewnia 56 dopasowa(cid:241). Gdy pisano ksi(cid:200)(cid:285)k(cid:218), najnowsz(cid:200) stabiln(cid:200) wersj(cid:200) biblioteki by(cid:239)a wersja 2.2.0, której u(cid:285)yto do uzyskania powy(cid:285)szych statystyk. Z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)na prze(cid:258)ledzi(cid:202) implementacj(cid:218) funkcji w kodzie (cid:283)ród(cid:239)owym biblioteki jQuery, wyszukuj(cid:200)c (cid:239)a(cid:241)cuch each: (zauwa(cid:285), (cid:285)e s(cid:200) dwa wyst(cid:200)pienia) lub u(cid:285)ywaj(cid:200)c narz(cid:218)dzia jQuery Source Viewer i szukaj(cid:200)c (cid:239)a(cid:241)cucha jQuery.each() (jak to mia(cid:239)o miejsce wcze(cid:258)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(cid:285) dost(cid:218)pna w dowolnym obiekcie jQuery dzi(cid:218)ki u(cid:285)yciu tego samego dziedziczenia prototypowego, które zaprezentowano wcze(cid:258)niej w przypadku metod takich jak .append(). Z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)esz znale(cid:283)(cid:202) kod, który realizuje dok(cid:239)adnie co(cid:258) takiego. W tym celu za pomoc(cid:200) narz(cid:218)dzia jQuery Source Viewer wyszukaj (cid:239)a(cid:241)cuch jQuery.fn.each() lub w kodzie (cid:283)ró- d(cid:239)owym biblioteki jQuery bezpo(cid:258)rednio poszukaj (cid:239)a(cid:241)cucha each: (zauwa(cid:285), (cid:285)e s(cid:200) dwa wyst(cid:200)pienia): 35 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe each: function( callback ) { return jQuery.each( this, callback ); } Zastosowanie wariantu z wyszukiwaniem (cid:239)a(cid:241)cucha .each() pozwala na bezpo(cid:258)redni(cid:200) iteracj(cid:218) elementów obiektu kolekcji biblioteki jQuery z wykorzystaniem wygodniejszej w u(cid:285)yciu sk(cid:239)adni. Widoczny poni(cid:285)ej przyk(cid:239)adowy kod prezentuje, jak w kodzie mog(cid:200) zosta(cid:202) u(cid:285)yte dwa warianty funkcji .each(): // U(cid:298)ycie funkcji pomocniczej dla tablicy $.each([3, 5, 7], function(index){ console.log(this + 1); }); // U(cid:298)ycie metody dla obiektu jQuery $( .boxContainer .box ).each(function(index) { console.log( To jest pole o numerze + (index + 1)); // Indeks rozpoczyna si(cid:266) // od zera }); Po wykonaniu powy(cid:285)szy kod spowoduje zarejestrowanie w konsoli przegl(cid:200)darki wyniku wi- docznego na poni(cid:285)szym rysunku. Powi(cid:200)zanie wzorca Iterator z wzorcem Kompozyt Poniewa(cid:285) wzorzec Kompozyt hermetyzuje kolekcj(cid:218) elementów w postaci jednego obiektu, a wzo- rzec Iterator mo(cid:285)e zosta(cid:202) u(cid:285)yty do iteracji struktury danych z abstrakcj(cid:200), z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)emy te dwa wzorce opisa(cid:202) jako uzupe(cid:239)niaj(cid:200)ce si(cid:218). Zastosowanie wzorca Iterator Wzorzec Iterator mo(cid:285)e by(cid:202) stosowany w tworzonych aplikacjach w celu definiowania abstrakcji sposobu uzyskiwania dost(cid:218)pu do elementów struktury danych. Dla przyk(cid:239)adu za(cid:239)ó(cid:285)my, (cid:285)e ko- nieczne jest uzyskanie z nast(cid:218)puj(cid:200)cej struktury drzewa wszystkich elementów o warto(cid:258)ci wi(cid:218)kszej ni(cid:285) 4: 36 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Utrwalenie wiedzy o bibliotece jQuery i wzorcu Kompozyt var collection = { nodeValue: 7, left: { nodeValue: 4, left: 2, right: { nodeValue: 6, left: 5, right: 9 } }, right: { nodeValue: 9, left: 8 } }; Zaimplementujmy teraz funkcj(cid:218) iteratora. Poniewa(cid:285) drzewiaste struktury danych mog(cid:200) zawiera(cid:202) zagnie(cid:285)d(cid:285)anie, uzyskujemy nast(cid:218)puj(cid:200)c(cid:200) implementacj(cid:218) rekurencyjn(cid:200): 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(cid:298) jest to li(cid:286)(cid:252), w(cid:266)ze(cid:225) jest warto(cid:286)ci(cid:261) callback(node); } } Ostatecznie otrzymujemy nast(cid:218)puj(cid:200)c(cid:200) implementacj(cid:218): var valuesArray = []; iterateTreeValues(collection, function(value) { if (value 4) { valuesArray.push(value); } }); console.log(valuesArray); 37 Poleć książkęKup książkę Biblioteka jQuery. Sprawdzone wzorce projektowe Po wykonaniu powy(cid:285)szego kodu w konsoli przegl(cid:200)darki zostanie zarejestrowany nast(cid:218)puj(cid:200)cy wynik: (cid:23) Array [ 5, 6, 9, 7, 8, 9 ]. Wyra(cid:283)nie wida(cid:202), (cid:285)e iterator upro(c
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Biblioteka jQuery. Sprawdzone wzorce projektowe
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ą: