मॉडर्निजर - पॉलीफिल लोड करने/कस्टम डिटेक्ट्स का उपयोग करने का सही तरीका

Question

मैं किसी वेबपृष्ठ पर कुछ नए HTML5 फॉर्म विशेषताओं और इनपुट प्रकारों का उपयोग करना चाहता हूं। कुछ ब्राउज़र पहले से ही उनका समर्थन करते हैं, अन्य लोग कभी नहीं करेंगे और कभी नहीं करेंगे। Thats क्यों मैं Modernizr का उपयोग करना चाहता हूँ - और यह मेरी परेशानी शुरू होती है।

मेरी समझ के लिए, अकेले मॉडर्निज़र पॉलीफिल नहीं है लेकिन एक स्क्रिप्ट जो जांच सकती है कि ब्राउज़र कुछ नए HTML5/CSS3 सामानों में सक्षम है या नहीं। यदि आवश्यक हो, तो पॉलीफ़िल लोड किया जा सकता है जो इन सुविधाओं को "अनुकरण" करता है ताकि उन्हें गैर-सहायक/पुराने ब्राउज़र में उपयोग किया जा सके। यह सही है मुझे लगता है?

परीक्षण/लोडिंग के संबंध में: क्या आधुनिकज़र के साथ पॉलीफिल लोड करने का सही या सबसे अच्छा तरीका है?
प्रलेखन मैं इस पाया:

Modernizr.load({ 
    test: Modernizr.geolocation, 
    yep : 'geo.js', 
    nope: 'geo-polyfill.js' 
}); 

लेकिन कुछ पृष्ठों में इसे इस तरह कार्य करें:

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} else { 
    // bind to normal click, mousemove, etc 
} 

इसके अलावा, कैसे मैं वास्तव में पता करने के लिए इन का पता कैसे लगाता सुविधा मिलता है कहा जाता है? Modernizr.geolocation की तरह कुछ निश्चित रूप से प्रत्येक सुविधा का पता लगाने के लिए मौजूद है?

मॉडर्निज़र गिटहब भंडार में, कई उपयोगकर्ता योगदान सुविधा का पता लगाता है। मैं इन्हें मॉडर्नइज़र के अपने संस्करण में कैसे कार्यान्वित करूं? या क्या यह सिर्फ अपने निर्माता का उपयोग करना सबसे अच्छा है?

सफारी में, एचटीएमएल 5 फॉर्म सत्यापन कार्य करता है, लेकिन त्रुटि संदेश प्रदर्शित करने के लिए कोई यूआई नहीं है। असल में, सुविधा सिर्फ आधा कार्यान्वित है। यही कारण है कि आधुनिकतार सफारी में झूठी सकारात्मक देता है, जैसा कि पहले से ही उल्लेख किया गया है: https://github.com/Modernizr/Modernizr/issues/266 स्पष्ट रूप से किसी ने इस तरह के कस्टम परीक्षण के साथ इसे ठीक किया है, लेकिन मुझे अभी भी इसका उपयोग नहीं करना है।1

Answer 1

आप जो तकनीकें देख रहे हैं वे दोनों मान्य हैं।

yep/nope संस्करण के मामले में, यह एक अलग फ़ाइल से शामिल होने वाली पॉलीफिल लोड करने का आदर्श तरीका है। यह जावास्क्रिप्ट नहीं होना चाहिए - यह भी एक सीएसएस फ़ाइल भी हो सकता है।

मानक जेएस if() ब्लॉक के मामले में, यदि आपके पास सुविधा उपलब्ध थी या नहीं, तो यह एक और जेएस फ़ाइल में ब्लॉक सुविधा-निर्भर कोड था, तो यह अधिक उपयोगी होगा।

तो दोनों प्रकारों में उनकी जगह है।

हालांकि, अगर आप भी if() ब्लॉक विकल्प अलग जे एस फ़ाइलों को शामिल करने इस्तेमाल किया जा रहा है, क्योंकि yep/nope वाक्य रचना Modernizr के कुछ पुराने संस्करणों में उपलब्ध नहीं था देख सकते हैं। Yepnope वास्तव में एक पूरी तरह से अलग पुस्तकालय है जिसे polyfill फ़ाइलों को अधिक पठनीय लोड करने के लिए वाक्यविन्यास बनाने के लिए Modernizr में शामिल किया गया है।

आधुनिक प्रश्नकर्ताओं का पता लगाने के बारे में जानने के तरीके के बारे में आपका प्रश्न पूछें, आधुनिकता दस्तावेज में जवाब निश्चित रूप से है।

"आधुनिकता द्वारा खोजी गई विशेषताएं" शीर्षक वाले अनुभाग के लिए दस्तावेज़ (http://modernizr.com/docs/) में देखें। Modernizr द्वारा दिए गए नाम के साथ, इसमें सभी सुविधाओं की एक सूची है।

आपके द्वारा उल्लिखित टूटी हुई सुविधा का पता लगाएं - आपके द्वारा लिंक किया गया टिकट लगभग एक साल पहले बंद कर दिया गया था, और यह टिकट पर नोटों से दिखता है जैसे कि बेहतर परीक्षण के लिए कोड मुख्य में जोड़ा गया है आधुनिकता कोड। सुनिश्चित करें कि आप नवीनतम संस्करण चला रहे हैं, और दोबारा जांचें कि यह आपके लिए काम कर रहा है या नहीं।

Answer 2

Modernizr vload के माध्यम से Yepnope का उपयोग करके Modernizr v3 से शुरू करना, deprecated रहा है। JQuery का उपयोग करने का एक अच्छा विकल्प है:

if (Modernizr.geolocation){ 
    console.log('match'); 
} else { 
    // load polyfill 
    $.getScript('path/to/script.js') 
    .done(function() { 
    console.log('script loaded'); 
    }) 
    .fail(function() { 
    console.log('script failed to load'); 
    }); 
}