JS - Polyfill vol. 8

Uczymy się czym jest Element.matches oraz jak wyglądają prawdziwe polyfille i jak z nich korzystać. Do dzieła.

Nasz kawałek HTML:

<template id="myTemplate">
        <h1>My heading</h1>
        <p>My para</p>
</template>

Element.matches sprawdza, czy dany element pasuje do danego selektora:

window.addEventListener('DOMContentLoaded', function(){
    
    let tpl = document.getElementById("myTemplate");

    console.log(tpl.matches("template"));
    //true
    console.log(tpl.matches("#myTemplate"));
    //true
    console.log(tpl.matches(".btn-danger"));
    //false
    
});

Polyfill znajdujemy w internecie (albo korzystając z webpacków i innych takich samo się wszystko robi). Wygląda mniej-więcej tak:

function isMatch(node, selector) {
    if(node.matches) { 
      return node.matches(selector);
    } else { 
      var matches = Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector;
      return matches.call(node, selector);
    }
  }

I tak jest zbyt ładny jak na polyfill i zbyt wyszukany (dostarcza fasadę do używania go niezależnie od tego, czy przeglądarka coś obsługuje czy nie).

Zazwyczaj polyfill to sprawdzenie czy coś istnieje (np. pętla forEach) i jeżeli nie – nadpisanie tego niezbyt czytelnym kodem, który będzie działać na starych przeglądarkach.

JS – Polyfill vol. 8