2016-04-27 6 views
77

निम्नलिखित कोड का उद्देश्य क्या है?क्यों jQuery दो बार घोषित करें?

ध्यान दें कि नीचे दिए गए दूसरे स्क्रिप्ट कोड से पहले, jquery.min.js पहले ही googleapis के साथ शामिल है।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script> 
+0

सीडीएन का उपयोग करने से पहले स्थानीय प्रतिलिपि लोड क्यों नहीं करें जब आप सुनिश्चित हैं कि स्थानीय प्रतिलिपि आपको चाहिए? शायद थोड़ा सा गति लाभ है। –

+2

हां, यह मुख्य रूप से गति का लाभ है। [यहां और पढ़ें] (http://stackoverflow.com/questions/2145277/what-are-the-advantages-and-disadvantages-of-using-a-content-delivery-network-c) –

+6

यह jquery लोड करना तेज़ है यदि आपके पास पहले से ही है। यह होने का सबसे अच्छा मौका है जब यह कई वेबसाइटों के लिए एक ही स्थान पर होस्ट किया जाता है। तो मूल रूप से, आप इसे पहले कोशिश करना चाहते हैं, और इसे एक बार और सभी के लिए प्राप्त करें। यदि यह विफल रहता है, तो स्थानीय संस्करण प्राप्त करें। –

उत्तर

121

यह जब CDN नीचे है या नहीं पहुँचा जा सकता एक ही सर्वर पर संग्रहीत jquery.min.js फ़ाइल पर वापस आने की है।

यह अनिवार्य रूप कहावत है:

// 1. Try to download and run https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js 

// 2. Was jQuery successfully loaded from the CDN? If so, it will be defined: 
if (window.jQuery) { 
    // Yes, it's defined. Good. Nothing more needed. 
} 
else { 
    // No, it's not defined. Use my copy: 
    document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>') 
} 

Read more here और आप मूल कोड here पा सकते हैं।

window.jQuery || document.write(...) कि उपरोक्त कोड के लिए अनिवार्य रूप से आशुलिपि है के बारे में। जब window.jQuery परिभाषित truthy हो जाएगा और इसलिए ||के दाहिने हाथ की ओर बयान क्रियान्वित किया जा नहीं होगा; लेकिन, अगर यह परिभाषित नहीं कर रहा है यह falsy हो जाएगा और ||के दाहिने हाथ की ओर बयान निष्पादित किया जाएगा।

+4

कूल अवधारणा, मैंने इसे पहले कभी नहीं देखा है। क्या हम गारंटी देते हैं कि पहले

18

यह संस्करण पहले गूगल के CDN पर होस्ट का उपयोग करने की कोशिश कर रहा है। एक मौका है कि साइट को देखने वाले व्यक्ति के पास पहले से ही उस सटीक स्क्रिप्ट को किसी अन्य साइट पर जाने से कैश किया गया है, इसलिए वे पहले भी कोशिश कर सकते हैं।

यदि सीडीएन संस्करण लोड होता है, window.jQuery सेट है, या संक्षिप्त सर्किट है, और कोड चालू है।

CDN संस्करण किसी कारण से लोड नहीं किया जा सकता है, तो यह स्क्रिप्ट का एक स्थानीय रूप से होस्ट किया गया संस्करण के पेज की ओर इशारा करते के लिए एक और स्क्रिप्ट टैग कहते हैं।

संपादित करें: के रूप में MTCoster a comment above में बताते हैं, इस चाल रास्ता जावास्क्रिप्ट सामान्य रूप से भरी हुई है पर निर्भर करता है। टैग लोड होने या समय समाप्त होने तक ब्राउज़र निष्पादन रोकता है। अगर jQuery को async विशेषता का उपयोग करके असीमित रूप से लोड किया गया था, तो यह चाल काम नहीं करेगी।

7

पहली स्क्रिप्ट बाहरी वेबसाइट से jQuery लोड करने का प्रयास करेगी (इस मामले में, Google सीडीएन)।

दूसरा व्यक्ति jQuery ऑब्जेक्ट को window में खोजने का प्रयास करेगा, और केवल अगर इसे नहीं मिला है, तो यह लाइब्रेरी को एक आंतरिक लिंक से लोड करेगा। सीडीएन विफल होने के मामले में यह केवल एक फॉलबैक है।

window.jQuery || document.write(...) 
// the code above means the same as the code below 
if (window.jQuery === undefined) document.write(...) 

जावास्क्रिप्ट में, बूलियन्स (सही/गलत) के अलावा, वहाँ truthy और falsy मान हैं। 0, false, undefined और null से भिन्न कुछ भी एक वास्तविक मूल्य है।

उस स्थिति में, यदि jQuery संपत्ति विंडो पर मौजूद है, तो यह एक वस्तु होगी, और यह एक वास्तविक मूल्य होगा, इसलिए दूसरा कथन नहीं चलाया जाएगा (क्योंकि पहला वाला पहले से ही सत्य है - और एक OR ऑपरेटर, यदि कोई भी कथन सत्य है, तो यह दूसरों को छोड़ देता है (बाएं से दाएं)।

हालांकि, jQuery संपत्ति मौजूद नहीं है, ऐसा इसलिए है क्योंकि पहली स्क्रिप्ट सही ढंग से लोड नहीं हुई थी, और संपत्ति undefined होगी, एक झूठी मान। तो, दूसरा कथन चलाएगा, और स्थानीय jQuery को फॉलबैक के रूप में लोड किया जाएगा।

+0

'window.jQuery || ... 'window * jQuery === अपरिभाषित 'जैसा नहीं है, '~' संस्करण अभी भी झूठी वापसी करेगा यदि 'window.jQuery'' 0', 'false', या' null' जैसा कि आपने कहा था। –

3

यह एक fallback तंत्र अगर CDN से jQuery किसी कारण से पूरा नहीं हुआ है फ़ायरवॉल, CDN के द्वारा अवरुद्ध की तरह नीचे आदि

मैं एक और व्यावहारिक परिदृश्य मैंने पिछले साल का सामना करना पड़ा जोड़ देगा है। मेरे क्लाइंट में से एक ने इंटरनेट उपलब्धता के बिना लैन में मेरे द्वारा बनाए गए वेब एप्लिकेशन को होस्ट और उपयोग करने का निर्णय लिया। स्थानीय आईआईएस के साथ आवेदन ठीक से तैनात किया गया था लेकिन सीडीएन की उपलब्धता के कारण असफल रहा, अगर मैंने सवाल में उल्लिखित कोड का इस्तेमाल किया था तो वेब ऐप ने बिना किसी बदलाव के पहली बार काम किया होगा।

मुझे आशा है कि यह अब समझ में आएगा :) मेरे लिए यह एक सबक सीखा था।

संबंधित मुद्दे