tarafından

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

jquery-banner-2

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.

selector

#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

Reklamlar

jQuery Kullanımınızı Geliştirmek için Öneriler – 2” üzerine 2 yorum

  1. Bu güzel yazı için teşekkürler. İyi çalışmalar.

  2. ellerine Saglık Cok Güzel anlatmıssın

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