Τι είναι τα polyfills;

Contents

Τα Polyfills είναι στοιχεία κώδικα που καθιστούν τις νεότερες λειτουργίες του διαδικτύου χρησιμοποιήσιμες σε προγράμματα περιήγησης που δεν υποστηρίζουν εγγενώς τέτοιες λειτουργίες. Αυτό το άρθρο εξηγεί τι είναι αυτά τα πρακτικά στοιχεία κώδικα και πώς μπορείτε να τα χρησιμοποιήσετε.

Τι είναι τα polyfills και σε ποιες γλώσσες μπορούν να γραφτούν;

Ένα polyfill, που μερικές φορές αναφέρεται ως Polyfiller, είναι ένα μπλοκ κώδικα ποικίλης πολυπλοκότητας που καθιστά διαθέσιμες τις σύγχρονες λειτουργίες HTML, CSS ή JavaScript σε παλαιότερα προγράμματα περιήγησης που δεν είναι σε θέση να τις υποστηρίξουν εγγενώς. Τα περισσότερα polyfills είναι γραμμένα σε JavaScript, ωστόσο, άλλες γλώσσες προγραμματισμού ιστού μπορούν επίσης να χρησιμεύσουν ως βάση για σενάρια συμπλήρωσης. Μερικά από τα πιο σημαντικά χαρακτηριστικά που τα polyfills καθιστούν διαθέσιμα σε διαφορετικούς περιηγητές ιστού είναι στοιχεία HTML5, όπως τα στοιχεία καμβά με βάση bitmap για γραφικά, διαγράμματα και κινούμενες εικόνες.

Note

Ο όρος «polyfill» προέρχεται από τη δημοφιλή βρετανική μάρκα Polyfilla, η οποία είναι ένα υλικό πλήρωσης για εργασίες ανακαίνισης και αποκατάστασης. Ο προγραμματιστής ιστού Remy Sharp είδε μια κατάλληλη αναλογία μεταξύ του υλικού πλήρωσης και αυτών των χρήσιμων κωδικών, καθώς ο σκοπός και των δύο είναι να γεμίζουν κενά. Στην περίπτωση των κωδικών, τα κενά που πρέπει να γεμίσουν είναι κενά στη λειτουργικότητα του προγράμματος περιήγησης. Η έννοια επινοήθηκε στο βιβλίο του Sharp Introducing HTML5, το οποίο συνέγραψε με τον Bruce Lawson το 2009. Στη συνέχεια, το Polyfill καθιερώθηκε ως η επίσημη ονομασία για τέτοια στοιχεία κώδικα.

Ποιοι τύποι polyfills υπάρχουν;

Το γεγονός ότι ο όρος polyfill συνδέεται στενά με το HTML5 δεν είναι τυχαίο. Με τις προηγμένες λειτουργίες του, που έχουν καταστήσει, μεταξύ άλλων, την ανάγκη για flash βίντεο παρωχημένη, η πέμπτη έκδοση της γλώσσας σήμανσης υπερκειμένου έχει γίνει μόνιμο χαρακτηριστικό του διαδικτύου. Ωστόσο, η υποστήριξη για HTML5 στους περιηγητές έχει αναπτυχθεί μάλλον αργά. Εκτός από τα polyfills που έχουν δημιουργηθεί για στοιχεία HTML5, τα μπλοκ κώδικα polyfill χρησιμοποιούνται επίσης για την ενσωμάτωση των ακόλουθων στοιχείων ιστού:

Γραφικά SVG: η μορφή SVG SVG (Scalable Vector Graphics), την οποία το κονσόρτσιουμ W3C άρχισε να προτείνει ως τυπική μορφή για τα διανυσματικά γραφικά το 2001, έγινε για πρώτη φορά δημοφιλής με το HTML5. Ωστόσο, επειδή πολλά προγράμματα περιήγησης δεν υποστηρίζουν ακόμη αυτή τη μορφή, υπάρχουν polyfills SVG όπως το svgweb.
ECMAScript: Το ECMAScript είναι ο τυποποιημένος πυρήνας της JavaScript και ενημερώνεται τακτικά για την επέκταση της λειτουργικότητας της γλώσσας. Λειτουργίες όπως τα αντικείμενα Promise ή οι λειτουργίες Symbol διατίθενται σε παλαιότερους browsers μέσω polyfills όπως η τυπική βιβλιοθήκη JavaScript core-js.
Αποθήκευση ιστού: εναλλακτικές λύσεις των cookie, όπως η τοπική αποθήκευση (μακροπρόθεσμη αποθήκευση από την πλευρά του πελάτη) και η αποθήκευση περιόδου λειτουργίας (αποθήκευση που περιορίζεται στην τρέχουσα περίοδο λειτουργίας), γνωστές συλλογικά ως αποθήκευση ιστού ή αποθήκευση DOM, δεν υποστηρίζονται από όλες τις εκδόσεις των προγραμμάτων περιήγησης. Το webstorage-polyfill με άδεια MIT είναι μια γνωστή λύση για αυτό το ζήτημα.
Cross-Origin Resource Sharing (CORS): Το CORS επιτρέπει στις εφαρμογές ιστού να έχουν πρόσβαση σε πόρους ιστού που βρίσκονται εκτός του δικού τους διακομιστή. Πολλά παλαιότερα προγράμματα περιήγησης δεν υποστηρίζουν αυτήν την ανταλλαγή δεδομένων. Το πακέτο JavaScript XDomain και το polyfill CORS XHook μπορούν να βοηθήσουν στην αντιμετώπιση αυτού του προβλήματος.
CSS (Cascading Style Sheets): για χρόνια, το CSS ήταν ένα από τα πιο σημαντικά εργαλεία για το σχεδιασμό της οπτικής διάταξης των ιστότοπων. Με την πάροδο του χρόνου, τα φύλλα στυλ έχουν γίνει πιο ευέλικτα, καθιστώντας τα polyfills δημοφιλή για τη διασύνδεση με παλαιότερους browsers. Ένα από τα πιο γνωστά εργαλεία είναι το css-polyfills.js.
Γεωγραφική θέση: για μεγάλο χρονικό διάστημα, το API γεωγραφικής θέσης (που χρησιμοποιείται για τη μετάδοση της θέσης ενός χρήστη) δεν υποστηριζόταν από τα προγράμματα περιήγησης και μπορούσε να χρησιμοποιηθεί μόνο με τη βοήθεια ενός πρόσθετου plugin προγράμματος περιήγησης. Με ένα polyfill, μπορείτε να παρέχετε αυτή τη λειτουργικότητα σε χρήστες με παλαιότερες εκδόσεις προγραμμάτων περιήγησης που δεν υποστηρίζουν εγγενώς το API.

Πώς χρησιμοποιούνται τα polyfills; (Περιλαμβάνονται παραδείγματα κώδικα)

Μπορείτε να ενσωματώσετε απευθείας κώδικα JavaScript polyfill ή σενάρια polyfill στο έγγραφο HTML ενός ιστότοπου. Αυτά ενσωματώνονται απρόσκοπτα στον υπάρχοντα πηγαίο κώδικα και εκτελούνται μόνο εάν ο browser δεν υποστηρίζει τη συγκεκριμένη λειτουργία ιστού. Αυτό γίνεται συνήθως χρησιμοποιώντας if του JavaScript για να ελέγξετε την έλλειψη υποστήριξης. Η έλλειψη υποστήριξης μπορεί στη συνέχεια να μετατραπεί σε συνθήκη για την ενεργοποίηση του script. Στα δύο ακόλουθα παραδείγματα, θα δείξουμε πώς να το εφαρμόσετε και θα σας παρουσιάσουμε τη γενική δομή ενός polyfill.

Παράδειγμα 1: Polyfill για τη μέθοδο JavaScript `startsWith()`

if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}

javascript

Αυτό το μικρό απόσπασμα JavaScript επιτρέπει στον browser που το καλεί να χρησιμοποιήσει τη μέθοδο startsWith(), ακόμα και αν δεν την υποστηρίζει εγγενώς. Αυτή η μέθοδος, που αποτελεί μέρος της προδιαγραφής ECMAScript 6, ελέγχει αν μια συμβολοσειρά ξεκινά με τον χαρακτήρα ή τη σειρά χαρακτήρων μιας άλλης συμβολοσειράς. Αν ναι, θα επιστρέψει «true», διαφορετικά θα επιστρέψει «false». Μπορείτε να βρείτε μια πιο σύνθετη, βελτιστοποιημένη έκδοση για την ενσωμάτωση startsWith() στη σελίδα GitHub του προγραμματιστή Mathias Bynens.

Note

Ο κώδικας που παρουσιάζεται εδώ δεν θα λειτουργήσει εάν ο διαδικτυακός πελάτης αποκλείει το JavaScript ή έχει απενεργοποιήσει τη γλώσσα προγραμματισμού στις ρυθμίσεις του.

Παράδειγμα 2: Polyfill αποθήκευσης ιστού

Αυτό το JavaScript polyfill είναι μια απλή λύση κωδικοποίησης που καθιστά διαθέσιμη την τοπική αποθήκευση και την αποθήκευση περιόδου λειτουργίας σε παλαιότερα μοντέλα προγραμμάτων περιήγησης.

if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') {
    (function () {
        var data = {};
        var Storage = function (type) {
            function setData() {
                // Implement the logic to set data into storage
                var storageData = JSON.stringify(data);
                document.cookie = type + '=' + storageData + ';path=/';
            }
            function clearData() {
                data = {};
                setData();
            }
            return {
                length: 0,
                clear: function () {
                    clearData();
                    this.length = 0;
                },
                getItem: function (key) {
                    return data[key] === undefined ? null : data[key];
                },
                key: function (i) {
                    var ctr = 0;
                    for (var k in data) {
                        if (ctr == i) return k;
                        ctr++;
                    }
                    return null;
                },
                removeItem: function (key) {
                    delete data[key];
                    this.length--;
                    setData();
                },
                setItem: function (key, value) {
                    data[key] = value + '';
                    this.length++;
                    setData();
                }
            };
        };
        // Set the local and session storage properties inside the window object
        if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local');
        if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session');
    })();
}