我正在使用以下代码作为滑块Siema https://pawelgrzybek.github.io/siema/:
https://codepen.io/pawelgrzybek/pen/boQQWy https://codepen.io/pawelgrzybek/pen/boQQWy
它使用扩展类向幻灯片添加点。一切正常,只是我们的网站现在在使用 ES6 进行 Google 移动友好测试时遇到问题,因为它给出了错误:
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');
}
}
}
然后您将替换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 ...
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)