WordPress中JavaScript类管理与视差效果的性能优化实践

function call_scripts() {
    // 加载样式表
    wp_enqueue_style( 'call-style', get_stylesheet_uri(), array(), _S_VERSION );
    // 加载JavaScript文件，设置为在页面底部加载 (最后一个参数为 true)
    wp_enqueue_script( 'call-main', get_template_directory_uri() . '/js/main.js', array(), _S_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'call_scripts' );

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;
    // 移除每个实例的独立滚动监听器，稍后会统一管理
    // document.addEventListener('scroll', this.onScroll); 
  }

  // 使用箭头函数确保this上下文正确
  onScroll = () => {
    const middleScreenWidth = window.scrollX + window.innerWidth / 2;
    // 在这里添加基于this.element的视差动画计算逻辑
    // 例如：this.element.style.transform = `translateY(${someValue}px)`;
  }

  // 其他与单个视差元素相关的逻辑方法
  updatePosition(scrollPosition) {
    // 根据滚动位置更新元素的样式
    // console.log(`Element ${this.element.id} updated at scroll: ${scrollPosition}`);
  }
}

/**
 * 创建并返回所有带有 data-parallax 属性的 Parallax 实例数组。
 * @returns {Parallax[]} Parallax 实例的数组。
 */
function createParallaxInstances() {
  return Array.from(document.querySelectorAll("[data-parallax]")).map(
    (element) => new Parallax(element)
  );
}

// 在脚本加载完成后调用工厂函数，并存储实例
const parallaxElements = createParallaxInstances();

// ... (Parallax 类和 createParallaxInstances 函数定义) ...

const parallaxElements = createParallaxInstances();

/**
 * 全局滚动事件处理函数
 */
const handleGlobalScroll = () => {
  const currentScrollY = window.scrollY; // 获取当前滚动位置

  // 遍历所有视差实例，并更新它们的位置
  parallaxElements.forEach(instance => {
    // 假设 Parallax 类有一个 updatePosition 方法来处理动画逻辑
    instance.updatePosition(currentScrollY);
  });
};

// 添加全局滚动事件监听器，并设置为被动
document.addEventListener('scroll', handleGlobalScroll, { passive: true });

// 首次加载时也更新一次，确保初始状态正确
handleGlobalScroll();

// ... (Parallax 类和 createParallaxInstances 函数定义) ...

const parallaxElements = createParallaxInstances();
let ticking = false; // 用于requestAnimationFrame的节流标志

/**
 * 全局滚动事件处理函数 (使用 requestAnimationFrame 节流)
 */
const handleGlobalScrollOptimized = () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      const currentScrollY = window.scrollY;

      parallaxElements.forEach(instance => {
        // 可以在这里添加Intersection Observer的判断
        // if (instance.isInView) { // 假设Parallax实例有isInView属性
            instance.updatePosition(currentScrollY);
        // }
      });
      ticking = false;
    });
    ticking = true;
  }
};

document.addEventListener('scroll', handleGlobalScrollOptimized, { passive: true });

// 引入 Intersection Observer (可选，但强烈推荐用于性能)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const targetElement = entry.target;
    // 找到对应的Parallax实例并更新其可见性状态
    const instance = parallaxElements.find(p => p.element === targetElement);
    if (instance) {
      instance.isInView = entry.isIntersecting;
    }
  });
}, { threshold: 0 }); // 元素只要有一点进入视口就触发

parallaxElements.forEach(instance => {
  observer.observe(instance.element); // 观察每个视差元素
});

// 在Parallax类中添加或修改 updatePosition 方法以利用 isInView
// class Parallax {
//   constructor(element) {
//     this.element = element;
//     this.isInView = false; // 初始设置为不可见
//   }
//   updatePosition(scrollPosition) {
//     if (this.isInView) {
//       // 执行动画计算
//     }
//   }
// }