Lära Decorator Pattern | Structural Patterns

The Decorator pattern is a structural pattern that enables you to add new functionality to existing objects without altering their structure. In JavaScript, this is especially useful when you want to enhance or extend the behavior of functions or objects at runtime, rather than modifying their original implementation. This approach is valuable when you need flexible, reusable, and maintainable code, as it allows you to layer additional features dynamically and transparently.

A practical use of the Decorator pattern is in situations where you want to add cross-cutting concerns, such as logging, validation, or timing, to functions or objects. Rather than rewriting or subclassing the original code, you can "wrap" it with decorators that provide the extra behavior.


              1234567891011121314151617181920
            
// Original function
function greet(name) {
  return `Hello, ${name}!`;
}

// Decorator function to add logging
function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function with arguments: ${args.join(", ")}`);
    const result = fn(...args);
    console.log(`Function returned: ${result}`);
    return result;
  };
}

// Create a decorated version of greet
const greetWithLogging = withLogging(greet);

// Use the decorated function
greetWithLogging("Alice");

By using the Decorator pattern, you can promote code reuse and flexibility. Rather than duplicating logic or changing the original implementation, you can create small, composable decorators that add specific features. These decorators can be applied to any compatible function or object, making your codebase easier to maintain and extend. This pattern is especially helpful in large applications, where requirements often change and new features need to be added without disrupting existing code.

1. The Decorator pattern allows you to:

2. Why is the Decorator pattern useful for code reuse?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 1

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 7.14

Svep för att visa menyn


              1234567891011121314151617181920
            
// Original function
function greet(name) {
  return `Hello, ${name}!`;
}

// Decorator function to add logging
function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function with arguments: ${args.join(", ")}`);
    const result = fn(...args);
    console.log(`Function returned: ${result}`);
    return result;
  };
}

// Create a decorated version of greet
const greetWithLogging = withLogging(greet);

// Use the decorated function
greetWithLogging("Alice");

1. The Decorator pattern allows you to:

2. Why is the Decorator pattern useful for code reuse?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 1