Selectors को Cache करना
In this page:
var $element = $(selector);
$element.action();Selector Caching क्या है?
Selector caching का मतलब है एक jQuery selector को एक बार चलाना, resulting jQuery object को एक variable में store करना, और उस variable को reuse करना बजाय।
उदाहरण: What is Selector Caching?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
const $text = $("#text");
$text.css("color", "red");
$text.css("font-size", "18px");
</script>
</body>
</html>Selectors क्यों Cache करें?
Caching खासतौर पर तब उपयोगी है जब वही element या elements का set एक ही function या event handler के अंदर कई बार इस्तेमाल होता है, क्योंकि यह avoid करता है।
उदाहरण: Why Cache Selectors?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const $btn = $("#btn");
$btn.on("click", function() {
$btn.css("background", "yellow");
});
</script>
</body>
</html>Repeated Work से पहले Cache करें
अगर कोई loop या बार-बार trigger होने वाला event handler हर iteration या हर call पर same selector इस्तेमाल करता है, तो resulting jQuery object को एक variable में store करें।
उदाहरण: Cache Before Repeated Work
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li>Two</li></ul>
<script>
const $items = $("#list li");
$items.each(function() {
$(this).css("color", "blue");
});
</script>
</body>
</html>Functions के अंदर Cache करें
एक cached selector अक्सर किसी function के top पर एक बार बनाया जाता है जो अपने body में same element या elements के साथ कई बार काम करता है, ताकि se।
उदाहरण: Cache Inside Functions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
function styleBox() {
const $box = $("#box");
$box.css("color", "red");
$box.css("padding", "10px");
}
styleBox();
</script>
</body>
</html>एक छोटा Caching Project
Caching एक simple, low-risk optimization है — इसे तब इस्तेमाल करें जब आप देखें कि exact same selector string किसी ऐसे code में एक से ज़्यादा बार आ रहा है जो चलता है।
उदाहरण: Small Caching Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const $btn = $("#btn");
$btn.on("click", function() {
$btn.text("Clicked!");
});
</script>
</body>
</html>- एक loop के अंदर बार-बार
$("#text")लिखना, हर iteration पर lookup चलाते हुए बजाय इसे एक बार store करने के:const $text = $("#text");। - elements exist करने से पहले एक selection cache करना, ताकि variable में बाद में add किए जाने के बाद भी एक empty set रहे।
- एक selector को बहुत जल्दी cache करना, जैसे items add होने से पहले $(".item"), ताकि stored set बाद में बनाए गए elements शामिल न करे।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: