代码复用原则

作者：陈川阅读数：54003人阅读分类： JavaScript

代码复用是软件开发中的核心原则之一，能够显著提升开发效率、减少维护成本并增强代码一致性。在JavaScript中，通过合理的设计模式、模块化方案和语言特性，可以实现高效的代码复用。

理解代码复用的核心价值

重复代码是软件维护的噩梦。当同一段逻辑出现在多个地方时，任何修改都需要在所有出现的地方同步更新，极易导致遗漏和错误。通过复用代码，我们可以：

减少代码量，降低维护成本
提高开发效率，避免重复劳动
保持行为一致性，减少bug
促进团队协作，统一实现方式

函数级别的复用

最基本的复用单元是函数。将重复逻辑封装成函数是最直接的复用方式。

// 不好的实践：重复计算逻辑
const total1 = price1 * 0.9 + shipping1;
const total2 = price2 * 0.9 + shipping2;

// 好的实践：封装成函数
function calculateTotal(price, shipping) {
  return price * 0.9 + shipping;
}

const total1 = calculateTotal(price1, shipping1);
const total2 = calculateTotal(price2, shipping2);

高阶函数可以进一步提升复用性：

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

对象与类的复用

面向对象编程通过继承和组合实现代码复用。

组合优于继承

// 继承方式
class Animal {
  eat() { /*...*/ }
}

class Dog extends Animal {
  bark() { /*...*/ }
}

// 组合方式
const canEat = {
  eat() { /*...*/ }
};

const canBark = {
  bark() { /*...*/ }
};

function createDog() {
  return Object.assign({}, canEat, canBark);
}

混入模式(Mixins)

const LoggerMixin = {
  log(message) {
    console.log(`[${this.name}]: ${message}`);
  }
};

class User {
  constructor(name) {
    this.name = name;
  }
}

Object.assign(User.prototype, LoggerMixin);

const user = new User('John');
user.log('Hello'); // [John]: Hello

模块化复用方案

现代JavaScript通过模块系统实现更大粒度的复用。

ES6模块

// mathUtils.js
export function sum(a, b) {
  return a + b;
}

export const PI = 3.14159;

// app.js
import { sum, PI } from './mathUtils.js';
console.log(sum(PI, 2)); // 5.14159

动态导入

async function loadModule() {
  const module = await import('./module.js');
  module.doSomething();
}

设计模式实现复用

工厂模式

function createUser(type) {
  switch(type) {
    case 'admin':
      return new AdminUser();
    case 'guest':
      return new GuestUser();
    default:
      return new RegularUser();
  }
}

策略模式

const strategies = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b
};

function calculate(strategy, a, b) {
  return strategies[strategy](a, b);
}

工具函数库的复用

利用现有工具库避免重复造轮子：

// 使用lodash的深拷贝
import { cloneDeep } from 'lodash';

const original = { a: 1, b: { c: 2 } };
const copied = cloneDeep(original);

自定义Hook(React示例)

在React中，自定义Hook是复用逻辑的优雅方式：

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
}

// 在多个组件中复用
function ComponentA() {
  const { count, increment } = useCounter();
  // ...
}

function ComponentB() {
  const { count, decrement } = useCounter(10);
  // ...
}

渲染复用(React高阶组件)

function withLoading(WrappedComponent) {
  return function(props) {
    if (props.isLoading) {
      return <div>Loading...</div>;
    }
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLoading(MyComponent);

复用注意事项

避免过度抽象：不是所有相似代码都需要抽象，过早抽象可能导致复杂度过高
保持适当粒度：复用单元应该具有明确的单一职责
考虑使用场景：确保复用的代码确实会在多个地方使用
文档化接口：复用的代码应该有清晰的文档说明其用途和用法
测试覆盖：复用的代码应该有充分的测试，因为错误会影响所有使用它的地方

性能与复用的平衡

复用有时会带来性能开销，需要权衡：

// 更快的专用实现
function processSpecialCase(data) {
  // 高度优化的专用代码
}

// 更通用的但稍慢的实现
function genericProcessor(data, options) {
  // 处理各种情况的通用代码
}

TypeScript中的复用增强

类型系统可以进一步提升复用代码的可靠性：

interface Identifiable {
  id: string | number;
}

function mergeById<T extends Identifiable>(items: T[], updates: T[]): T[] {
  // 实现根据ID合并的逻辑
  return items.map(item => {
    const update = updates.find(u => u.id === item.id);
    return update ? { ...item, ...update } : item;
  });
}

浏览器环境下的复用技巧

自定义事件

// 创建事件中心
const eventHub = new EventTarget();

// 发布事件
eventHub.dispatchEvent(new CustomEvent('dataLoaded', { detail: data }));

// 订阅事件
eventHub.addEventListener('dataLoaded', (e) => {
  console.log('Data loaded:', e.detail);
});

Web Components复用

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Click me</button>`;
    this.querySelector('button').addEventListener('click', this.handleClick);
  }
  
  handleClick = () => {
    this.dispatchEvent(new CustomEvent('custom-click'));
  };
}

customElements.define('my-element', MyElement);

Node.js环境中的复用

中间件模式

function loggerMiddleware(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  next();
}

function authMiddleware(req, res, next) {
  if (!req.user) {
    return res.status(401).send('Unauthorized');
  }
  next();
}

app.use(loggerMiddleware);
app.use(authMiddleware);