jQuerydan 5 ta foydali maslahat

Salom dunyo!
Hozirda HTML, CSS’dan o‘tib, jQuery’ni o‘rganayapman. Quyida o‘zim uchun kashf qilgan juda sodda va foydali maslahatlarni yig‘ib chiqdim. Maqola yangi foydalanuvchilar uchun “ajoyib” deb o‘qib chiqishga, professionallar uchun esa “yomonmas” deyishga arzigulik chiqsa, maqsadimga yetgan bo‘laman.
Barchamizga ma’lumki, JavaScriptning bitta animatsiya yoki HTML-sahifaga bog‘lanishi uchun uzundan-uzoq kod yozish zarurligi, bunda yozilgan kodning barcha brauzerlarda (cross-browsing) bir xil ishlashini ta’minlash qiyinroq masala. Bu hol foydalanish uchun qulay library’larni ommalashtirib yubordi. Shu jumladan jQueryni ham. U yangi dasturlash tili emas, shunchaki judayam sodda va tushunarli tuzilgan kutubxona, xolos. jQuery’ni o‘rganish uchun 1-2 ta kitoblarni, onlayn darslarni titib chiqib, eng samaralisi 30 kunda jQueryni o‘rganish (30 days to learn jQuery) video-darsi ekanligini tushundim. Hali o‘rganishni boshlamagan do‘stlarimga shundan o‘rganishni tavsiya qilaman.



Aytmoqchi bo‘lganlarim esdan chiqmasdan, yozib qo‘ya qolay.

1. Yangisidan bo‘lsin!

Barcha library’laru, framework’larga tegishli bo‘lgan bu taklifim — doim jQuery’ning eng so‘nggi versiyasini islating. Shunda qo‘ng‘izchalardan (bug) qutulib, yangi funksionallardan yanada samaraliroq foydalanasiz.

2. Tayyormisan?

jQuery HTML-sahifaga DOM (Document Object Model — sahifadagi har bir elementni obyekt sifatida qarash va unga turli xususiyatlarni qo‘shish) kabi bog‘langani uchun sahifaning to‘liq ishga tushgani juda muhim. Shuning uchun ko‘pchilik sahifa to‘liq yuklanganini aniqlab olib, so‘ngra jQuery buyruqlarini beradi:
$( document ).ready(function() {
  // .ready() orqali tayyor bo‘lganidan keyin ishga tushadigan kod.
});

Hadeb tayyormisan degandan ko‘ra, jQuery scriptlarini sahifaning eng oxiriga yozib qo‘ysangiz, olam guliston.

3. Aniq Jquery’mi?

O‘z-o‘zida ishga tushadigan funksiyani yozganda
( function() { 	
	// kod	
} )();

kabi yozgandan ko‘ra
( function($) {
	// kod
})(jQuery);

yozish samaraliroq. Agar jQuery’dan boshqa library’lardan ham foydalanadigan bo‘lsangiz (yo‘q deyishga shoshilmang, keyinchalik ularni ham qo‘shishingiz mumkun-ku), u holda kompyuter jQuery buyrug‘I bilan teng kuchli $ belgisini boshqacha tushunishi mumkin. Bu, albatta skriptning to‘liq ishlamasligiga sabab bo‘ladi.

4. Haligini chaqir!

Selector’lardan foydalanish doim saytning ishlashini sekinlashtirgan. Har safar qaysidir elementni chaqirganda kompyuter butun sahifani titib chiqadi va tabiiyki, bunga ko‘proq vaqt ketib qoladi. Kichkinagina tajriba o‘tkazib, quyidagilarni tezligini tekshirib ko‘rsangiz natija har xil chiqadi:
$('li[data-selected="true"] a')	// sekin
$('li.selected a')	// tezroq
$('#elem')	// tez

Demak id orqali murojaat qilish eng tez hisoblanarkan.
Agar klasslar orqali so‘rov beradigan bo‘lsangiz, qaysi teg ekanligini ham oradagi nuqta orqali ko‘rsatish ishni ancha tezlashtiradi (yuqoridagi 2-hol). Bu ayniqsa, eski brauzerlarda va mobil qurilmalarda ancha samaralidir.
Bu borada eng yaxshi maslahat tariqasida so‘rovlarni keshlash evaziga keskin kamaytirishdir, ya’ni ko‘p marta so‘ralaydiganingizni o‘zgaruvchi sifatida qabul qilib, barcha hollarda shu o‘zgaruvchidan foydalaning:
var buttons = $('#navigation a.button');

5. Obyekt — massiv emasmu?

jQuery orqali qilingan barcha so‘rovlar natijalari obyekt sifatida qaraladi. Lekin ularni hech qanday o‘zgartirishsiz massiv deb ham qarash mumkin.
Misol:
// Barcha navigatsiya tugmalarini chaqirib olish:
var buttons = $('#navigation a.button');

// Massiv elementlaridek iteratsiya qilish:
for(var i=0;i<buttons.length;i++){
    console.log(buttons[i]);	// endi jQuery obyektmas, shunchaki element
}

// Hatto massivdan bir qismini ajratib olish mumkin:
var firstFour = buttons.slice(0,4);

Agar sayt tez ishlasin desangiz $.each o‘rniga for yoki while’ni ishlatganingiz ma’qul.
P.S. yana nimadirlar haqida yozmoqchi edimu, esimdan chiqib ketdi. Mayli, eslasam yozarman! :)

4 комментария

TITAN-UZ
**** endi tarqadimi :D
Yomon emas taq derjat
0