如何精简JavaScript代码并为不同流星元素生成随机样式值？

优化后的完整代码 #

init: () => {
  // 一次性获取所有流星元素
  const stars = document.querySelectorAll('.shooting-star, .shooting-star-right');
  
  // 封装单个流星的独立动画逻辑
  const animateShootingStar = (star) => {
    setInterval(() => {
      // 判断当前是左侧还是右侧流星
      const isRightStar = star.classList.contains('shooting-star-right');
      
      // 生成随机样式值（用模板字符串简化拼接操作）
      const topPos = `${Math.floor(Math.random() * 80) + 1}%`;
      const sidePos = `${Math.floor(Math.random() * 20) + 1}%`;
      const rotation = isRightStar 
        ? `${Math.floor(Math.random() * 220) + 1}deg` 
        : `-${Math.floor(Math.random() * 180) + 1}deg`;
      
      // 根据流星类型应用对应样式
      star.style.top = topPos;
      isRightStar ? star.style.right = sidePos : star.style.left = sidePos;
      star.style.transform = `rotate(${rotation})`;
    }, 9000);
  };
  
  // 遍历所有流星，启动各自的独立动画
  stars.forEach(animateShootingStar);
}

关键优化点说明 #

• 统一元素获取：用querySelectorAll一次性捕获两个流星元素，省去了单独定义star和starRight的冗余代码。
• 独立逻辑封装：把单个流星的随机值计算和样式应用封装成函数，每个元素传入后都会生成专属的随机样式——彻底解决了你之前遍历调用同一函数导致值重复的问题。
• 流星类型区分：通过检查类名判断流星是左侧还是右侧，分别生成对应的位置（left/right）和旋转角度，完全匹配你原本的需求。
• 代码可读性提升：用ES6模板字符串代替繁琐的字符串拼接，逻辑更清晰，后期维护更方便。
• 可扩展性增强：以后新增流星元素时，只要添加对应类名，遍历逻辑会自动处理，不用修改核心代码。

为什么你之前的遍历方式没生效？ #

你之前的两种遍历写法：

// 写法1
var stars = document.querySelectorAll('.shooting-star, .shooting-star-right'); 
for (let el of stars) { shootingStar(); }

// 写法2
var stars = document.querySelectorAll('.shooting-star, .shooting-star-right'); 
stars.forEach(function() { shootingStar(); });

问题在于shootingStar()始终在操作你最初定义的两个固定元素，并没有把遍历到的当前元素el传入函数中。所以不管遍历多少次，都是给同一组元素重复设置值，自然无法实现每个元素的随机值独立。现在我们把函数改成接收单个元素参数，遍历的时候把每个元素传进去，每个流星就拥有了自己的独立动画逻辑。

内容的提问来源于stack exchange，提问作者fencepencil