Code reuse principles

Author：Chuan Chen 阅读数：54002人阅读分类： JavaScript

Code reuse is one of the core principles in software development, significantly improving development efficiency, reducing maintenance costs, and enhancing code consistency. In JavaScript, efficient code reuse can be achieved through well-designed patterns, modular solutions, and language features.

Understanding the Core Value of Code Reuse

Duplicate code is a nightmare for software maintenance. When the same logic appears in multiple places, any modification requires updates across all instances, making it prone to omissions and errors. By reusing code, we can:

Reduce code volume and lower maintenance costs
Improve development efficiency and avoid repetitive work
Maintain behavioral consistency and reduce bugs
Foster team collaboration and unify implementation approaches

Function-Level Reuse

The most basic unit of reuse is the function. Encapsulating repetitive logic into functions is the most straightforward way to reuse code.

// Bad practice: Repeated calculation logic
const total1 = price1 * 0.9 + shipping1;
const total2 = price2 * 0.9 + shipping2;

// Good practice: Encapsulated as a function
function calculateTotal(price, shipping) {
  return price * 0.9 + shipping;
}

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

Higher-order functions can further enhance reusability:

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

Object and Class Reuse

Object-oriented programming achieves code reuse through inheritance and composition.

Composition Over Inheritance

// Inheritance approach
class Animal {
  eat() { /*...*/ }
}

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

// Composition approach
const canEat = {
  eat() { /*...*/ }
};

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

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

Mixin Pattern

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

Modular Reuse Solutions

Modern JavaScript achieves larger-scale reuse through module systems.

ES6 Modules

// 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

Dynamic Imports

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

Design Patterns for Reuse

Factory Pattern

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

Strategy Pattern

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);
}

Reusing Utility Libraries

Leverage existing utility libraries to avoid reinventing the wheel:

// Using lodash's deep clone
import { cloneDeep } from 'lodash';

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

Custom Hooks (React Example)

In React, custom hooks are an elegant way to reuse logic:

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 };
}

// Reuse across multiple components
function ComponentA() {
  const { count, increment } = useCounter();
  // ...
}

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

Rendering Reuse (React Higher-Order Components)

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

const EnhancedComponent = withLoading(MyComponent);

Considerations for Reuse

Avoid Over-Abstraction: Not all similar code needs abstraction; premature abstraction can lead to unnecessary complexity.
Maintain Appropriate Granularity: Reusable units should have clear single responsibilities.
Consider Use Cases: Ensure the reused code will indeed be used in multiple places.
Document Interfaces: Reused code should have clear documentation explaining its purpose and usage.
Test Coverage: Reused code should be thoroughly tested, as errors will affect all places where it is used.

Balancing Performance and Reuse

Reuse can sometimes introduce performance overhead, requiring trade-offs:

// Faster specialized implementation
function processSpecialCase(data) {
  // Highly optimized dedicated code
}

// More generic but slightly slower implementation
function genericProcessor(data, options) {
  // Generic code handling various cases
}

Enhancing Reuse with TypeScript

Type systems can further improve the reliability of reused code:

interface Identifiable {
  id: string | number;
}

function mergeById<T extends Identifiable>(items: T[], updates: T[]): T[] {
  // Implementation of ID-based merging logic
  return items.map(item => {
    const update = updates.find(u => u.id === item.id);
    return update ? { ...item, ...update } : item;
  });
}

Reuse Techniques in Browser Environments

Custom Events

// Create an event hub
const eventHub = new EventTarget();

// Publish an event
eventHub.dispatchEvent(new CustomEvent('dataLoaded', { detail: data }));

// Subscribe to an event
eventHub.addEventListener('dataLoaded', (e) => {
  console.log('Data loaded:', e.detail);
});

Web Components Reuse

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);

Reuse in Node.js Environments

Middleware Pattern

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);