Dziudek's jogger

Dzisiejszy wpis dedykuję wszystkim wielbicielom zdarzenia DOMContentLoaded. Niestety jak wszystko co dobre, wymaga ono ostrożności w stosowaniu.

Dla zobrazowania sytuacji dwa przykłady.

W MooTools 1.1.1 (niektórzy muszą wciąż na nim bazować - i nie jest to wcale małe grono) implementacja zdarzenia domready sprawia, że w IE powstają czasami dziwne błędy wynikające z tego, że zdarzenie to występuje PRZED wczytaniem kompletnego drzewa dokumentu. Efektem jest z reguły na wpół załadowana strona. Żeby było jeszcze ciekawiej to problem ten występuje tylko w niektórych przypadkach - niestety nie udało mi się jeszcze wykryć kiedy dokładnie to się dzieje ze względu na złożoność stron, które posiadały ten problem. Jedno jest pewne - w MooTools 1.1.1 stosowanie zdarzenia domready właściwie odpada na stronach gdzie użytkownik może swobodnie dodawać nowe moduły z treścią - w konkretnej konfiguracji nasz skrypt może pięknie działać w IE ale wystarczy, że użytkownik włączy dodatkowe moduły i wtedy mogą wystąpić poważne problemy - lepiej nie ryzykować zwłaszcza, że widok strony, która wczytała się do połowy wcale nie powoduje przywołania na myśl tego, że przyczyną może być źle działający skrypt.

Drugi problem tyczy się także stron gdzie mogą się pojawić później dodatkowe elementy. Jako przykład przytoczę tu skryptowe wyrównywanie kolumn - pierwsza myśl przy tworzeniu takowego skryptu jest jasna - niech to wyrównywanie wykona się najszybciej jak to tylko jest możliwe. I wszystko zapewne będzie działać pięknie do momentu w którym na stronie nie pojawi się po jakimś czasie dodatkowy skrypt, który będzie modyfikował wysokość elementów w treści kolumny i oczywiście złośliwie korzystał ze zdarzenia onLoad.

Reasumując ten krótki wpis - decyzja o korzystaniu ze zdarzenia DOMContentLoaded powinna wynikać nie tylko z zalet tego rozwiązania, ale także z przeanalizowania przyszłych losów tworzonej strony - jeżeli wiemy, że strona jest tak zbudowana iż umożliwia użytkownikowi spore zmiany w zakresie układu witryny i dodawanie dodatkowych rozwiązań bez naszego udziału to rada jest krótka - lepiej zapomnieć o stosowaniu tego zdarzenia.

W poprzednich częściach kursu nauczyliśmy się poruszać po drzewie dokumentu, tworzyć nowe elementy strony oraz zmieniać ich cechy, odczytywać je oraz przechowywać dodatkowe informacje w elementach. Przyszła pora poznać kilka metod dokonujących znaczących zmian w strukturze dokumentu - dwie z nich poznaliśmy wcześniej - adopt i clone, teraz nauczymy się kilku nowych.

Czytaj dalej...

W kolejnej części kursu poświęconej elementom strony, zajmiemy się dynamicznym tworzeniem elementów, zmienianiem ich atrybutów oraz zapoznamy się z zupełnie nową funkcjonalnością klasy Element - możliwością przechowywania informacji w obiektach tej klasy.

Czytaj dalej...

W MooTools 1.2 usunięto funkcje, które stosowałem dość często - $E i $ES. Pozwalały one wybrać odpowiednio pierwszy lub wszystkie elementy zgodne z podanym selektorem i znajdujące się w podanym elemencie. Były one swoistym skrótem dla metod getElementsBySelector, getElement i getElements.

Gdyby ktoś chciał jednak móc je zastosować to prezentuję poniżej ich implementacje w MooTools 1.2:

function $E(selector, scope){
    return $($defined(scope) ? scope : document.body).getElement(selector);
}
 
function $ES(selector, scope){
    return $($defined(scope) ? scope : document.body).getElements(selector);
}

Pierwszy argument to oczywiście selektor określający jakie elementy chcemy wyselekcjonować, a drugi argument jest opcjonalny i pozwala ograniczyć zakres poszukiwań do wybranego elementu - musi to być uchwyt do elementu lub jego id.

Dla tych, którzy chcieliby w drugim argumencie móc zastosować także selektor przygotowałem lekko zmienioną wersję funkcji $E i $ES pozwalającą stosować w obu argumentach selektory:

function $E(selector, scope){
    return $$($defined(scope) ? scope : document.body)[0].getElement(selector);
}
 
function $ES(selector, scope){
    return $$($defined(scope) ? scope : document.body)[0].getElements(selector);
}

Należy pamiętać, że w tym wypadku nie można podać id bez znaku # na początku.

Niezwykle istotną sprawą przy tworzeniu skryptów jest możliwość łatwego poruszania się po drzewie dokumentu - w MooTools mamy kilka metod, które pozwalają nam na dostęp do różnych elementów względem innych elementów. Dodatkowo zapoznamy się bliżej z funkcją $$, która pozwala na selekcję kilku elementów naraz według określonych parametrów.

Czytaj dalej...