Mixitup Javascript 在 Internet Explorer 中不起作用

Question

以下关于Mixitup.js的代码在Internet Explorer中不起作用，但在所有其他浏览器中都可以正常工作。

有人能帮上忙吗？或者可以调整在Internet Explorer中工作的代码吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>
<script>
// 2) Reusable function to convert any string/text to css-friendly format
var conv = function (str) {
if (!str) {
str = 'empty';
}  return str.replace(/[!"#$%&'()*+,./:;<=>?@[\]^`{|}~]/g, '')
.replace(/ /g, "-")
.toLowerCase()
.trim();
};
// 3) Creating dynamic elements classes from its categories for filtering:
var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
catArray.forEach( function(elem) {
var text = elem.innerText || elem.innerContent;
var className = conv(text);
elem.parentElement.parentElement.parentElement.parentElement.classList.add(className);
});
// 4) Creating custom data-date attributes from blog dates:
var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
sortArray.forEach( function(sortElem) {
var sortText = sortElem.innerText || sortElem.innerContent;
sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
});
// 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
var containerEl = document.querySelector('.collection-list');
// 6) Call the MixitUp plugin
mixitup(containerEl);
</script> 

Answer 1

我在IE中运行您的代码，它显示错误Object doesn't support property or method 'forEach'。ForEach是为NodeList而不是HTMLCollection定义的。我们可以为HTMLCollection polyfillforEach，然后它可以用于IE中的NodeList和HTMLCollection。

Polyfill:

var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
var ctor = ctors[n];
if (ctor && ctor.prototype && !ctor.prototype.forEach) {
// (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
ctor.prototype.forEach = Array.prototype.forEach;
if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
Object.defineProperty(ctor.prototype, Symbol.iterator, {
value: Array.prototype[Symbol.itereator],
writable: true,
configurable: true
});
}
}
}