Modern tarayıcılar için küçük bir jQuery alternatifi: Cash

 (github.com/fabiospampinato)
4 puan yazan GN⁺ 2024-11-04 | 1 yorum | WhatsApp'ta paylaş

CashCash tanıtımı

  • CashCash, modern tarayıcılar (IE11+) için çok küçük bir jQuery alternatifidir ve DOM manipülasyonu için jQuery tarzı bir sözdizimi sunar.
  • Kod tabanını minimumda tutmak için modern tarayıcı özelliklerinden yararlanır ve jQuery benzeri zincirlenebilir metotları çok daha küçük bir dosya boyutuyla sunar.
  • jQuery ile %100 özellik eşleşmesini hedeflemez, ancak günlük kullanım senaryolarının çoğunu kapsar.

Karşılaştırma

  • Boyut karşılaştırması

    • Unminified: Cash 36.5 KB, Zepto 58.7 KB, jQuery Slim 227 KB
    • Minified: Cash 16 KB, Zepto 26 KB, jQuery Slim 71 KB
    • Minified & Gzipped: Cash 6 KB, Zepto 9.8 KB, jQuery Slim 24.4 KB
    • jQuery Slim'e kıyasla %76.6 daha küçük boyut sağlar.

  • Özellik karşılaştırması

    • Eski tarayıcı desteği: Cash ❌, Zepto ❌, jQuery Slim ✔
    • Modern tarayıcı desteği: Cash ✔, Zepto ✔, jQuery Slim ✔
    • Aktif bakım: Cash ✔, Zepto ❌, jQuery Slim ✔
    • Namespace event'ler: Cash ✔, Zepto ❌, jQuery Slim ✔
    • TypeScript kod tabanı: Cash ✔, Zepto ❌, jQuery Slim ❌
    • TypeScript tipleri: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • Kısmi build desteği: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Kullanım

  • Cash, jsDelivr üzerinden kullanılabilir ve şu şekilde kullanılabilir: 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • npm üzerinden de cash-dom paketi olarak kullanılabilir: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

Dokümantasyon

  • Cash, sorgu seçicileri, koleksiyon metotları ve bazı kütüphane metotları sunar.
  • jQuery'nin API'sine başvurabilirsiniz; Cash, jQuery ile uyumlu özelliklerin çoğunu uygular.
  • Cash, özel metotlarla genişletilebilir.

Katkı

  • Bir sorun bulursanız veya özellik talebiniz varsa issue açmalısınız.
  • Pull request göndermek için şu adımları izleyin:
    1. Depoyu klonlayın: git clone https://github.com/fabiospampinato/cash.git
    2. Klonladığınız depoya gidin: cd cash
    3. Bağımlılıkları yükleyin: npm install
    4. Değişikliklerde Cash'in otomatik olarak yeniden derlenmesi için: npm run dev
    5. Test paketini açın: npm run test
    6. Gerekirse README'yi güncelleyin

Teşekkürler

  • Cash geliştirilmesine katkıda bulunan tüm katkıcılar teşekkür eder.
  • Logo tasarımını yapan @hisk'e teşekkürler.

Lisans

  • MIT © Fabio Spampinato

İlgili okumalar

1 yorum

 
GN⁺ 2024-11-04
Hacker News görüşleri

  • Tarayıcı, DOM manipülasyonunu basitleştirdiği için işi yalnızca iki satır kodla yapmak mümkün

    • document.querySelector ve document.querySelectorAll bağlanarak kullanılıyor
    • Modülden bu iki fonksiyon içe aktarılıp kullanılıyor
    • GitHub bağlantısı

  • jQuery’nin avantajı otomatik liste işleme ve üst ebeveyn sorgulama özelliği

    • Boş listelerde sessizce başarısız olması sorun yaratıyor
    • jQuery yeniden uygulanacak olsaydı, boş kümede hata üretip yalnızca gerektiğinde sessizce başarısız olacak şekilde tasarlanırdı
    • Bu, kütüphane ve framework’ler arasındaki eski tartışmayla da ilişkili

  • Ana akım web siteleri çok fazla JavaScript kullandığı için, tüm kütüphaneyi baştan yazmak verimli değil

  • jQuery alternatifi olarak kişisel olarak yapılmış bir kütüphane tanıtılıyor

    • Animasyonlar CSS ile uygulanıyor
    • Tek bir öğe ya da liste şeffaf biçimde kullanılıyor
    • Önce Vanilla JavaScript, bağımlılık yok, tek dosya, 340 satırın altında
    • GitHub bağlantısı

  • jQuery ile Cash arasındaki farklar öğreniliyor

  • Shoestring kullanarak JS boyutunu azaltma deneyimi paylaşılmış

    • Cash de benzer işlevler sunuyor ancak belgelerde gizli kalmış
    • Tarayıcının yerleşik özelliklerini kullanmak daha iyi bir seçenek
    • jQuery alternatifi 6kB iken Preact bunun yarısı kadar

  • TypeScript template string’leri kullanarak öğe tipini çıkarma hedefi var

    • Örneğin, $('div#name') ifadesi HTMLDivElement olarak çıkarılıyor

  • jQuery 4, modern tarayıcılar için bir alternatif

  • Tarayıcı eklentilerinde jQuery kullanılmış ancak sonrasında bir JSX kütüphanesine geçilmiş

  • Küçük kütüphaneler ve framework’ler seviliyor ama pratikte büyük kütüphaneler kullanılıyor

    • Framework: 50KB
    • Küçük sürüm: 5KB
    • Yerine konamaz kütüphane: 1MB