Cash, alternatif jQuery kecil untuk browser modern

Pengenalan CashCash

• CashCash adalah alternatif jQuery yang sangat kecil untuk browser modern (IE11+), dan menyediakan sintaks bergaya jQuery untuk manipulasi DOM.
• Untuk meminimalkan codebase, CashCash memanfaatkan fitur browser modern dan menyediakan metode yang dapat dirangkai seperti jQuery dengan ukuran file yang jauh lebih kecil.
• Meskipun tidak menargetkan kesesuaian fitur 100% dengan jQuery, CashCash mencakup sebagian besar kasus penggunaan sehari-hari.

Perbandingan

• Perbandingan ukuran

  • 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
  • Ada efek pengurangan ukuran sebesar 76.6% dibandingkan jQuery Slim.

• Perbandingan fitur

  • Dukungan browser lama: Cash ❌, Zepto ❌, jQuery Slim ✔
  • Dukungan browser modern: Cash ✔, Zepto ✔, jQuery Slim ✔
  • Pemeliharaan aktif: Cash ✔, Zepto ❌, jQuery Slim ✔
  • Event namespace: Cash ✔, Zepto ❌, jQuery Slim ✔
  • Codebase TypeScript: Cash ✔, Zepto ❌, jQuery Slim ❌
  • Tipe TypeScript: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
  • Dukungan partial build: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Cara penggunaan

• Cash tersedia di jsDelivr dan dapat digunakan seperti berikut:

  <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
  <script>
    $(function () {
      $('html').addClass('dom-loaded');
      $('<footer>Appended with Cash</footer>').appendTo(document.body);
    });
  </script>
  

• Juga dapat digunakan melalui npm sebagai paket cash-dom:

  import $ from "cash-dom";
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
  

Dokumentasi

• Cash menyediakan query selector, metode koleksi, dan beberapa metode library.
• Anda dapat merujuk ke API jQuery, dan Cash mengimplementasikan sebagian besar fitur yang kompatibel dengan jQuery.
• Cash dapat diperluas dengan metode kustom.

Kontribusi

• Jika menemukan masalah atau memiliki permintaan fitur, Anda harus membuka issue.
• Untuk membuat pull request, ikuti langkah-langkah berikut:
  1. Clone repositori: git clone https://github.com/fabiospampinato/cash.git
  2. Pindah ke repositori yang sudah di-clone: cd cash
  3. Instal dependensi: npm install
  4. Recompile Cash secara otomatis saat ada perubahan: npm run dev
  5. Buka test suite: npm run test
  6. Perbarui README bila diperlukan

Ucapan terima kasih

• Terima kasih kepada semua kontributor yang telah berkontribusi pada pengembangan Cash.
• Terima kasih kepada @hisk yang menangani desain logo.

Lisensi

• MIT © Fabio Spampinato

[GN⁺]

Komentar Hacker News

• Browser mempermudah manipulasi DOM, sehingga pekerjaan bisa dilakukan hanya dengan dua baris kode

  • Mengikat document.querySelector dan document.querySelectorAll untuk digunakan
  • Mengimpor dua fungsi tersebut dari modul untuk digunakan
  • Tautan GitHub

• Kelebihan jQuery adalah penanganan daftar otomatis dan kemampuan kueri induk

  • Masalahnya adalah kegagalan diam-diam pada daftar kosong
  • Jika mengimplementasikan ulang jQuery, akan dibuat agar memunculkan error pada set kosong dan hanya gagal diam-diam saat diperlukan
  • Ini berkaitan dengan perdebatan lama antara library dan framework

• Karena situs web arus utama menggunakan banyak JavaScript, menulis ulang seluruh library menjadi tidak efisien

• Memperkenalkan library alternatif jQuery yang dibuat sendiri

  • Animasi diimplementasikan dengan CSS
  • Satu elemen atau daftar digunakan secara transparan
  • Mengutamakan Vanilla JavaScript, tanpa dependensi, 1 file, kurang dari 340 baris
  • Tautan GitHub

• Mengetahui perbedaan antara jQuery dan Cash

  • Tautan panduan migrasi

• Pernah mengurangi JS dengan menggunakan Shoestring

  • Cash juga menyediakan fungsi serupa, tetapi tersembunyi di dokumentasi
  • Menggunakan fitur bawaan browser adalah pilihan yang lebih baik
  • Alternatif jQuery berukuran 6kB, sedangkan Preact hanya setengahnya

• Menargetkan inferensi tipe elemen dengan menggunakan string template TypeScript

  • Misalnya, $('div#name') diinferensikan sebagai HTMLDivElement

• jQuery 4 adalah alternatif untuk browser modern

• Pernah menggunakan jQuery di ekstensi browser, tetapi beralih ke library JSX

  • jQuery mudah berubah menjadi kode yang kompleks
  • Penting untuk menggunakan alat yang tepat
  • Tautan library pribadi

• Menyukai library dan framework kecil, tetapi pada praktiknya jadi memakai library besar

  • Framework: 50KB
  • Versi kecil: 5KB
  • Library yang tak tergantikan: 1MB