在WordPress中高效集成JavaScript视差类：结构优化与性能实践

// 原始的Parallax类设计，其中bind方法不应存在于类实例中
class Parallax {
    constructor(element) {
        this.element = element;
        this.onScroll = this.onScroll.bind(this); // 绑定this上下文
        document.addEventListener('scroll', this.onScroll); // 每个实例都添加一个监听器
    }

    onScroll() {
        const middleScreenWidth = window.scrollX + window.innerWidth / 2;
        // ... 视差计算逻辑 ...
    }

    // 不应存在于类实例中的方法
    bind() {
        return Array.from(document.querySelectorAll("[data-parallax]")).map(
            (element) => {
                return new Parallax(element);
            });
    }
}

class Parallax {
  constructor(element) {
    this.element = element;
    // 移除独立的scroll事件监听器，由外部统一管理
    // this.onScroll = this.onScroll.bind(this); // 不再需要
    // document.addEventListener('scroll', this.onScroll); // 不再需要
  }

  // 使用箭头函数，自动绑定this上下文
  // 此方法现在作为外部调用更新视差位置的接口
  updatePosition() {
    const scrollX = window.scrollX; // 获取当前滚动位置
    // 根据scrollX和this.element执行具体的视差计算和DOM操作
    // 示例：
    // const speed = parseFloat(this.element.dataset.parallax || 0.2);
    // this.element.style.transform = `translateX(${scrollX * speed}px)`;
    // ... 其他视差逻辑 ...
  }
}

/**
 * 创建并返回所有带有[data-parallax]属性的Parallax实例数组。
 * 采用工厂函数模式，将实例创建逻辑与类定义分离。
 * @returns {Parallax[]} Parallax实例的数组。
 */
function createParallaxInstances() {
  return Array.from(document.querySelectorAll("[data-parallax]")).map(
    (element) => new Parallax(element)
  );
}

// 在脚本加载后调用此函数以初始化所有视差元素
const parallaxElements = createParallaxInstances();

// main.js 文件中，在创建 parallaxElements 之后

// 确保DOM加载完成后执行，或在wp_enqueue_script中使用in_footer=true
document.addEventListener('DOMContentLoaded', () => {
    const parallaxElements = createParallaxInstances();

    // 添加单一的全局滚动事件监听器
    window.addEventListener('scroll', () => {
        // 使用requestAnimationFrame确保动画流畅
        requestAnimationFrame(() => {
            parallaxElements.forEach(instance => {
                // 可以在这里添加逻辑判断元素是否在视口内，只更新可见元素
                // 例如：if (isInViewport(instance.element)) {
                    instance.updatePosition(); // 调用实例的更新方法
                // }
            });
        });
    }, { passive: true }); // 标记为被动事件监听器，提升滚动性能

    // 如果有拖拽滚动功能，保持原有的事件监听
    const scrollContainer = document.querySelector("main");
    let isDown = false;
    let startX;
    let scrollLeft;

    if (scrollContainer) {
        scrollContainer.addEventListener('mousedown', (e) => {
            isDown = true;
            startX = e.pageX - scrollContainer.offsetLeft;
            scrollLeft = scrollContainer.scrollLeft;
        });

        scrollContainer.addEventListener('mouseleave', () => {
            isDown = false;
        });

        scrollContainer.addEventListener('mouseup', () => {
            isDown = false;
        });

        scrollContainer.addEventListener('mousemove', (e) => {
            if(!isDown) return;
            e.preventDefault();
            const x = e.pageX - scrollContainer.offsetLeft;
            const walk = (x - startX)/10;
            scrollContainer.scrollLeft = scrollLeft - walk;
        });
    }
});

// functions.php 文件
function call_scripts() {
    // 注册并加载样式表
    wp_enqueue_style( 'call-style', get_stylesheet_uri(), array(), _S_VERSION );

    // 注册并加载JavaScript脚本
    // 第一个参数是脚本句柄
    // 第二个参数是脚本URL
    // 第三个参数是依赖项数组（例如jQuery），这里没有
    // 第四个参数是版本号
    // 第五个参数是布尔值，如果为true，脚本将加载在页脚（</body>之前），有助于性能
    wp_enqueue_script( 'call-main', get_template_directory_uri() . '/js/main.js', array(), _S_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'call_scripts' );