🥢 🌙 👨🏻‍⚖️ क्रॉस-ब्राउज़र एप्लिकेशन लिखते समय पॉलीफिल का उपयोग 🎛️ 👦🏿 🔤

हाल ही में मेरे साथ एक मजेदार वाकया हुआ। मैंने एक वेब प्रोजेक्ट बनाया और एक मौजूदा एप्लिकेशन की क्षमताओं का विस्तार किया, जो मेरे कर्मचारी मेरे संगठन में उपयोग करते हैं। सब कुछ ठीक लग रहा था, मुझे खुशी है कि परियोजना को लॉन्च किया गया था, धन्यवाद के पत्रों की प्रतीक्षा कर रहा था।

पहली रिलीज़ के कुछ दिनों बाद, मुझे वास्तव में पत्र मिलना शुरू हुआ। लेकिन उनमें धन्यवाद नहीं देखा गया। प्रबंधक, मानव संसाधन कार्यकर्ता, और मेरे कार्यक्रम का उपयोग करने की कोशिश करने वाले सभी लोगों ने मुझे लिखा। उन सभी ने कहा कि उनका आवेदन सही तरीके से काम नहीं करता है।

मामला क्या है? लेकिन तथ्य यह है कि जब मैंने प्रोजेक्ट बनाया, तो मैंने इसे क्रोम में परीक्षण किया। लेकिन इस परियोजना के उपयोगकर्ता लगातार फ़ायरफ़ॉक्स और IE का उपयोग करते हैं। मेरे आवेदन के साथ काम करना कोई अपवाद नहीं था। अंत में, मैं पूरी तरह से दुखी था कि कुछ दिन पहले शुरू की गई परियोजना को अंतिम रूप दिया जाना था।

तथ्य की बात के रूप में, यहाँ पॉलीफ़िल मेरी सहायता के लिए आया था।

Polifilly

एक पॉलीफ़िल (पॉलीफ़िल या पॉलीफिलर) कोड का एक टुकड़ा (या एक निश्चित प्लग-इन) है जो कि मानक ब्राउज़र क्षमताओं के बीच डेवलपर की अपेक्षा को लागू करता है। Polyfills अनुमति देता है, इसलिए बोलने के लिए, ब्राउज़र एपीआई की अनियमितताओं को "सुचारू" करने के लिए।

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

उदाहरण के लिए, पॉलीफ़िल का उपयोग करके, आप Microsoft इंटरनेट एक्सप्लोरर 7. में कैनवास एचटीएमएल तत्व की कार्यक्षमता का अनुकरण कर सकते हैं। इसके लिए, सिल्वरलाइट प्लगइन का उपयोग किया जाता है। पॉलीफ़िल का उपयोग सीएसएस में माप rem की इकाइयों, या पाठ-छाया विशेषता, या किसी अन्य चीज़ का समर्थन करने के लिए किया जा सकता है। जिन कारणों से डेवलपर्स विशेष रूप से पॉलीफिल का उपयोग नहीं करते हैं, वे ब्राउज़रों की अंतर्निहित क्षमताओं पर ध्यान नहीं देते हैं, यह है कि ब्राउज़रों की मानक क्षमताएं बेहतर कार्यक्षमता और उच्च प्रदर्शन प्रदान करती हैं। विभिन्न एपीआई के स्वयं के ब्राउज़र कार्यान्वयन में पॉलीफिल की तुलना में अधिक विशेषताएं हैं, और वे तेजी से काम करते हैं।

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

उदाहरण

मैंने हाल ही में एक एप्लिकेशन के लिए एक विकास गाइड प्रकाशित किया है जो CSV और एक्सेल फ़ाइलों को जावास्क्रिप्ट का उपयोग करके JSON में कनवर्ट करता है। यहां आप तैयार आवेदन देख सकते हैं।

बाद में हम किस बारे में बात करेंगे, इससे निपटने के लिए, आप या तो वह सब कुछ कर सकते हैं, जो मैनुअल में चर्चा की गई है, या निम्नलिखित आदेश के साथ मेरी रिपॉजिटरी को क्लोन कर सकते हैं:

 git clone https://github.com/YannMjl/jsdemo-read-cvs-xls-json cd jsdemo-read-cvs-xls-json

मैं इस प्रक्रिया में वीएस कोड का उपयोग करने की सलाह देता हूं। आप वीएस कोड लाइव सर्वर के लिए एक्सटेंशन का उपयोग करके स्थानीय रूप से वेब एप्लिकेशन लॉन्च कर सकते हैं।

आइए इस वेब एप्लिकेशन को संशोधित करें और विभिन्न ब्राउज़रों का उपयोग करके इसके साथ काम करते समय आने वाली समस्याओं को देखें।

रिपॉजिटरी में एक polyfill शाखा बनाएं और इसे स्विच करें:

 git checkout -b polyfill

मैं उस स्थिति की जांच करने जा रहा हूं जिसमें हमें दो या अधिक सीएसवी फ़ाइलों से डेटा मिलता है, और संबंधित एपीआई के अनुरोधों के परिणामों को संसाधित करने के बाद, हम इस डेटा को एक HTML तालिका में आउटपुट करते हैं।

The परियोजना को अंतिम रूप देना

प्रोजेक्ट की रूट डायरेक्टरी में एक नई CSV फाइल ( team2.csv ) बनाएं, जिसके परिणामस्वरूप दो फाइलें होनी चाहिए। यहां वह फ़ाइल है जिसे मैंने प्रोजेक्ट में जोड़ा है।

हम script.js फ़ाइल को script.js ताकि वह 2 फ़ाइलों से डेटा पढ़े और एक HTML तालिका में सभी डेटा प्रदर्शित करे। यहाँ मेरी script.js ।

 // ******************************************************************** //                         * //   ,      * // ******************************************************************** var csv_file_API_1 = "./UsersSample.csv"; var csv_file_API_2 = "./team2.csv"; var APIs_array = [csv_file_API_1, csv_file_API_2]; //       $(document).ready(function () {    $("#headerTitle").hide(300).show(1500);    makeAPICalls(); }); // end: document.ready() function makeAPICalls() {    // ,      API    var calls = [];    //  API  CSV-     APIs_array.forEach(function (csv_file_API) {        //             calls.push(new Promise(function (resolve, reject) {            //   API   AJAX            $.ajax({                type: "GET",                url: csv_file_API,                dataType: "text",                cache: false,                error: function (e) {                    alert("An error occurred while processing API calls");                    console.log("API call Failed: ", e);                    reject(e);                },                success: function (data) {                    var jsonData = $.csv.toObjects(data);                    console.log(jsonData);                    resolve(jsonData);                } // end:       API            }); // end: AJAX-        })); // end:         }); // end:   API    //      API    Promise.all(calls).then(function (data) {        //           var flatData = data.map(function (item) {            return item;        }).flat();        console.log(flatData);        dislayData(flatData);    }); } function dislayData(data) {       $.each(data, function (index, value) {        $('#showCSV').append(            '<li class="list-group-item d-flex justify-content-between align-items-center">' +                '<span style="width: 15%; font-size: 1rem; font-weight: bold; color: #37474F">' +                    value['FIRST NAME'] +                '</span>' +                '<span style="width: 15%; font-size: 1rem; color: #37474F">' +                    value['LAST NAME'] +                '</span>' +                '<span class="badge warning-color-dark badge-pill">' +                    value['PHONE NUMBER'] +                '</span>' +                '<span class="badge success-color-dark badge-pill">' +                    value['EMAIL ADDRESS'] +                '</span>' +                '<span class="badge badge-primary badge-pill">' +                    value.CITY +                '</span>' +                '<span class="badge badge-primary badge-pill">' +                    value.STATE +                '</span>' +            '</li>'        );    }); }

अब, पृष्ठ का पता कॉपी करने के बाद, आपके पास मौजूद सभी ब्राउज़रों में प्रोजेक्ट खोलें। मेरे मामले में, ये इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स मोज़िला, माइक्रोसॉफ्ट एज और Google क्रोम थे। यह पता चला कि एप्लिकेशन इंटरनेट एक्सप्लोरर और माइक्रोसॉफ्ट एज में सामान्य रूप से काम करना बंद कर देता है। केवल हेडर प्रदर्शित किए गए थे।

क्रोम परियोजना पृष्ठ

Microsoft एज प्रोजेक्ट पेज

दो कारणों से कुछ ब्राउज़रों द्वारा प्रदर्शित पृष्ठ पर कोई डेटा नहीं है:

मैंने उन वादों और कॉलबैक का उपयोग किया, जो सभी ब्राउज़र समर्थन नहीं करते हैं। उदाहरण के लिए, इन ब्राउज़रों में IE और एज हैं।
मैंने मौजूदा सरणी से एक नया "फ्लैट" सरणी बनाने के लिए flat() सरणी विधि का उपयोग किया। यह विधि कुछ ब्राउज़रों द्वारा समर्थित नहीं है। उनमें से, जैसा कि पिछले मामले में, IE और एज।

पॉलीफिल का of आवेदन

हम ब्लूबर्ड लाइब्रेरी का उपयोग करके वादों और कॉलबैक की समस्या को ठीक करते हैं। यह वादों से संबंधित तंत्र का एक पूर्ण विकसित जेएस कार्यान्वयन है। ब्लूबर्ड लाइब्रेरी की सबसे दिलचस्प विशेषता यह है कि यह आपको अन्य नोड मॉड्यूल को "ओवरक्लास" करने की अनुमति देता है, उन्हें संसाधित करता है ताकि आप उनके साथ अतुल्यकालिक रूप से काम कर सकें। इस तरह के प्रसंस्करण को कॉलबैक का उपयोग करने वाले कोड पर लागू किया जा सकता है।

उपयुक्त CDN संसाधन का उपयोग करके पृष्ठ पर ब्लूबर्ड लाइब्रेरी डाउनलोड करें। ऐसा करने के लिए, index.html फ़ाइल के शीर्ष लेख में ( head तत्व में) निम्नलिखित डालें:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.0/bluebird.min.js"></script>

flat() सरणी विधि के बारे में समस्या को ठीक करने के लिए, script.js फ़ाइल के शीर्ष पर निम्न कोड जोड़ें:

 Object.defineProperty(Array.prototype, 'flat',    {        value: function (depth) {            depth = 1;            return this.reduce(                function (flat, toFlatten) {                    return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);                }, []            );        },        configurable: true });

अब एप्लिकेशन को उम्मीद के अनुसार सभी ब्राउज़रों में काम करना चाहिए। यहाँ, उदाहरण के लिए, यह अब Microsoft Edge में कैसा दिखता है।

Microsoft एज में परिष्कृत परियोजना पृष्ठ

मैंने इस परियोजना को यहां तैनात किया है । आप इसका अनुभव कर सकते हैं।

यदि आप इस परियोजना को काम करने में सफल नहीं हुए, तो मेरे भंडार में देखें ।

और यहां - उदाहरण के लिए - एक जोड़े को अधिक पॉलीफिल।

 //   String.prototype.startsWith() if (!String.prototype.startsWith) {    Object.defineProperty(String.prototype, 'startsWith', {        value: function (search, rawPos) {            pos = rawPos > 0 ? rawPos | 0 : 0;            return this.substring(pos, pos + search.length) === search;        }    }); } //   String.prototype.includes() if (!String.prototype.includes) {    String.prototype.includes = function (search, start) {        'use strict';        if (typeof start !== 'number') {            start = 0;        }        if (start + search.length > this.length) {            return false;        } else {            return this.indexOf(search, start) !== -1;        }    }; }

परिणाम

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

प्रिय पाठकों! क्या आप पॉलीफिल का उपयोग करते हैं?

क्रॉस-ब्राउज़र एप्लिकेशन लिखते समय पॉलीफिल का उपयोग

Polifilly

उदाहरण

The परियोजना को अंतिम रूप देना

पॉलीफिल का of आवेदन

परिणाम

More articles: