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

(github.com/fabiospampinato)

4 पॉइंट द्वारा GN⁺ 2024-11-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Cash एक बेहद छोटा jQuery विकल्प लाइब्रेरी है, जो IE11+ आधुनिक ब्राउज़रों में DOM को मैनिपुलेट करने के लिए jQuery-स्टाइल सिंटैक्स प्रदान करती है
यह आधुनिक ब्राउज़र फीचर्स का उपयोग करके कोडबेस को छोटा रखती है और परिचित chaining methods को बहुत छोटे फ़ाइल साइज़ में उपलब्ध कराती है
इसका लक्ष्य jQuery के साथ 100% feature parity हासिल करना नहीं है, लेकिन यह अधिकांश रोज़मर्रा के उपयोग मामलों को कवर करती है और इसका API आम तौर पर jQuery के साथ संगत है
इसका आकार minified & gzipped आधार पर 6KB है, जो jQuery Slim 3.4.1 के 24.4KB की तुलना में 76.6% छोटा है, और partial builds से इसे और कम किया जा सकता है
यह TypeScript codebase, कोड से जनरेट होने वाले TypeScript types, namespaced events, और अलग-अलग methods को हटाने योग्य partial builds को सपोर्ट करती है

Cash जिन समस्याओं को हल करता है

Cash आधुनिक ब्राउज़रों के लिए एक jQuery विकल्प है, जो DOM manipulation के लिए jQuery-स्टाइल $() selector और chainable collection methods देता है
इसका समर्थन दायरा IE11+ ब्राउज़र हैं
इसका लक्ष्य jQuery की हर सुविधा को हूबहू लागू करना नहीं है, लेकिन Cash द्वारा लागू की गई अधिकांश सुविधाएँ jQuery API के साथ संगत रहने के लिए डिज़ाइन की गई हैं
jQuery से माइग्रेट करने वाले उपयोगकर्ता migration guide देख सकते हैं

आकार और फीचर तुलना

फ़ाइल साइज़ तुलना में Cash, Zepto 1.2.0 और jQuery Slim 3.4.1 से छोटा है
- Unminified: 36.5KB
- Minified: 16KB
- Minified & Gzipped: 6KB
jQuery Slim 3.4.1 का आकार minified & gzipped आधार पर 24.4KB है, और Cash इसके मुकाबले 76.6% आकार की बचत देता है
अगर और छोटा bundle चाहिए, तो partial builds इस्तेमाल किए जा सकते हैं
फीचर तुलना में Cash आधुनिक ब्राउज़र सपोर्ट, सक्रिय मेंटेनेंस, namespaced events, TypeScript codebase, और कोड से जनरेट होने वाले TypeScript types प्रदान करता है
Partial builds में Cash अलग-अलग methods को बाहर करने देता है, जबकि Zepto और jQuery Slim में पूरे module स्तर पर exclusion दिखाया गया है

उपयोग का तरीका

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 नाम से उपलब्ध है

npm install --save cash-dom

import $ from "cash-dom";

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

API संरचना

$() Cash का मुख्य selector method है, और यह मैनिपुलेट किए जा सकने वाले node collections लौटाता है
यदि कोई function दिया जाए, तो DOM तैयार होने पर वह function चलाया जाता है
$() selector, DOM node, nodeList, HTML string, Cash collection, और document ready callback ले सकता है
Cash मुख्य रूप से तीन तरह के API प्रदान करता है
- query selectors
- collection methods
- global $ object की library methods

collection methods

collection methods को $() से collection बनाने के बाद $(element).addClass(className) जैसे तरीके से कॉल किया जाता है
उपलब्ध श्रेणियाँ attributes, collection, CSS, data, dimensions, effects, events, forms, DOM manipulation, offsets, और traversal में बंटी हुई हैं
मुख्य methods में ये शामिल हैं
- class/attributes: addClass, removeClass, toggleClass, attr, prop, removeAttr
- collection processing: add, each, eq, filter, first, get, map, slice
- DOM manipulation: append, prepend, before, after, html, text, clone, remove, replaceWith, wrap
- events: on, off, one, ready, trigger
- traversal: find, children, closest, parent, parents, siblings, next, prev
कुछ extra methods उपलब्ध हैं, लेकिन वे डिफ़ॉल्ट रूप से निष्क्रिय रहती हैं
$.fn collection का मुख्य prototype है, और इसके ज़रिए plugin की तरह सभी collections में custom methods जोड़े जा सकते हैं

global Cash methods

global $ object में type checking और utility methods शामिल हैं
type checking methods में $.isArray, $.isFunction, $.isNumeric, $.isPlainObject, $.isWindow उपलब्ध हैं
utilities में $.guid, $.each, $.extend, $.parseHTML, $.unique शामिल हैं
$.extend target object को source object की properties से विस्तारित करता है, और deep extension भी सपोर्ट करता है
$.parseHTML HTML string से collection लौटाता है, और $.unique duplicates हटाकर नया array लौटाता है

विस्तार और योगदान

Cash को custom methods से बढ़ाया जा सकता है, और विस्तार का तरीका extending Cash में दिया गया है
समस्या या feature request के लिए GitHub issue खोला जा सकता है
Pull request workflow में repository clone करना, dependencies इंस्टॉल करना, npm run dev से auto-recompile चलाना, npm run test से tests चलाना, और ज़रूरत पड़ने पर README अपडेट करना शामिल है
लाइसेंस MIT है

1 टिप्पणियां

GN⁺ 2024-11-04

Hacker News की राय

आजकल ब्राउज़र इतने अच्छे हो गए हैं कि DOM manipulation को सरल बनाने के लिए अक्सर नीचे दिए गए दो लाइन के aliases ही काफी होते हैं
dqs = document.querySelector.bind(document);
dqsA = document.querySelectorAll.bind(document);
इसलिए document.querySelector('#country') की जगह dqs('#country'), और document.querySelectorAll('.city') की जगह dqsA('.city') की तरह इस्तेमाल कर सकते हैं
बाकी के लिए बस native browser functions इस्तेमाल करना भी ठीक है, और आम तौर पर इन्हें import { dqs, dqsA } from '/lib/js/dqs.js'; की तरह module से लाया जाता है
https://github.com/no-gravity/dqs.js
- querySelector/querySelectorAll को bind करने वाली ये दो लाइनें अपने-आप में उपयोगी और तार्किक लगती हैं, लेकिन उन्हें import करके लाना जरूरत से ज्यादा है
  बस साधारण दो लाइनें ही तो हैं; इन्हें dependency बनाने की जरूरत नहीं, सीधे copy-paste कर सकते हैं
- हर utility function एक-लाइनर नहीं होता
  उदाहरण के लिए कई events संभालने वाले $.fn.one() या $.fn.on() को jQuery/Cash से इस्तेमाल करना ज्यादा आसान है, और अंदर की implementation देखें तो काफी काम है: https://github.com/fabiospampinato/cash/blob/master/src/even...
- querySelectorAll() live collection नहीं है, इसलिए अक्सर इसे तुरंत array में बदलकर इस्तेमाल किया जाता है
  dqsA = s => Array.from(document.querySelectorAll(s));
  ऐसा करने पर result पर .map() या .filter() जैसे array methods सीधे इस्तेमाल किए जा सकते हैं, इसलिए jQuery जैसा एहसास रहता है
- हाल ही में React dependency हटाने की कोशिश की थी, लेकिन event handling में browsers के बीच फर्क अभी भी काफी ज्यादा था
  उदाहरण के लिए testing के दौरान Safari में किसी element का select event बिल्कुल fire नहीं हुआ, और कुछ browsers में सिर्फ caret move करने पर event नहीं आया
  भले ही components, state, props जैसी React features की जरूरत न हो, सिर्फ native browser functions काफी नहीं थे; React DOM द्वारा browser differences को ढकने की value साफ दिखी
- bling.js जैसा दिखता है: https://gist.github.com/paulirish/12fb951a8b893a454b32
लगभग सारे polyfills हटाने के बाद, jQuery में बचने वाली स्थायी खूबी मुझे automatic list handling लगती है
form के अंदर सभी buttons को एक ही call में unselect करने की क्षमता अभी भी दूसरी जगह match करना मुश्किल है, और parent queries के साथ भी यही है
हालांकि implementation के लिहाज से सबसे बड़ी समस्या यह है कि list खाली होने पर यह चुपचाप fail हो जाता है
layout के मकसद से DOM tree को बाद में refactor करने पर बने ऐसे बहुत से bugs मैंने ठीक किए हैं, इसलिए अगर आज jQuery को फिर से बनाता तो default रूप से empty set पर error देता, और सच में परवाह न हो तभी chain call या flag से चुपचाप fail होने देता
पहले Sizzle को निकालकर इसे इस तरह बदल सकते हैं या नहीं, यह देखने में कुछ घंटे लगाए थे, लेकिन आगे नहीं बढ़ा
आखिरकार jQuery library बनाम framework वाली पुरानी बहस से भी जुड़ता है, और बड़े frameworks के साथ लंबे समय तक single-page apps बनाने के बाद फिर से मोहभंग की घाटी पास आती लग रही है
- कौन-सा selector सचमुच elements से match करता है, इसकी चिंता न करनी पड़े—कई लोगों के लिए यही jQuery का आकर्षण है
  .foo को सब hide करने का आदेश दें तो अगर वे मौजूद हैं तो hide हो जाते हैं, नहीं हैं तो कुछ नहीं होता—यह fire and forget तरीका है, CSS जैसा
  .foo { color: red; } लिखा और document में .foo न हो, तो छोटे overhead के अलावा कोई side effect नहीं होता
- आधुनिक browsers में query result की सभी items को modify करना भी एक लाइन में काफी साफ तरीके से संभव है
  document.querySelectorAll('input[type=checkbox]').forEach((i) => i.checked = false);
  यह iterable NodeList और iterator helpers का उपयोग करने वाला तरीका है
  कई parent queries element.closest() से संभाली जा सकती हैं
- default strict होना चाहिए, इससे पूरी तरह सहमत हूं
  jQuery आधारित code में हर developer को project के हर selector की जानकारी रखनी होती है और DOM बदलने पर उसे update करना होता है, जो जाहिर है असंभव है
  jQuery initialization function को अपनी implementation से बदलकर length check enforce करना संभव लगता है
जब mainstream websites सचमुच megabytes में JavaScript परोस रही हैं, तो 50KB बचाने के लिए कम features वाली library को पूरी तरह फिर से लिखने की क्या वजह है, समझ नहीं आता
- इस package से अलग, jQuery की चर्चा में जब भी ऐसा तर्क दिखता है तो हैरानी होती है
  कई लेख package size और bandwidth constraints के कारण jQuery इस्तेमाल करने का विरोध करते हैं, और साथ ही कहीं ज्यादा bandwidth इस्तेमाल करने वाले SPA frameworks का समर्थन करते हैं
  यह पूरी तरह बेतुकी cargo-cult reasoning है
- वह तर्क कुछ ऐसा लगता है जैसे “mainstream fast-food chains 1600-calorie meals बेचती हैं, तो lunch में salad क्यों बनाना” या “राष्ट्रीय कर्ज 35 trillion dollars के करीब है, तो mortgage rates compare क्यों करना”
  तीनों मामलों में जवाब एक ही है: बड़ा वाला मैं नहीं हूं, और मैं कुछ छोटा अलग कर रहा हूं
  एक और जवाब यह है कि अगर बहुत बड़ा होना समस्या है, तो छोटा होना समाधान जैसा लगता है
  आखिरकार सवाल शायद यह है कि developers library को फिर से लिखने में समय क्यों लगाते हैं, लेकिन यह इतना चौंकाने वाला नहीं है
  programming का बड़ा हिस्सा पहले से बनी चीजों को फिर से लिखना है—काम की जरूरत हो सकती है, थोड़ा अलग behavior या performance characteristics चाहिए हो सकते हैं, या बस यह सीखना हो सकता है कि चीज काम कैसे करती है
- “आखिर क्यों?” कहने के बजाय छोटी dependencies स्वीकार करें, तो dependencies भी छोटी हो सकती हैं
- mainstream websites ad delivery वाले कचरे जैसी हैं, और हमें अपने काम का benchmark उन्हें नहीं बनाना चाहिए
- कुछ लोग अब भी पूरा JavaScript 50KB से कम भेजने की कोशिश करते हैं
अगर आप jQuery का विकल्प ढूंढ रहे हैं, तो jQuery 4.0 का बहुत लंबे समय तक इंतज़ार करने के बाद आखिरकार मैंने कुछ अहम फर्क रखते हुए अपना खुद का jQuery जैसा कुछ बना लिया
animations, tweens और timelines के लिए jQuery के custom system की जगह शुद्ध CSS इस्तेमाल करता है, single element और list को transparent तरीके से संभालता है, और inline इस्तेमाल की दिशा में झुकाव रखता है
- documentation आपस में टकराती है
  me() के बारे में लिखा है कि यह 1 element लौटाता है, या पहला element या null लौटाता है, और any() के बारे में लिखा है कि यह array या empty array लौटाता है
  लेकिन नीचे के examples any('button')?.forEach(...), any('button')?.map(...) जैसे हैं, जो संकेत देते हैं कि यह null भी हो सकता है
  समझ नहीं आता कि any() ऊपर के description की तरह हमेशा array लौटाता है, या नीचे के examples की तरह null भी संभव है
- अच्छा है
  मेरी खास दिलचस्पी behaviour की locality में है
  currentScript.parentElement इस्तेमाल करने का अनुभव कैसा रहा है, यह जानना चाहूंगा
  पिछले महीने जल्दी-जल्दी जांच करते समय मुझे लगा था कि शायद कुछ edge cases में यह भरोसेमंद नहीं है, लेकिन ठीक-ठीक कब था याद नहीं
  मैंने बहुत गहराई से नहीं देखा, और खुशी है कि आपने इसे ठीक से काम करा लिया
  अगर यह मान लिया जाए कि यह async या module नहीं है, तो लगातार 3 scripts load करने पर भी सभी browsers में currentScript.parentElement अभी भी काम करना चाहिए, ऐसा मुझे लगता है
  SvelteKit ने भी इस पर चर्चा की थी, और आखिरकार target element specify करने के लिए random ID implement किया: https://github.com/sveltejs/kit/issues/2221
migration guide देखते हुए मैंने jQuery में मौजूद लेकिन Cash में न होने वाली कुछ ऐसी capabilities के बारे में जाना, जिनके बारे में मुझे पता नहीं था और जिन्हें कभी आज़माया जा सकता है
https://github.com/fabiospampinato/cash/blob/master/docs/mig...
विस्तार के लक्ष्य के तौर पर, TypeScript template string magic इस्तेमाल करके element type को सटीक infer करना अच्छा रहेगा
उदाहरण के लिए $('div#name') को static रूप से HTMLDivElement infer किया जा सकता है
- उस package को typed-query-selector कहा जाता है
  असली usage example यहां है: https://github.com/GoogleChrome/lighthouse/blob/main/types/i...
- Elixir और कुछ भाषाएं pattern matching और type system से ऐसा कर सकती हैं, लेकिन कई भाषाएं ऐसा नहीं कर पातीं
  TypeScript में यह संभव है या नहीं, मुझे नहीं पता, और यह कैसे किया जा सकता है, यह भी साफ नहीं दिखता
सुना है कि jQuery 4 modern browsers के लिए jQuery alternative है
जिस browser extension पर मैं काम कर रहा हूं, उसमें शुरुआत में मैंने इसे इस्तेमाल किया था, लेकिन आखिरकार JSX library पर चला गया
“simple app” वाली सीमा पार करते ही jQuery जल्दी ही ऐसा code बन जाता है जिसे समझना/infer करना मुश्किल होता है, और jQuery से प्रेरित library खुद बनाने वाले व्यक्ति के रूप में भी मुझे ऐसा ही लगता है
अंत में काम के हिसाब से सही tool इस्तेमाल करना चाहिए
[1]: https://github.com/aleclarson/dough
अगर आप medium-large apps में jQuery को अच्छी तरह संभाल सकते हैं तो ठीक है, लेकिन यह मेरी पसंद नहीं है
पहले जब JS कम करने की कोशिश कर रहा था, तो https://github.com/filamentgroup/shoestring इस्तेमाल किया था
मुख्य वजह यह थी कि यह सिर्फ सचमुच जरूरी चीजें शामिल करने वाला custom build देता था
Cash में भी ऐसा feature लगता है, लेकिन docs में थोड़ा ज्यादा छिपा हुआ है: https://github.com/fabiospampinato/cash/blob/master/docs/par...
अगर इस्तेमाल करूं तो शायद पहले उसी को try करूंगा
फिर भी मुझे अब भी लगता है कि आजकल browsers जो native तौर पर देते हैं, उसे सीधे इस्तेमाल करना बेहतर विकल्प है
वह सच में काफी अच्छा है, और jQuery अब जरूरी नहीं रह गया है
खासकर यह देखते हुए कि छोटा jQuery alternative भी 6kB का है, जबकि React जैसी library Preact उसका आधा size है
यह पहले से मौजूद Web API को aliases देने से ज्यादा मदद करता है या नहीं, मुझे ठीक से नहीं पता

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

Cash जिन समस्याओं को हल करता है

आकार और फीचर तुलना

उपयोग का तरीका

API संरचना

collection methods

global Cash methods

विस्तार और योगदान

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

1 टिप्पणियां

Hacker News की राय