Optimize jQuery yazmak ve ipuçları JS malumunuz evrim geçirdi, temelde değişen fazla bir şey olmasa da bir dünya satır kod yazılıyor artık. Peki bir kaç ipucu nasıl olur ?1) jQuery yükle, güncel olsun.
Kendi site dizininizden jQuery çağırmak mantıklı gelebilir, ancak, artık library boyutu 32kb civarını buldu, üstelik buna pluginleriniz eklenecek. Son versiyon olup olmadığı da belli değil.Sürekli güncelleyecek misiniz ? bunu kullanarak otomatik olarak sayfanıza son sürümü eklemiş olur hem de, kullanıcılar önceden başka sitelerde buradan jQuery çağırmış olduğu için önceden önbelleğe alınarak size yüklemede zaman kazandırır.Ayrıca, minified önemli bir kelime sizin için. minified versiyon, jquery nin kodlarının sıkıştırılarak küçültülmüş versiyonudur. Her zaman bu sürümü kullanın, diğer türlü 32 kb yerine 300kb civarı data çağırmış olacaksınız. İkinci bir not ise, lokalde çalışıyorsanız, jquery nizi lokalden çağırın, işinizi bitirdikten sonra üstteki kullanıma geçebilirsiniz.2) Sürekli elemanı aratmayın!
jQuery’de bir html elemanına ulaşmak çocuk oyuncağı, ama bu oyuncağı az kullanmak en akıllcası.$(‘#elemanIDsi’) bize jquery de elemanı döndürüyor biliyoruz, ama sürekli bunu yazmak bir performans kaybıdır.Elemana ileride tekrar ulaşacaksak;var elemanim = $(‘#elemanIDsi’);elemanim.css(‘color’,’#ff0000′);
şeklinde devam etmek mantıklıdır. Böylece elemanı her seferinde aramayız, aslında bazılarınız bunun o kadar performans kazandırmadığını düşünebilir. Ancak jQuery native js de olmayan class ile eleman bulma özelliğini getiriyor. Bu özellik aslında şöyle çalışıyor, tüm html elemanlarını bir diziye atıp jQuery bizim için class isimlerini alıyor ve bunları karşılaştırıyor, uyan eleman tek ise elemanı değilse bir dizi halinde dönüyor.O yüzden her seferinde aynı işlemi tekrar etmek yerine üstteki işlem size performans sunacak.Mobile browserlar da çok işinize yarayacak.3) İhtiyacınıza göre kod yazın.
jQuery nin en güzel özelliği, json yapısıyla özellik verebilmektir.$(‘#eleman’).css(‘color’,’#000fff’); //ya da$(‘#eleman’).css({ ‘color’:’#000fff’ });
yazılabilir, buradaki ipucu ise, aynı özelliği alt alta çağırmak yerine, json’da tüm istediklerinizi bir kerede vermelisiniz. $(‘#eleman’).css({ ‘color’:’#000fff’, ‘background-color’ : ‘#ccc’, });
gibi.Bu örnekte de her seferinde html kullanıp içerik yazdırmaktansa, içeriği toplayıp, bir kerede yazdırarak performans kazanıyoruz.Böylece sayfanın üstüne zıplama veya boş sayfa açılması gibi şeyleri engellemiş olursunuz.6) Kopya çekin!
Cheat Sheet ler neredeyse her programlama dili için var olan komut / işlem listeleridir. Her zaman internet bağlantınız olmayabilir, hali hazırda varken bunun gibi (pdf ler bulun) aramalar yaparak cheat sheet leri indirip, bastırın.Duvarınıza asın. Sürekli varsa, google da aramanın gücüne inanın, jQuery harika bir dökümantasyon sunuyor çünkü.7) Eklenti yazın!
Sık kullandığınız işlemler için plugin veya fonksiyon yazın. Boyuttan kazanç sağlayacaktır. Eklemeler yapan olursa teşekkürler.