Pierwsze kroki z YUI3


Original: http://www.klauskomenda.com/archives/2009/07/20/first-steps-with-yui3/

Użyłem YUI2 dość intensywnie odkąd dołączył Yahoo! w maju 2007. Wcześniej tak naprawdę nie mają dużego doświadczenia z dowolnej biblioteki JavaScript, miałem bawił script.aculo.us i jQuery trochę, ale to było wszystko, bardzo dużo. Bo tutaj w Yahoo! my, naturalnie, użyj YUI we wszystkich naszych projektach, musiałem nurkować i dowiedzieć się, jak go używać. Po nieco szorstkim początku, dowiedzieć się podstaw, zacząłem lubić YUI2. Powody były podejście modułowe, dobra dokumentacja API, a dla mnie, ogólny sposób, jak korzystać z niektórych funkcji wydawał się dość logiczne dla mnie. Teraz, z nowym 3-seria wychodzi, byłem ciekawy, co zmienić, co poprawić, a co do nauki, aby wykorzystać nową generację biblioteki.

Kilka istotnych różnic

Nie mam zamiaru iść do wszystkich rzeczy, które różnią się między YUI2 i YUI3, to poza zakres tego postu. Istnieje już wiele dokumentacji na YDN i bardzo dobry film, obejmującego wiele pytań takich jak “Co tak różne?”. Zaledwie kilka najważniejszych rzeczy do zapamiętania:

YUI3 jest majorly różni YUI2. To jest w zasadzie nowa biblioteka, a tym samym, w wielu aspektach, działa zupełnie inaczej niż jego poprzednik.
Aby uniknąć konfliktów między obu bibliotek, globalny obiekt YAHOO (używane w YUI2) jest teraz YUI. Umożliwia to również, aby zarówno YUI2 YUI3 i na tej samej stronie.
. Każdy kawałek kodu piszesz musi zostać owinięte w następującym stwierdzeniem: YUI () użyć ([YUI3 moduły chcę użyć funkcji] (Y) {… Mój kod tutaj …}); To, teoria, umożliwia tworzenie nazw, tak jak my w YUI2, niepotrzebne.

Prosty przykład: JavaScript Countdown

Wystarczy, aby bawić się z nim i zacząć przykład dość podstawowe, chciałem zrobić odliczanie w JavaScript. Jak miałbym to zrobić używając YUI3?

Krok po kroku

Poniższe kroki należałoby zostanie wykonany w celu dokonania tej pracy przykład:

Umieścić podstawowych znaczników na stronie, która wyznacza czas rozpoczęcia odliczania np. 30 minut i 0 sekund.
Mają jedną funkcję, decreaseSeconds który zmniejsza sekund i wywołać tę funkcję na sekundę (lub 1000 milisekund).
Jeśli licznik sekund osiągnie 0, zmniejsz minut korzystając decreaseMinutes.
Zatrzymać stoper czy minuty i sekundy osiągnie 0.

Podstawowe Markup

Jak powiedział, znaczników na stronie już służy jako czas rozpoczęcia odliczania i jest dość prosty:

30 : 00

Umieszczenie YUI3 na stronie

W celu wprowadzenia YUI3 na stronie, musimy zawierać obiekt YUI Global:

// <![CDATA[

I właśnie w celu sprawdzenia to działa, dodamy trochę debugowania kodu na stronie:

YUI (). Użyć (“węzeł”, function (Y) {
alert (“YUI3 jest tutaj!”);
});

Tylko kilka słów na ten temat. Pierwszy argument funkcji obsługi, w tym przypadku “węzeł”, opowiada instancji YUI, które moduły do ​​załadowania. Jak się okaże później, węzeł modułu, wraz z funkcjonalnością, że YUI obiekt globalny dostarcza, są wystarczające, aby ten przykład praca. Ostatni argument tutaj jest funkcja zwrotna, która ma instancji YUI jako argument. W tej funkcji jest, gdzie mieszka i Twój kod ma dostęp do YUI3 instancji i modułów, jeśli załadowany w. Więcej na ten temat w dokumentacji.

Więc mamy podstawy pokryte, YUI3 jest na stronie i możemy przejść do logiki programu.
Ustawianie zmiennych i funkcji

Najpierw mam zamiar ustawić pewne zmienne, że będę potrzebował całego kodu:

var minut = Y.get (“# min”),
sekund = Y.get (“# s”),
timer,
Liftoff = false;

Jak widać tutaj, YUI3 daje możliwość dostępu do elementu DOM za pomocą selektorów CSS z pudełka. Y.get (“# min”) zwraca węzeł (w YUI3 kategoriach), które otacza podstawowej obiektu DOM. Ale należy pamiętać, że obiekt ten nie jest tu sam obiekt DOM, która jest inna niż to, co YAHOO.util.Dom.get (“min”) zrobi.

Będziemy również skonfigurować funkcję decreaseSeconds i czasomierz:

decreaseSeconds function () {
/ / Pobiera aktualną wartość sekund
var s = seconds.get (“innerHTML”);

if (secs === “00”) {
/ / Przejście do 59
s = 59;
decreaseMinutes ();
} Else {
secs -;
if (secs 0) {
min -;
if (min <10) {
min = "0" + min;
}
minutes.set ("innerHTML", min);
} Else {
timer.cancel ();
Liftoff = true;
}
}

Bardzo prosty i wykorzystuje metody otoki dostęp do funkcji DOM. Teraz działa, ale nie są do końca jeszcze gotowy.
Modularizing

Jak widać, wszystko jest obecnie kod inline na stronie i zostanie wykonany, jak tylko załadowaniu strony. To jest optymalne. Co robiłem używając YUI2 jest stworzenie modułu konkretnych nazw, a następnie wywołać metodę publiczną (udostępnione dzięki wykorzystaniu wzorca Module) na stronie, że potrzebne, że funkcjonalność. Tak więc w tym module będzie, np.:

YAHOO.Klaus.Countdown = function () {
… mój kod …
powrócić {
startowych: init
};
} ();

A potem, na co strona chcę go używać, czy:

YAHOO.Klaus.Countdown.init ();

Byłem ciekaw, jak osiągnąć coś takiego w YUI3.

Ja przyszedłem się z roztworu, ale nie jestem pewien, czy to sugeruje to sposobem. Mam nadzieję, że tak jest, ponieważ nie mogłem znaleźć inny sposób to zrobić. Sekretem jest dodać "moduł" utworzony jako moduł do YUI3, takich jak:

Y.add ("Klaus.Countdown" init);

Drugi argument to nazwa funkcji, które mają być wykonane, gdy moduł jest powołano używane wykorzystanie () funkcji.

Tak więc to, co jest do zrobienia jest zapisywanie kodu odliczania w osobnym pliku, a następnie zadzwonić do modułu z poziomu bloku skryptu na stronie:

. YUI () używać (“Klaus.Countdown”);

Więc mamy zrobić i mam nadzieję, zadowoleni z naszych pierwszych kroków w YUI3.

Konkluzja

Ja celowo prosty przykład na początek, aby uniknąć frustracji pochodzące z konieczności uczenia się i przyzwyczaić do zbyt wieloma rzeczami na raz. Podobnie jak w przypadku każdego nowego kawałka oprogramowania, podręczny “jakoś” na pierwszym miejscu jest krytyczna i dowiedzieć się, jak osiągnąć rzeczy bez uruchamiania do blokad zbyt wielu na raz. Jak łatwo lub trudno jest używać YUI3, mam jeszcze do ustalenia, kiedy prawdopodobnie stoi bardziej złożone przykłady, ale uważam to proste przykłady daje zajawka do tego, co czeka na końcu linii.
– Zobacz więcej: http://www.klauskomenda.com/archives/2009/07/20/first-steps-with-yui3/ # sthash.CClNMAN0.dpuf
]]>

Comments are closed.