दोनों स्पेक्स के साथ काम करने के लिए वेब कंपोनेंट्स कस्टम एलिमेंट्स कैसे बनाएं

Question

मुझे एक ऐसे घटक का निर्माण करने की आवश्यकता है जिसमें दोनों चश्मा के साथ काम करने की आवश्यकता हो, custom elements spec v0जो कि पदावनत हो गया और custom elements spec v1, नवीनतम स्थिर संस्करण।

अगर मैं custom elements v0कल्पना के साथ घटकों का निर्माण करता हूं तो कुछ एप्लिकेशन समस्याओं का सामना करेंगे क्योंकि वे उपयोग कर रहे हैं polymer 2और ऊपर और polymer 1अनुप्रयोगों के साथ एक ही समस्या है जो custom elements v1कल्पना के साथ काम नहीं करेगा ।

पॉलीफ़िल बदलने के लिए मेरे पास अनुप्रयोगों पर नियंत्रण नहीं है , कुछ अनुप्रयोगों को पॉलीफ़िल का उपयोग करना पड़ता है, पुरानी कल्पना का समर्थन करता है और कुछ नए पॉलीफ़िल का उपयोग करते हैं।

मैं पॉलीफ़िल संस्करण के बावजूद सभी अनुप्रयोगों में अपने कस्टम तत्वों को चलाने के लिए दोनों चश्मा को संयोजित करने के लिए एक ठोस समाधान की तलाश कर रहा हूं। मैं अपने घटकों में पॉलीफिल या स्निपेट का कोई भी टुकड़ा जोड़ सकता हूं ताकि वे कहीं भी चल सकें, मुझे ऐसी कोई लाइब्रेरी या पॉलीफिल नहीं मिली है जो मेरे शोध में दोनों चश्मे का समर्थन करती हो।

मैं एक एडेप्टर लिखने की योजना बना रहा हूं जो संलग्न कॉलबैक के लिए नीचे दिए गए मैपिंग जैसे दोनों स्पेक्स को जोड़ सकता है, इस विचार पर इनपुट की बहुत सराहना की जाएगी।

connectedCallback(){
    this.attachedCallback();
}

मैंने स्टैंसिलज का उपयोग करने की कोशिश की लेकिन यह कस्टम तत्वों की कल्पना के नवीनतम संस्करण के साथ ही काम कर सकता है। मुझे पहले वाली कल्पना के साथ काम करने के लिए इसे ट्विक करने का कोई तरीका नहीं मिला।

कृपया उपर्युक्त स्थिति के लिए कुछ व्यवहार्य विकल्प और संभव समाधान सुझाएं।

Answer 1

मूल रूप से आपके घटक में कुछ निर्भरताएँ होती हैं जो सीधे या अप्रत्यक्ष रूप से पॉलीफिल में परिभाषित होती हैं। यदि हम इन निर्भरताओं को एक निर्भरता ग्राफ के नोड के रूप में मानते हैं, तो हमें ग्राफ़ के अलग होने की समस्या है। यह संभव है कि दोनों ग्राफ़ में एक नोड मौजूद हो, लेकिन अलग-अलग (उसी के पुराने और नए कार्यान्वयन function) का व्यवहार करना और यह भी संभव है कि एक ग्राफ़ में मौजूद कुछ नोड्स दूसरे में गायब हों। आप निश्चित रूप से अपने या कुछ के पॉलीफ़िल में डाल सकते हैं, लेकिन फिर आपको पॉलीफ़िल को बनाए रखने की आवश्यकता होगी, जो सहायक से कम हो सकती है।

मेरी राय में एक बेहतर दृष्टिकोण एक function, जैसे को लागू करना है

function getWebComponentsVersion() {
    //Return v1 if it's v1 and v0 if it's v0
}

मुझे यकीन नहीं है कि इसे कैसे लागू किया जाए function, लेकिन अगर कोई है functionजो उचित संस्करण देता है, या कार्यात्मकताओं के बीच कुछ स्पष्ट अंतर है, तो आप फ़ंक्शन को तदनुसार लागू कर सकते हैं। और फिर, इस कोड को चलाएं:

if (getWebComponentsVersion() === "v1") {
    //code for v1
} else {
    //code for v0
}

Comments

आपके उत्तर के लिए धन्यवाद, इस मामले में मुझे घटक कोड के दो संस्करणों को बनाए रखने की आवश्यकता है जो सुविधाओं को जोड़ते समय एक दर्द होगा और दीर्घकालिक फिक्सिंग मुद्दों में व्यस्त प्रक्रिया बन जाएगी।

— कोंगा राजू

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

— लाजोस अरपाद

Answer 2

मुझे संदेह है कि आप जानते हैं कि Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020.।

Can I useवेबसाइट पर जाने और ब्राउज़र समर्थन संस्करणों की जांच करने के लिए आप क्या कर सकते हैं यह देखने के लिए कि कौन से ब्राउज़र को कौन से तत्व तत्वों को लोड करना चाहिए ...

बाद में ब्राउज़र और संस्करण की जांच करने के लिए नीचे लागू करें और वांछित ब्राउज़र के अनुसार सही कस्टम तत्व लोड करें ( यदि यहां ) आप बाहरी पुस्तकालयों का उपयोग नहीं करना चाहते हैं।

यदि आप बाहरी पुस्तकालयों का उपयोग करने के साथ ठीक हैं , तो संस्करण, प्लेटफॉर्म आदि का पता लगाने के लिए बोउसर का प्रयास करें ।

navigator.browserSpecs = (function(){
    var ua = navigator.userAgent, tem, 
        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return {name:'IE',version:(tem[1] || '')};
    }
    if(M[1]=== 'Chrome'){
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return {name:M[0], version:M[1]};
})();

console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

if (navigator.browserSpecs.name == 'Chrome') {
    // Do something for Chrome.
    if (navigator.browserSpecs.version > 76) {
        // Do something for Chrome versions greater than 76 like load v1.
    }
}
else {
    // Do something for all other browsers.
}

Comments

सबसे पहले, आपके उत्तर के लिए धन्यवाद। ब्राउज़र संस्करण का पता लगाने के बाद एक घटक के निर्माण में असली समस्या है? ब्राउज़र संस्करण का पता लगाने के लिए एक चेक जोड़ना एक अतिरिक्त कदम होगा।

— कोंगा राजू

लगता है कि मैं मान्यताओं में दूर तक गया था - ऊपर मेरा विचार 2 अलग घटकों का निर्माण करना था और उपयुक्त ब्राउज़रों में लोड करना था।

— Mac_W