Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00744 011226 7458116 na godz. na dobę w sumie
jQuery w akcji. Wydanie III - ebook/pdf
jQuery w akcji. Wydanie III - ebook/pdf
Autor: , , Liczba stron: 528
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-2276-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).
Lekka biblioteka jQuery znacząco ułatwia kodowanie w JavaScripcie. Dzięki niej programiści nie muszą już ręcznie zarządzać obsługą selektorów CSS czy nawigacją w modelu DOM, a praca nad animacjami stała się o wiele łatwiejsza. Co ważne, projekt ten wciąż się rozwija: w bibliotece jQuery 3 dodano kolejne funkcje, które sprawiły, że praca projektanta aplikacji internetowych stała się bezproblemowa i efektywna. Okazuje się, że wobec rosnącego znaczenia JavaScriptu w tworzeniu aplikacji internetowych umiejętność posługiwania się jQuery staje się bardzo ważnym atutem na rynku pracy.

Jeśli znasz choćby podstawy JavaScriptu i chciałbyś możliwie szybko nabrać biegłości w posługiwaniu się jQuery, trzymasz w dłoni książkę dla siebie. Dzięki temu zwięzłemu przewodnikowi nauczysz się płynnie realizować zadania, które pojawiają się niemal zawsze podczas tworzenia aplikacji internetowych. Dowiesz się, jak nawigować w obrębie modelu DOM, obsługiwać zdarzenia, tworzyć dodatki do jQuery i żądania Ajax, a nawet przeprowadzać testy jednostkowe kodu. Oczywiście, nie zabrakło tu rzeczywistych przykładów kodu, ilustrujących każde omawiane zagadnienie. Ponadto niniejsze wydanie rozbudowano o rozdziały, w których omówiono współdziałanie jQuery z innymi narzędziami i środowiskami, a także budowę nowoczesnych aplikacji z jedną stroną w środowisku Backbone.js.

Dzięki tej książce poznasz:

Poznaj jQuery, korzystaj z tej biblioteki i ciesz się nią!


Bear Bibeault — programuje od ponad trzydziestu lat. Uzyskał dwa stopnie naukowe z dziedziny elektrotechniki, jest też współautorem licznych książek dotyczących programowania.
Yehuda Katz — od wielu lat angażuje się w projekty związane z oprogramowaniem open source. Jest jednym z pierwszych twórców biblioteki jQuery oraz współtwórcą środowiska Ember.js.
Aurelio De Rosa — jest doświadczonym projektantem aplikacji internetowych i członkiem zespołu rozwijającego bibliotekę jQuery. Tworzy oprogramowanie internetowe z wykorzystaniem stosu WAMP oraz języków HTML5, CSS3, Sass, JavaScript i PHP.
Znajdź podobne książki

Darmowy fragment publikacji:

Tytuł oryginału: jQuery in Action, Third Edition Tłumaczenie: Piotr Pilch Projekt okładki: Studio Gravite / Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki ISBN: 978-83-283-2275-2 Original edition copyright © 2015 by Manning Publications Co. All rights reserved. Polish edition copyright © 2016 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. Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock Images LLC. 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/jquer3.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jquer3 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 S(cid:239)owo wst(cid:218)pne do wydania trzeciego 15 S(cid:239)owo wst(cid:218)pne do wydania pierwszego 17 Przedmowa 19 Podzi(cid:218)kowania 21 O ksi(cid:200)(cid:285)ce 23 O autorach 27 CZ(cid:125)(cid:165)(cid:109) I BIBLIOTEKA JQUERY — PIERWSZE KROKI 29 Rozdzia(cid:239) 1. Wprowadzenie do biblioteki jQuery 31 1.1. 1.2. 1.3. 1.4. Pisz mniej, a rób wi(cid:218)cej 32 Przejrzysty kod JavaScript 34 Oddzielanie zachowania od struktury 35 1.2.1. 1.2.2. Oddzielanie skryptu 36 Instalowanie biblioteki jQuery 37 1.3.1. Wybieranie w(cid:239)a(cid:258)ciwej wersji 37 1.3.2. Struktura biblioteki jQuery 42 1.4.1. Zwi(cid:218)kszanie wydajno(cid:258)ci przy u(cid:285)yciu sieci CDN 40 Tworzenie w(cid:239)asnej wersji niestandardowej zmniejszaj(cid:200)cej wielko(cid:258)(cid:202) pliku 43 1.5. Fundamenty biblioteki jQuery 44 1.5.1. W(cid:239)a(cid:258)ciwo(cid:258)ci, narz(cid:218)dzia i metody 44 1.5.2. 1.5.3. Podsumowanie 49 Obiekt biblioteki jQuery 45 Procedura obs(cid:239)ugi zdarzenia gotowo(cid:258)ci dokumentu 47 1.6. CZ(cid:125)(cid:165)(cid:109) II PODSTAWOWE SK(cid:146)ADNIKI BIBLIOTEKI JQUERY 51 Rozdzia(cid:239) 2. Wybieranie elementów 53 2.1. Wybieranie elementów do modyfikacji 54 2.2. Podstawowe selektory 56 2.2.1. 2.2.2. 2.2.3. 2.2.4. Pobieranie elementów na podstawie ich hierarchii 62 Selektor „wszystko” (lub uniwersalny) 57 Selektor identyfikatora 60 Selektor klasy 61 Selektor elementu 61 2.3. 2.4. Wybieranie elementów za pomoc(cid:200) atrybutów 64 Poleć książkęKup książkę 8 Spis tre(cid:258)ci 2.5. Wprowadzenie do filtrów 68 Filtry po(cid:239)o(cid:285)enia 68 2.5.1. Filtry elementów podrz(cid:218)dnych 69 2.5.2. Filtry formularza 73 2.5.3. Filtry tre(cid:258)ci 74 2.5.4. Inne filtry 75 2.5.5. 2.5.6. Tworzenie filtrów niestandardowych 77 Zwi(cid:218)kszanie wydajno(cid:258)ci za pomoc(cid:200) kontekstu 80 Sprawdzanie umiej(cid:218)tno(cid:258)ci przy u(cid:285)yciu (cid:202)wicze(cid:241) 81 2.7.1. 2.7.2. Podsumowanie 83 (cid:109)wiczenia 82 Rozwi(cid:200)zania 82 2.6. 2.7. 2.8. Rozdzia(cid:239) 3. Przetwarzanie kolekcji biblioteki jQuery 85 3.1. Generowanie nowych elementów HTML 86 3.2. Zarz(cid:200)dzanie kolekcj(cid:200) biblioteki jQuery 89 Okre(cid:258)lanie wielko(cid:258)ci zestawu 91 3.2.1. Uzyskiwanie elementów zestawu 91 3.2.2. Uzyskiwanie zestawów za pomoc(cid:200) relacji 96 3.2.3. 3.2.4. Dopasowywanie zestawu 101 3.2.5. Jeszcze wi(cid:218)cej sposobów u(cid:285)ycia zestawu 110 Podsumowanie 113 3.3. Rozdzia(cid:239) 4. U(cid:285)ycie w(cid:239)a(cid:258)ciwo(cid:258)ci, atrybutów i danych 115 4.1. Definiowanie w(cid:239)a(cid:258)ciwo(cid:258)ci i atrybutów elementów 116 4.2. U(cid:285)ycie atrybutów 119 4.2.1. 4.2.2. 4.2.3. 4.2.4. Pobieranie warto(cid:258)ci atrybutów 119 Ustawianie warto(cid:258)ci atrybutów 120 Usuwanie atrybutów 122 Zabawa z atrybutami 123 4.3. Modyfikowanie w(cid:239)a(cid:258)ciwo(cid:258)ci elementu 125 4.4. 4.5. Przechowywanie danych niestandardowych w elementach 128 Podsumowanie 135 Rozdzia(cid:239) 5. O(cid:285)ywianie stron za pomoc(cid:200) biblioteki jQuery 137 5.1. Zmienianie stylów elementów 138 5.1.1. 5.1.2. Dodawanie i usuwanie nazw klas 138 Uzyskiwanie i ustawianie stylów 143 5.2. Okre(cid:258)lanie zawarto(cid:258)ci elementu 153 5.2.1. 5.2.2. 5.2.3. 5.2.4. Zast(cid:218)powanie kodu HTML lub tre(cid:258)ci tekstowej 153 Przenoszenie elementów 155 Opakowywanie elementów i usuwanie ich opakowania 161 Usuwanie elementów 165 Poleć książkęKup książkę Spis tre(cid:258)ci 9 5.2.5. 5.2.6. Powielanie elementów 167 Zast(cid:218)powanie elementów 168 5.3. Obs(cid:239)uga warto(cid:258)ci elementów formularza 170 5.4. Podsumowanie 172 Rozdzia(cid:239) 6. Zdarzenia s(cid:200) tam, gdzie co(cid:258) si(cid:218) dzieje 173 6.1. Modele zdarze(cid:241) przegl(cid:200)darek 174 6.1.1. Model zdarze(cid:241) poziomu DOM Level 0 175 6.1.2. Model zdarze(cid:241) poziomu DOM Level 2 183 6.1.3. Model przegl(cid:200)darki Internet Explorer 189 6.2. Model zdarze(cid:241) biblioteki jQuery 189 Do(cid:239)(cid:200)czanie procedur obs(cid:239)ugi zdarze(cid:241) w bibliotece jQuery 190 Usuwanie procedur obs(cid:239)ugi zdarze(cid:241) 198 Inspekcja instancji obiektu Event 200 6.2.1. 6.2.2. 6.2.3. 6.2.4. Wyzwalanie procedur obs(cid:239)ugi zdarze(cid:241) 201 6.2.5. Metody skrócone 206 6.2.6. 6.2.7. Podsumowanie 212 Sposób tworzenia zdarze(cid:241) niestandardowych 210 Okre(cid:258)lanie przestrzeni nazw dla zdarze(cid:241) 211 6.3. Rozdzia(cid:239) 7. Demonstracja lokalizatora dysków DVD 215 7.1. 7.2. Praktyczne zastosowanie zdarze(cid:241) (i nie tylko) 216 Filtrowanie du(cid:285)ych zestawów danych 217 7.1.1. 7.1.2. Tworzenie elementów za pomoc(cid:200) replikacji szablonu 219 Tworzenie podstawowego kodu znaczników 221 7.1.3. Dodawanie nowych filtrów 222 7.1.4. Dodawanie szablonów kontrolek 225 7.1.5. 7.1.6. Usuwanie niepo(cid:285)(cid:200)danych filtrów oraz inne zadania 227 7.1.7. Wy(cid:258)wietlanie wyników 227 7.1.8. Podsumowanie 231 Zawsze mo(cid:285)na jeszcze co(cid:258) ulepszy(cid:202) 229 Rozdzia(cid:239) 8. Wzbogacanie stron przy u(cid:285)yciu animacji i efektów 233 8.1. Wy(cid:258)wietlanie i ukrywanie elementów 234 8.1.1. 8.1.2. Implementowanie „modu(cid:239)u” umo(cid:285)liwiaj(cid:200)cego zwijanie 235 Prze(cid:239)(cid:200)czanie stanu wy(cid:258)wietlania elementów 238 8.2. Animowanie stanu wy(cid:258)wietlania elementów 238 Stopniowe wy(cid:258)wietlanie i ukrywanie elementów 239 8.2.1. 8.2.2. Wprowadzenie do strony laboratorium efektów biblioteki jQuery 243 8.2.3. 8.2.4. 8.2.5. Stopniowe rozja(cid:258)nianie i (cid:258)ciemnianie elementów 245 Przesuwanie elementów w gór(cid:218) i w dó(cid:239) 248 Zatrzymywanie animacji 249 8.3. Dodawanie kolejnych funkcji sposobu animacji do biblioteki jQuery 251 Poleć książkęKup książkę 10 Spis tre(cid:258)ci 8.4. Tworzenie animacji niestandardowych 253 8.4.1. 8.4.2. 8.4.3. Niestandardowa animacja skalowania 256 Niestandardowa animacja efektu opadania 257 Niestandardowa animacja efektu rozpraszania 258 8.5. Animacje i kolejkowanie 260 Jednocze(cid:258)nie wykonywane animacje 260 Kolejkowanie funkcji do wykonania 262 8.5.1. 8.5.2. 8.5.3. Wstawianie funkcji do kolejek efektów 268 Podsumowanie 269 8.6. Rozdzia(cid:239) 9. Poza modelem DOM — funkcje narz(cid:218)dziowe biblioteki jQuery 271 9.1. U(cid:285)ycie w(cid:239)a(cid:258)ciwo(cid:258)ci biblioteki jQuery 272 9.1.1. Wy(cid:239)(cid:200)czanie animacji 273 9.1.2. 9.1.3. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) $.support 274 Zmiana szybko(cid:258)ci animacji 273 9.2. U(cid:285)ycie innych bibliotek z bibliotek(cid:200) jQuery 275 9.3. Modyfikowanie obiektów i kolekcji j(cid:218)zyka JavaScript 279 Obcinanie (cid:239)a(cid:241)cuchów 280 Iteracja w(cid:239)a(cid:258)ciwo(cid:258)ci i kolekcji 281 Filtrowanie tablic 283 Translacja tablic 285 9.3.1. 9.3.2. 9.3.3. 9.3.4. 9.3.5. Wi(cid:218)cej zabawy z tablicami j(cid:218)zyka JavaScript 286 9.3.6. 9.3.7. 9.3.8. 9.3.9. Rozszerzanie obiektów 290 Serializacja warto(cid:258)ci parametrów 292 Testowanie obiektów 296 Analizowanie funkcji 299 9.4. Ró(cid:285)ne funkcje narz(cid:218)dziowe 302 Nie wykonuj(cid:200)c (cid:285)adnego dzia(cid:239)ania 302 Sprawdzanie przynale(cid:285)no(cid:258)ci 303 9.4.1. 9.4.2. 9.4.3. Wst(cid:218)pne wi(cid:200)zanie kontekstów funkcji 304 9.4.4. 9.4.5. Podsumowanie 308 Okre(cid:258)lanie warto(cid:258)ci wyra(cid:285)e(cid:241) 306 Zg(cid:239)aszanie wyj(cid:200)tków 307 9.5. Rozdzia(cid:239) 10. Komunikacja z serwerem z wykorzystaniem technologii Ajax 309 10.1. Od(cid:258)wie(cid:285)enie informacji o technologii Ajax 310 10.1.1. Tworzenie instancji obiektu XHR 310 Inicjowanie (cid:285)(cid:200)dania 313 10.1.2. 10.1.3. (cid:165)ledzenie post(cid:218)pu dzia(cid:239)a(cid:241) 314 10.1.4. Uzyskiwanie odpowiedzi 314 10.2. (cid:146)adowanie zawarto(cid:258)ci do elementów 315 10.2.1. (cid:146)adowanie zawarto(cid:258)ci za pomoc(cid:200) kodu jQuery 317 10.2.2. (cid:146)adowanie fragmentów dynamicznego kodu HTML 321 Poleć książkęKup książkę Spis tre(cid:258)ci 11 10.3. Tworzenie (cid:285)(cid:200)da(cid:241) GET i POST 325 10.3.1. Uzyskiwanie danych za pomoc(cid:200) metody GET 327 10.3.2. Uzyskiwanie danych formatu JSON 329 10.3.3. Dynamiczne (cid:239)adowanie skryptu 330 10.3.4. Tworzenie (cid:285)(cid:200)da(cid:241) metody POST 332 10.3.5. Implementowanie kaskadowych elementów rozwijanych 333 10.4. Przejmowanie pe(cid:239)nej kontroli nad (cid:285)(cid:200)daniem Ajax 338 10.4.1. Tworzenie (cid:285)(cid:200)da(cid:241) Ajax z wszystkimi dodatkami 338 10.4.2. Ustawianie warto(cid:258)ci domy(cid:258)lnych (cid:285)(cid:200)dania 342 10.4.3. Obs(cid:239)uga zdarze(cid:241) Ajax 344 10.4.4. Zaawansowane funkcje narz(cid:218)dziowe Ajax 348 10.5. Podsumowanie 350 Rozdzia(cid:239) 11. Demonstracja formularza kontaktowego wykorzystuj(cid:200)cego technologi(cid:218) Ajax 351 11.1. Funkcje projektu 352 11.2. Tworzenie kodu znaczników 354 11.3. Implementowanie kodu serwerowego PHP 355 11.4. Sprawdzanie poprawno(cid:258)ci pól z wykorzystaniem technologii Ajax 357 11.5. Jeszcze wi(cid:218)cej zabawy z technologi(cid:200) Ajax 359 11.5.1. Ukrywanie okna dialogowego 361 11.6. Poprawianie komfortu pracy u(cid:285)ytkownika za pomoc(cid:200) efektów 362 11.6.1. Prze(cid:239)(cid:200)czanie efektów 362 11.7. Uwaga dotycz(cid:200)ca dost(cid:218)pno(cid:258)ci 363 11.8. Podsumowanie 365 CZ(cid:125)(cid:165)(cid:109) III ZAAWANSOWANE ZAGADNIENIA 367 Rozdzia(cid:239) 12. Gdy biblioteka jQuery nie wystarcza, na ratunek przychodz(cid:200) dodatki 369 12.1. Dlaczego warto rozszerza(cid:202) bibliotek(cid:218) jQuery? 370 12.2. Znajdowanie dodatków 371 12.2.1. Metoda u(cid:285)ycia (dobrze zaprojektowanego) dodatku 371 12.2.2. Znakomite dodatki do zastosowania w projektach 375 12.3. Wytyczne dotycz(cid:200)ce tworzenia dodatku biblioteki jQuery 375 12.3.1. Konwencje nazewnicze dotycz(cid:200)ce plików i funkcji 376 12.3.2. Uwa(cid:285)aj na skrót $ 378 12.3.3. Ujarzmianie z(cid:239)o(cid:285)onych list parametrów 378 12.3.4. Pozosta(cid:241) przy jednej przestrzeni nazw 381 12.3.5. Okre(cid:258)lanie przestrzeni nazw dla zdarze(cid:241) i danych 384 12.3.6. Utrzymywanie mo(cid:285)liwo(cid:258)ci tworzenia (cid:239)a(cid:241)cucha metod 389 12.3.7. Zapewnienie dost(cid:218)pu publicznego do ustawie(cid:241) domy(cid:258)lnych 389 Poleć książkęKup książkę 12 Spis tre(cid:258)ci 12.4. Demonstracja tworzenia pokazu slajdów w postaci dodatku biblioteki jQuery 392 12.4.1. Definiowanie kodu znaczników 394 12.4.2. Tworzenie dodatku Jqia Photomatic 396 12.5. Tworzenie niestandardowych funkcji narz(cid:218)dziowych 403 12.5.1. Tworzenie funkcji formatuj(cid:200)cej dat(cid:218) 404 12.6. Podsumowanie 408 Rozdzia(cid:239) 13. Unikni(cid:218)cie „piek(cid:239)a wywo(cid:239)a(cid:241) zwrotnych” za pomoc(cid:200) obiektu Deferred 409 13.1. Wprowadzenie do obietnic 410 13.2. Obiekty Deferred i Promise 414 13.3. Metody obiektu Deferred 415 Powiadamianie o post(cid:218)pie procesu zwi(cid:200)zanego z obiektem Deferred 423 (cid:165)ledzenie post(cid:218)pu 424 13.3.1. Rozstrzyganie lub odrzucanie obiektu Deferred 415 13.3.2. Wykonywanie funkcji podczas rozstrzygania lub odrzucania 417 13.3.3. Metoda when() 420 13.3.4. 13.3.5. 13.3.6. U(cid:285)ycie obiektu Promise 426 13.3.7. Krótkie omówienie metody then() 429 13.3.8. 13.3.9. Okre(cid:258)lanie stanu obiektu Deferred 433 Zawsze wykonuj procedur(cid:218) obs(cid:239)ugi zdarze(cid:241) 433 13.4. Stosowanie obietnic dla wszystkiego 434 13.5. Podsumowanie 436 Rozdzia(cid:239) 14. Wykonywanie testów jednostkowych za pomoc(cid:200) biblioteki QUnit 437 14.1. Dlaczego testowanie odgrywa wa(cid:285)n(cid:200) rol(cid:218)? 438 14.1.1. Dlaczego testowanie jednostkowe? 439 14.1.2. (cid:165)rodowiska testowania jednostkowego kodu JavaScript 441 14.2. Pierwsze kroki ze (cid:258)rodowiskiem QUnit 442 14.3. Tworzenie testów na potrzeby kodu synchronicznego 445 14.4. Testowanie kodu za pomoc(cid:200) asercji 446 14.4.1. Metody equal(), strictEqual(), notEqual() i notStrictEqual() 447 14.4.2. 14.4.3. Metoda asercji throws() 451 Inne metody asercji 450 14.5. Testowanie zada(cid:241) asynchronicznych 453 14.6. Opcje noglobals i notrycatch 455 14.7. Grupowanie testów w modu(cid:239)ach 456 14.8. Konfigurowanie (cid:258)rodowiska QUnit 458 14.9. Przyk(cid:239)adowy pakiet testów 459 14.10. Podsumowanie 463 Poleć książkęKup książkę Spis tre(cid:258)ci 13 Rozdzia(cid:239) 15. Wykorzystanie biblioteki jQuery w du(cid:285)ych projektach 465 15.1. Zwi(cid:218)kszanie wydajno(cid:258)ci selektorów 467 15.1.1. Unikanie selektora uniwersalnego 467 15.1.2. Ulepszanie selektora klasy 468 15.1.3. Nie nadu(cid:285)ywaj parametru context 468 15.1.4. Optymalizowanie filtrów 469 15.1.5. Nie okre(cid:258)laj przesadnie selektorów 471 15.2. Organizowanie kodu w modu(cid:239)ach 471 15.2.1. Wzorzec oparty na litera(cid:239)ach obiektowych 472 15.2.2. Wzorzec oparty na modu(cid:239)ach 473 15.3. (cid:146)adowanie modu(cid:239)ów za pomoc(cid:200) biblioteki RequireJS 475 15.3.1. Rozpocz(cid:218)cie pracy z bibliotek(cid:200) RequireJS 475 15.3.2. U(cid:285)ycie biblioteki RequireJS z bibliotek(cid:200) jQuery 477 15.4. Zarz(cid:200)dzanie zale(cid:285)no(cid:258)ciami za pomoc(cid:200) narz(cid:218)dzia Bower 479 15.4.1. Rozpocz(cid:218)cie pracy z narz(cid:218)dziem Bower 479 15.4.2. Wyszukiwanie pakietu 481 15.4.3. Instalowanie, aktualizowanie i usuwanie pakietów 481 15.5. Tworzenie aplikacji z jedn(cid:200) stron(cid:200) za pomoc(cid:200) (cid:258)rodowiska Backbone.js 483 15.5.1. Dlaczego nale(cid:285)y u(cid:285)ywa(cid:202) (cid:258)rodowiska MV*? 485 15.5.2. Rozpocz(cid:218)cie pracy ze (cid:258)rodowiskiem Backbone.js 485 15.5.3. Tworzenie aplikacji mened(cid:285)era zada(cid:241) do wykonania za pomoc(cid:200) (cid:258)rodowiska Backbone.js 490 15.6. Podsumowanie 500 15.7. Zako(cid:241)czenie 502 DODATKI 503 Dodatek A J(cid:218)zyk JavaScript, jaki musisz zna(cid:202), cho(cid:202) by(cid:202) mo(cid:285)e tak nie jest 505 A.1. Podstawowe informacje o typie danych Object j(cid:218)zyka JavaScript 506 A.1.1. W jaki sposób powstaj(cid:200) obiekty? 506 A.1.2. W(cid:239)a(cid:258)ciwo(cid:258)ci obiektów 507 A.1.3. A.1.4. Litera(cid:239)y obiektowe 509 Obiekty jako w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu window 510 A.2. Funkcje jako „obywatele pierwszej klasy” 511 A.2.1. Wyra(cid:285)enia funkcji i ich deklaracje 511 A.2.2. Funkcje jako wywo(cid:239)ania zwrotne 513 A.2.3. Jakie jest przeznaczenie s(cid:239)owa kluczowego this? 514 A.2.4. Domkni(cid:218)cia 518 A.2.5. Wzorzec IIFE 520 A.3. Podsumowanie 522 Skorowidz 523 Poleć książkęKup książkę 14 Spis tre(cid:258)ci Poleć książkęKup książkę Wprowadzenie do biblioteki jQuery W rozdziale omówiono nast(cid:266)puj(cid:261)ce zagadnienia: (cid:81) Dok(cid:225)adne przeznaczenie biblioteki jQuery i powody, dla których nale(cid:298)y z niej korzysta(cid:252). (cid:81) Strategia przejrzysto(cid:286)ci kodu JavaScript. (cid:81) Wybór w(cid:225)a(cid:286)ciwej wersji biblioteki jQuery. (cid:81) Podstawowe elementy biblioteki jQuery i zwi(cid:261)zane z ni(cid:261) poj(cid:266)cia. „Istniej(cid:200) tylko dwa rodzaje j(cid:218)zyków: takie, na które ludzie narzekaj(cid:200), oraz takie, z któ- rych nikt nie korzysta”. Zdanie to, wypowiedziane przez Bjarne’a Stroustrupa, który zaprojektowa(cid:239) i zaimplementowa(cid:239) j(cid:218)zyk C++, bardzo dobrze podsumowuje odczucia zwi(cid:200)zane z j(cid:218)zykiem JavaScript. Nad tym, a tak(cid:285)e nad kilkoma innymi j(cid:218)zykami (a szcze- gólnie j(cid:218)zykiem PHP) „lamentowano” przez kilka lat, uwa(cid:285)aj(cid:200)c je za „z(cid:239)e” j(cid:218)zyki. Pó(cid:283)niej sta(cid:239)o si(cid:218) co(cid:258) magicznego. Dzi(cid:218)ki pojawieniu si(cid:218) technologii Ajax, udost(cid:218)pnieniu kilku bibliotek, takich jak Prototype, Moo Tools i jQuery, a tak(cid:285)e nowych aplikacji interneto- wych o du(cid:285)ym poziomie interaktywno(cid:258)ci (by(cid:202) mo(cid:285)e spotka(cid:239)e(cid:258) si(cid:218) równie(cid:285) z okre(cid:258)la- niem ich mianem aplikacji z pojedyncz(cid:200) stron(cid:200)) projektanci zacz(cid:218)li uzmys(cid:239)awia(cid:202) sobie potencja(cid:239) j(cid:218)zyka JavaScript. Obecnie j(cid:218)zyk ten jest równie(cid:285) jednym z najbardziej wszechobecnych dzi(cid:218)ki (cid:258)rodowisku Node.js, czyli platformie, która umo(cid:285)liwia u(cid:285)ycie j(cid:218)zyka JavaScript jako j(cid:218)zyka serwerowego, a tak(cid:285)e dzi(cid:218)ki (cid:258)rodowisku PhoneGap s(cid:239)u(cid:285)(cid:200)- cemu do tworzenia hybrydowych aplikacji dla urz(cid:200)dze(cid:241) przeno(cid:258)nych. Poleć książkęKup książkę 32 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery Biblioteka jQuery to darmowa (obj(cid:218)ta licencj(cid:200) MIT License) i popularna biblio- teka j(cid:218)zyka JavaScript stworzona przez Johna Resiga w 2006 r. Zosta(cid:239)a zapro- jektowana w celu uproszczenia tworzenia skryptów HTML po stronie klienta. Jak stwierdzono w witrynie internetowej biblioteki jQuery, jest to szybka, nie- wielka i bogata w mo(cid:285)liwo(cid:258)ci biblioteka j(cid:218)zyka JavaScript. Dzi(cid:218)ki (cid:239)atwemu w u(cid:285)yciu interfejsowi API, który wspó(cid:239)pracuje z wieloma przegl(cid:200)darkami, biblio- teka znacznie upraszcza wykonywanie takich operacji jak przechodzenie w obr(cid:218)bie dokumentów HTML i modyfikowanie ich, tworzenie animacji oraz obs(cid:239)ugiwa- nie zdarze(cid:241) i technologii Ajax. W po(cid:239)(cid:200)czeniu z wszechstronno(cid:258)ci(cid:200) i rozszerzal- no(cid:258)ci(cid:200) biblioteka jQuery zmieni(cid:239)a sposób, w jaki miliony osób tworz(cid:200) kod JavaScript. Cho(cid:202) tre(cid:258)(cid:202) powy(cid:285)szego stwierdzenia mo(cid:285)esz uzna(cid:202) za maj(cid:200)c(cid:200) charakter troch(cid:218) auto- promocyjny lub „arogancki”, zawiera ona sam(cid:200) prawd(cid:218). Biblioteka jQuery naprawd(cid:218) zmieni(cid:239)a to, jak miliony projektantów pisze swój kod. Zastosowanie tej biblioteki jest tak powszechne, (cid:285)e zgodnie z danymi statystycznymi serwisu BuiltWith (z kwietnia 2015 r.) biblioteka jQuery u(cid:285)ywana jest w przypadku 63 miliona czo(cid:239)owych witryn internetowych (http://trends.builtwith.com/javascript/jQuery). Wspomniana wcze(cid:258)niej biblioteka Moo Tools, która jest g(cid:239)ównym konkurentem biblioteki jQuery, wykorzysty- wana jest jedynie w wypadku 3 witryn (http://trends.builtwith.com/javascript/MooTools), natomiast biblioteka Prototype mo(cid:285)e si(cid:218) „pochwali(cid:202)” wynikiem wynosz(cid:200)cym zaledwie 2,5 (http://trends.builtwith.com/javascript/Prototype). Biblioteka jQuery u(cid:285)ywana jest przez cz(cid:218)(cid:258)(cid:202) spo(cid:258)ród najwa(cid:285)niejszych na (cid:258)wiecie firm i witryn internetowych, takich jak Microsoft, Amazon, Dell, Etsy, Netflix, Best Buy, Instagram, Fox News, GoDaddy oraz wiele innych. Je(cid:258)li mia(cid:239)e(cid:258) jakiekolwiek w(cid:200)tpli- wo(cid:258)ci zwi(cid:200)zane z t(cid:200) bibliotek(cid:200), te dane powinny przekona(cid:202) Ci(cid:218), (cid:285)e jest to stabilna i niezawodna biblioteka, której mo(cid:285)esz u(cid:285)y(cid:202) w swoich projektach. W ksi(cid:200)(cid:285)ce omówiono wiele aspektów biblioteki, pocz(cid:200)wszy od podstawowych poj(cid:218)(cid:202), takich jak selektory i metody umo(cid:285)liwiaj(cid:200)ce przechodzenie w obr(cid:218)bie modelu DOM (Document Object Model), a sko(cid:241)czywszy na bardziej zaawansowanych zagadnieniach, takich jak rozszerzanie funkcjonalno(cid:258)ci (tworzenie dodatków), zwi(cid:218)kszanie wydajno(cid:258)ci kodu i testowanie. Przyj(cid:218)to, (cid:285)e dysponujesz znajomo(cid:258)ci(cid:200) j(cid:218)zyka JavaScript w mini- malnym stopniu. Je(cid:258)li musisz sobie od(cid:258)wie(cid:285)y(cid:202) posiadan(cid:200) wiedz(cid:218), zajrzyj do dodatku. Je(cid:285)eli nie jeste(cid:258) zaznajomiony z j(cid:218)zykiem, mo(cid:285)esz uzna(cid:202) tre(cid:258)(cid:202) ksi(cid:200)(cid:285)ki za trudn(cid:200), dlatego zach(cid:218)camy do poznania j(cid:218)zyka, a nast(cid:218)pnie powrócenia do tej ksi(cid:200)(cid:285)ki. Poczekamy. Czy wróci(cid:239)e(cid:258)? Mi(cid:239)o Ci(cid:218) widzie(cid:202) ponownie! Zacznijmy od pocz(cid:200)tku, czyli od omó- wienia tego, co biblioteka jQuery ma do zaoferowania, a tak(cid:285)e tego, jak mo(cid:285)e pomóc w procesie projektowania aplikacji internetowych. 1.1. Pisz mniej, a rób wi(cid:266)cej Motto biblioteki jQuery brzmi nast(cid:218)puj(cid:200)co: „Pisz mniej, a rób wi(cid:218)cej”. Je(cid:258)li kiedy- kolwiek po(cid:258)wi(cid:218)ci(cid:239)e(cid:258) czas na podejmowanie prób dodania do utworzonych stron ele- mentów dynamicznych, to prawdopodobnie stwierdzi(cid:239)e(cid:258), (cid:285)e wykonywanie prostych Poleć książkęKup książkę 1.1. Pisz mniej, a rób wi(cid:218)cej 33 zada(cid:241) za pomoc(cid:200) czystego kodu JavaScript mo(cid:285)e wygenerowa(cid:202) dziesi(cid:200)tki wierszy kodu. Twórca biblioteki jQuery napisa(cid:239) j(cid:200) specjalnie z my(cid:258)l(cid:200) o sprawieniu, (cid:285)e typowe zadania stan(cid:200) si(cid:218) trywialne i (cid:239)atwe do opanowania, a ponadto umo(cid:285)liwi(cid:200) rozwi(cid:200)zanie proble- mów spowodowanych przez niezgodno(cid:258)(cid:202) przegl(cid:200)darek. Ka(cid:285)dy, kto na przyk(cid:239)ad mia(cid:239) do czynienia z przyciskami opcji w kodzie JavaScript, wie, (cid:285)e ma(cid:239)o ciekawym do(cid:258)wiadczeniem jest stwierdzanie, jaki element przycisku opcji grupy takich przycisków jest w danym momencie zaznaczony, a tak(cid:285)e uzyskiwanie war- to(cid:258)ci atrybutu value takiego elementu. Grupa przycisków opcji wymaga zlokalizowania, a ka(cid:285)dy element przycisku opcji wynikowego zestawu musi kolejno zosta(cid:202) poddany inspekcji w celu okre(cid:258)lenia, dla którego elementu ustawiono atrybut checked. Atrybut value takiego elementu mo(cid:285)e nast(cid:218)pnie zosta(cid:202) uzyskany. Aby zapewni(cid:202) zgodno(cid:258)(cid:202) z przegl(cid:200)dark(cid:200) Internet Explorer 6 i jej nowszymi wersjami (je(cid:258)li zignorujesz niektóre starsze przegl(cid:200)darki, istnieje lepsze rozwi(cid:200)zanie), odpowiedni kod mo(cid:285)na zaimplementowa(cid:202) w nast(cid:218)puj(cid:200)cy sposób: var checkedValue; var elements = document.getElementsByTagName( input ); for (var i = 0; i elements.length; i++) { if (elements[i].type === radio elements[i].name === some-radio-group elements[i].checked) { checkedValue = elements[i].value; break; } } Powy(cid:285)szy kod porównaj ze sposobem osi(cid:200)gni(cid:218)cia tego samego za pomoc(cid:200) biblioteki jQuery: var checkedValue = jQuery( input:radio[name= some-radio-group ]:checked ).val(); Nie martw si(cid:218), je(cid:258)li kod wygl(cid:200)da teraz troch(cid:218) tajemniczo. Wkrótce zrozumiesz, jakie jest jego dzia(cid:239)anie, a ponadto b(cid:218)dziesz tworzy(cid:202) w(cid:239)asne krótkie, ale bogate w mo(cid:285)liwo(cid:258)ci instrukcje biblioteki jQuery, aby zapewni(cid:202) dynamik(cid:218) swoim stronom. W tym miejscu zmierzamy do pokazania, jak biblioteka umo(cid:285)liwia zamian(cid:218) mnóstwa wierszy kodu na tylko jeden wiersz. To, co sprawia, (cid:285)e powy(cid:285)sza instrukcja biblioteki jQuery jest taka krótka, to du(cid:285)e mo(cid:285)liwo(cid:258)ci selektora, czyli wyra(cid:285)enia u(cid:285)ywanego do identyfikowania elementów doce- lowych na stronie. Selektor daje mo(cid:285)liwo(cid:258)(cid:202) (cid:239)atwego lokalizowania i pobierania wymaga- nych elementów. W tym przypadku jest to wybrany element w grupie przycisków opcji. Je(cid:258)li nie pobra(cid:239)e(cid:258) jeszcze przyk(cid:239)adowego kodu, b(cid:218)dzie teraz znakomity moment, aby tak post(cid:200)pi(cid:202). Kod mo(cid:285)esz pobra(cid:202) pod adresem: . Po rozpakowaniu archiwum z kodem w przegl(cid:200)darce za(cid:239)aduj stron(cid:218) HTML znajduj(cid:200)c(cid:200) si(cid:218) w pliku rozdzial_1/ radio.group.html. W przypadku tej strony (rysunek 1.1) do okre(cid:258)lenia, jaki zosta(cid:239) wybrany przycisk opcji, u(cid:285)ywana jest wcze(cid:258)niej zaprezentowana instrukcja biblioteki jQuery. W omawianym przyk(cid:239)adzie pokazano, jak prosty i zwi(cid:218)z(cid:239)y mo(cid:285)e by(cid:202) kod utworzony za pomoc(cid:200) biblioteki jQuery. Nie jest to jedyny atut tej biblioteki. Je(cid:258)li by(cid:239)oby inaczej, dawno temu by si(cid:218) jej pozbyto. Niemniej jednak jedn(cid:200) z najwi(cid:218)kszych zalet biblioteki Poleć książkęKup książkę 34 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery Rysunek 1.1. Okre(cid:286)lanie, jaki przycisk opcji zosta(cid:225) wybrany, jest proste do zrealizowania za pomoc(cid:261) jednej instrukcji z kodem biblioteki jQuery! jQuery jest zapewnianie przez ni(cid:200) mo(cid:285)liwo(cid:258)ci uzyskiwania elementów za pomoc(cid:200) z(cid:239)o(cid:285)onych selektorów bez przejmowania si(cid:218) kwesti(cid:200) zgodno(cid:258)ci z ró(cid:285)nymi przegl(cid:200)dar- kami, a zw(cid:239)aszcza ze starszymi. Przy wykonywaniu operacji wybierania bazujesz na dwóch elementach, a miano- wicie na metodzie i selektorze. Obecnie najnowsze wersje wszystkich podstawowych przegl(cid:200)darek obs(cid:239)uguj(cid:200) metody macierzyste s(cid:239)u(cid:285)(cid:200)ce do wybierania elementów, takie jak document.querySelector() i document.querySelectorAll(). Umo(cid:285)liwiaj(cid:200) one zastoso- wanie bardziej z(cid:239)o(cid:285)onych selektorów zamiast zwyk(cid:239)ej operacji wybierania w oparciu o identyfikator lub klas(cid:218). Ponadto nowe selektory arkuszy stylów CSS3 s(cid:200) powszechnie obs(cid:239)ugiwane przez nowoczesne przegl(cid:200)darki. Je(cid:258)li zdecydowa(cid:239)by(cid:258) si(cid:218) obs(cid:239)ugiwa(cid:202) tylko takie przegl(cid:200)darki, a mo(cid:285)liwo(cid:258)ci biblioteki jQuery zwi(cid:200)zane by(cid:239)yby wy(cid:239)(cid:200)cznie z wybieraniem elementów, dost(cid:218)pna by(cid:239)aby moc obliczeniowa wystarczaj(cid:200)ca do tego, aby pomin(cid:200)(cid:202) obci(cid:200)(cid:285)enie wynikaj(cid:200)ce z zastosowania biblioteki w witrynie internetowej. To, (cid:285)e wiele osób nadal bazuje na starszych przegl(cid:200)darkach, do których obs(cid:239)ugi mo(cid:285)esz by(cid:202) zmuszony, mo(cid:285)e by(cid:202) rzeczywistym utrudnieniem, gdy(cid:285) konieczne jest zajmowanie si(cid:218) wszystkimi nie- spójno(cid:258)ciami. Jest to jeden z g(cid:239)ównych powodów wykorzystania biblioteki jQuery. Umo(cid:285)liwia ona u(cid:285)ycie jej selektorów w niezawodny sposób bez obaw, (cid:285)e kod nie zadzia(cid:239)a w przegl(cid:200)darkach, które nie obs(cid:239)uguj(cid:200) ich we w(cid:239)asnym zakresie. UWAGA Je(cid:258)li zastanawiasz si(cid:218), jakie przegl(cid:200)darki s(cid:200) obecnie uwa(cid:285)ane za nowo- czesne, to s(cid:200) nimi: Internet Explorer w wersji 10 i nowszych, a tak(cid:285)e najnowsze wersje przegl(cid:200)darek Chrome, Opera, Firefox i Safari. Czy nadal nie jeste(cid:258) przekonany? Pod adresem http://goo.gl/eULyPT dost(cid:218)pna jest lista problemów, którymi musisz si(cid:218) zaj(cid:200)(cid:202) we w(cid:239)asnym zakresie, gdy nie u(cid:285)ywasz biblio- teki jQuery. Jak ju(cid:285) wspomniano, biblioteka zapewnia znacznie wi(cid:218)cej mo(cid:285)liwo(cid:258)ci, o których dowiesz si(cid:218) w pozosta(cid:239)ej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki. Dowiedzmy si(cid:218) teraz, jak kod JavaScript powinien by(cid:202) u(cid:285)ywany na tworzonych stronach. 1.2. Przejrzysty kod JavaScript By(cid:202) mo(cid:285)e pami(cid:218)tasz nie najlepsze czasy przed pojawieniem si(cid:218) arkuszy stylów CSS, gdy w obr(cid:218)bie stron HTML konieczne by(cid:239)o (cid:239)(cid:200)czenie znaczników okre(cid:258)laj(cid:200)cych styl ze znacznikami struktury dokumentu. Ka(cid:285)dy, kto tworzy(cid:239) strony przez dowolny czas, z pewno(cid:258)ci(cid:200) musia(cid:239) tak post(cid:218)powa(cid:202) (czemu najprawdopodobniej nie towarzyszy(cid:239)o uczucie sympatii). Poleć książkęKup książkę 1.2. Przejrzysty kod JavaScript 35 Dodanie arkuszy stylów CSS do zestawów narz(cid:218)dziowych u(cid:285)ywanych do projek- towania aplikacji internetowych pozwala na oddzielenie informacji o stylach od struktury dokumentu, a farsom w rodzaju znacznika font zapewnia „naprawd(cid:218) zas(cid:239)u(cid:285)onego kopniaka”. Separacja stylu od struktury nie tylko u(cid:239)atwia zarz(cid:200)dzanie dokumentami, ale te(cid:285) oferuje wszechstronno(cid:258)(cid:202) pozwalaj(cid:200)c(cid:200) na ca(cid:239)kowit(cid:200) zmian(cid:218) renderowania strony pod wzgl(cid:218)dem stylistycznym, polegaj(cid:200)c(cid:200) na wymianie ró(cid:285)nych arkuszy stylów. Niewielu z czytelników dobrowolnie cofn(cid:218)(cid:239)oby si(cid:218) do czasów, gdy style stosowano przy u(cid:285)yciu elementów HTML. Okazuje si(cid:218), (cid:285)e ponadto w dalszym ci(cid:200)gu zbyt powszechne s(cid:200) znaczniki podobne do nast(cid:218)puj(cid:200)cych: button onclick= document.getElementById( xyz ).style.color= red ; Kliknij mnie /button Z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)esz zauwa(cid:285)y(cid:202), (cid:285)e styl tego elementu button nie jest stosowany przy u(cid:285)yciu znacznika font oraz innych przestarza(cid:239)ych znaczników powi(cid:200)zanych ze stylem. Styl elementu jest okre(cid:258)lany przez dowolne (cid:127) je(cid:258)li zosta(cid:239)y zdefiniowane (cid:127) regu(cid:239)y arkuszy stylów CSS (ich kodu tutaj nie pokazano), które obowi(cid:200)zuj(cid:200) na stronie. Cho(cid:202) taka deklaracja nie (cid:239)(cid:200)czy znaczników stylu ze struktur(cid:200), wi(cid:200)(cid:285)e z ni(cid:200) zachowanie. Deklara- cja uwzgl(cid:218)dnia kod JavaScript wykonywany w momencie klikni(cid:218)cia przycisku jako cz(cid:218)(cid:258)(cid:202) znacznika elementu button za po(cid:258)rednictwem atrybutu onclick (w tym przy- padku atrybut zmienia na czerwony kolor elementu modelu DOM z identyfikatorem o warto(cid:258)ci xyz). Sprawd(cid:283)my, jak w tej sytuacji mo(cid:285)na wprowadzi(cid:202) ulepszenia. 1.2.1. Oddzielanie zachowania od struktury Z wszystkich tych samych powodów, dla których po(cid:285)(cid:200)dane jest rozdzielenie stylu i struktury w obr(cid:218)- bie dokumentu HTML, tak samo korzystne (je(cid:258)li nawet nie bardziej) jest odseparowanie zachowania od struktury. W idealnej sytuacji struktura strony HTML powinna by(cid:202) podobna do pokazanej na rysun- ku 1.2. W jej wypadku struktura, styl i zachowanie s(cid:200) (cid:239)adnie wydzielone w obr(cid:218)bie w(cid:239)asnego obszaru. Strategia ta, okre(cid:258)lana mianem przejrzystego kodu JavaScript, jest obecnie uwzgl(cid:218)dniana przez ka(cid:285)d(cid:200) bardziej znan(cid:200) bibliotek(cid:218) j(cid:218)zyka JavaScript. U(cid:239)atwia to twórcom stron uzyskiwanie takiej przydatnej sepa- racji w obr(cid:218)bie swoich stron. Rdze(cid:241) biblioteki jQuery, która spopularyzowa(cid:239)a t(cid:218) strategi(cid:218), jest odpowiednio zoptymalizowany pod k(cid:200)tem (cid:239)atwego generowania przejrzystego kodu JavaScript. W przypadku takiego kodu za niepoprawne uznane zostan(cid:200) dowolne wyra- (cid:285)enia lub instrukcje j(cid:218)zyka JavaScript umieszczone w obr(cid:218)bie znaczników HTML w sekcji body stron Rysunek 1.2. Dzi(cid:266)ki przejrzystemu rozmieszczeniu w obr(cid:266)bie strony struktury, stylu i zachowania w osobnych obszarach maksymalnie zwi(cid:266)kszana jest czytelno(cid:286)(cid:252) i mo(cid:298)liwo(cid:286)(cid:252) utrzymania kodu Poleć książkęKup książkę 36 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery HTML, które to wyra(cid:285)enia lub instrukcje s(cid:200) atrybutami elementów HTML (np. onclick) albo zawarte s(cid:200) w blokach skryptu zlokalizowanych w dowolnym miejscu innym ni(cid:285) sam koniec sekcji body strony. Mo(cid:285)esz zada(cid:202) nast(cid:218)puj(cid:200)ce pytanie: „Jak jednak mog(cid:218) skonfigurowa(cid:202) przycisk bez atrybutu onlick?”. Przyjrzyj si(cid:218) nast(cid:218)puj(cid:200)cej modyfikacji elementu przycisku: button id= test-button Kliknij mnie /button Du(cid:285)o pro(cid:258)ciej! Teraz jednak zauwa(cid:285)ysz, (cid:285)e przycisk nie wykonuje (cid:285)adnego dzia(cid:239)ania. Mo(cid:285)esz klika(cid:202) przycisk przez ca(cid:239)y dzie(cid:241), a nie spowoduje to (cid:285)adnego dzia(cid:239)ania. Poprawmy to. 1.2.2. Oddzielanie skryptu Zamiast osadza(cid:202) w znacznikach przycisku informacje o jego zachowaniu, dokonasz oddzielenia skryptu przez przeniesienie go do bloku script. Post(cid:218)puj(cid:200)c zgodnie z obo- wi(cid:200)zuj(cid:200)cymi obecnie najlepszymi praktykami, skrypt nale(cid:285)y umie(cid:258)ci(cid:202) na dole strony przed zamykaj(cid:200)cym znacznikiem /body : script document.getElementById( test-button ).addEventListener( click , function() { document.getElementById( xyz ).style.color = red ; }, false ); /script Poniewa(cid:285) skrypt umieszczasz u do(cid:239)u strony, nie musisz u(cid:285)ywa(cid:202) procedury obs(cid:239)ugi powi(cid:200)zanej ze zdarzeniem onload obiektu window, po jak(cid:200) (nies(cid:239)usznie) w przesz(cid:239)o(cid:258)ci si(cid:218)gali projektanci, albo czeka(cid:202) na zdarzenie DOMContentLoaded, które dost(cid:218)pne jest tylko w nowoczesnych przegl(cid:200)darkach. Zdarzenie to jest aktywowane w momencie ca(cid:239)kowitego za(cid:239)adowania i przeanalizowania dokumentu HTML bez oczekiwania na zako(cid:241)czenie (cid:239)adowania arkuszy stylów, obrazów itp. Zdarzenie load wyzwalane jest w chwili uko(cid:241)czenia (cid:239)adowania strony HTML oraz jej zasobów zale(cid:285)nych (do tego tematu powrócimy w punkcie 1.5.3). Dzi(cid:218)ki umieszczeniu skryptu na dole strony, gdy przegl(cid:200)darka analizuje instrukcj(cid:218), element button istnieje, poniewa(cid:285) jego znaczniki zosta(cid:239)y poddane analizie. Oznacza to, (cid:285)e mo(cid:285)esz bezpiecznie element rozszerzy(cid:202). UWAGA Ze wzgl(cid:218)dów wydajno(cid:258)ciowych elementy script zawsze powinny by(cid:202) umiejscawiane na dole tre(cid:258)ci dokumentu. Pierwszym powodem jest umo(cid:285)li- wienie renderowania progresywnego, a drugim zapewnienie zwi(cid:218)kszenia rów- noleg(cid:239)o(cid:258)ci operacji pobierania. Uzasadnieniem pierwszego powodu jest to, (cid:285)e renderowanie jest blokowane dla ca(cid:239)ej tre(cid:258)ci znajduj(cid:200)cej si(cid:218) poni(cid:285)ej elementu script. Drugi powód wynika z tego, (cid:285)e przegl(cid:200)darka nie rozpocznie (cid:285)adnych innych operacji pobierania (nawet w wypadku innej nazwy hosta), je(cid:258)li pobie- rane s(cid:200) dane elementu script. Poleć książkęKup książkę 1.3. Instalowanie biblioteki jQuery 37 Zamieszczony na poprzedniej stroniej fragment kodu jest kolejnym przyk(cid:239)adem, który nie jest ca(cid:239)kowicie zgodny z przegl(cid:200)darkami, pod k(cid:200)tem jakich mo(cid:285)e by(cid:202) realizowany projekt. W kodzie tym u(cid:285)yto metody addEventListener() j(cid:218)zyka JavaScript, która nie jest obs(cid:239)ugiwana przez przegl(cid:200)dark(cid:218) Internet Explorer w wersjach od 6 do 8. Jak si(cid:218) oka(cid:285)e w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki, biblioteka jQuery okazuje si(cid:218) pomocna przy rozwi(cid:200)zywaniu równie(cid:285) tego problemu. Cho(cid:202) strategia przejrzystego kodu JavaScript to bogata w mo(cid:285)liwo(cid:258)ci technika pozwalaj(cid:200)ca na wyra(cid:283)ne oddzielenie zakresów odpowiedzialno(cid:258)ci w obr(cid:218)bie aplikacji internetowej, nie jest pozbawiona niedogodno(cid:258)ci. By(cid:202) mo(cid:285)e zauwa(cid:285)y(cid:239)e(cid:258) ju(cid:285), (cid:285)e osi(cid:200)- gni(cid:218)cie celu wymaga(cid:239)o kilku wierszy skryptu wi(cid:218)cej ni(cid:285) w sytuacji, gdy kod umiesz- czono w znacznikach przycisku. Przejrzysty kod JavaScript mo(cid:285)e spowodowa(cid:202) zwi(cid:218)k- szenie liczby wierszy kodu skryptu niezb(cid:218)dnego do utworzenia, a ponadto wymaga pewnej dyscypliny oraz stosowania w(cid:239)a(cid:258)ciwych wzorców tworzenia kodu dla skryptu po stronie klienta. Nie ma w tym jednak niczego z(cid:239)ego. Wskazane jest wszystko, co przekonuje do pisania kodu po stronie klienta na takim samym poziomie dba(cid:239)o(cid:258)ci, jaki zwykle towarzy- szy tworzeniu kodu po stronie serwera! Oznacza to jednak dodatkowy nak(cid:239)ad pracy (cid:127) oczywi(cid:258)cie gdy nie skorzysta si(cid:218) z biblioteki jQuery. W wypadku biblioteki jQuery szczególnie skupiono si(cid:218) na sprawieniu, (cid:285)e tworze- nie kodu stron przy u(cid:285)yciu technik przejrzystego kodu JavaScript b(cid:218)dzie (cid:239)atwym i przy- jemnym zadaniem, które nie wymaga ponoszenia sporej ceny w postaci nak(cid:239)adu pracy lub ilo(cid:258)ci kodu. Stwierdzisz, (cid:285)e efektywne korzystanie z tej biblioteki umo(cid:285)liwi osi(cid:200)- gni(cid:218)cie znacznie wi(cid:218)cej na stronach, gdy tworzona jest mniejsza ilo(cid:258)(cid:202) kodu. Czy(cid:285) nie obowi(cid:200)zuje nadal motto „Pisz mniej, a rób wi(cid:218)cej”? Bez zb(cid:218)dnego dalszego rozpisy- wania si(cid:218) zacznijmy wyja(cid:258)nianie, w jaki sposób biblioteka jQuery tak bardzo u(cid:239)atwia dodawanie zaawansowanych funkcji do stron bez oczekiwanych utrudnie(cid:241). 1.3. Instalowanie biblioteki jQuery Gdy ju(cid:285) wiesz, czym jest biblioteka jQuery i jakie s(cid:200) jej mo(cid:285)liwo(cid:258)ci, to aby rozpocz(cid:200)(cid:202) korzystanie z niej, musisz j(cid:200) pobra(cid:202). W tym celu odwied(cid:283) stron(cid:218) o adresie http:// jquery.com/download/. Po wy(cid:258)wietleniu jej prawdopodobnie zostaniesz przyt(cid:239)oczony mnóstwem dost(cid:218)pnych opcji. Ga(cid:239)(cid:200)(cid:283) wersji 1.x, 2.x lub 3.x? Skompresowane czy bez kompresji? Czy pobiera(cid:202) bibliotek(cid:218), czy skorzysta(cid:202) z sieci CDN (Content Delivery Network)? Wybór zale(cid:285)y od kilku czynników. Aby(cid:258) móg(cid:239) dokona(cid:202) (cid:258)wiadomego wyboru, zaprezentujmy ró(cid:285)nice. 1.3.1. Wybieranie w(cid:225)a(cid:286)ciwej wersji W kwietniu 2013 r. zespó(cid:239) tworz(cid:200)cy bibliotek(cid:218) jQuery zaprezentowa(cid:239) jej wersj(cid:218) 2.0 z zamiarem wzi(cid:218)cia pod uwag(cid:218) przysz(cid:239)o(cid:258)ci technologii internetowych zamiast ich prze- sz(cid:239)o(cid:258)ci, zw(cid:239)aszcza z punktu widzenia przegl(cid:200)darek. Do tego momentu biblioteka jQuery obs(cid:239)ugiwa(cid:239)a wszystkie najnowsze wersje przegl(cid:200)darek Chrome, Firefox, Safari, Opera oraz Internet Explorer (pocz(cid:200)wszy od wersji 6). Wraz z pojawieniem si(cid:218) wersji 2.0 zespó(cid:239) zdecydowa(cid:239) si(cid:218) na zrezygnowanie z obs(cid:239)ugi starszych wersji 6, 7 i 8 przegl(cid:200)darki Poleć książkęKup książkę 38 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery Internet Explorer, aby skoncentrowa(cid:202) si(cid:218) na przysz(cid:239)o(cid:258)ci technologii internetowych, a nie na ich przesz(cid:239)o(cid:258)ci. Decyzja ta spowodowa(cid:239)a usuni(cid:218)cie porcji kodu utworzonego w celu eliminowania niezgodno(cid:258)ci przegl(cid:200)darek oraz radzenia sobie z funkcjami nieobecnymi w tych „prehi- storycznych” przegl(cid:200)darkach. Zrealizowanie tego zadania przyczyni(cid:239)o si(cid:218) do uzyskania mniejszej (o 12 ) i szybszej bazy kodu. Cho(cid:202) wersje 1.x i 2.x to dwie ró(cid:285)ne ga(cid:239)(cid:218)zie, s(cid:200) ze sob(cid:200) (cid:258)ci(cid:258)le powi(cid:200)zane. Wyst(cid:218)puje równo(cid:258)(cid:202) funkcji w wypadku wersji biblioteki jQuery 1.10 i 2.0, wersji 1.11 i 2.1 itd. W pa(cid:283)dzierniku 2014 r. Dave Methvin, przewodnicz(cid:200)cy fundacji jQuery Foundation (zajmuje si(cid:218) bibliotek(cid:200) jQuery oraz innymi projektami; https://jquery.org/) opublikowa(cid:239) post na blogu (http://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/), w którym publicznie og(cid:239)osi(cid:239) plan udost(cid:218)pnienia nowej g(cid:239)ównej wersji biblioteki jQuery, czyli jQuery 3. Tak samo jak wersja 1.x obs(cid:239)uguje stare przegl(cid:200)darki, a wersja 2.x dotyczy nowoczesnych przegl(cid:200)darek, tak biblioteka jQuery 3 zapewnia dwa warianty. Warianty jQuery Compat 3 i jQuery 3 to odpowiednio nast(cid:218)pcy wersji 1.x i 2.x. Oto dodatkowe wyja(cid:258)nienia przewodnicz(cid:200)cego: Pocz(cid:200)wszy od tych wersji, b(cid:218)dziemy te(cid:285) zmienia(cid:202) nasz(cid:200) strategi(cid:218) pod k(cid:200)tem obs(cid:239)ugi przegl(cid:200)darek. G(cid:239)ówny pakiet biblioteki jQuery pozostaje niewielki i zwarty dzi(cid:218)ki obs(cid:239)ugiwaniu sprawdzonych przegl(cid:200)darek (bie(cid:285)(cid:200)ce i poprzednie wersje konkretnej przegl(cid:200)darki), które s(cid:200) powszechnie u(cid:285)ywane w momencie udost(cid:218)pnienia pakietu. Mo(cid:285)liwa jest obs(cid:239)uga dodatkowych przegl(cid:200)darek w tym pakiecie na podstawie ich udzia(cid:239)u w rynku. Pakiet wariantu jQuery Compat oferuje znacznie wi(cid:218)ksze wsparcie przegl(cid:200)darek, co jednak powoduje wi(cid:218)kszy rozmiar pliku i potencjalnie ni(cid:285)sz(cid:200) wydajno(cid:258)(cid:202). Wraz z udost(cid:218)pnieniem nowej wersji zespó(cid:239) skorzysta(cid:239) z mo(cid:285)liwo(cid:258)ci zrezygnowania z obs(cid:239)ugi niektórych przegl(cid:200)darek, usuni(cid:218)cia wielu b(cid:239)(cid:218)dów i ulepszenia kilku funkcji. Pierwsza kwestia do rozwa(cid:285)enia przy podejmowaniu decyzji, jaka wersja ma zosta(cid:202) u(cid:285)yta, dotyczy tego, jakie przegl(cid:200)darki musz(cid:200) by(cid:202) obs(cid:239)ugiwane w ramach projektu. W tabeli 1.1 opisano przegl(cid:200)darki obs(cid:239)ugiwane przez ka(cid:285)d(cid:200) g(cid:239)ówn(cid:200) wersj(cid:218) biblioteki jQuery. Jak wida(cid:202) w tabeli, wyst(cid:218)puje pewien stopie(cid:241) pokrywania si(cid:218) pod wzgl(cid:218)dem obs(cid:239)ugi- wanych wersji przegl(cid:200)darek. Miej jednak na uwadze, (cid:285)e to, co reprezentowane jest przez okre(cid:258)lenie „bie(cid:285)(cid:200)ce i poprzednie wersje” (wskazuje na bie(cid:285)(cid:200)ce i poprzednie wersje przegl(cid:200)darki stosowane w momencie opublikowania nowej wersji biblioteki jQuery), zmienia si(cid:218) zale(cid:285)nie od daty udost(cid:218)pnienia nowej wersji biblioteki jQuery. Inn(cid:200) istotn(cid:200) kwesti(cid:200), jak(cid:200) trzeba uwzgl(cid:218)dni(cid:202) przy podejmowaniu decyzji, jest to, gdzie skorzystasz z biblioteki jQuery. Oto niektóre przypadki u(cid:285)ycia, które mog(cid:200) u(cid:239)atwi(cid:202) dokonanie wyboru: (cid:81) Witryny internetowe, które nie wymagaj(cid:200) obs(cid:239)ugi starszych wersji przegl(cid:200)darek Internet Explorer i Opera, a tak(cid:285)e innych przegl(cid:200)darek korzystaj(cid:200)cych z ga(cid:239)(cid:218)zi 3.x. Dotyczy to witryn internetowych uruchomionych w (cid:258)rodowisku kontrolowa- nym, takim jak firmowa sie(cid:202) lokalna. Poleć książkęKup książkę 1.3. Instalowanie biblioteki jQuery 39 Tabela 1.1. Zestawienie przegl(cid:261)darek obs(cid:225)ugiwanych przez g(cid:225)ówne wersje biblioteki jQuery Przegl(cid:261)darki jQuery 1 jQuery 2 jQuery Compat 3 jQuery 3 Internet Explorer Chrome Firefox Safari Opera iOS Android 6+ 9+ 8+ 9+ Bie(cid:298)(cid:261)ce i poprzednie wersje Bie(cid:298)(cid:261)ce i poprzednie wersje 5.1+ 12.1x Bie(cid:298)(cid:261)ce i poprzednie wersje 6.1+ 2.3 4.0+ Bie(cid:298)(cid:261)ce i poprzednie wersje Bie(cid:298)(cid:261)ce i poprzednie wersje 5.1+ 12.1x Bie(cid:298)(cid:261)ce i poprzednie wersje 6.1+ 2.3 4.0+ Bie(cid:298)(cid:261)ce i poprzednie wersje Bie(cid:298)(cid:261)ce i poprzednie wersje 7.0+ Bie(cid:298)(cid:261)ce i poprzednie wersje 7.0+ 2.3 4.0+ Bie(cid:298)(cid:261)ce i poprzednie wersje Bie(cid:298)(cid:261)ce i poprzednie wersje 7.0+ Bie(cid:298)(cid:261)ce i poprzednie wersje 7.0+ 2.3 4.0+ (cid:81) Witryny internetowe, których tre(cid:258)(cid:202) musi by(cid:202) kierowana do jak najwi(cid:218)kszej grupy odbiorców (np. witryna rz(cid:200)dowa), powinny korzysta(cid:202) z ga(cid:239)(cid:218)zi 1.x. (cid:81) Je(cid:258)li projektujesz witryn(cid:218) internetow(cid:200), która musi by(cid:202) dostosowana do wymaga(cid:241) szerszej grupy odbiorców, lecz bez konieczno(cid:258)ci obs(cid:239)ugi wersji 6 i 7 przegl(cid:200)- darki Internet Explorer oraz starszych wersji przegl(cid:200)darek Opera i Safari, nale(cid:285)y zastosowa(cid:202) bibliotek(cid:218) jQuery Compat 3.x. (cid:81) Je(cid:258)li nie wymagasz obs(cid:239)ugi przegl(cid:200)darki Internet Explorer w wersji 8 lub starszej, ale konieczne jest wsparcie starych przegl(cid:200)darek Opera i Safari, nale(cid:285)y u(cid:285)y(cid:202) biblioteki jQuery 2.x. (cid:81) Aplikacje dla urz(cid:200)dze(cid:241) przeno(cid:258)nych zaprojektowane za pomoc(cid:200) (cid:258)rodowiska PhoneGap lub podobnych (cid:258)rodowisk mog(cid:200) korzysta(cid:202) z biblioteki jQuery 3.x. (cid:81) Aplikacje dla systemu Firefox OS lub Chrome OS mog(cid:200) u(cid:285)ywa(cid:202) biblioteki jQu- ery 3.x. (cid:81) W wypadku witryn internetowych, które oparte s(cid:200) na bardzo starych dodatkach, mo(cid:285)e by(cid:202) wymagane zastosowanie biblioteki jQuery 1.x (zale(cid:285)nie od faktycz- nego kodu dodatków). Podsumowuj(cid:200)c, dwie kwestie do rozwa(cid:285)enia to miejsce zastosowania biblioteki oraz to, jakie przegl(cid:200)darki maj(cid:200) by(cid:202) obs(cid:239)ugiwane. Innym powodem nieporozumie(cid:241) mo(cid:285)e by(cid:202) wybór mi(cid:218)dzy wersj(cid:200) skompresowan(cid:200) (okre(cid:258)lan(cid:200) te(cid:285) mianem zminimalizowanej) przewidzian(cid:200) do u(cid:285)ycia w fazie produkcyjnej a wersj(cid:200) bez kompresji przeznaczon(cid:200) do zastosowania w fazie projektowania (na ry- sunku 1.3 zaprezentowano porównanie obu wersji). Zalet(cid:200) biblioteki w wersji zmini- malizowanej jest zmniejszenie wielko(cid:258)ci pliku, dzi(cid:218)ki czemu u(cid:285)ytkownikom zapew- niane jest mniejsze wykorzystanie dost(cid:218)pnej przepustowo(cid:258)ci po(cid:239)(cid:200)czenia sieciowego. Redukcja wielko(cid:258)ci pliku jest osi(cid:200)gana przez usuwanie zb(cid:218)dnych obszarów (wci(cid:218)cia w kodzie) i komentarzy do kodu, które s(cid:200) przydatne dla projektantów, ale ignorowane Poleć książkęKup książkę 40 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery przez silniki j(cid:218)zyka JavaScript, a tak(cid:285)e przez skracanie nazw zmiennych (zaciemnianie kodu). Zmiany te powoduj(cid:200) uzyskanie kodu, który jest mniej czytelny i trudniejszy do poddania debugowaniu (z tego w(cid:239)a(cid:258)nie powodu nie nale(cid:285)y u(cid:285)ywa(cid:202) tej wersji kodu w fazie projektowania), ale o mniejszej wielko(cid:258)ci. Rysunek 1.3. U góry pokazano fragment kodu pochodz(cid:261)cy z kodu (cid:296)ród(cid:225)owego biblioteki jQuery prezentuj(cid:261)cy wersj(cid:266) bez kompresji. Na dole widoczny jest ten sam fragment kodu w wersji zminimalizowanej na potrzeby u(cid:298)ycia do celów produkcyjnych W ksi(cid:200)(cid:285)ce b(cid:218)dziemy bazowa(cid:202) na bibliotece jQuery 1.x, aby umo(cid:285)liwi(cid:202) testowanie two- rzonego kodu w najwi(cid:218)kszej mo(cid:285)liwej grupie przegl(cid:200)darek. Zwrócimy jednak uwag(cid:218) na wszystkie ró(cid:285)nice, jakie pojawi(cid:239)y si(cid:218) w bibliotece jQuery 3, dzi(cid:218)ki czemu Twoja wie- dza b(cid:218)dzie aktualna w maksymalnym mo(cid:285)liwym stopniu. Wybór w(cid:239)a(cid:258)ciwej wersji biblioteki jQuery jest istotny, ale wspomniano te(cid:285) o ró(cid:285)nicy mi(cid:218)dzy lokalnym udost(cid:218)pnianiem tej biblioteki a wykorzystaniem do tego sieci CDN. 1.3.2. Zwi(cid:266)kszanie wydajno(cid:286)ci przy u(cid:298)yciu sieci CDN Obecnie powszechn(cid:200) praktyk(cid:200) jest udost(cid:218)pnianie plików takich jak obrazy i biblioteki za po(cid:258)rednictwem sieci dostarczania tre(cid:258)ci (CDN — Content Delivery Network), co ma na celu zwi(cid:218)kszenie wydajno(cid:258)ci witryny internetowej. Sie(cid:202) CDN to system rozpro- szony serwerów utworzony do oferowania tre(cid:258)ci przy zapewnieniu wysokiej dost(cid:218)p- no(cid:258)ci i wydajno(cid:258)ci. Mo(cid:285)esz by(cid:202) (cid:258)wiadomy tego, (cid:285)e przegl(cid:200)darki maj(cid:200) mo(cid:285)liwo(cid:258)(cid:202) jed- Poleć książkęKup książkę 1.3. Instalowanie biblioteki jQuery 41 noczesnego pobierania z hosta ustalonego zestawu tre(cid:258)ci pochodz(cid:200)cej zwykle z liczby plików wynosz(cid:200)cej od czterech do o(cid:258)miu. Poniewa(cid:285) pliki udost(cid:218)pniane za pomoc(cid:200) sieci CDN s(cid:200) zapewniane z innego hosta, mo(cid:285)esz przyspieszy(cid:202) ca(cid:239)y proces (cid:239)adowania przez zwi(cid:218)kszenie liczby jednocze(cid:258)nie pobieranych plików. Poza tym wiele witryn internetowych korzysta obecnie z sieci CDN, dlatego jest du(cid:285)e prawdopodobie(cid:241)stwo, (cid:285)e wymagana biblioteka b(cid:218)dzie si(cid:218) ju(cid:285) znajdowa(cid:202) w pami(cid:218)ci podr(cid:218)cznej przegl(cid:200)darki u(cid:285)ytkownika. Zastosowanie sieci CDN do za(cid:239)adowania biblioteki jQuery nie gwaran- tuje lepszej wydajno(cid:258)ci w ka(cid:285)dej sytuacji, gdy(cid:285) wp(cid:239)yw ma na to wiele czynników. Radzimy sprawdzi(cid:202), jaka konfiguracja b(cid:218)dzie najlepiej si(cid:218) sprawdza(cid:202) w konkretnej sytuacji. Cho(cid:202) dost(cid:218)pnych jest obecnie kilka sieci CDN, które mog(cid:200) zosta(cid:202) u(cid:285)yte do do(cid:239)(cid:200)cza- nia biblioteki jQuery, do najbardziej niezawodnych zaliczaj(cid:200) si(cid:218) nast(cid:218)puj(cid:200)ce: jQuery CDN (http://code.jquery.com/), Google CDN (https://developers.google.com/speed/ libraries/devguide) oraz Microsoft CDN (http://www.asp.net/ajaxlibrary/cdn.ashx). Za(cid:239)ó(cid:285)my, (cid:285)e chcesz do(cid:239)(cid:200)czy(cid:202) skompresowan(cid:200) wersj(cid:218) biblioteki jQuery 1.11.3 za pomoc(cid:200) sieci jQuery CDN. W tym celu mo(cid:285)esz utworzy(cid:202) nast(cid:218)puj(cid:200)cy wiersz kodu: script src= //code.jquery.com/jquery-1.11.3.min.js /script Jak by(cid:202) mo(cid:285)e ju(cid:285) zauwa(cid:285)y(cid:239)e(cid:258), kod ten nie okre(cid:258)la protoko(cid:239)u, jaki ma zosta(cid:202) u(cid:285)yty (HTTP lub HTTPS). Zamiast tego stosowany jest ten sam protokó(cid:239), którego u(cid:285)yto w witrynie internetowej. Miej jednak (cid:258)wiadomo(cid:258)(cid:202), (cid:285)e wykorzystanie tej techniki w wypadku strony, która nie jest uruchomiona na serwerze WWW, spowoduje b(cid:239)(cid:200)d. Zastosowanie sieci CDN nie jest pozbawione mankamentów. (cid:191)aden serwer ani sie(cid:202) nie zapewni nieustannej dost(cid:218)pno(cid:258)ci w internecie. Sieci CDN nie s(cid:200) tutaj wyj(cid:200)t- kiem. Je(cid:258)li przy (cid:239)adowaniu biblioteki jQuery bazujesz na sieci CDN, to w rzadkich sytuacjach, gdy jest ona niedost(cid:218)pna lub uleg(cid:239)a awarii, a ponadto przegl(cid:200)darka osoby odwiedzaj(cid:200)cej witryn(cid:218) nie zawiera buforowanej kopii, kod witryny przestanie popraw- nie dzia(cid:239)a(cid:202). Mo(cid:285)e to by(cid:202) problemem w przypadku kluczowych aplikacji. Aby tego unikn(cid:200)(cid:202), mo(cid:285)na zastosowa(cid:202) dost(cid:218)pne proste i sprytne rozwi(cid:200)zanie, z którego korzysta wielu projektantów. I tym razem chcesz do(cid:239)(cid:200)czy(cid:202) zminimalizowan(cid:200) wersj(cid:218) biblioteki jQuery 1.11.3, lecz teraz u(cid:285)yjesz nast(cid:218)puj(cid:200)cego sprytnego rozwi(cid:200)zania: script src= //code.jquery.com/jquery-1.11.3.min.js /script script window.jQuery || document.write( script src= javascript/jquery-1.11.3.min.js (cid:180) \/script ); /script Ide(cid:200) dzia(cid:239)ania tego kodu jest za(cid:285)(cid:200)danie kopii biblioteki z sieci CDN i okre(cid:258)lenie, czy biblioteka zosta(cid:239)a za(cid:239)adowana przez sprawdzenie, czy zdefiniowano w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) jQuery obiektu window. Je(cid:258)li test zako(cid:241)czy si(cid:218) niepowodzeniem, zostanie „wstrzykni(cid:218)ty” kod, który za(cid:239)aduje lokalnie dost(cid:218)pn(cid:200) kopi(cid:218) biblioteki. W tym konkretnym przypadku kopia ta jest przechowywana w folderze o nazwie javascript. Je(cid:258)li istnieje w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) jQuery, spokojnie mo(cid:285)esz skorzysta(cid:202) z metod biblioteki jQuery bez potrzeby (cid:239)adowania lokalnie dost(cid:218)pnej kopii. Test obecno(cid:258)ci w(cid:239)a(cid:258)ciwo(cid:258)ci jQuery wynika z tego, (cid:285)e jest ona dodawana po za(cid:239)adowa- niu biblioteki. W tej w(cid:239)a(cid:258)ciwo(cid:258)ci mo(cid:285)esz znale(cid:283)(cid:202) wszystkie metody i inne w(cid:239)a(cid:258)ciwo(cid:258)ci biblioteki. Sugerujemy, aby w czasie projektowania korzysta(cid:202) z lokalnej kopii biblio- teki jQuery, co pozwoli zapobiec wszelkim problemom z po(cid:239)(cid:200)czeniem. Poleć książkęKup książkę 42 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery Oprócz w(cid:239)a(cid:258)ciwo(cid:258)ci jQuery znajdziesz równie(cid:285) skrót o nazwie $, z którym bardzo cz(cid:218)sto spotkasz si(cid:218) w tej ksi(cid:200)(cid:285)ce i nie tylko w niej. Cho(cid:202) mo(cid:285)e si(cid:218) to wyda(cid:202) dziwne, w j(cid:218)zyku JavaScript dozwolona jest zmienna lub w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie $. Znak $ nazwano skrótem, poniewa(cid:285) w(cid:239)a(cid:258)ciwie jest to ten sam obiekt w(cid:239)a(cid:258)ciwo(cid:258)ci jQuery, co potwier- dza nast(cid:218)puj(cid:200)ca instrukcja pochodz(cid:200)ca z kodu (cid:283)ród(cid:239)owego: window.jQuery = window.$ = jQuery; Do tej pory dowiedzia(cid:239)e(cid:258) si(cid:218), jak do(cid:239)(cid:200)czy(cid:202) bibliotek(cid:218) jQuery do stron internetowych. Nie wiesz jednak nic na temat jej struktury. Zajmiemy si(cid:218) tym w nast(cid:218)pnym podrozdziale. 1.4. Struktura biblioteki jQuery Repozytorium biblioteki jQuery (https://github.com/jquery/jquery) dost(cid:218)pne w witry- nie GitHub to znakomity przyk(cid:239)ad tego, jak przez ostatnie lata zmienia(cid:239)o si(cid:218) projek- towanie interfejsu. Cho(cid:202) nie jest to (cid:258)ci(cid:258)le powi(cid:200)zane z u(cid:285)yciem samej biblioteki, zawsze istotna jest (cid:258)wiadomo(cid:258)(cid:202) tego, jak do(cid:258)wiadczeni projektanci organizuj(cid:200) sobie przep(cid:239)yw pracy oraz wykorzystywane przez siebie narz(cid:218)dzia. Je(cid:258)li jeste(cid:258) do(cid:258)wiadczonym projektantem interfejsów, mo(cid:285)e si(cid:218) okaza(cid:202), (cid:285)e znasz ju(cid:285) cz(cid:218)(cid:258)(cid:202) tych narz(cid:218)dzi (je(cid:258)li nie wszystkie). Niemniej jednak zawsze warto od(cid:258)wie(cid:285)y(cid:202) sobie informacje na ten temat. Zespó(cid:239) projektantów wykorzysta(cid:239) na potrzeby prac zwi(cid:200)- zanych z rozwojem biblioteki jQuery najnowsze i najciekawsze technologie, jakie tworz(cid:200) obecnie panoram(cid:218) interfejsów u(cid:285)ytkownika. Dok(cid:239)adniej rzecz bior(cid:200)c, s(cid:200) to nast(cid:218)pu- j(cid:200)ce technologie: (cid:81) Node.js (http://nodejs.org/) — platforma oparta na (cid:258)rodowisku wykonawczym JavaScript przegl(cid:200)darki Chrome, która umo(cid:285)liwia uruchamianie kodu JavaScript po stronie serwera. (cid:81) npm (https://npmjs.org/) — oficjalny mened(cid:285)er pakietów platformy Node.js u(cid:285)y- wany do instalowania pakietów, takich jak Grunt wraz z jego zadaniami. (cid:81) Grunt (http://gruntjs.com/) — narz(cid:218)dzie do wykonywania zada(cid:241), które automaty- zuje typowe i powtarzaj(cid:200)ce si(cid:218) zadania, takie jak budowanie, testowanie i mini- malizowanie. (cid:81) Git (http://git-scm.com/) — darmowy, rozproszony system kontroli wersji, który (cid:258)ledzi zmiany wprowadzane w kodzie. U(cid:239)atwia on wspó(cid:239)prac(cid:218) projektantów. Kod (cid:283)ród(cid:239)owy biblioteki jQuery jest te(cid:285) zgodny z formatem definicji modu(cid:239)u asynchro- nicznego (AMD — Asynchronous Module Definition). Format ten to propozycja doty- cz(cid:200)ca definiowania modu(cid:239)ów, w przypadku których asynchronicznie mo(cid:285)e by(cid:202) (cid:239)ado- wany zarówno modu(cid:239), jak i jego zale(cid:285)no(cid:258)ci. W praktyce oznacza to, (cid:285)e cho(cid:202) biblioteka jest u(cid:285)ywana jako unikatowy, pojedynczy blok, jej kod (cid:283)ród(cid:239)owy dzielony jest na kilka plików (modu(cid:239)ów), co pokazano na rysunku 1.4. Zale(cid:285)no(cid:258)ciami powi(cid:200)zanymi z tymi plikami zarz(cid:200)dza si(cid:218) z wykorzystaniem mened(cid:285)era zale(cid:285)no(cid:258)ci (w tym wypadku jest to narz(cid:218)dzie RequireJS). Poleć książkęKup książkę 1.4. Struktura biblioteki jQuery 43 Rysunek 1.4. Schemat reprezentuj(cid:261)cy modu(cid:225)y biblioteki jQuery: ajax, ajax/xhr, ajax/script, ajax/jsonp, css, deprecated, dimensions, effects, event, event/alias, offset, wrap, core/ready, deferred, exports/global, exports/amd i Sizzle Aby(cid:258) móg(cid:239) zorientowa(cid:202) si(cid:218), co jest wewn(cid:200)trz modu(cid:239)ów, prezentujemy kilka nast(cid:218)pu- j(cid:200)cych przyk(cid:239)adów: (cid:81) ajax — zawiera wszystkie funkcje technologii Ajax, takie jak ajax(), get() i post(). (cid:81) deprecated — zawiera wszystkie obecnie przestarza(cid:239)e metody, które nie zosta(cid:239)y usuni(cid:218)te. To, co znajduje si(cid:218) w tym module, zale(cid:285)y od wersji biblioteki jQuery. (cid:81) effects — zawiera metody, takie jak animate() i slideUp(), które umo(cid:285)liwiaj(cid:200) two- rzenie animacji. (cid:81) event — zawiera metody, takie jak on() i off(), które s(cid:239)u(cid:285)(cid:200) do do(cid:239)(cid:200)czania do zda- rze(cid:241) przegl(cid:200)darki procedur obs(cid:239)ugi zdarze(cid:241). Organizacja kodu (cid:283)ród(cid:239)owego oparta na modu(cid:239)ach zapewnia kolejn(cid:200) korzy(cid:258)(cid:202), czyli mo(cid:285)liwo(cid:258)(cid:202) zbudowania wersji niestandardowej biblioteki jQuery, która zawiera wy(cid:239)(cid:200)cz- nie wymagane modu(cid:239)y. 1.4.1. Tworzenie w(cid:225)asnej wersji niestandardowej zmniejszaj(cid:261)cej wielko(cid:286)(cid:252) pliku Biblioteka jQuery oferuje mo(cid:285)liwo(cid:258)(cid:202) budowania jej wersji niestandardowej, która zawiera tylko niezb(cid:218)dne funkcjonalno(cid:258)ci. Pozwala to zredukowa(cid:202) wielko(cid:258)(cid:202) pliku biblio- teki. To z kolei prowadzi do zwi(cid:218)kszenia wydajno(cid:258)ci, gdy(cid:285) u(cid:285)ytkownik musi pobra(cid:202) mniej kilobajtów danych. Istotna jest mo(cid:285)liwo(cid:258)(cid:202) wyeliminowania zb(cid:218)dnych modu(cid:239)ów. Cho(cid:202) mo(cid:285)esz pomy- (cid:258)le(cid:202), (cid:285)e b(cid:218)dziesz wymaga(cid:202) wszystkich mo(cid:285)liwo(cid:258)ci oferowanych przez bibliotek(cid:218) jQuery, w(cid:200)tpliwe jest, (cid:285)e w ramach tej samej witryny internetowej skorzystasz z wszystkich jej funkcji. Dlaczego wi(cid:218)c nie usun(cid:200)(cid:202) tych zb(cid:218)dnych wierszy kodu, aby poprawi(cid:202) wydajno(cid:258)(cid:202) witryny internetowej? Narz(cid:218)dzie Grunt umo(cid:285)liwia utworzenie wersji niestandardowej. Wyobra(cid:283) sobie, (cid:285)e wymagasz zminimalizowanej wersji biblioteki jQuery 1.11.3 z wszystkimi funkcjo- nalno(cid:258)ciami (z wyj(cid:200)tkiem przestarza(cid:239)ych metod i w(cid:239)a(cid:258)ciwo(cid:258)ci) i efektami. Aby zreali- zowa(cid:202) to zadanie, na komputerze musisz zainstalowa(cid:202) narz(cid:218)dzia Node.js, Git i Grunt. Poleć książkęKup książkę 44 ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery Po ich zainstalowaniu musisz powieli(cid:202) repozytorium biblioteki jQuery, uruchamiaj(cid:200)c nast(cid:218)puj(cid:200)ce polecenie przy u(cid:285)yciu interfejsu wiersza polece(cid:241) CLI (Command Line Interface): git clone git://github.com/jquery/jquery.git Po uko(cid:241)czeniu procesu powielania wprowad(cid:283) jeszcze nast(cid:218)puj(cid:200)ce dwa polecenia: npm install grunt custom:-deprecated,-effects I to tyle! W folderze o nazwie dist znajdziesz wersj(cid:218) niestandardow(cid:200) biblioteki jQuery zarówno w wariancie zminimalizowanym, jak i w wariancie bez minimalizacji. Takie rozwi(cid:200)zanie nie jest jednak pozbawione mankamentów. Pierwszy problem pojawia si(cid:218) w momencie opublikowania nowej wersji biblioteki jQuery. Drugi pro- blem wyst(cid:218)puje, gdy nowa funkcjonalno(cid:258)(cid:202) witryny internetowej wymaga uwzgl(cid:218)dnie- nia w module sk(cid:239)adnika, który wcze(cid:258)niej nie zosta(cid:239) do(cid:239)(cid:200)czony. W tych sytuacjach konieczne jest ponowne wykonanie wy(cid:285)ej podanych kroków (zwykle tylko polece(cid:241)) w celu utworzenia nowej wersji niestandardowej zawieraj(cid:200)cej nowe metody, poprawki b(ci
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery w akcji. Wydanie III
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ą: