आधुनिक ब्राउज़र के लिए छोटा jQuery विकल्प Cash

 (github.com/fabiospampinato)
4 पॉइंट द्वारा GN⁺ 2024-11-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Cash का परिचय

  • Cash आधुनिक ब्राउज़र (IE11+) के लिए एक बहुत छोटा jQuery विकल्प है, जो DOM manipulation के लिए jQuery-स्टाइल syntax प्रदान करता है।
  • codebase को न्यूनतम रखने के लिए यह आधुनिक ब्राउज़र फीचर्स का उपयोग करता है, और jQuery जैसे chainable methods को बहुत छोटे file size में उपलब्ध कराता है।
  • इसका लक्ष्य jQuery के साथ 100% feature parity हासिल करना नहीं है, लेकिन यह रोज़मर्रा के अधिकांश use cases को कवर करता है।

तुलना

  • आकार तुलना

    • 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 की तुलना में आकार 76.6% कम है।

  • फीचर तुलना

    • पुराने ब्राउज़र support: Cash ❌, Zepto ❌, jQuery Slim ✔
    • आधुनिक ब्राउज़र support: Cash ✔, Zepto ✔, jQuery Slim ✔
    • सक्रिय maintenance: Cash ✔, Zepto ❌, jQuery Slim ✔
    • namespace events: Cash ✔, Zepto ❌, jQuery Slim ✔
    • TypeScript codebase: Cash ✔, Zepto ❌, jQuery Slim ❌
    • TypeScript types: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️
    • partial build support: Cash ✔, Zepto ⚠️, jQuery Slim ⚠️

उपयोग

  • Cash को jsDelivr से इस्तेमाल किया जा सकता है, इस तरह: 
    <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 के जरिए cash-dom package के रूप में भी इसका उपयोग किया जा सकता है: 
    import $ from "cash-dom";
$(function () {
  $('html').addClass('dom-loaded');
  $('<footer>Appended with Cash</footer>').appendTo(document.body);
});

दस्तावेज़

  • Cash query selectors, collection methods और कुछ library methods प्रदान करता है।
  • jQuery के API को संदर्भ के रूप में देखा जा सकता है, और Cash jQuery के साथ compatible अधिकांश फीचर्स को implement करता है।
  • Cash को custom methods के साथ extend किया जा सकता है।

योगदान

  • अगर आपको कोई समस्या मिले या feature request हो, तो issue खोलना चाहिए।
  • pull request करने के लिए इन चरणों का पालन करें:
    1. repository clone करें: git clone https://github.com/fabiospampinato/cash.git
    2. cloned repository में जाएँ: cd cash
    3. dependencies install करें: npm install
    4. बदलाव के दौरान Cash को अपने-आप recompile करें: npm run dev
    5. test suite खोलें: npm run test
    6. ज़रूरत हो तो README अपडेट करें

आभार

  • Cash के विकास में योगदान देने वाले सभी contributors का धन्यवाद।
  • logo design के लिए @hisk का धन्यवाद।

लाइसेंस

  • MIT © Fabio Spampinato

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-11-04
Hacker News टिप्पणियाँ

  • ब्राउज़र DOM manipulation को आसान बना देते हैं, इसलिए सिर्फ दो लाइनों के code से काम हो सकता है

    • document.querySelector और document.querySelectorAll को bind करके इस्तेमाल किया जाता है
    • module से इन दोनों functions को import करके इस्तेमाल किया जाता है
    • GitHub लिंक

  • jQuery की खासियत automatic list handling और parent query functionality है

    • खाली list पर चुपचाप fail हो जाना एक समस्या है
    • अगर jQuery को फिर से implement करना हो, तो empty set पर error throw किया जाए और सिर्फ ज़रूरत पड़ने पर ही silently fail हो
    • यह library बनाम framework की पुरानी बहस से जुड़ा है

  • क्योंकि mainstream websites बहुत सारा JavaScript इस्तेमाल करती हैं, पूरी library को फिर से लिखना अप्रभावी है

  • jQuery के विकल्प के रूप में व्यक्तिगत रूप से बनाई गई library का परिचय

    • animation CSS से implement किए गए हैं
    • एक single element या list को पारदर्शी तरीके से इस्तेमाल किया जाता है
    • Vanilla JavaScript first, कोई dependency नहीं, 1 file, 340 lines से कम
    • GitHub लिंक

  • jQuery और Cash के बीच के फ़र्क के बारे में पता चला

  • Shoestring का इस्तेमाल करके JS कम करने का अनुभव

    • Cash भी मिलती-जुलती functionality देता है, लेकिन documentation में छिपा हुआ है
    • ब्राउज़र की built-in functionality इस्तेमाल करना बेहतर विकल्प है
    • jQuery alternative 6kB का है, जबकि Preact उसका आधा size है

  • TypeScript template string का इस्तेमाल करके element का type infer करने का लक्ष्य

    • उदाहरण के लिए, $('div#name') को HTMLDivElement के रूप में infer किया जाता है

  • jQuery 4 modern browsers के लिए एक विकल्प है

  • browser extension में jQuery इस्तेमाल किया था, लेकिन बाद में JSX library पर switch किया

  • छोटी libraries और frameworks पसंद हैं, लेकिन व्यवहार में बड़ी libraries का इस्तेमाल हो जाता है

    • framework: 50KB
    • छोटा version: 5KB
    • ऐसी library जिसे replace नहीं किया जा सकता: 1MB