如何优化jQuery随机定位大小动画背景的重复代码？

优化后的完整代码 #

CSS部分

.box {
  position: absolute;
  background-color: #cfdfe2;
  border-radius: 5px;
}

JavaScript部分

(function() {
  // 生成50-150px的随机尺寸
  function getRandomSize() {
    return Math.floor(Math.random() * 100) + 50;
  }

  // 根据尺寸计算合法的随机X坐标
  function getRandomXPos(size) {
    return Math.floor(Math.random() * ($(document).width() - size));
  }

  // 创建单个方块的复用函数
  function createBox(config) {
    const size = getRandomSize();
    const posX = getRandomXPos(size);
    
    $('<div>')
      .addClass(`box ${config.className}`)
      .css({
        width: `${size}px`,
        height: `${size}px`,
        left: `${posX}px`
      })
      .appendTo('body')
      .fadeIn(100)
      .delay(config.delay)
      .fadeOut(200, function() {
        $(this).remove();
        // 执行可选的回调函数
        config.callback?.();
      });
  }

  // 所有方块的差异化配置，按需修改即可
  const boxConfigs = [
    { className: 'one', delay: 9600 },
    { className: 'two', delay: 9600 },
    { className: 'three', delay: 8000, callback: () => makeDiv() },
    { className: 'four', delay: 16000 },
    { className: 'five', delay: 10000 },
    { className: 'six', delay: 12000 }
  ];

  // 批量创建方块
  boxConfigs.forEach(config => createBox(config));
})();

核心优化技巧 #

• 抽离复用逻辑：将重复的尺寸计算、坐标计算、方块初始化逻辑封装成独立函数，后续修改规则只需调整对应函数，避免多处重复修改。
• 样式与逻辑分离：把公共样式（背景、圆角、定位）移到CSS类中，减少内联样式冗余，同时让样式调整更便捷。
• 配置化管理差异：用数组集中管理每个方块的差异化参数（类名、延迟时间、回调），通过循环批量生成方块，新增或修改方块只需修改配置数组，代码结构更清晰易维护。
• 简化数值处理：使用Math.floor替代toFixed，避免字符串类型转换的额外开销，保证数值为整数类型。
• 安全处理可选逻辑：通过可选链操作符?.处理只有部分方块需要的回调函数，避免无回调时出现报错。

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