在 ES6 中创建 HTML/JS “插件” - 如何刷新 DOM 节点

Question

我目前正在学习 ES6。我正在尝试创建一个轮播，我通常会将其编写为 JQuery 插件，但现在将其编写为 ES6 模块，以便可以使用 import 关键字将其添加到页面的 JS 中。

由于轮播的幻灯片绝对位于彼此的顶部，因此在 JS 中进行计算以确定最高的轮播幻灯片高度，然后将此高度应用于轮播的 UL 元素。

该模块从构造函数中的 DOM 中抓取几个元素，例如所有轮播元素的包含 DIV、轮播幻灯片的 UL 等。

class Carousel {
    // set up instance variables
    constructor (options) {

        this.element = options.element;
        this.carousel = options.element.querySelectorAll('ul');
        this.carouselSlides = this.carousel[0].children;
        this.carouselHeight = 0;
    }

    resize () {
        console.log(this.carouselSlides);

        //Get tallest slide
        Array.prototype.map.call( this.carouselSlides, ( slide ) => {
            this.carouselHeight = (slide.offsetHeight > this.carouselHeight) ? slide.offsetHeight : this.carouselHeight;
        });

        //Set the height of the carousel to the height of its tallest slide
        this.carousel[0].style.height = this.carouselHeight+'px';

    }

    // initial set up
    setup () {
        this.resize();
        window.onresize = this.resize;
    }



}


module.exports = Carousel;

随着浏览器宽度变小，需要调整这个高度，所以我尝试调用在 window.onresize 上执行此计算的函数。

但是这不起作用。我相信这是因为在构造函数中分配给变量的 dom 节点被缓存在它们当前的宽度和高度，因此 resize 函数在计算中没有使用它们的新值。

如何调整我的代码以防止出现此缓存问题？

以下是迄今为止我的代码的简化 Codepen。 （我必须在 Codepen 的主脚本中添加 Carousel 模块代码）：

http://codepen.io/decodedcreative/pen/vXzGpE/

谢谢

Answer 1

原来我的代码存在一些问题。多亏了 Ori Drori 的帮助，我才找到了他们的真相。这是固定的代码：

class Carousel {
    // set up instance variables
    constructor (options) {

        this.element = options.element;
        this.carousel = options.element.querySelectorAll('ul');
        this.carouselSlides = this.carousel[0].children;
        this.carouselHeight = 0;

    }

    resize () {

        //Get tallest slide
        Array.prototype.map.call( this.carouselSlides, ( slide ) => {
            this.carouselHeight = (slide.offsetHeight > this.carouselHeight) ? slide.offsetHeight : this.carouselHeight;
        });

        //Set the height of the carousel to the height of its tallest slide
        this.carousel[0].style.height = this.carouselHeight+'px';

        //Reset the height of the carousel to zero
        this.carouselHeight = 0;

     }

     // initial set up
     setup () {
         this.resize();
         window.addEventListener("resize", this.resize.bind(this));
     }



}

希望这对某人有所帮助！

Answer 2

您的问题与this 的上下文有关。当您将回调分配给window.resize 事件时，this 将更改为window：

window.onresize = this.resize;

调用回调时，this.carouselSlides 未定义，因为窗口没有此属性（查看控制台查看错误）。

为防止出现此问题，请将回调绑定到原来的this（类实例）：

window.onresize = this.resize.bind(this);

你可以在这个codepen看到它。