如何在单页中使用 ES6 Class 正确初始化多个同名类选择器的轮播组件-js教程-PHP中文网

如何在单页中使用 ES6 Class 正确初始化多个同名类选择器的轮播组件

本文详解 ES6 类中因共享实例属性导致多个同名轮播器（如 .slider）相互干扰的问题，并提供基于独立实例状态管理的完整解决方案。

本文详解 es6 类中因共享实例属性导致多个同名轮播器（如 `.slider`）相互干扰的问题，并提供基于独立实例状态管理的完整解决方案。

问题根源在于：当前 Slider 类将所有轮播器的状态（如 this.current、this.slides、this.prev、this.next、this.caption）全部存储在同一个类实例的 this 上。当 constructor 中遍历多个 .slider 元素时，每次循环都会覆盖前一次设置的属性值——最终仅保留最后一个轮播器的状态。因此，所有事件监听器（如箭头点击）触发的 this.move() 实际操作的始终是最后一组被赋值的 DOM 引用，造成“点击第一个轮播器却控制第二个”的典型现象。

✅ 正确做法：为每个轮播器创建独立状态容器

应避免将状态挂载到 this 上，转而为每个轮播器维护一个独立的配置对象或私有 Map。推荐使用 闭包 + 每个轮播器独立作用域 的方式，确保状态隔离：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

export default class Slider {
    private static instances: Map<htmlelement slides: htmlelement current: element null prev: next: caption: prevbutton: htmlspanelement nextbutton:> = new Map();

    constructor() {
        const sliders = document.querySelectorAll<htmlelement>('.slider');
        sliders.forEach(slider => this.initSlider(slider));
    }

    private initSlider(slider: HTMLElement): void {
        const slides = slider.querySelector('.slider__inner') as HTMLElement;
        const prevButton = slider.querySelector('.slider__controls-prev') as HTMLSpanElement;
        const nextButton = slider.querySelector('.slider__controls-next') as HTMLSpanElement;
        const caption = slider.querySelector('.slider__item-caption') as HTMLElement;

        // 初始化当前状态
        let current = slider.querySelector('.slider__item-current') || slides.firstElementChild;
        let prev = current?.previousElementSibling || slides.lastElementChild;
        let next = current?.nextElementSibling || slides.firstElementChild;

        // 存储该轮播器专属状态
        Slider.instances.set(slider, {
            slides,
            current,
            prev,
            next,
            caption,
            prevButton,
            nextButton
        });

        // 绑定事件（使用箭头函数保持 this 指向当前 slider）
        prevButton.addEventListener('click', () => this.move(slider, 'prev'));
        nextButton.addEventListener('click', () => this.move(slider, 'next'));

        this.applyClasses(slider);
        this.setCaption(slider);
    }

    private getState(slider: HTMLElement) {
        return Slider.instances.get(slider) || null;
    }

    private applyClasses(slider: HTMLElement): void {
        const state = this.getState(slider);
        if (!state) return;

        [state.prev, state.current, state.next].forEach(el => {
            el?.classList.remove('slider__item-prev', 'slider__item-current', 'slider__item-next');
        });

        state.prev?.classList.add('slider__item-prev');
        state.current?.classList.add('slider__item-current');
        state.next?.classList.add('slider__item-next');
    }

    private setCaption(slider: HTMLElement): void {
        const state = this.getState(slider);
        if (!state || !state.current) return;

        const figcaption = state.current.querySelector('figcaption');
        state.caption.textContent = figcaption?.textContent || '';
    }

    private move(slider: HTMLElement, direction: 'prev' | 'next'): void {
        const state = this.getState(slider);
        if (!state) return;

        const { slides, current, prev, next } = state;

        // 移除旧状态类
        [prev, current, next].forEach(el => {
            el?.classList.remove('slider__item-prev', 'slider__item-current', 'slider__item-next');
        });

        // 更新指针
        if (direction === 'prev') {
            state.prev = prev?.previousElementSibling || slides.lastElementChild;
            state.current = prev;
            state.next = current;
        } else {
            state.prev = current;
            state.current = next;
            state.next = next?.nextElementSibling || slides.firstElementChild;
        }

        this.applyClasses(slider);
        this.setCaption(slider);
    }
}</htmlelement></htmlelement>