Першыя крокі ў YUI3
Original on www.klauskomenda.com
Я выкарыстоўваў YUI2 досыць доўга, бо далучыўся да Yahoo! у траўні 2007 года. Да гэтага я ў рэчаіснасці не меў вялікага досведу працы з любой бібліятэкай JavaScript, але я трохі гуляў з script.aculo.us і JQuery, але гэта было ўсё, чым я мог ганарыцца. Таму што тут, на Yahoo! мы, натуральна, выкарыстоўваем YUI ва ўсіх нашых праектах, пагэтаму я павінен быў вывучыць і навучыцца выкарыстоўваць яго. Пачаўся гэты працэс марудна і складана, і тоьлькі праз некаторы час я пачаў высвятліць асновы YUI2. Асноўныя чыннікі былі ў модульным падыходзе, добрай дакументацыі API для мяне, агульных спосабаў, якія выкарыстоўваць некаторыя функцыі, уяўляецца даволі лагічным мяне. Зараз, калі выходзіць новая 3-я серыя, я пацікавіўся, што змянілася, якія з’явіліся паляпшэнні, чаму можна павучыцца, каб выкарыстоўваць новае пакаленне бібліятэк.
Некалькі асноўных адрозненняў
Я не буду ўдавацца ва ўсе рэчы, якія адрозніваюцца ў YUI2 і YUI3, гэта выходзіць за рамкі гэтага поста. Існуе ўжо мноства тэхнічнай дакументацыі, прысвечанай YDN, есць таксама і вельмі добрае відэа, якое ахоплівае мноства пытанняў, напрыклад, “Што там зроблена па-іншаму? Прывядзём толькі некалькі ключавых рэчаў да ўвагі:
- YUI3 з’яўляецца Majorly і адрозніваецца ад YUI2. Гэта галоўным чынам новыя бібліятэка і, такім чынам, таксама мае больш шляхоў эфектыўнага выкарыстання, чым яго папярэднік.
- Каб пазбегнуць канфліктаў паміж дзвюма бібліятэкамі, глабальны аб’ект YAHOO (выкарыстоўваецца ў YUI2) зараз з’яўляецца YUI. Гэта таксама дазваляе мець як YUI2, так і YUI3 на той жа старонцы.
- Кожны кавалак кода запатрабаванняў, якія вы пішаце, павінен быць спакаваны ў наступную заяву:
YUI().use([YUI3 modules I want to use], function (Y) { ...my code here... } );
Гэта, у тэорыі, дазваляе зрабіць прастору для імёнаў непатрэбнай, як мы гэта рабілі ў YUI2.
Просты прыклад: JavaScript Зваротны адлік
Проста каб пагуляць з ім, пачнём з вельмі простага прыклада, пагэтаму я жадаў бы зрабіць адлік часу ў JavaScript. Як я магу зрабіць гэта з дапамогай YUI3?
Крок за крокам
Наступныя крокі павінны выконвацца для таго, каб гэты прыклады працавалі:
- Пакладзяце асноўныя разметкі на старонцы, які я азначаюць, што пачаўся час зваротнага адліку, напрыклад, 30 мінут і 0 секунд.
- У адной функцыі, што памяншае decreaseSeconds секунд і выклікае гэту функцыю кожную другую секунду (ці 1000 мілісекунд).
- Калі лічыльнік секунд дасягае 0, зніжэння можна яўчэ мінуць, выкарыстоўваючы decreaseMinutes.
- Вы можаце таксама спыніць таймер, калі хвіліны і секунды дасягнулі 0.
Асноўныя разметкі
Як сказана, разметкі на старонцы служыць ужо для абазначэння часу пачатку зваротнага адліку і просты:
<div id="countdown">
<span id="min">30</span>:<span id="sec">00</span> </div>Увод YUI3 на старонцы
Для таго, каб пакласці YUI3 на старонцы, мы павінны ўключыць глабальны аб’ект у YUI:
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>Для таго, каб пакласці YUI3 на старонцы, мы павінны ўключыць глабальны аб’ект у YUI:
YUI().use("node", function (Y) {alert("YUI3 is here!"); });
Некалькі слоў пра гэта. Першым аргументам выкарыстоўваць гэту функцыю у дадзеным выпадку з’яўляецца “вузел”, які распавядае, напрыклад, пра YUI, модулі, які трэба загрузіць. Як стане вядома пазней, вузел модуля, а таксама яго функцыянальнасць і YUI глабальнага аб’екта прадугледжваюць досыць усяго, каб зрабіць гэты прыклад працы зразумелым. Апошнім аргументам тут з’яўляецца функцыя зваротнага выкліку, якая можа выкарыстоўвацца ў якасці аргументу YUI. У гэтай функцыі, да якой ваш код жыцця мае доступ, YUI3 інстанцыі і модулі, калі яны загружаны, маюць больш падрабязныя звесткм пра гэту дакументацыю.
Такім чынам, мы атрымалі асновы, YUI3 на старонцы, зараз мы можам перайсці да логікі праграмы.
Налада зменных і функцый
Спачатку я іду стварыць шэраг зменных кодаў, таму я буду мець патрэбу ў іх на працягу ўсей аперацыі:
var minutes = Y.get("#min"),
seconds = Y.get("#sec")
timer,
liftOff = false;Як вы можаце бачыць тут, YUI3 дае вам магчымасць атрымаць доступ да элементаў DOM выкарыстаннем CSS селектары “са скрынкі”. Y.get (“#min”) вяртае вузел (у YUI3 умоў), якія абкручванні базавага аб’екта мае DOM. Але памятаеце, што гэты аб’ект тут не з’яўляецца DOM, які адрозніваецца ад таго, YAHOO.util.Dom.get (“min”) што мы збіраемся рабіць.
Мы таксама стварылі decreaseSeconds функцыі і таймера:
function decreaseSeconds() {
// get current seconds value
var secs = seconds.get("innerHTML");
if (secs === "00") {
// move to 59
secs = 59;
decreaseMinutes();
} else {
secs--;
if (secs < 10) {
secs = "0" + secs;
}
}
if (!liftOff) {
seconds.set("innerHTML", secs);
}
}
timer = Y.later(1000, null, decreaseSeconds, [], true);Замест таго, каб казаць пра логіку праграмы, якая павінна быць даволі зразумелай, я жадаў бы падкрэсліць, што вы не знойдзеце пэўных рэчаў YUI3 тут:
- Налада таймера выкарыстаннем Y.later з’яўляецца даволі лёгкай, і супастаўна з YAHOO.later у YUI2.
- Калі вузел вяртаецца да Y.get, не вузел DOMробіць штосьці накшталт seconds.innerHTML і не працуе. Сапраўды, ён вернецца “нявызначаным”. Калі вы будзеце выкарыстоўваць console.dir (у секундах), вы зразумееце, што ен зусім не падобны на аб’ект DOM, але, як было паказана вышэй, напрыклад, YUI вузел пакавання элементаў DOM з ID = “sec”. Такім чынам, замест таго, каб рабіць InnerHTML, мы павінны выкарыстоўваць seconds.get (“innerHTML”), каб атрымаць доступ да змесціва паміж коштам адкрыцця і яго зачыненнем.
- Акрамя таго, каб усталяваць утрыманне з дапамогай innerHTML, мы павінны рабіць seconds.set (“innerHTML”, сек).
Гэтаробіцца для таго, каб абвыкнуць. Таму што ў YUI2 людзі (уключаючы мяне) былі скарыстаны для таго, каб мець рэальныя аб’екты DOM пад рукой пры выкананні аперацый DOM над ім. Але ўсе яшчэ можна атрымаць доступ да базавых аб’ектаў DOM, гл. Каментар Лукі.
Пасля налады гэтай аперацыі мы можам рухацца далей, каб дадаць функцыянальнасць для зніжэння яго, каб мінуць і зрабіць меншым адлік часу працы.
Прымусіць яго працаваць
Вось код і логіка для зніжэння і адмены таймера 0, калі мэта будзе дасягнута:
function decreaseMinutes() {
var mins = minutes.get("innerHTML");
if (mins > 0) {
mins--;
if (mins < 10) {
mins = "0" + mins;
}
minutes.set("innerHTML", mins);
} else {
timer.cancel();
liftOff = true;
}
}Ён ідзе даволі прама, а таксама выкарыстоўвае абгортку метадаў DOM для доступу да функцыянальнасці. Зараз яна працуе, але уся праца яшчэ не зусім скончана.
Мадулярызацыі
Як вы можаце бачыць, увесь код, убудаваны ў наш час на старонцы, выконваецца толькі пры загрузцы старонкі. Гэта недастаткова. Што я магу зрабіць з дапамогай YUI2, каб стварыць модуль пэўных імёнаў, а затым выклікаць метад грамадскага выкарыстання (зроблены даступным з дапамогай модуляў ўзору) на старонцы, якая неабходна для гэтай функцыянальнасці. Такім чынам, для гэтага модуль будзе характэрна, напрыклад:
YAHOO.Klaus.Countdown = function () {
... my code ...
return {
init: init
};
}();А потым трэба вызначыць, на якой старонцы я жадаў бы яго выкарыстоўваць, выканаеце:
YAHOO.Klaus.Countdown.init();Мне было цікаўна вызначыць, як дамагчыся чагосьці падобнага ў YUI3.
Я прыдумаў рашэнне, але я не ўпэўнены, ці гэтыя прапанавы сапраўды здольныя зрабіць гэта. Я спадзяюся, што ў хуткім часе я змагу знайсці іншы спосаб зрабіць гэта. Сакрэт у тым, каб дадаць “модуль”, які вы стварылі, да модуля YUI3, напрыклад:
Y.add("Klaus.Countdown", init);Другім аргументам з’яўляецца імя функцыі, якая будзе выканана, калі модуль высылаецца пры выкарыстанні () наступнай функцыі.
Так што засталося зрабіць толькі эканомічны адлік кода ў асобны файл, а затым выклікаць модуль у рамках сцэнара блоку на старонцы:
<script type="text/javascript">
YUI().use("Klaus.Countdown");
</script>Гэта ўсе, што мы зрабілі, але мы спадзяемся, што вы будзеце задаволены нашым першым крокаў у тлумачэнні YUI3.
Заключэнне
Я наўмысна абраў просты прыклад, каб пазбегнуць расчаравання, каб вучыцца выкарыстоўваць шмат прарокаў адначасова. Як і ў кожнай новай частцы праграмнага забеспячэння ў пачатку працы “неяк” асабліва важна пазнаць, як дасягнуць таго, пра што думаеш, і не сутыкнуцца з шматлікімі перашкодамі адразу ж. Наколькі лёгка ці цяжка выкарыстоўваць YUI3, яшчэ мае быць вызначыным, калі ж, верагодна, узнікнуць больш складаныя прыклады, але я лічу, што нават простыя прыклады даюць поўнае прадстаўленне пра працу YU13.
