Qual è il modo migliore per caricare selettivamente codice transpiled o polyfill per i browser di livello inferiore?

4

Non è possibile sfuggire a Internet Explorer 11 poiché sarà disponibile fino al 2023 come browser predefinito del sistema operativo desktop più popolare. Tuttavia, Internet Explorer 11 non riceverà nuovi aggiornamenti su JavaScript, CSS3 o HTML5.

Supponendo che la maggior parte delle funzionalità mancanti possano essere trasferite tramite Babel o polyfilled, qual è il modo migliore per evitare l'overhead per i browser che supportano le stesse funzionalità, come Chrome e FireFox?

Riferimento: link

    
posta zumalifeguard 01.03.2016 - 17:40
fonte

1 risposta

1

Questo sicuramente non è "il modo migliore" per farlo, ma potrebbe darti più idee e / o idee migliori, e sembra funzionare in Firefox, Chrome, IE9 + ... e persino sul mio Android obsoleto telefono:

link

<!DOCTYPE html> <!-- If only to please Mr. IE, wrt.
                     its so-called "Standards mode", etc -->
<html>
<head>
<title>Polyfill PoC</title>
<script>

var listener = (typeof document.addEventListener !== "undefined" ? document.addEventListener : null),
    onLoad = function() {
      function polyfilled() {
        if (remaining) {
          for (var p = 0; p < needed.length; p++) {
            var s;
            if (s = needed[p].content) {
              eval(s);
              needed[p].content = null;
              remaining--;
            }
          }
        }
        if (!remaining) {
          run();
        }
      }
      function polyIndexOf(id) {
        var p = needed.length;
        while ((--p >= 0) && (needed[p].id !== id));
        return p;
      }
      function grabIt(src, at) {
        var xhr = new XMLHttpRequest();
        remaining++;
        xhr.open("GET", src);
        xhr.onload = function(e) {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              needed[at].content = xhr.responseText;
            } else {
              console.error(xhr.statusText);
            }
          }
          polyfilled();
        };
        xhr.send();
      }
      var polyscripts = document.querySelectorAll("polyfill[id]"),
          remaining = 0,
          needed = [ ];

      // Begin polyfill requirement gathering logic
      if (typeof Array.prototype.find === "undefined") {
        needed.push({ id: "needed_ES5" });
      }

      if (typeof Per === "undefined") {
        needed.push({ id: "needed_Per" });
      }
      // End polyfill requirement gathering logic

      for (var i = 0; i < polyscripts.length; i++) {
        var polyscript = polyscripts[i],
            index;
        if (
          (polyscript.id.substring(0, 7) === "needed_") &&
          ((index = polyIndexOf(polyscript.id)) >= 0)
        ) {
          grabIt(polyscript.getAttribute("src"), index);
        }
      }
      polyfilled();
    };

if (listener) {
  listener.call(document, "DOMContentLoaded", onLoad);
} else {
  window.onload = onLoad;
}

</script>
</head>
<body>


//...

<polyfill id="needed_ES5" src="http://www.ysharp.net/experiments/JSLT/2016-03-07/es5-shim.min.js"/><polyfillid="needed_Per" src="http://www.ysharp.net/experiments/JSLT/2016-03-07/per.min.js" />
</body>
</html>

'HTH,

    
risposta data 08.03.2016 - 00:38
fonte

Leggi altre domande sui tag