Javascript - Расширение класса ES6 в ES5 - PullRequest
Новая
       48

Javascript - Расширение класса ES6 в ES5

1 голос
/ 09 июля 2019

Я использую следующий код для слайдера с Siema :

https://codepen.io/pawelgrzybek/pen/boQQWy

, который использует расширяющие классы для добавления точек к слайду.Все работает хорошо, за исключением того, что на нашем сайте теперь есть проблемы с Googles Mobile Friendly Test, использующим ES6, так как он выдает ошибку: 

Uncaught SyntaxError: Unexpected reserved word

в этой строке: 

class SiemaWithDots extends Siema {

Есть лиКак я могу сделать это совместимым с ES5?

Код можно увидеть ниже: 

// instantiate new extended Siema
const mySiemaWithDots = new SiemaWithDots({
  // on init trigger method created above
  onInit: function(){
    this.addDots();
    this.updateDots();
  },

  // on change trigger method created above
  onChange: function(){
    this.updateDots()
  },
});

// extend a Siema class by two methods
// addDots - to create a markup for dots
// updateDots - to update classes on dots on change callback
class SiemaWithDots extends Siema {

  addDots() {
    // create a contnier for all dots
    // add a class 'dots' for styling reason
    this.dots = document.createElement('div');
    this.dots.classList.add('dots');

    // loop through slides to create a number of dots
    for(let i = 0; i < this.innerElements.length; i++) {
      // create a dot
      const dot = document.createElement('button');

      // add a class to dot
      dot.classList.add('dots__item');

      // add an event handler to each of them
      dot.addEventListener('click', () => {
        this.goTo(i);
      })

      // append dot to a container for all of them
      this.dots.appendChild(dot);
    }

    // add the container full of dots after selector
    this.selector.parentNode.insertBefore(this.dots, this.selector.nextSibling);
  }

  updateDots() {
    // loop through all dots
    for(let i = 0; i < this.dots.querySelectorAll('button').length; i++) {
      // if current dot matches currentSlide prop, add a class to it, remove otherwise
      const addOrRemove = this.currentSlide === i ? 'add' : 'remove';
      this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
    }
  }
}

Ответы [ 2 ]

2 голосов
/ 09 июля 2019

Затем вы замените class функцией конструктора старого стиля, а затем манипулируете прототипом, чтобы установить иерархию прототипов: 

function SiemaWithDots() {
    Siema.apply(this, arguments);
}

SiemaWithDots.prototype = Object.create(Siema.prototype);
SiemaWithDots.prototype.constructor = SiemaWithDots;
SiemaWithDots.prototype.addDots = function () {
    // ... your code ...
};
SiemaWithDots.prototype.updateDots = function () {
    // ... your code ...
};
0 голосов
/ 09 июля 2019

В настоящее время ваш код содержит множество функций ES6 - const, class, функции стрелок. Вы должны использовать сетевой транспортер, такой как Babel.JS , чтобы сделать ваш код ES5-совместимым.

Кроме того, в вашем коде вы используете класс до того, как определите его. Хорошей практикой является перемещение всех определений классов и функций стрелок в верхнюю часть вашего кода (обычные функции ES5 расположены до того, как какой-либо код будет оценен). Итак, ваш код должен выглядеть так: 

class SiemaWithDots extends Siema {...}

const mySiemaWithDots = new SiemaWithDots({...});
...