Daha önceki yazının devamı niteliğindeki başka bir derlemeye hoşgeldiniz. jQuery’nin popüler olmasının nedeni, şahsi blogculardan tutunda, büyük şirketlere kadar her alanda birçok kullananının olması. Çünkü bizim ve çoğu insanın, henüz haberdar olmadığı birçok işlevselliği ve bunun yanında bir de kullanım kolaylığı sağlaması büyük etkenler olarak gösterilebilir. Umuyorum jQuery kullanıcılarının büyük bir çoğunluğu, problemlerini çözmek için doğru stratejiyi kullanarak gerekli eklentileri kullanıyorlardır. Ama hazır çözümlerin yetersiz kaldığı yerde, lazım olanı kendinizin de yapabilir olduğunuzu bilmenizde fayda var. İşte bu sebepden ötürü şimdi birkaç öneri ve örnek uygulamaya başlıyoruz:

#1 – jQuery Seçicilerinizi Test Edin ve Geliştirin

jQuery selector Lab adlı araç gerçekten harika ve bedava bir uygulama, isterseniz download ederek çevrimdışı mod’da da çalışabilmeniz mümkün. Birçok HTML elementinin kombinasyonundan oluşan bir sayfa var ve ekranın sol tarafındaki uzunca listede yer alan hazır seçicilerle hangi seçicinin hangi elementi işaret ettiğini görebiliyorsunuz. Sol tarafdan seçtiğiniz bir seçici aktif olduğunda, HTML elementleri renk değiştirerek size sonucu gösteriyorlar. İsterseniz en üst kısıma kendi seçicinizide yazabilirsiniz.

#2 – Eğer jQuery Koleksiyonu En Az Bir Element İçeriyorsa: Test Edin

Eğer seçicilerin çalıştırılması sonucu oluşan jQuery koleksiyonunuzda bir element olup olmadığını yani sonucun boş olup olmadğını kontol etmek isterseniz, koleksiyonun ilk elemanına erişmeyi deneyebilirsiniz.

if($(selector)[0]){...}

//veya

if($(selector).length){...}

Bir örnek verecek olursak:

<ul id="Urunler">

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

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

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

</ul>

<pre escaped="true" lang="javascript">...

// Aşağıdaki if bloğu true değeri döndürür çünkü,
// jQuery ile seçim işlemi sonucu elimizde 2 nesne olmuş oluyor
// Böylelikle <kodlar> yazan kısımdaki kodlar çalıştırılacaktır.

if($('#Urunler input.Stokta')[0]){<Kodlar>}

#3 – jQuery.org’dan En Güncel Sürümün Çekilmesi

Aşağıdaki kod satırı ile jQuery’nin en güncel sürümünü sayfanıza ekleyebilirsiniz:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Eğer aklınıza gelen bir fikri çabukcak en son sürüm üzerinde denemek isterseniz kullanışlı bir yöntem.

#4 – Efektlerinizi Senkronize Bir Hale Getirmek için CallBack Fonksiyonlarını Kullanın

Eğer bir iş bittikden sonra, başka bir fonksiyonun çalıştırılmasını istiyorsanız Callback fonksiyonları denemelisiniz. JavaScript, fonksiyonların sonuna Callback  fonksiyonları eklemeyi mümkün kılar. Örnek bir çalışmayla anlatacak olursak:

<style>

div.button    { background:#cfd; margin:3px; width:50px;

text-align:center; float:left; cursor:pointer;

border:2px outset black; font-weight:bolder; }

#sliding      { display:none; }

</style>

<script>

$(document).ready(function(){

//Button CSS sınıfına bağlı bir div'e tıklandığı zaman,
// "sliding" ID'sine ait div aşağıya doğru kayar.

$("div.button").click(function () {

//bu noktaya kadar; div basılı düğme şeklini almış olmalı.

$(this).css({ borderStyle:"inset", cursor:"wait" });

//buradan itibaren callback fonksiyonu çalışacak ve aynı şekilde div'i eski haline geri getirecektir.

$('#sliding').slideDown('slow', function(){

$('#sliding').slideUp('slow', function(){

//div eski haline geldiğinde buton işlevini gören div'i eski haline getiren fonksiyon çalışacak.

$('div.button').css({ borderStyle:"outset", cursor:"auto" });

});

});

});

});

</script>

Kodun canlı örneğine buradan erişebilirsiniz.

#5 – Özel Nesneleri ve DOM Nesnelerini Kontrol Etmek için Olayları Kullanın

jQuery’nin en çok kullanılan özelliklerinden bir tanesi de, Web sayfanızdaki elementlere olaylar atayabilmeniz. jQuery çok geniş kapsamlı bir olay mekanizmasını destekler ve bunların haricinde kendi olayınızı yazmanıza da olanak verir. Elementlere olay atamak pek kolay gibi görünmüyor olabilir. Hemen bir örnek yapalım:

// Sayfadaki bütün paragraf nesnelerinin click olayına: imlecin koordinatlarını ekran yazan fonksiyonu ata.

$("p").bind("click", function(e){

var str = "( " + e.pageX + ", " + e.pageY + " )";

$("span").text("Şu koordinatlara tıklandı: " + str);

});

//Birden fazla olaya aynı anda fonksiyon atanması.

$("p").bind("mouseenter mouseleave", function(e){

//toggleClass; bir css sınıfı, seçili elemente bağlanmışsa o sınıfı elementten ayırır

//eğer belirtilen sınıf, elemente bağlı değilse; sınıfı elemente bağlar.

$(this).toggleClass("mouse-over");

});

jQuery ile yukarıdaki gibi sadece DOM nesnelerinin standart olaylarını değilde, kendi yazdığınız bir fonksiyonu da bir olay olarak tanıtabilirsiniz.

}

function SepeteEkle() {

// Buraya kendi kodunuzu yazın...

};

var Sepetim = new SepeteEkle('Bilgisayar');

jQuery(Sepetim).bind('UrunEkle', function() {

// Özelleştirilmiş olay.

});

// Yukarıda tanımlanan olayı aşağıda tetikle.

jQuery(Sepetim).trigger('UrunEkle');

);

#6 – Özel Seçicileri Kullanmayı Öğrenin

jQuery en çok kullanılan seçme işlemlerine alternatif olarak kendi seçici fonksiyonunuzu yazmaya olanak tanır.

$.expr[':'].OzelSecici= function(element, index, meta, stack){

// element- DOM elementi

// index - Seçim işlemi sonrasında dönen yığının içindeki sıra numarası

// meta - seçiciniz hakkında extra bilgi.

// stack - Bütün nesneleri barındıran sığın

// Eğer aranan nesneyi içeriyorsa true döndür.

// aranan bulunamadıysa en son aktif olanı gönder.

};

// Özel seçicinin kullanımı.

$('.CSS_Sinifi:test').BirseylerYap();

Şimdi bir de aşağıdaki örneğe bakalım. Bu örnek nitelikleri arasında “rel” olan bütün nesneleri döndürür:

$.expr[':'].withRel = function(element){

var $this = $(element);

//Basitçe: attr fonksiyonu ile gelen elementin nitelikleri arasında dolaşılır ve "rel" bulunduğu anda nesne geri gönderilir.

return ($this.attr('rel') != '');

};

$(document).ready(function(){

//Görüldüğü üzere seçicinin kullanımı gayet basittir ve ekleyelim, daha öncede bahsettiğimiz zincirleme kod yazımını kendi seçicinizle de kullanabilirsiniz.

// "rel" niteliğini taşıyan nesneler bulunduğunda, arkaplan renklerini yeşil olarak ayarla.

$('a:withRel').css('background-color', 'green');

});

...

<ul>

<li>

<a href="#">rel yok</a>

</li>

<li>

<a rel="İşte Burada" href="#">rel var</a>

</li>

<li>

<a rel="" href="#">rel yok</a>

</li>

<li>

<a rel="Bir tane daha" href="#">rel var</a>

</li>

</ul>

#7 – Nesnelerin Tümünü Tıklanabilir Hale Getirin

Çoğu menü ul – li HTML taglarının CSS ile kullanımıyla oluşturulur. Sadece li etiketinin içindeki a etiketi yerine bütün li etiketinin tıklanabilir olup, yine de içindeki linke yönlendirme yapılabilmesi hoş bir özellik olurdu. jQuery bunu kolaylıkla yapar; ilk önce içinde a etiketi olan li elementleri bulunur ve li elementinin click olayına, a‘nın href niteliğinde yer alan adrese yönlendirme işlemini yapan fonksiyon yazılır. Karmaşık gibi göründü sanırım. Bir örnek yapalım:

<ul>

<li><a href="home">home</a></li>

<li><a href="home">about</a></li>

<li><a href="home">contact</a></li>

</ul>

...

//ul elementi içindeki tüm li elementlerini tıklanabilir hale getiriyor.

$("ul li").click(function(){

//li elementinin içindeki a elementi bulunuyor ve href niteliğindeki değer okunarak,
//sayfanın o adrese yönlendirilmesi sağlanıyor.

window.location=$(this).find("a").attr("href"); return false;

});

#8 – Resimlerin Önyüklenmesi

JavaScriptle birlikte kullanılacak resimlerin önceden sayfaya yüklenmesi yerine güzel bir fikir olabilir.

//Listesi gönderilen resimleri sayfaya yükleyen fonksyion
//arguments > gönderilen dosya listesini temsil eder.
jQuery.preloadImages = function(){

//Sayfadaki resim elementleri arasında dolaş.

for(var i = 0; i<arguments.length; i++){

jQuery("<img>").attr("src", arguments[i]);

}

}

// fonksiyonu aşağıdaki şekilde kullanabilirsiniz.

$.preloadImages("images/logo-1.png", "images/logo-2.png", "images/logo-3.png");

#9 – Sağ Tuş Menüsünü Pasif Yapın

JavaScript ile yıllardır yaptığmız bu işlemi jquery daha kolay bir hale getiriyor. Üstelik bu sefer, sağ tuş menüsünü pasifleştirmek yerine başka türlü işlemler yapmak içinde kullanabilirsiniz.

$(document).ready(function(){

$(document).bind("contextmenu",function(e){

return false;

});

})

#10 – Seçicileri Gruplandırarak Kodunuzu Basitleştirin

Kodunuzu basitleştiren ve okunmasını kolaylaştıran bir diğer yöntemde, aynı işlevi yapan birden fazla elementin gruplandırılarak tek bir fonksiyon içerisinde kullanılmalarıdır.

// Aşağıdaki gibi bir kod yazımı boş yere zamanınızdan çalacak ve daha fazla yer işgal edecektir.

$('div.close').click(Birseyler_yap);

$('button.close').click(Birseyler_yap);

$('input.close').click(Birseyler_yap);

// Aşağıdaki yazım, en uygun olanıdır: Aynı işlemi yapan bütün elementler tek bir alanda toplanmıştır ve aynı anda hepsine birden aynı iş yüklenmiştir.

$('div.close, button.close, input.close')

.click(Birseyler_yap);

#11 – Kodunuzu Test Edin

jQuery, kendine has bir Test Kütüphanesi olan QUnit kütüphanesini kullanır. Test blokları yazmak kolaydır ve size kodunuzu hala çalışır biçimde tutup, üzerinde güvenle değişiklik yapabilmenizi sağlar. Bir örnek:

//Testleri modüller halinde gruplara ayır.

module("Module B");

test("Test Başlığı", function() {

//Ne kadar testin çalışacağını belirle (Asserts)

expect(2);

//Örnek bir karşılaştırma testi; JUnit'deki assertEquals'a karşılık gelir.

equals( true, false, "Test Başarısız" );

equals( true, true, "Test Başarılı" );

});

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://www.tripwiremagazine.com/ajax/developer-toolbox/more-jquery-and-general-javascript-tips-to-improve-your-code.html

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

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.

#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.

#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")

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();

Kurtman Çelik
kurtmancelik.wordpress.com
Kaynak: http://www.tripwiremagazine.com/tutorials/tutorials/jquery-and-general-javascript-tips-to-improve-your-code.html

Örneği ekleyen üyemiz :   Olcay Kük