优化重复冗余代码的8种方式

在前端开发中，重复冗余代码是影响项目可维护性和性能的常见问题。以下是8种经过实践验证的优化策略，每种方法均附具体场景说明和代码示例。

1. 提取公共函数/组件

典型场景：多个组件中存在相同的DOM操作逻辑或数据格式化方法。

// 优化前：重复的日期格式化
const formatDate1 = (date) => {
  return new Date(date).toLocaleDateString();
};
const formatDate2 = (date) => {
  return new Date(date).toLocaleDateString();
};
// 优化后：提取公共方法
const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

优化价值：减少代码体积，统一修改入口，降低维护成本。

2. 使用高阶函数替代重复逻辑

典型场景：多个事件处理函数存在相似的前置/后置逻辑。

// 优化前：重复的事件处理
const handleClick1 = () => {
  if (!user.loggedIn) return;
  // 业务逻辑...
};
const handleClick2 = () => {
  if (!user.loggedIn) return;
  // 业务逻辑...
};
// 优化后：高阶函数封装
const withAuth = (fn) => (...args) => {
  if (!user.loggedIn) return;
  return fn(...args);
};
const handleClick1 = withAuth(() => { /* 业务逻辑 */ });

3. 循环替代重复代码块

典型场景：多个相似DOM元素创建逻辑。

// 优化前：重复的DOM创建
const div1 = document.createElement('div');
const div2 = document.createElement('div');
// 优化后：循环生成
[...Array(2)].forEach(() => {
  const div = document.createElement('div');
  // 统一配置...
});

4. 配置化驱动开发

典型场景：多个相似组件需要不同配置。

// 优化前：硬编码配置
const component1 = { color: 'red', size: 10 };
const component2 = { color: 'blue', size: 15 };
// 优化后：配置集中管理
const config = [
  { id: 1, color: 'red', size: 10 },
  { id: 2, color: 'blue', size: 15 }
];

5. 策略模式替代条件分支

典型场景：复杂的条件判断逻辑。

// 优化前：多重条件判断
const getDiscount = (type) => {
  if (type === 'vip') return 0.8;
  if (type === 'student') return 0.9;
  return 1;
};
// 优化后：策略模式
const discountStrategies = {
  vip: 0.8,
  student: 0.9
};
const getDiscount = (type) => discountStrategies[type] || 1;

6. 组合式API替代混入

典型场景：Vue/React中需要复用多个组件的逻辑。

// Vue3组合式API示例
const useFeature = () => {
  const state = reactive({ count: 0 });
  const increment = () => state.count++;
  return { state, increment };
};

7. 动态导入优化资源加载

典型场景：按需加载非首屏资源。

// 优化前：同步加载所有资源
import heavyModule from './heavy';
// 优化后：动态导入
const loadModule = async () => {
  const module = await import('./heavy');
  // 使用module...
};

8. 装饰器模式增强功能

典型场景：需要为多个类添加相同横切关注点。

// 装饰器实现日志
function logDecorator(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return original.apply(this, args);
  };
}
class MyClass {
  @logDecorator
  method() { /*...*/ }
}

纯JS复刻B站首页头图实现解析

B站首页的头图动画包含三个核心特性：1）平滑的无限滚动效果 2）响应式布局适配 3）高性能的动画实现。以下是完整的实现方案。

1. HTML结构与CSS准备

<div class="bilibili-header">
  <div class="banner-container">
    <div class="banner-track"></div>
  </div>
  <div class="indicator"></div>
</div>

.bilibili-header {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.banner-container {
  display: flex;
  width: 300%; /* 三倍宽度实现无缝滚动 */
}
.banner-track {
  display: flex;
  width: 33.33%;
}

2. 核心动画实现

使用requestAnimationFrame实现高性能动画：

class BilibiliBanner {
  constructor() {
    this.container = document.querySelector('.banner-container');
    this.track = document.querySelector('.banner-track');
    this.initBanners();
    this.startAnimation();
  }
  initBanners() {
    // 克隆节点实现无缝滚动
    const clone = this.track.cloneNode(true);
    this.container.appendChild(clone);
    this.container.style.width = `${this.track.scrollWidth * 2}px`;
  }
  startAnimation() {
    let position = 0;
    const speed = 1; // 像素/帧
    const animate = () => {
      position -= speed;
      // 无缝滚动逻辑
      if (Math.abs(position) >= this.track.scrollWidth) {
        position = 0;
      }
      this.container.style.transform = `translateX(${position}px)`;
      requestAnimationFrame(animate);
    };
    animate();
  }
}
new BilibiliBanner();

3. 响应式适配优化

添加窗口大小变化监听：

class ResponsiveBanner extends BilibiliBanner {
  constructor() {
    super();
    window.addEventListener('resize', this.handleResize.bind(this));
  }
  handleResize() {
    const width = this.track.scrollWidth;
    this.container.style.width = `${width * 2}px`;
    // 根据宽度调整动画速度
    const viewportWidth = window.innerWidth;
    this.speed = viewportWidth > 1200 ? 1.5 : 1;
  }
}

4. 性能优化技巧

1. 使用transform替代left：避免重排

2. 节流处理resize事件：

   const throttle = (fn, delay) => {
   let lastCall = 0;
   return (...args) => {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
   };
   };

3. 使用will-change提示浏览器：

   .banner-container {
   will-change: transform;
   }

最佳实践总结

1. 代码优化四原则：

   • DRY（Don’t Repeat Yourself）原则
   • 开闭原则（对扩展开放，对修改关闭）
   • 单一职责原则
   • 依赖倒置原则

2. 动画性能黄金法则：

   • 优先使用CSS动画（当可实现时）
   • JS动画必须使用transform/opacity
   • 避免在动画中触发样式计算

3. B站头图实现要点：

   • 三倍宽度容器实现无缝滚动
   • requestAnimationFrame的合理使用
   • 响应式设计的动态计算

通过系统应用这8种代码优化策略，结合B站头图的实现案例，开发者可以显著提升代码质量和项目性能。建议在实际项目中先进行代码审计识别冗余点，再采用组合式优化方案，最后通过性能分析工具验证优化效果。