jQuery CDN Fallbacks
In this page:
<script src="https://cdn-url/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="local/jquery.min.js"><\/script>');
</script>Fallback क्यों इस्तेमाल करें
अगर CDN down हो जाए या कोई network उसे block कर दे, तो jQuery पर निर्भर हर script एक साथ टूट जाता है -- एक fallback page को चाहे जो भी हो काम करते रहने देता है।
उदाहरण: Why Use a Fallback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
console.log(typeof jQuery === "undefined" ? "jQuery failed to load" : "jQuery loaded");
</script>
</body>
</html>Basic Fallback Check
एक fallback check CDN script tag के ठीक बाद typeof jQuery === undefined test करने वाला बस एक plain JavaScript if-statement है -- अगर CDN fail हो गया, तो jQuery ने कभी वह global define ही नहीं किया, इसलिए check इसे तुरंत पकड़ लेता है।
उदाहरण: Basic Fallback Check
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
if (typeof jQuery === "undefined") {
console.log("CDN failed to load jQuery");
}
</script>
</head>
<body></body>
</html>Script Creation के साथ Fallback
जब check fail होता है, तो JavaScript document.write() इस्तेमाल करके jQuery file की एक local copy की तरफ़ point करने वाला एक नया <script> tag inject कर सकता है, page की बाकी scripts चलने से पहले इसे एक backup के रूप में load करते हुए।
उदाहरण: Fallback with Script Creation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
if (typeof jQuery === "undefined") {
document.write('<script src="jquery.min.js"><\/script>');
}
</script>
</head>
<body></body>
</html>Fallback को Test करना
fallback logic के बाद एक message log करना confirm करता है कि jQuery असल में कहाँ से मिला -- fallback path को जानबूझकर test करते समय उपयोगी, उदाहरण के लिए अपने browser के dev tools में CDN को block करके।
उदाहरण: Test the Fallback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
if (typeof jQuery === "undefined") {
console.log("Loaded from local fallback");
} else {
console.log("Loaded from CDN");
}
</script>
</head>
<body></body>
</html>एक Local Copy रखना
अपने खुद के project folder के अंदर jquery.min.js की एक copy रखने का मतलब है कि आपकी site किसी third-party CDN के online बने रहने पर पूरी तरह निर्भर नहीं करती, maintain और update करने के लिए एक extra file की छोटी कीमत पर।
उदाहरण: Keep a Local Copy
<!DOCTYPE html>
<html>
<head>
<!-- Local fallback copy kept at: /js/jquery.min.js -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
console.log("CDN version:", $.fn.jquery, "- local copy also kept as backup");
</script>
</body>
</html>- fallback check को CDN script tag से पहले रखना, इसलिए
typeof jQuery === "undefined"हमेशा true होता है क्योंकि jQuery को load होने का मौका ही नहीं मिला। typeof jQueryके बजायif (jQuery === undefined)से test करना, जो jQuery missing होने पर एक ReferenceError throw करता है।- fallback को एक ऐसे local file path पर point करना जो मौजूद नहीं है, इसलिए CDN और backup दोनों fail हो जाते हैं और jQuery फिर भी undefined रहता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: