javascript - 不支持 ES6 扩展语法 IE

Question

我有一个下面给出的与 ES6 兼容的 javascript 代码，但是 IE 11 不支持它。什么是替代代码，以便它可以在所有浏览器上运行？

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

我用它来处理“点击”事件:

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

Answer 1

对于所有浏览器，您可以使用 Array.prototype.slice通过call或 apply (它适用于任何类似数组的对象):

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

关于您更新的问题:

Im using this for 'click' event handling:

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

我不会使用 querySelectorAll为此，我会使用事件委托(delegate)。大概所有这些.row元素在一个公共(public)容器中(当然，最终它们都在 body 中，但希望有一个容器比它们“更接近”)。使用事件委托(delegate)，您可以这样做:

Hook click一次，在容器上

当点击发生时，检查它是否通过您的目标元素之一前往容器

对于您引用的代码，它看起来像这样:

// 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
);

更多 modern browsers , 你可以使用 elm.classList.contains("row")而不是正则表达式，但遗憾的是不在 IE9 或更早版本上。

也就是说，而不是维护一个单独的代码库，如 gcampbell pointed out您可以在代码中使用 ES6 (ES2015) 功能，然后使用将它们(嗯，可以转换的，其中很多)转换为 ES5 语法的转译器进行转译。 Babel就是这样一种转译器。