Cash, eine kleine jQuery-Alternative für moderne Browser

 (github.com/fabiospampinato)
4 Punkte von GN⁺ 2024-11-04 | 1 Kommentare | Auf WhatsApp teilen

Einführung in Cash

  • Cash ist eine sehr kleine jQuery-Alternative für moderne Browser (IE11+) und bietet eine jQuery-ähnliche Syntax für die DOM-Manipulation.
  • Um die Codebasis so klein wie möglich zu halten, nutzt es Funktionen moderner Browser und bietet jQuery-ähnliche, verkettbare Methoden bei deutlich kleinerer Dateigröße.
  • Es zielt nicht auf eine 100%ige Funktionsgleichheit mit jQuery ab, deckt aber die meisten alltäglichen Anwendungsfälle ab.

Vergleich

  • Größenvergleich

    • 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
    • Im Vergleich zu jQuery Slim ergibt sich eine Größenreduktion von 76.6%.

  • Funktionsvergleich

    • Unterstützung alter Browser: Cash ❌, Zepto ❌, jQuery Slim ✔
    • Unterstützung moderner Browser: Cash ✔, Zepto ✔, jQuery Slim ✔
    • Aktive Wartung: Cash ✔, Zepto ❌, jQuery Slim ✔
    • Namespace-Events: Cash ✔, Zepto ❌, jQuery Slim ✔
    • TypeScript-Codebasis: Cash ✔, Zepto ❌, jQuery Slim ❌
    • TypeScript-Typen: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • Unterstützung für Partial Builds: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

Verwendung

  • Cash ist über jsDelivr verfügbar und kann wie folgt verwendet werden: 
    <script src="https://cdn.jsdelivr.net/npm/cash-dom/…;
<script>
  $(function () {
    $('html').addClass('dom-loaded');
    $('<footer>Appended with Cash</footer>').appendTo(document.body);
  });
</script>
  • Es kann auch über npm als Paket cash-dom verwendet werden: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

Dokumentation

  • Cash bietet Query-Selektoren, Collection-Methoden und einige Library-Methoden.
  • Man kann sich an der API von jQuery orientieren; Cash implementiert die meisten mit jQuery kompatiblen Funktionen.
  • Cash kann mit benutzerdefinierten Methoden erweitert werden.

Mitwirken

  • Wenn du ein Problem findest oder eine Funktion anfragen möchtest, solltest du ein Issue eröffnen.
  • Für einen Pull Request folge diesen Schritten:
    1. Repository klonen: git clone https://github.com/fabiospampinato/cash.git
    2. In das geklonte Repository wechseln: cd cash
    3. Abhängigkeiten installieren: npm install
    4. Cash bei Änderungen automatisch neu kompilieren: npm run dev
    5. Test-Suite öffnen: npm run test
    6. README bei Bedarf aktualisieren

Danksagung

  • Dank an alle Mitwirkenden, die zur Entwicklung von Cash beigetragen haben.
  • Dank an @hisk für das Logo-Design.

Lizenz

  • MIT © Fabio Spampinato

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-11-04
Hacker-News-Kommentare

  • Browser vereinfachen die DOM-Manipulation, sodass sich vieles mit nur zwei Codezeilen erledigen lässt

    • document.querySelector und document.querySelectorAll werden gebunden und verwendet
    • In einem Modul werden die beiden Funktionen importiert und genutzt
    • GitHub-Link

  • Der Vorteil von jQuery liegt in der automatischen Listenverarbeitung und in Parent-Query-Funktionen

    • Problematisch ist, dass bei leeren Listen stillschweigend fehlschlägt
    • Würde man jQuery neu implementieren, sollte bei leeren Sets ein Fehler ausgelöst werden und nur bei Bedarf stillschweigend fehlschlagen
    • Das hängt mit der alten Debatte zwischen Bibliotheken und Frameworks zusammen

  • Da Mainstream-Websites viel JavaScript verwenden, ist es ineffizient, eine komplette Bibliothek noch einmal neu zu schreiben

  • Vorstellung einer persönlich entwickelten Bibliothek als jQuery-Alternative

    • Animationen werden mit CSS umgesetzt
    • Ein einzelnes Element oder eine Liste wird transparent behandelt
    • Vanilla JavaScript zuerst, keine Abhängigkeiten, 1 Datei, unter 340 Zeilen
    • GitHub-Link

  • Es wurde auf Unterschiede zwischen jQuery und Cash hingewiesen

  • Erfahrung mit Shoestring zum Reduzieren von JS

    • Cash bietet ähnliche Funktionen, diese sind in der Dokumentation jedoch versteckt
    • Es ist die bessere Wahl, die eingebauten Browser-Funktionen zu nutzen
    • Die jQuery-Alternative ist 6 kB groß, während Preact nur halb so groß ist

  • Ziel ist es, mithilfe von TypeScript-Template-Strings den Typ eines Elements abzuleiten

    • Zum Beispiel wird $('div#name') als HTMLDivElement abgeleitet

  • jQuery 4 ist eine Alternative für moderne Browser

  • In Browser-Erweiterungen wurde jQuery verwendet, später aber auf eine JSX-Bibliothek umgestellt

  • Kleine Bibliotheken und Frameworks sind sympathisch, in der Praxis werden jedoch oft große Bibliotheken verwendet

    • Framework: 50 KB
    • Kleine Version: 5 KB
    • Unersetzliche Bibliothek: 1 MB