Как переписать функцию map js для возможности использования в ie11?

Question

[ligisayan]

Всем привет! Обнаружил, что код ES6 map() и `` не работают в IE 11 Как это участок кода переписать кроссбраузерно или какой использовать можно polyfill для этого?

jQuery.noConflict();
jQuery(document).ready(function($) {

      const keys = ["hard", "soft"];

      document.head.appendChild((style => {
        style.textContent = keys.map(key => `
			#main-slider-wrapper .slider-key button[data-key="${key}"] {
				background-image:
					url(img/${key}-key-slider.png)
			}

			#main-slider-wrapper[data-key="${key}"] .slider img[src*="${key}-key"] {
				opacity: 1;
			}

			#main-slider-wrapper[data-key="${key}"] .slider-key button[data-key="${key}"] {
				filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
				-webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
			}
		`).join("\n\n");
        return style;
      })(document.createElement("style")));

      document.addEventListener("click", ({
        target
      }) => {
        if (!target.matches(
            `${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
          )) return;

        const root = target.closest("#main-slider-wrapper");
        const key = target.dataset.key;
        const index = keys.indexOf(key);
        root.dataset.key = key;

        for (const arrow of root.querySelectorAll(".slick-arrow")) {
          arrow.dataset.key = keys[
            (keys.length + (
              arrow.classList.contains("left") ? -1 : 1
            ) + index) % keys.length
          ];
        }
      });

      for (const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
        e.click();
});

Answer 1

[Interface]

Вы используете es6. => ` вот это все. Это синтаксис - полифил не поможет.

Вставьте код сюда: https://babeljs.io/repl/
бабель его преобразует к es5, например.

Почитайте про: es5, es6 (es2015), babel, транспайлеры, отличия между транспайлером и полифилом

Comments

[ligisayan]

interfacer спасибо, но пока это решило проблему лишь частично - остались вопросы к этому блоку, в частности к matches и closest - говорит, что не знает таких

document.addEventListener("click", function (_ref) {
    var target = _ref.target;
    if (!target.matches("".concat(keys.map(function (k) {
      return "[data-key=\"".concat(k, "\"]");
    }).join(", "), ", .slick-arrow"))) return;
    var root = target.closest("#main-slider-wrapper");
    var key = target.dataset.key;
    var index = keys.indexOf(key);
    root.dataset.key = key;
}

Объект не поддерживает свойство или метод "matchesSelector" и "Symbol" не определено

[Interface]

ligisayan, а это уже решается полифилами: https://learn.javascript.ru/task/polyfill-matches
то же самое можно нагуглить про closest. Или переписать эту часть на jquery, если это проще

[ligisayan]

Interface, да, добавил 2 полифила + еще babel polyfill, без него показывало ошибку

"Символ" не определен в IE после использования babel

Сейчас практически все работает кроме подгрузки изображений, почему-то еще с ними пока косяк, но разбираюсь

Answer 2

[Николай Шабалин]

Если верить MDN, то поддержка с ie9+, но если всё-таки не работает, то в этой же статье есть полифил

Comments

[ligisayan]

Николай Шабалин спасибо, но, к сожалению, и полифил ничего не дает.. Ie11 не нравятся => и ``, хотя в консоли ничего

[Николай Шабалин]

ligisayan, используйте babel для транспиляции es6 до es5. Если не хочется, то напишите данный кусок в es5 стиле.