tarafından

jQuery Kullanımınızı Geliştirmek için Öneriler

jquery-banner

Eğer jQuery’i sıklıkla kullanıyor veya başlamayı planlıyorsanız, inanıyorum ki yapılacak birkaç dakikalık ufak örnekler ile yazdığınız kodu daha kaliteli hale getirmek mümkün. Daha hızlı kod yazmanızı sağlayacak ve kodunuzun kalitesini arttırmanıza yardımcı olacak birkaç yöntemden bahsedelim.

#1 – jQuery Kütüphanesini Google’dan Çekin.

Google, sadece jQuery değil daha birçok JavaScript Kütühanesini kendi sunucularında Google Code kütüphanesi adı altında barındırmakta. jQuery’i kendi sunucunuza yüklemektense doğrudan Google’ın sunucularından çekmeyi deneyebilirsiniz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

#2 – Veri Saklama Yöntemi.

DOM içerisinde veri saklamaktansa, jQuery’nin Data () metodunu kullanın. HTML elemanlarını veri tutucu olarak kullanmak çoğu web programcısının huyudur. Örnek vermek gerekirse:

$('selector').attr('alt', 'saklanacak veri');

// yukarıdaki komutla 'alt' niteliğine yollanan değer, aşağıdaki metodla çekilebilir.

$('selector').attr('alt');

HTML nitelikleri (attributes), veri saklamak amacıyla kullanılmamalıdır. Yukarıdaki örnekde görüldüğü gibi “alt” niteliği veri saklamanın dışında başka bir amaca hizmet etmektedir.

En doğru alternatif, jQuery’nin Data() metodunu kullanmaktır. Bu metod; size, sayfanızdaki herangi bir elemente bir veri ilişkilendirebilmenizi sağlar.

$('selector').data('parametre_adi', 'saklanacak veri');

$('selector').data('parametre_adi'); // saklanan veriyi çekelim

Bu tür bir kullanım, kullanılan isimler ve esneklik açısından daha anlamlıdır, sayfa üzerindeki istediğiniz elemente istediğiniz veriyi anlamlı bir başlık vererek ilişkilendirebilirsiniz. Data() ve RemoveData() metodları hakkında daha çok bilgi almak için jQuery dökümantasyonuna (İngilizce) bakabilirsiniz.

Klasik bir kullanım olarak aşağıdaki kod bloğunu gösterelim. Sayfa yüklendiği sırada istediğimiz veriyi doğrudan bir elemente atıyoruz ve o element aktif hale geldiğinde (focus) veriyi elementden kaldırıyoruz:

<form id="testform">

<input type="text" class="clear" value="Sürekli temiz" />

<input type="text" class="clear once" value="Sadece bir defa temiz" />

<input type="text" value="Normal yazı" />

</form>

$(function() {

//"each" fonksiyonunu kullanarak "clear" css sınıfına bağlı olan her input elementine uğra

//"clear once" etiketleri o nesnenin iki css sınıfına bağlı olduğnu gösterir.

$('#testform input.clear').each(function(){

//data(9 metodunu kullan ve verileri elementlere ata.

$(this).data( "txt", $.trim($(this).val()) );

}).focus(function(){

// Element aktif hale geldiğinde, varsayılan veri ile yenisi aynı değilse elementin içini temizle

if ( $.trim($(this).val()) === $(this).data("txt") ) {

$(this).val("");

}

}).blur(function(){

// elementin tekrar pasif olduğunda varsayılan değerleri geri yükle.

// ama "once" ("bir defa" demek) css sınıfı aktif ise elemente dokunma.

if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {

//Veriyi elementte sakla.

$(this).val( $(this).data("txt") );

}

});

});

Örnek

#3 – Özet Dökümanlarını Kullanın (Cheats Sheets).

Çoğu insan, -hele ki programcılar-, unuttukları bilgiye çabuk erişmek adına çok çaba gösteriyolar. Yazıcıdan çıktısı alınıp monitorun yanında bir yere yerleştirilmiş birkaç özet döküman, size hem zamandan kazanç sağlayacak hem de kodunuzu kalitesini arttıracaktır.

Oscarotero jquery 1.3 ve duvar kağıdı boyutundaki hali

oscarotero

jQuery 1.3 Özet Dökümanı

jQuery 1.3 sürümünün tüm fonksiyon ve özelliklerinin gösterildiği özet dökümanıdır. Yalnız jQuery UI’i kapsamamaktadır.

acodingfooljquery

#4 – İndirme Süresini Minimuma İndirin.

Bazı Web tarayıcıları sayfayla birlikte aynı anda tek bir script dosyasını indirirler. Eğer birden fazla script dosyanız varsa bu, sayfanızın indirilme ve derleme sürelerini etkileyecektir.

Buna alternaitf olarak: Dean Edward’ın “Packer” adlı ücretsiz servisini kullanabilirsiniz. Kodlarınızdaki gereksiz boşlukları ve yorum satırlarını silerek size daha az boyutta ve daha hızlı indirilebilecek bir sürüm oluşturur. Tabi yorum satırlarınız kaybolacağı için scriptinizin bir programcı sürümünü yine elinizin altında bulundurmak gerekir, zira bu işlemi gerçekleştirdikden sonra kodunuz kolay kolay okunamaz bir duruma geliyor. Uygulamaya buradan erişebilirsiniz.

packer

#5 – jQuery ile Firebug Konsoluna Mesaj Göndermek (Logging)

Firebug, içerisinde; sayfanızın CSS, HTML, JavaScript kodları üzerinde hata ayıklama ve düzeltme işlemlerini yapabileceğiniz bür sürü araç barındıran bir Firefox eklentisi. Mükemmel bir denetim işlevi sayesinde sayfaların HTML ve CSS kodları içinde rahatça dolaşıp, hangi elementin hangi kod tarafından kontrol edildiğini görsel olarak izleyebilirsiniz.

Firefox, bir jQuery/JavaScript programcısına, kod içerisinden Firebug’a mesaj göndermeyi uygun hale getiriyor. En basit haliyle gösterecek olursak:

console.log("hello world")

fire

Daha ayrıntılı bilgiyi burada bulabilirsiniz. (İngilizce)

Birden fazla değeri aynı anda göndermek de mümkün, böyle her mesaj arka arkaya gelen satırlarda gösterilir.

console.log(2,4,6,8,"foo",bar)("hello world")

Dominic Mitchell adlı programcının yazdığı ufak bir eklenti ile istediğiniz hernagi bir jQuery nesnesini Firebug konsoluna mesaj olarak yazdırabiliyorsunuz.

jQuery.fn.log = function (msg) {

console.log("%s: %o", msg, this);

return this;

};

Kullanımı ise şu şekilde:

$('#some_div').find('li.source > input:checkbox')

.log("İşareti kaldırılacak nesneler")

.removeAttr("checked");

#6 – Mümkünse Öncelikle Nesne ID’lerini Seçici Olarak Kullanın.

jQuery ile çalışırken DOM neslerini ID’leri ile seçmek her zaman en kullanışlı yöntemdir. Nedeni ise bir nesneyi ID’si ile seçmek, diğer özellikleri ile aramakdan daha hızlı sonuçlanır (Internet Explorer’da CSS Sınıf seçicisinin bütün DOm nesneleri üzerinde dolaşarak aram yaptığı bilinir). Seçim işlemlerinde ID kullanmak hızlıdır çünkü bütün tarayıcılar kendi içlerinde getElementByID() (ID’ye göre seç) fonksiyonunu barındırırlar, jQuery’de bu fonksiyondan yararlanır. CSS sınıflarına göre seçim yapmak ise arkaplanda çaprazlama halinde yapılır ve eğer DOM yapınız geniş ise performansa etki eder.

Ufak bir örnek:

<div id="main">

<form method="post" action="/">

<h2>Selectors in jQuery</h2>

...

...

<input class="button" id="main_button" type="submit" value="Submit" />

</form>

</div>

...

//Gönder düğmesini css sınıfı ile seçiyoruz. 

var main_button = $('#main .button');

//Gönder düğmesini doğrudan, ID bilgini vererek seçiyoruz.

var main_button = $('#main_button');

#7 – CSS Sınıflarından Önce HTML Etiketlerini Belirtin.

Eğer HTML etiketlerine göre arama yaparsanız, jQuery tarayıcınızın kendi içindeki getElementbyTagName() fonksiyonunu kullanır. I’Dye göre arama yapmak nu yöntemde hala hızlıdır fakat, CSS sınıfına göre seçim yaparken sınıfın önünne HTML tagını getirerek aram yapmak, sadece CSS sınıfını belirtmekden hızlıdır.

<ul id="Urunler">

<li><input class="Stok" name="item" type="radio" value="Urun 1" /> Urun 1 </li>

<li><input class="Yok" name="item" type="radio" value="Urun 2" /> Urun 2 </li>

<li><input class="Bilinmiyor" name="item" type="radio" value="Urun 3" /> Urun 3 </li>

</ul>

Burada önemli olan CSS sınıfının ait olduğu elementin, HTML etiketini seçim sorgusuna eklemek, bu seçim işleminin tüm nesneler arasında dolaşma süresini azaltacaktır.

var in_stock = $('#Urunler input.stok');

Görüldüğü üzere; Seçim işlemine Urunler ID‘sine sahip listeden başladık, sonra input.stok ile stok css sınıfında tanımlanmış bütün input nesnelerini seçmesini istedik. Eğer #Urunler yazmış olmasaydık, arama işlemi bütün sayfayı kapsıyacak ve sonucun bulunma süresini etkileyecekti. Aynı şekilde sadece CSS sınıfını yazmış olsaydık, sayfadaki bütün nesneler incelenecek ve stok css sınıfına ait olan nesne döndürülecekti.

#8 – jQuery Nesnelerini Arabelleğe Alın (Caching).

Bir nesnenin üzerinde işlem yapmadan önce onu tanımlamak ve gerekli değişiklikleri yaptıkdan sonra sahneye almak, performans açısından etkili bir yöntemdir. Örneğin: aşağıdaki gibi bir kod yazmak yerine:

<li>Description: <input type="text" name="description" value="" /></li>

...

$('#shopping_cart_items input.text').css('border', '3px dashed yellow');

$('#shopping_cart_items input.text').css('background-color', 'red');

$('#shopping_cart_items input.text').val("text updated");

Nesne doğrudan bir değişken olarak tanımlanıp, özellikleri belirlenebilir.

var input_text = $('#shopping_cart_items input.text');

input_text.css('border', '3px dashed yellow');

input_text.css('background-color', 'red');

input_text.val("text updated");

//yukarıdakinin aynısı, sadece komutlar zincirleme yazılmış.

var input_text = $('#shopping_cart_items input.text');

input_text

.css('border', '3px dashed yellow')

.css('background-color', 'red')

.val("text updated");

#9 – Bazı jQuery Fonksiyonlarınızı $(window).load Olayı İçerisine Yazın.

Birçok jQuery örneği ve açıklaması bizi kodumuzu $(document).ready olayı içerisine yazmaya yöneltir. Çoğu zaman bu hareket doğrudur fakat bu olay sadece nesneler oluşturulduğunda ve muhtemelen sayfa içeriğinin hala sunucudan indirildiği sırada meydana gelir. Bu nedenle animasyon, sürükle-bırak, gizli resimlerin çekilmesi gibi bazı, görsele dayalı fonksiyonlar doğru çalışmayabilir. $(window).load olayı, bazı şartlara bağlı olan bu nesnelere erişmeye garanti verdiği için kullanılması faydalı olabilir.

$(window).load(function(){

// Sayfa yüklendikden sonra çalışacak kod bloğunu buray yazın.

});

#10 – Kodunuzu Daha Okunabilir Kılmak, Şık Göstermek ve Seçicileri Sınırlandırmak için Zincirleme Kod Yazımını Deneyin.

Çünkü JavaScript zincir gibi, peşpeşe gelen ve hatta ayrı satırlara yazılmış, birbirinin devamı niteliğinde olan kodları anlayabilir ve çalıştırabilir.

Örnek olarak; aşağıdaki kod bir element’den bir CSS sınıfını kaldırıp, hemen arkasından aynı elemente başka bir CSS sınıfı bağlar.

$('#Urunler input.stok')

.removeClass('stok')

.addClass('Yok');

Eğer gerekli olursa, jQuery bu zincirleme fonksiyonları tek bir fonksiyon haline getirmenizi de destekler.

$.fn.YokYap = function() {

return $(this).removeClass('stok').addClass('yok');

}

$('#Urunler input.stok').YokYap().log();
Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s