" Kup książkę " Księgarnia internetowa
" Poleć książkę " Lubię to! Nasza społeczność
" Oceń książkę
Spis tre ci
Przedmowa ................................................................................................. 7
1. Sie WWW jako platforma aplikacji ..............................................11
Zwi kszanie mo liwo ci aplikacji internetowych 12
Projektowanie aplikacji internetowych 13
Triumf j zyka JavaScript 15
2. Mo liwo ci j zyka JavaScript ....................................................... 19
Nieblokuj ce operacje wej cia-wyj cia i wywo ania zwrotne 20
Funkcje lambda oferuj du e mo liwo ci 22
Domkni cia 24
Programowanie funkcyjne 27
Prototypy i sposób rozszerzania obiektów 30
Rozszerzanie funkcji przy u yciu prototypów 33
Rozwijanie i parametry obiektów 36
Operacje iteracji dotycz ce tablicy 37
Obiekty równie mog by rozwijane 41
3. Testowanie aplikacji JavaScript ....................................................43
QUnit 47
Selenium 50
4. Lokalne magazynowanie danych ................................................. 71
Obiekty localStorage i sessionStorage 73
Dodatki biblioteki jQuery 82
3
Poleć książkę
Kup książkę
5. Interfejs IndexedDB .......................................................................85
Dodawanie i aktualizowanie rekordów 89
Dodawanie indeksów 90
Pobieranie danych 91
Usuwanie danych 92
6. Pliki .................................................................................................93
Obiekty blob 94
Praca z plikami 95
Wysy anie plików 97
Przeci ganie i upuszczanie 98
Po czenie wszystkiego ze sob 99
System plików 101
7. Praca w trybie bez po czenia .................................................... 103
Plik manifestu  wprowadzenie 104
Zdarzenia 108
Debugowanie plików manifestu 109
8. Podzia pracy za pomoc technologii Web Workers ...................113
Przypadki zastosowania w tku roboczego Web Worker 115
Zastosowanie technologii Web Workers 117
Przyk ad fraktala bazuj cego na w tku roboczym 119
Testowanie i debugowanie w tków roboczych Web Worker 127
Wzorzec ponownego wykorzystania
przetwarzania wielow tkowego 127
Biblioteki dla technologii Web Workers 132
9. Gniazda WWW ............................................................................ 133
Interfejs gniazd WWW 135
Konfigurowanie gniazda WWW 136
Przyk ad gniazda WWW 136
Protokó gniazd WWW 139
4 Spis tre ci
Poleć książkę
Kup książkę
 10. Nowe znaczniki ........................................................................... 143
Znaczniki dla aplikacji 143
U atwienie dost pu za pomoc aplikacji WAI-ARIA 145
Mikrodane 146
Nowe typy formularzy 147
D wi k i wideo 149
Element canvas i format SVG 149
Geolokacja 150
Nowy kod CSS 150
A Narz dzia JavaScript, które warto zna ..................................... 153
Skorowidz ............................................................................................... 157
Spis tre ci 5
Poleć książkę
Kup książkę
6 Spis tre ci
Poleć książkę
Kup książkę
ROZDZIA 4.
Lokalne magazynowanie danych
Przegl darka internetowa oferuje u ytkownikom skryptów JavaScript zna-
komite rodowisko s u ce do budowania aplikacji uruchamianych w prze-
gl darce. Gdy u ywa si biblioteki ExtJS lub jQuery, mo liwe jest utwo-
rzenie aplikacji, która w opinii wielu u ytkowników mo e rywalizowa
z tym, co oferuje tradycyjna aplikacja. Ponadto mo na skorzysta z wyj t-
kowo prostej metody dystrybucji. Cho przegl darka wietnie wypada
pod wzgl dem komfortu obs ugi interfejsu u ytkownika, nie mo e si ju
jednak pochwali tym samym w odniesieniu do magazynowania danych.
Dawniej przegl darki nie potrafi y w aden sposób magazynowa danych.
Praktycznie by y one jedynym w swoim rodzaju  cienkim klientem. To, co
pojawi o si jako pierwsze, by to mechanizm obs ugi informacji cookie pro-
toko u HTTP, który umo liwia powi zanie porcji danych z ka dym da-
niem HTTP. Jednak e w przypadku informacji cookie pojawia si kilka
problemów. Po pierwsze, ka da taka informacja jest odsy ana z ka dym
daniem. A zatem przegl darka wysy a informacj cookie dla ka dego
pliku JavaScript, obrazu, dania Ajax itp. Bez adnego uzasadnionego po-
wodu mo e to spowodowa znaczne wykorzystanie przepustowo ci po -
czenia. Po drugie, w specyfikacji informacji cookie tak j zdefiniowano, aby
mog a by wspó u ytkowana w wielu ró nych domenach. Je li do firmy
nale a y domeny app.test.com i images.test.com, informacja cookie mog a zosta
ustawiona dla obu jako widoczna. Problem polega na tym, e poza Stanami
Zjednoczonymi powszechne staj si nazwy domen z o one z trzech cz ci.
Na przyk ad mo liwe by oby ustawienie informacji cookie dla wszystkich
hostów w domenie .co.il. W efekcie informacja cookie mog aby trafi do niemal
ka dego hosta w Izraelu. Ponadto nie jest mo liwe wymaganie trzycz cio-
wej nazwy domeny ka dorazowo, gdy nazwa zawiera przyrostek kraju,
poniewa niektóre pa stwa, takie jak Kanada, stosuj inn konwencj .
71
Poleć książkę
Kup książkę
Mo liwo lokalnego magazynowania w przegl darce zapewnia powa n
korzy pod wzgl dem szybko ci. W zale no ci od serwera wykonywanie
normalnego zapytania Ajax mo e zaj od pó sekundy do kilku sekund.
Jednak e nawet w najlepszym mo liwym przypadku mo e to by do
d ugi czas. Przes anie prostego dania narz dzia ping protoko u ICMP
z mojego biura w Tel Awiwie do serwera w Kalifornii zajmie rednio 250 ms.
Du a cz tego czasu b dzie prawdopodobnie wynikiem podstawowych
ogranicze fizycznych: dane mog by przesy ane w kablu tylko z okre-
lon cz ci u amkow pr dko ci wiat a. A zatem bardzo niewiele mo na
zrobi w celu zwi kszenia szybko ci, dopóki dane musz pokonywa drog
z przegl darki do serwera.
Opcje lokalne magazynowania bardzo dobrze si sprawdzaj w przypad-
ku danych, które s statyczne lub g ównie statyczne. Na przyk ad wiele
aplikacji zawiera list pa stw jako cz swoich danych. Je li nawet lista
uwzgl dnia kilka dodatkowych informacji, takich jak to, czy produkt jest
oferowany w ka dym kraju, nie b dzie si zmienia zbyt cz sto. W tym
przypadku nierzadko sprawdza si rozwi zanie polegaj ce na wst pnym
za adowaniu danych do obiektu localStorage, a nast pnie w razie potrzeby
warunkowym ponownym adowaniu, aby u ytkownik uzyska wszelkie
nowe dane bez konieczno ci oczekiwania na te bie ce.
Oczywi cie lokalne magazynowanie jest równie istotne podczas pracy
z aplikacj internetow , która mo e dzia a w trybie bez po czenia. Cho
obecnie dost p do internetu mo e wydawa si wszechobecny, nie powi-
nien by traktowany jako co uniwersalnego (nawet w inteligentnych tele-
fonach). U ytkownicy z takimi urz dzeniami jak iPod uzyskaj dost p do
internetu tylko wtedy, gdy istnieje po czenie WiFi. Nawet w przypadku
inteligentnych telefonów, takich jak iPhone lub Android, wyst pi  martwe
strefy bez dost pu do sieci.
Wraz z rozwojem j zyka HTML5 dokonano sporego post pu w zakresie
zapewniania przegl darce metody tworzenia trwa ego magazynu lokalnego.
Jednak e wyniki tych prac wymagaj jeszcze nabrania realnych kszta tów.
Obecnie istniej co najmniej trzy propozycje dotycz ce sposobu przecho-
wywania danych w kliencie.
W roku 2007 w ramach projektu Gears firma Google zaprezentowa a baz
danych SQLite opart na przegl darce. W przegl darkach bazuj cych na
mechanizmie WebKit, w tym Chrome, Safari oraz przegl darkach dla tele-
fonów iPhone i Android, zaimplementowano wersj bazy danych Gears
SQLite. Jednak t baz danych usuni to z propozycji j zyka HTML5, po-
niewa jest ona komponentem z jednym ród em.
72 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
Mechanizm localStorage udost pnia obiekt JavaScript, który jest zacho-
wywany w kolejnych operacjach ponownego adowania stron interneto-
wych. Ten mechanizm wydaje si do dobrze uzgodniony i stabilny. Jest
odpowiedni do przechowywania danych o niewielkim rozmiarze, takich
jak informacje o sesji lub preferencje u ytkownika.
W tym rozdziale wyja niono, jak u ywa implementacji mechanizmu
localStorage. W rozdziale 5. zajmiemy si bardziej skomplikowan i zaawan-
sowan odmian lokalnego magazynowania, która pojawi a si w niektórych
przegl darkach. Mowa o interfejsie IndexedDB.
Obiekty localStorage i sessionStorage
Na potrzeby magazynowania nowoczesne przegl darki oferuj progra-
mi cie dwa obiekty localStorage i sessionStorage. Ka dy z tych obiektów
mo e przechowywa dane jako klucze i warto ci. Obiekty maj ten sam
interfejs i dzia aj jednakowo z jednym wyj tkiem. Obiekt localStorage jest
zachowywany w kolejnych uruchomieniach przegl darki, natomiast obiekt
sessionStorage jest resetowany w chwili ponownego uruchomienia sesji
przegl darki. Mo e to mie miejsce w przypadku zamykania przegl darki
lub okna. Dok adny moment wyst pienia tego zdarzenia b dzie zale ny
od szczegó ów przegl darki.
Ustawianie tych obiektów i uzyskiwanie do nich dost pu jest naprawd
proste (przyk ad 4.1).
Przyk ad 4.1. Uzyskiwanie dost pu do obiektu localStorage
// Ustawianie
localStorage.sessionID = sessionId;
localStorage.setItem('sessionID', sessionId);
// Uzyskiwanie dost pu
var sessionId;
sessionId = localStorage.sessionID;
sessionId = localStorage.getItem('sessionId');
localStorage.sessionId = undefined;
localStorage.removeItem('sessionId');
Dane magazynowane przez przegl dark , takie jak informacje cookie, im-
plementuj omawian zasad  tego samego ród a . Z tego powodu ró ne
witryny internetowe nie mog kolidowa z inn witryn lub odczytywa
jej danych. Jednak e oba obiekty opisywane w tym podrozdziale s
Obiekty localStorage i sessionStorage 73
Poleć książkę
Kup książkę
przechowywane na dysku u ytkownika (tak jak informacje cookie), dlatego
bardziej zaawansowany u ytkownik mo e znale sposób na edytowanie
danych. Narz dzia Developer Tools przegl darki Chrome umo liwiaj
programi cie edytowanie obiektu magazynowania. Taki obiekt mo e by
równie edytowany w przegl darce Firefox za po rednictwem dodatku
Firebug lub innego narz dzia. Oznacza to, e cho inne witryny nie mog
uzyska dost pu do danych w obiektach magazynowania, nie powinny
one jednak by godne zaufania.
Informacji cookie dotycz okre lone restrykcje. Ich maksymalna wielko to
oko o 4 kB. Ponadto informacje te musz by przesy ane do serwera z ka -
dym daniem Ajax, co znacznie zwi ksza ruch w sieci. Obiekt localStorage
przegl darki pozwala na o wiele wi cej. Cho specyfikacja j zyka HTML5
nie okre la dok adnego limitu wielko ci obiektu, w wi kszo ci przegl darek
na jednego hosta internetowego jest ustalony taki limit i wynosi on oko o
5 MB. Programista nie powinien przyjmowa bardzo du ego obszaru ma-
gazynowania.
Dane mog by przechowywane w obiekcie magazynowania z wykorzy-
staniem bezpo redniego dost pu do niego lub przy u yciu zestawu funk-
cji dost pu. Obiekt sesji mo e przechowywa wy cznie a cuchy, dlatego
ka dy magazynowany obiekt b dzie rzutowany na a cuch. Oznacza to,
e obiekt b dzie przechowywany w postaci [object Object], która praw-
dopodobnie nie jest tym, czego si oczekuje. Aby przechowywa obiekt
lub tablic , nale y je najpierw przekszta ci do formatu JSON.
Zmiana warto ci w obiekcie magazynowania ka dorazowo powoduje wy-
wo anie zdarzenia magazynowania. To zdarzenie wy wietli klucz, a tak e
jego poprzedni i now warto . W przyk adzie 4.2 zaprezentowano ty-
pow struktur danych. W przeciwie stwie do niektórych zdarze , takich
jak klikni cia, zdarzenia magazynowania nie mog zosta wyeliminowane.
Aplikacja nie ma mo liwo ci poinformowania przegl darki o tym, aby nie
wprowadza a zmiany. Zdarzenie po prostu informuje aplikacj o zmianie
ju po fakcie.
Przyk ad 4.2. Interfejs zdarzenia magazynowania
var storageEvent = {
key: 'key',
oldValue: 'old',
newValue: 'newValue',
url: 'url',
storageArea: storage // Zmodyfikowany obszar magazynowania
};
74 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
Mechanizm WebKit udost pnia okno w ramach w asnych narz dzi Deve-
loper Tools, w którym programista mo e wy wietli i edytowa obiekty
localStorage i sessionStorage (rysunek 4.1). W oknie nale y klikn kart
Storage. Spowoduje to wy wietlenie obiektów localStorage i sessionStorage
na stronie. Okno oferuje te pe ne mo liwo ci edycji. Klucze mog by
w nim dodawane, usuwane i modyfikowane.
Rysunek 4.1. Przegl darka obiektów magazynowania aplikacji Chrome
Cho w przeciwie stwie do przegl darki Chrome oraz innych przegl da-
rek opartych na mechanizmie WebKit dodatek Firebug nie udost pnia in-
terfejsu do obiektów localStorage i sessionStorage, dost p do nich mo e
by uzyskany za po rednictwem konsoli JavaScript. Umo liwia ona do-
dawanie, edytowanie i usuwanie kluczy. Spodziewam si , e kiedy kto
utworzy rozszerzenie dodatku Firebug, które na to pozwoli.
Oczywi cie mo liwe jest utworzenie interfejsu niestandardowego, s u cego
do wy wietlania i edytowania obiektów magazynowania w dowolnej prze-
gl darce. Nale y utworzy widget wy wietlany na ekranie, który prezentuje
obiekty przy u yciu wywo a metod getItem i removeItem (przyk ad 4.1),
i zezwoli na edycj za pomoc pól tekstowych. Szkielet widgetu zapre-
zentowano w przyk adzie 4.3.
Obiekty localStorage i sessionStorage 75
Poleć książkę
Kup książkę
Przyk ad 4.3. Przegl darka obiektów magazynowania
(function createLocalStorageViewer()
{
$('').attr(
{
"id": "LocalStorageViewer",
"class": 'hidden viewer'
}).appendTo('body');
localStorage.on('update', viewer.load);
var viewer =
{
load: function loadData()
{
var data, buffer;
var renderLine = function (line)
{
return "\n".populate(line) +
"Usu klucz" +
"{key}{value}".populate(line);
};
buffer = Object.keys(localStorage).map(function (key)
var rec =
{
key: key,
value: localStorage[data]
};
return rec;
});
};
$("#LocalStorageViewer").html(buffer.map(renderLine).join(''));
$("#LocalStorageViewer tr.remove").click(function ()
{
var key = $(this).parent('tr').attr('key').remove();
localStorage[key] = undefined;
});
$("#LocalStroageViewer tr").dblclick(function ()
{
var key = $(this).attr('key');
var value = $(this).attr('value');
var newValue = prompt("Czy zmieni warto " + key + "?", value);
if (newValue !== null)
{
localStorage[key] = newValue;
}
});
};
}());
76 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
U ycie obiektu localStorage w bibliotece ExtJS
Biblioteka ExtJS, której kilka przyk adów zamieszczono w poprzednich roz-
dzia ach, to niezwykle popularna struktura j zyka JavaScript, umo liwia-
j ca bardzo zaawansowane, interaktywne operacje wy wietlania. W tym
punkcie wyja niono, jak u ywa obiektu localStorage z bibliotek ExtJS.
Warto ciow funkcj tej biblioteki jest to, e wiele jej obiektów mo e za-
pami tywa w asny stan. Na przyk ad obiekt siatki biblioteki ExtJS umo -
liwia u ytkownikowi zmian wielko ci, ukrywanie i wy wietlanie oraz
zmian kolejno ci kolumn. Te zmiany s zapami tywane i ponownie wy-
wietlane, gdy u ytkownik powróci pó niej do aplikacji. Pozwala to ka -
demu u ytkownikowi dostosowa sposób dzia ania elementów aplikacji.
Biblioteka ExtJS udost pnia obiekt do zapisu stanu, lecz do przechowywa-
nia danych wykorzystuje informacje cookie. Z o ona aplikacja mo e utwo-
rzy dane dotycz ce stanu, wystarczaj ce do przekroczenia limitów wiel-
ko ci obowi zuj cych dla informacji cookie. Aplikacja z kilkoma tuzinami
siatek mo e wygenerowa informacj cookie o wielko ci, która spowoduje
zawieszenie aplikacji. Zatem lepsze by oby u ycie obiektu localStorage,
który oferuje znacznie wi ksz wielko , a ponadto eliminuje obci enie
wynikaj ce z wysy ania danych do serwera w ka dym daniu.
Okazuje si , e konfigurowanie niestandardowego obiektu dostawcy stanu
jest naprawd proste. Dostawca zaprezentowany w przyk adzie 4.4 roz-
szerza ogólny obiekt dostawcy, a co wi cej  musi zapewni trzy metody:
set, clear i get. Te metody po prostu odczytuj dane z magazynu i zapi-
suj je w nim. W przyk adzie 4.4 zdecydowa em si na poindeksowanie
danych w magazynie za pomoc raczej prostej metody polegaj cej na za-
stosowaniu a cucha state_ z identyfikatorem stanu zapisywanego ele-
mentu. Jest to sensowna metoda.
Przyk ad 4.4. Lokalny dostawca stanu biblioteki ExtJS
Ext.ux.LocalProvider = function() {
Ext.ux.LocalProvider.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.LocalProvider, Ext.state.Provider, {
// ************************************************************
set: function(name, value) {
if (typeof value == "undefined" || value === null) {
localStorage['state_' + name] = undefined;
return;
}
else {
localStorage['state_' + name] = this.encodeValue(value);
Obiekty localStorage i sessionStorage 77
Poleć książkę
Kup książkę
 }
},
// ************************************************************
// Private
clear: function(name) {
localStorage['state_' + name] = undefined;
},
// ************************************************************
get: function(name, defaultValue) {
return Ext.value(this.decodeValue(localStorage['state_' + name]),
defaultValue);
}
});
// Zdefiniowanie procedury obs ugi stanu
Ext.onReady(function setupState() {
var provider = new Ext.ux.LocalProvider();
Ext.state.Manager.setProvider(provider);
});
Mo liwe by oby równie umieszczenie wszystkich danych stanu w jed-
nym du ym obiekcie i przechowywanie go w jednym kluczu magazynu.
Korzy ci z tego wynikaj c jest to, e w magazynie nie jest tworzona du-
a liczba elementów. Jednak e kod staje si bardziej z o ony. Je li ponadto
dwa okna próbuj zaktualizowa magazyn, jedno mo e negatywnie wp yn
na zmiany dokonane przez drugie. Lokalne magazynowanie danych opi-
sane w rozdziale nie oferuje adnego znakomitego rozwi zania problemu
dotycz cego warunków wy cigu. W miejscach, w których mo e to stanowi
problem, prawdopodobnie lepiej b dzie u y interfejsu IndexedDB lub
innego rozwi zania.
adowanie w trybie bez po czenia
przy u yciu magazynu danych
Gdy cz trwa ych danych u ywanych w aplikacji b dzie stosunkowo
niezmienna, w celu zapewnienia szybszego dost pu mo e mie sens a-
dowanie danych do lokalnego magazynu. W tym przypadku niezb dne
b dzie zmodyfikowanie obiektu Ext.data.JsonStore tak, aby jego metoda
load() szuka a danych w obszarze localStorage przed podj ciem próby za a-
dowania danych z serwera. Po za adowaniu danych z obszaru localStorage
obiekt Ext.data.JsonStore powinien wywo a serwer w celu sprawdzenia,
czy dane zosta y zmienione. W ten sposób aplikacja jest w stanie natych-
miast udost pni dane u ytkownikowi, co mo e wi za si z wyst pieniem
krótkotrwa ej niespójno ci. Mo e to wp yn na szybsz obs ug interfejsu
przez u ytkownika, a ponadto zredukowanie przepustowo ci wykorzy-
stywanej przez aplikacj .
78 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
Poniewa w przypadku wi kszo ci da dane nie b d modyfikowane,
naprawd sensowne jest u ycie dla danych okre lonej postaci mechani-
zmu ETag. Dane s pobierane z serwera za pomoc dania GET protoko u
HTTP i nag ówka If-None-Match. Je li serwer stwierdzi, e dane nie zmie-
ni y si , mo e wys a odpowied 304 Not Modified. Je eli dane zosta y
zmodyfikowane, serwer ode le nowe dane, a aplikacja za aduje je zarówno
do obiektu Ext.data.JsonStore, jak i do obiektu sessionStorage.
Obiekt Ext.data.PreloadStore (przyk ad 4.6) przechowuje dane w buforze
sesji jako jeden du y obiekt JSON (przyk ad 4.5). Dodatkowo dane odsy-
ane przez serwer obiekt opakowuje w kopert JSON, która umo liwia
przechowywanie w niej metadanych. W tym przypadku s przechowywane
dane mechanizmu ETag, a tak e data ich za adowania.
Przyk ad 4.5. Format danych trybu bez po czenia obiektu Ext.data.PreloadStore
{
"etag": "25f9e794323b453885f5181f1b624d0b",
"loadDate": "26-jan-2011",
"data": {
"root": [{
"code": "us",
"name": "Stany Zjednoczone"
},
{
"code": "ca",
"name": "Kanada"
}]
}
}
Przyk ad 4.6. Obiekt Ext.data.PreloadStore
Ext.extend(Ext.data.PreloadStore, Exta.data.JsonStore, {
indexKey: '',
// Domy lny klucz indeksu
loadDefer: Time.MINUTE,
// Okre lanie opó nienia procesu adowania danych
listeners: {
load: function load(store, records, options)
{
var etag = this.reader.etag;
var jsonData = this.reader.jsonData;
var data =
{
etag: etag,
date: new date(),
data: jsonData
};
sessionStorage[store.indexKey] = Ext.encode(data);
Obiekty localStorage i sessionStorage 79
Poleć książkę
Kup książkę
 },
beforeload: function beforeLoad(store, options)
{
var data = sessionStorage[store.indexKey];
if (data === undefined || options.force)
{
return true; // Brak danych w buforze; adowanie z serwera
}
var raw = Ext.decode(data);
store.loadData(raw.data);
// Odroczenie ponownego adowania danych
store.doConditionalLoad.defer(store.loadDefer, store, [raw.etag]);
return false;
}
},
doConditionalLoad: function doConditionalLoad(etag)
{
this.proxy.headers["If-None-Match"] = etag;
this.load(
{
force: true
});
},
forceLoad: function ()
{
// Przekazanie fikcyjnego identyfikatora ETag w celu wymuszenia adowania
this.doConditionalLoad('');
}
});
Podczas tworzenia identyfikatora mechanizmu ETag nale y pa-
mi ta o u yciu odpowiedniej funkcji mieszaj cej. Algorytm MD5
to prawdopodobnie najlepszy wybór. Cho algorytm SHA1 te
mo e zosta zastosowany, poniewa generuje znacznie d u szy
a cuch, raczej nie jest godny uwagi. W teorii mo liwe jest wyst -
pienie kolizji dotycz cej algorytmu MD5, lecz w praktyce w przy-
padku kontrolowania bufora prawdopodobnie nie jest to powód
do zmartwienia.
Dane w obiekcie localStorage mog by zmieniane w tle. Jak ju wyja niono,
u ytkownik mo e zmieni dane za pomoc narz dzi Developer Tools prze-
gl darki Chrome lub z poziomu wiersza polece dodatku Firebug. Zmiana
danych mo e te po prostu wyst pi nieoczekiwanie, gdy u ytkownik t
sam aplikacj otworzy w dwóch przegl darkach. A zatem wa ne jest, aby
magazyn prowadzi nas uch pod k tem zdarzenia aktualizacji z obiektu
localStorage.
80 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
Wi kszo operacji jest wykonywana w procedurze obs ugi zdarzenia
beforeload. Sprawdza ona, czy w magazynie danych znajduje si buforo-
wana kopia danych. Je li kopia istnieje, procedura aduje j do magazynu.
Je eli dane wyst puj , procedura obs ugi za aduje ponownie równie dane,
lecz u yje metody Function.defer() w celu opó nienia procesu adowania
do momentu pomy lnego zako czenia przez system wczytywania strony
internetowej. Dzi ki temu z mniejszym prawdopodobie stwem proces
adowania b dzie zauwa alny dla u ytkownika.
Metoda store.doConditionalLoad() kieruje wywo anie Ajax do serwera, aby
za adowa dane. Poniewa metoda uwzgl dnia nag ówek If-None-Match,
je li dane nie zmieni y si , za aduje ona bie ce dane. Metoda ta u ywa
równie opcji force, która sprawi, e procedura obs ugi beforeload za aduje
nowe dane i nie podejmie próby od wie enia magazynu z wykorzystaniem
buforowanej wersji obiektu localStorage.
Aby zwi kszy czytelno kodu, przewa nie definiuj sta e dla SECOND,
MINUTE i HOUR.
Przechowywanie zmian
w celu pó niejszej synchronizacji z serwerem
W sytuacji, gdy aplikacja mo e dzia a w trybie bez po czenia lub z u y-
ciem kiepskiego po czenia internetowego, przydatne mo e by zapew-
nienie u ytkownikowi mo liwo ci zapisu zmian bez wymogu dost pu do
sieci. W tym celu zmiany w ka dym rekordzie nale y zapisywa w kolejce
obiektu localStorage. Po ponownym nawi zaniu po czenia sieciowego przez
przegl dark kolejka mo e by przekazana serwerowi. Pod wzgl dem
dzia ania przypomina to dziennik transakcji u ywany w bazie danych.
Kolejka zapisu mo e wygl da podobnie jak w przyk adzie 4.7. Ka dy re-
kord w kolejce reprezentuje dzia anie podejmowane na serwerze. Oczywi-
cie dok adny format b dzie okre lany zale nie od wymaganej konkretnej
aplikacji.
Przyk ad 4.7. Dane kolejki zapisu
[
{
"url": "/index.php",
"params": {}
},
{
"url": "/index.php",
Obiekty localStorage i sessionStorage 81
Poleć książkę
Kup książkę
 "params": {}
},
{
"url": "/index.php",
"params": {}
}
]
Gdy przegl darka internetowa ponownie prze czy si w tryb z po czeniem,
niezb dne b dzie przetworzenie elementów kolejki. W przyk adzie 4.8
pierwszy element kolejki jest wysy any do serwera. Je li to danie zako -
czy si powodzeniem, zostanie pobrany nast pny element. Proces b dzie
kontynuowany dla kolejnych elementów a do momentu wys ania ca ej
zawarto ci kolejki. Je li nawet kolejka jest d uga, ten proces b dzie prze-
prowadzany z minimalnym wp ywem na dzia ania u ytkownika, poniewa
technologia Ajax przetwarza ka dy element w sposób asynchroniczny.
W celu zmniejszenia liczby wywo a Ajax mo liwa by aby taka modyfika-
cja przyk adowego kodu, aby jednocze nie by y wysy ane elementy kolejki
w grupach licz cych na przyk ad pi pozycji.
Przyk ad 4.8. Kolejka zapisu
var save = function save(queue)
{
if (queue.length > 0)
{
$.ajax(
{
url: 'save.php',
data: queue.slice(0, 5),
success: function (data, status, request)
{
save(queue.slice(5));
}
});
}
};
Dodatki biblioteki jQuery
Je li niepewno wszystkich opcji magazynowania po stronie klienta nie
daje spokoju, mo na skorzysta z innych opcji. Jak w przypadku wielu
rzeczy w j zyku JavaScript, z y i niespójny interfejs mo e by zast piony
modu em, który zapewnia znacznie lepszy interfejs. Poni ej omówiono dwa
takie modu y u atwiaj ce prac .
82 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
DSt
DSt (http://github.com/gamache/DSt) to prosta biblioteka, która opakowuje
obiekt localStorage. DSt mo e by autonomiczn bibliotek lub dzia a jako
dodatek biblioteki jQuery. Biblioteka DSt automatycznie przekszta ci do-
wolny z o ony obiekt w struktur JSON.
Ta biblioteka pozwala równie zapisywa i przywraca stan ca ego for-
mularza lub jego elementu. Aby zapisa i przywróci element, metodzie
DSt.store() nale y przekaza element lub jego identyfikator. W celu pó niej-
szego przywrócenia elementu nale y go przekaza metodzie DSt.recall().
Aby zapisa stan ca ego formularza, nale y u y metody DSt.store_form().
Metoda pobiera identyfikator lub element samego formularza. Dane mog
by przywrócone za pomoc metody DSt.populate_form(). Przyk ad 4.9 pre-
zentuje podstawowe zastosowanie biblioteki DSt.
Przyk ad 4.9. Interfejs biblioteki DSt
$.DSt.set('key', 'value');
var value = $.DSt.get('key');
$.DSt.store('element'); // Zapisanie warto ci elementu formularza
$.DSt.recall('element'); // Przywrócenie warto ci elementu formularza
$.DSt.store_form('form');
$.DSt.populate_form('form');
jStore
Aby nie podejmowa ryzyka zwi zanego z okre laniem, jakie mechanizmy
magazynowania s obs ugiwane przez poszczególne przegl darki, i nie two-
rzy ró nego kodu dla ka dego przypadku, mo na skorzysta z dobrego
rozwi zania, czyli dodatku jStore (http://twablet.com/docs.html?p=jstore) dla
biblioteki jQuery. Dodatek obs uguje obiekty localStorage i sessionStorage,
komponenty Gears SQLite i HTML5 SQLite, a tak e rozwi zania Flash
Storage i wbudowane w przegl dark Internet Explorer 7.
Dodatek jStore ma prosty interfejs, który umo liwia programi cie prze-
chowywanie par nazwa/warto w dowolnym z ró nych mechanizmów
magazynowania. Dodatek zapewnia jeden zestaw interfejsów dla wszystkich
mechanizmów. Z tego powodu w razie potrzeby program mo e dokona
degradacji z  wdzi kiem w sytuacjach, gdy mechanizm magazynowania
nie jest dost pny w danej przegl darce.
Dodatki biblioteki jQuery 83
Poleć książkę
Kup książkę
Dodatek jStore udost pnia list mechanizmów obecnych w zmiennej
instancji jQuery.jStore.Availability. Program powinien wybra najbardziej
sensowny mechanizm. W przypadku aplikacji wymagaj cych obs ugi przez
wiele przegl darek mo e to by po yteczny dodatek. Wi cej szczegó ów
mo na znale w witrynie internetowej dodatku jStore.
84 Rozdzia 4. Lokalne magazynowanie danych
Poleć książkę
Kup książkę
Skorowidz
MongoDB, 85
A
NoSQL, 85
SQLite, 72
adres URL gniazda WWW, 135
bezpiecze stwo danych, 86
adresowanie elementów, 55
biblioteka
Ajax, Asynchronous JavaScript
DSt, 83
and XML, 30
Event Machine, 140
aktualizowanie magazynu, 90
ExtJS, 17, 77
aktualizowanie pliku manifestu, 106
jQuery, 14, 16
aktywny plik manifestu, 105
jQuery Hive, 132
akumulator, 40
PollenJS, 132
algebra tablic, 37
socket.io, 135
algorytm
Symfony Yaml Library, 106
MD5, 80
b dy w w tku roboczym, 127
SHA1, 80
bufor aplikacji, 110
Android, 69
buforowanie plików, 12
aplety Java, 14
aplikacja
ARIA, 145
C
WAI-ARIA, 145
aplikacje
CACHE MANIFEST, 105
internetowe, 14
CDN, Content Delivery Network, 103
uruchamiane w przegl darce, 14
cena akcji spó ki, 136, 138
ARIA, Accessible Rich Internet
chmura Amazon EC2, 62
Applications, 145
ci g Fibonacciego, 34
arkusz stylów qunit, 50
cookie, 71
asercje, 56
Crockford Douglas, 16
atak XSS, 86
czas adowania strony, 49
atrybut itemprop, 146
czas wykonania operacji, 21
atrybut role, 145
atrybuty HTML, 147
D
B
dane
formularza, 148
baza danych
obrazu PNG, 94
CouchDB, 85
oprogramowania Gmail, 134
Gears SQLite, 72
interfejsu IndexedDB, 88
157
Poleć książkę
Kup książkę
debugger element
Venkman, 16 canvas, 13, 149
Weinre, 16 dokument, 55
debugowanie identyfikator, 55
kodu JavaScript, 16, 127 iframe, 127
plików manifestu, 109 nazwa, 55
deklaracja manifestu HTML, 104 selektor CSS, 55
Developer Tools, 74 tablicy, 37
dodatek tekst odsy acza, 55
Firebug, 16, 74, 95 wyra enie XPath, 55
FireRainbow, 155 emulowanie gniazd WWW, 135
Flash, 93
jStore, 84
F
Speed Tracer, 156
dodawanie
farma testowania, 69
magazynu danych, 87
Firebug, 16, 74, 95
w a ciwo ci, 32
Firefox, 111
DOM, Document Object Model, 11
Flash Storage, 83
domkni cie, 21, 24
format
domkni cie w przycisku, 25
JSON, 30, 74, 137
dostarczanie tre ci, 103
pliku manifestu, 105
dost p
SVG, 149
do bazy, 86
UTF-8, 139
do dysku, 20
formularz klasyczny, 147
do funkcji, 24
fraktal, 120
do modelu DOM, 115
funkcja
do obiektów magazynowania, 75
Array(), 28
do obiektu localStorage, 73
buildMaster(), 123
do plików, 104
deepEqual(), 50
do serwera, 133
factory(), 25
do systemu plików, 93, 101
filter(), 28
do w tków roboczych, 115
handleButtonClick(), 47
DSt, 83
isDuplicate(), 92
dwukierunkowy kana danych, 134
notDeepEqual(), 50
dzia ania, 56
notEqual(), 50
notStrictEqual(), 50
raises(), 50
E
setTimeout(), 50
Eclipse, 155 square(), 22
edytowanie strictEqual(), 50
localStorage, 75 tickerUpdate(), 138
obiektu magazynowania, 74 transaction.abort(), 89
sessionStorage, 75 transaction.done(), 89
efekty uboczne, 27 WaitForElementPresent(), 64
158 Skorowidz
Poleć książkę
Kup książkę
funkcje localStorage, 85
anonimowe, 22 MozBlobBuilder, 94
asercji, 49 REST, 61
lambda, 37 u ytkownika, 54
mieszaj ce, 80 WebKitBlobBuilder, 94
uruchamiania, 128 XHR2, 97
wewn trzne, 24 XMLHttpRequest, 97, 118
wy szego rz du, 28 zdarzenia magazynowania, 74
zewn trzne, 24 iOS, 69
G J
j zyk
Gears, 13
C, 13
geolokacja, 116, 150
C++, 13
gniazdo
CoffeeScript, 156
TCP/IP, 134
C#, 62
WWW, 13, 134
Erlang, 27, 138, 142
GWT, Google Web Toolkit, 17
F#, 27
Haskell, 27, 36
H
HTML5, 11
Java, 13, 62, 138
HTTP, Hypertext Transfer Protocol, 13
JavaScript, 12, 15
Lisp, 23
Perl, 23, 62
I
PHP, 20, 62, 137
identyfikator mechanizmu ETag, 80 Python, 23, 62
instancja obiektu, 32 Rhino, 156
instrukcja Ruby, 23, 62, 138
function, 22 Scala, 27
if, 22 Selenese, 64
j zyki
return, 27
funkcjonalne, 140
instrukcje waitFor, 52
polece , 54
inteligentny telefon, smartphone, 14
.NET/CLR, 138
interfejs
jStore, 83
API, 12, 62
API FileSystem, 101
API geolokacji, 150
K
biblioteki DSt, 83
biblioteki jQuery, 28
klasa PHPUnit_
BlobBuilder, 94
Extensions_SeleniumTestCase, 61
dla gniazd WWW, 135
klient z gniazdem, 137
FileReader, 96 klucz
gniazd WWW, 135, 138 g ówny, 91
IndexedDB, 12, 73, 85, 90 magazynu, 78
JSON, 118 obiektu, 86
Skorowidz 159
Poleć książkę
Kup książkę
kolejka zapisu, 81 metoda
komunikacja z w tkiem, 119 $.decode(), 132
konfigurowanie pakietu QUnit, 47 $.encode(), 132
konsorcjum W3C, 85 $.get(), 132
konstruktor MozWebSockets, 135 $.post(), 132
kontrola przep ywu, 55 $this->getText(), 64
$this->getXpathCount(), 65
$this->isElementPresent(), 64
L
$this->isTextPresent(), 64
alert(), 21
liczba
BlobBuilder.getBlob(), 94
wykonanych testów, 66
close(), 118
da Ajax, 134
confirm(), 21
limit czasu oczekiwania, 50
console.info(), 123
lista
createObjectURL(), 95
domkni tych zmiennych, 26
deleteEach(), 92
pozycji dozwolonych, 110
DSt.recall(), 83
DSt.store(), 83

DSt.store_form(), 83
equal(), 49
adowanie listy plików, 106
every(), 40
adowanie zestawu plików, 103
filter(), 39
adunek Ajax, 97
FormData.append(), 97
a cuch prototypów, 31
Function.defer(), 81
a cuch UTF-8, 136
get, 91
a cuchy, 31
getCurrentPosition(), 150
getEval(), 65
getItem(), 75
M
importScripts(), 118
magazyn
index(), 90
danych, 87
map(), 38
obiektów, 88
mozSlice(), 95
magazynowanie lokalne danych, 72
ok(), 50
magazynowanie obiektów binarnych, 101
onmessage(), 117
manifest, 103
openCursor, 91
manifest HTML5, 104
populate(), 32
sekcja FALLBACK, 105
postMessage(), 117, 128
sekcja NETWORK, 105
prompt(), 21
mapy, 116
reduce(), 40
mechanizm
reduceRight(), 40
ETag, 79
remove(), 92
localStorage, 73
removeItem(), 75
magazynowania, 85
revokeBlobURL(), 95
mened er NPM, 138
setInterval(), 36, 118
setTimeout(), 36, 118
160 Skorowidz
Poleć książkę
Kup książkę
slice(), 95
O
socket.close(), 136
socket.onclose(), 136
obiekt
socket.onopen(), 136
Array.prototype, 40, 42
socket.send(), 136
ArrayBuffer, 96
some(), 40
blob, 94, 97
store.doConditionalLoad(), 81
DataStore, 21
string.indexOf(), 31
do zapisu stanu, 77
string.lastIndexOf(), 31
Ext.data.JsonStore, 78
string.match(), 31
Ext.data.PreloadStore, 79
string.replace(), 31
File, 95
string.slice(), 31
FileList, 95
string.split(), 31
FileReader, 96
then(), 91
FormData, 97, 99
transaction.done(), 89
Function.prototype, 33
webkitSlice(), 95
localStorage, 17, 72
metody
location, 118
iteracji, 37
nas uchuj cy, 98
okien, 21
navigator, 118
uruchamiania testów, 52
Number.prototype, 33
mikrodane, 146
Object.prototype, 42
model DOM, 13
po czenia, 138
model wieloprocesorowy, 138
self, 118
modyfikowanie opcji testowania, 61
sessionStorage, 73
String.prototype, 31
transakcji, 88
N
URL, 94
WebSocket, 135
nag ówek If-None-Match, 79, 81
window.applicationCache, 108
nag ówki gniazda, 139
Worker, 117
narz dzie
XHR, 21, 30
ClojureScript, 156
XMLHttpRequest, 99
DevTools, 26
obs uga
Gmail, 93
czcionek internetowych, 151
GWT, 17
d wi ku i wideo, 149
JSBeautifier, 154
gniazd WWW, 135
JSLint, 19, 153
grafiki w HTML5, 116
JSMin, 154
odchylenie standardowe, 40
PhoneGap, 14
okno profilu niestandardowego, 111
Selenium Grid, 62
opakowanie, wrapper, 14
YSlow, 155
opcje odczytu danych
narzut, 135
FileReader.readAsArrayBuffer(), 96
NoSQL, 12
FileReader.readAsBinaryString(), 96
FileReader.readAsText(), 96
FileReader.readDataAsURL(), 96
Skorowidz 161
Poleć książkę
Kup książkę
opcje przegl darki Firefox, 111 programowanie
Opera Dragonfly, 16 funkcyjne, 27
operacje sterowane zdarzeniami, 20
blokuj ce, 21 protokó
nieblokuj ce, 21 gniazd WWW, 139
wej cia-wyj cia, 20 HTTP, 13, 135
operator SSL, 135
==, 50 prototyp, 31
===, 50 Function, 36
tablicowy, 99 Number, 33
oprogramowanie Gears, 104 przechowywanie danych, 12, 15
otwarte danie HTTP, 134 przechwytywacz, 33
przeci ganie plików, 93, 98
przetwarzanie
P
danych mapy, 116
elementów kolejki, 82
panel administracyjny witryny, 146
w chmurze, 62
panel rodowiska IDE, 58
przeznaczenie witryny, 14
para klucz warto , 88
parametr unlimitedStorage, 101
pasek post pu, 101
Q
p tla for, 39
p tla zdarze , 113 QUnit, 47
ping, 15, 72
plik
R
HTML, 61
JAR, 68
rejestrowanie dzia a w przegl darce, 58
Java, 61
rekurencja, 35
konfiguracyjny, 104
rekurencja listy, 29
manifestu, 104, 105
relacyjna baza danych, 88
phpunit.xml, 61
rozszerzanie
seleneseTest.html, 62
funkcji, 33
archiwum, 98
prototypów, 32
pobieranie danych, 91
rozszerzenia typów podstawowych, 32
pole wysy ania pliku, 95
rozszerzenie
polecenia pakietu Selenium, 56
Firebug, 16, 26
polecenie
Gears, 13
assertElementPresent, 57
rozwijanie, currying, 36
clickAndWait, 57
rozwijanie obiektu, 41
verifyElementPresent, 57
waitForElementPresent, 57
S
po czenie gniazda z serwerem, 136
po o enie elementu, 54
selektor XPath, 65
port domy lny, 69
selektory CSS, 150
procedura obs ugi clickHandler, 25
Selenese, 54
program seleniumrc, 61
Selenium, 50
162 Skorowidz
Poleć książkę
Kup książkę
serwer technologia
Node.js, 138, 156 Ajax, 11, 13, 135
RC, 62, 68 Flash, 135
seleniumrc, 51 Web Workers, 12, 30, 114, 127
WWW, 14 terminal VT320, 15
WWW Erlang Yaws, 140 test integracji, 45
Yaws, 138 test jednostkowy, 45
z gniazdami, 138
testowania po stronie serwera, 63
sk adowa statyczna $browsers, 61
testowanie
skrypt pakietu Selenium, 52
przegl darek, 68
s owo kluczowe lambda, 23
tytu u, 63
sprawdzanie plików, 106
w tków roboczych, 127
standard ECMAScript 5, 118
testy
standard XML, 149
akceptacji, 45
sterownik systemu Android, 69
integracji, 44
sterownik urz dzenia iPhone, 69
jednostkowe, 44
Subversion, 106
QUnit, 47
suma kontrolna MD5, 106
Selenium, 50
SVG, Scalable Vector Graphics, 149
transakcja jawna, 89
system kontroli wersji, 106
tryb bez po czenia, 81
system plików, 101
tryb z po czeniem, 82
szablon, 31
tworzenie
szybko transmisji, 72
bazy danych, 88
generatora funkcji, 24
grafiki, 149

indeksu, 87, 90
kodu Java, 17
cie ki do plików, 42
magazynu lokalnego, 72
ledzenie stosu, 23
wywo ania Ajax, 20
rednia krocz ca, 38
typ MIME, 104
rodowisko
typy podstawowe, 30
Aptana, 155
typy testów, 45
Emacs JS2 mode, 155
IDE, 51, 58
Java, 68
U
narz dziowe Xcode, 69
PHP, 65
upuszczanie pliku, 98
PHPUnit, 59
uruchamianie
piaskownicy, 14, 101
testów, 61
w tków roboczych, 117
testów QUnit, 66
xUnit, 52
pakietu Selenium, 63
usuwanie
danych, 92
T
indeksu, 87
tablica tools, 25
tablice, 37
Skorowidz 163
Poleć książkę
Kup książkę
uzyskiwanie
Z
jednego wiersza, 91
wszystkich wierszy, 92
zablokowanie interfejsu, 21
zakresu wierszy, 91
zapisywanie stanu, 17
u ycie danych z pliku, 93
zapytania, 64
zarz dzanie kolejk zada , 126
zasi g leksykalny, 24
W
zbiór Mandelbrota, 123
zdarzenie
warto
beforeload, 81
this, 27
cached, 108
undefined, 27, 42
checking, 108
void, 96
click, 57
warunek b du, 50
downloading, 108
w tek
drop, 98
g ówny, 120
error, 109
roboczy, 114, 118
magazynowania, 74
roboczy Web Worker, 21
message, 118
WebKit, 16, 72
mouseDown, 57
Weinre, WEb INspector REmote, 16
mouseUp, 57
wersja magazynu, 90
noupdate, 108
wielko obiektu localStorage, 74
oncomplete, 97
wielko wysy anych plików, 96
onprogress, 97
witryna
progress, 108
GitHub, 50, 138
webkitspeechchange, 147
Mozilla Developer Network, 31
zmiana danych, 80
O Reilly Answers, 19
zmienna leksykalna, 24
StackOverflow, 19
znacznik
w a ciwo $seleneseDirectory, 62