2016-08-01 21 views
0

Ich habe einen Javascript-Code, der unten angegeben ist, dass ES6 kompatibel ist, aber IE 11 unterstützt dies nicht. Was wäre der Ersatzcode dafür, dass es über alle Browser hinweg funktioniert?ES6 Spread-Syntax IE nicht unterstützt

[...document.querySelectorAll('.row')] 

Im dies mit für 'Klick' Event-Handling:

Array.prototype.slice.call(document.querySelectorAll('.row')) 
    .forEach(function(header) { 
     return header.addEventListener('click', function(e) { 
     headerClick(e, header, header.querySelector('.exy')) 
     }); 
    }); 
+0

'Array.prototype.slice.call (document.querySelectorAll ('. Row'))' – gcampbell

+2

Sie könnten einfach Babel verwenden. – gcampbell

+0

Anstelle von Babel verwenden Sie Abstraktion und Upgrade, da Sie die Unterstützung für ältere Browser ablehnen. Javascript ist Scripting, bewegt sich aber dorthin, wo man es bald kompilieren muss. Ich bin keine Rakete Wissenschaft, aber wir machen es nur so ... – Asken

Antwort

3

In allen Browsern Sie Array.prototype.slice über call oder apply (es funktioniert auf jedem Array-artiges Objekt) verwenden können:

Array.prototype.slice.call(document.querySelectorAll('.row')) 

Über y unsere aktualisierte Frage:

Im dies mit für Event-Handling 'Klick':

Array.prototype.slice.call(document.querySelectorAll('.row')) 
    .forEach(function(header) { 
     return header.addEventListener('click', function(e) { 
     headerClick(e, header, header.querySelector('.exy')) 
     }); 
    }); 

würde ich nicht querySelectorAll für diesen Einsatz überhaupt, würde ich Ereignis Delegation verwenden. Vermutlich sind alle diese .row Elemente in einem gemeinsamen Container (schließlich sind sie natürlich alle in body, aber hoffentlich gibt es einen Container, der ihnen "näher" ist). Mit Ereignisse Delegation, tun Sie dies:

  • Haken click nur einmal, auf den Behälter

  • Wenn ein Klick auf, um zu sehen, ob es über ein Ihr Zielelement auf dem Weg zu den Behältern geleitet

Für Ihre zitierte Code, sieht, dass so etwas wie dies:

// A regex we'll reuse 
var rexIsRow = /\brow\b/; 
// Hook click on the container 
document.querySelector("selector-for-the-container").addEventListener(
    "click", 
    function(e) { 
     // See if we find a .row element in the path from target to container 
     var elm; 
     for (elm = e.target; elm !== this; elm = elm.parentNode) { 
      if (rexIsRow.test(elm.className)) { 
       // Yes we did, call `headerClick` 
       headerClick(e, elm, elm.querySelector('.exy')); 
       // And stop looking 
       break; 
      } 
     } 
    }, 
    false 
); 

Auf mehr modern browsers, könnten Sie anstelle des regulären Ausdrucks elm.classList.contains("row") verwenden, aber leider nicht auf IE9 oder früher.


das gesagt ist, anstatt eine separate Codebasis beibehalten wird, wie gcampbell pointed out Sie ES6 (ES2015) verfügen in Ihrem Code verwenden könnten und dann mit einem Transpiler transpile, die sie (na ja, diejenigen umwandelt, die umgewandelt werden können, die ist eine Menge von ihnen) zu ES5-Syntax. Babel ist ein solcher Transpiler.

+0

Aber das ist wie eine Installation richtig? – Neophile

+0

Eine nicht performante Option könnte eine For-Schleife sein. Die 'for'-Schleife erlaubt eine Filterung für sehr alte Browser, die 'Array.filter()' nicht unterstützen. –

+1

@IK Sie können auf https://babeljs.io/repl/ gehen, um es auszuprobieren und einfache Dinge zu transpilieren. –