JQuery, hızlı, platformlar arası ve açık kaynaklı bir JavaScript kütüphanesidir. Hiç şüphesiz ki tüm Web uygulamalarında baş köşeyi o almıştır. Neden böyle olduğunu kısaca şöyle özetleyebiliriz gibi görünüyor. Web sitenizde JavaScript kullanmanın ve onu daha etkileşimli ve çekici hale getirmenin kolay bir yolunu sunar. JQuery, kullanımı kolay bir API ile HTML belge işleme, animasyon, olay işleme ve AJAX gibi şeyleri kolaylaştırır.
Bazen tüm JQuery özelliklerine ihtiyaç duymayız. Bazen sadece upload, bazen de form doğrulama için kullanırız. Yalnızca birkaç JQuery API yöntemine ihtiyaç duyduğumuz zamanlar vardır ve herhangi bir hafif kütüphane hepsini sağlayabiliyorsa, 250 KB civarında olan JQuery’i yüklemek akıllıca olmaz. Öyleyse, deneyebileceğiniz bazı hafif JQuery alternatiflerine bir göz atalım.
1. UmbrellaJS
UmbrellaJS, JQuery’den oldukça etkilenmiştir. Gziplendiğinde sadece 2,5Kb’dir, bu mobilde yüklenmesi bir saniye sürecek demektir. Sadece küçük değil, aynı zamanda JQuery ile karşılaştırıldığında bazı ekstra özelliklerle birlikte geliyor. Internet Explorer 11+ ve diğer tüm popüler tarayıcılar tarafından desteklenir. JQuery’den farklı olarak, UmbrellaJS seçicilerinde yerel javascript yöntemlerini de kullanabilirsiniz. Sözdizimi JQuery çok benzer. Sadece $ yerine u kullanılır.
Örnek kullanım:
1 2 3 4 5 | u("button").on('click', function(){ alert("merhaba dünya"); }); |
2. Cash
Cash, IE10 + ve diğer modern tarayıcılar tarafından desteklenen saçma küçük (jQuery boyutunun% 10’u) jQuery alternatifidir. Sözdizimi JQuery’e benzer ve size bir sorgu seçici, toplama yöntemleri ve bazı kütüphane yöntemlerini verir. Cash JQuery tüm özelliklere sahip olmayabilir, ancak ihtiyacınız olan tüm temel temel özellikleri sağlar.
Örnek Kullanım:
1 2 3 4 5 6 7 8 9 10 11 | <script src="https://cdnjs.cloudflare.com/ajax/libs/cash/4.1.2/cash.min.js"></script> <script> $(function () { $('html').addClass ( 'dom-loaded' ); $('<button>Selamla</button>') .appendTo ( document.body ) .on('click',()=>{window.alert('merhaba dünya')}); }); </script> |
3. ChibiJS
Chibi, tek sayfalık web uygulamalarına satır içi yapıştırmaya yetecek kadar hafif bir mikro kütüphanedir ve ekstra bir HTTP isteği kaydeder. Minimize edildiğinde 7KB, sıkıştırıldığında 3KB’dir. Modern tarayıcılarda, Chibi diğer büyük kütüphanelerden % 20-50 daha hızlı DOM manipülasyonu gerçekleştirir. Sözdizimi JQuery’e benzer. ChibiJS, mikro kütüphanelerin diğer büyük kütüphanelerle karışmasını önlemek için kasıtlı olarak aynı $ ad alanını kullanır.
Örnek Kullanım:
1 2 3 4 5 6 | $("p") // Returns an array of all paragraph elements $("p").hide() // Hides all paragraphs $("#foo").show() // Shows element with id equal to "foo" $(".foo").hide() // Hides elements with "foo" CSS class |
4. ZeptoJS
Zepto, çoğunlukla jQuery uyumlu bir API içeren modern tarayıcılar için açık kaynaklı bir minimalist JavaScript kütüphanesidir. Bu kütüphane JQuery ile rekabet etmek için bir planlanmamıştır, ancak geliştiriciler için API’nin boyutu minimum tutulmuştur. ZeptoJS’nin boyutu sadece indirme ve yürütmeyi çok hızlı yapan 5-10KB. IE10 + ‘ı ve tüm büyük tarayıcıları destekler.
Örnek Kullanım:
1 2 3 4 5 | $.each(['a', 'b', 'c'], function(index, item){ console.log('item %d is: %s', index, item) }) |
5. JavaScript
Şimdi JavaScript nasıl bir alternatif olabilir diyorsunuzdur. Aslında JS bir kütüphane alternatifi değildir. Temel javascript işlemlerini yapacaksanız yukarıdaki kütüphaneler ile birlikte saf JavaScript kullanabilirsiniz. Doğal olarak yerel JavaScript en iyi JQuery alternatiflerinden biridir. Bunu söylememin nedeni tarayıcıların çoğunun varsayılan olarak JavaScript ile birlikte gelmesidir ve bu nedenle uygulamanıza JQuery’yi yüklemeniz gerekmez. JQuery, eski tarayıcıları bile destekleyen ve size bir çeşit rahatlama veren JavaScript tabanlı bir kütüphanedir. Tarayıcı uyumluluğu sorunları. Yerel JavaScript kullanmanın tek con’u, JQuery’nin sağladığı gibi süper kolay sözdizimini alamaz.
Örnek Kullanım:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .stil1{ color:red; border:solid 3px red; } </style> <button id="btn">Merhaba Dünya</button> <script> var element = document.getElementById("btn"); element.classList.add("stil1"); </script> |
Sonuç
Bunlar deneyebileceğiniz hafif JQuery alternatiflerinden bazıları. Bu kütüphanelerin JQuery tarafından sağlanan özelliklerle eşleşmeyebileceğini biliyorum. Ancak, proje gereksinimleriniz bu kütüphanelerden herhangi biri tarafından karşılanabilirse, bu alternatifleri denemede ve uygulamanızın performansını iyileştirmede faydası olacaktır. Bu listedeki bir pozisyonu hak eden daha iyi bir JQuery alternatifi biliyorsanız, aşağıdaki yorumlarda bizimle paylaşabilirsiniz.
Yorum Yap