Template Method Pattern

Question

Accepted Answer

The Template Method pattern is a behavioral design pattern that defines the program skeleton of an algorithm in a method, called the template method, which defers some steps to subclasses. It lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure. This pattern is widely used in frameworks and libraries to provide hooks for customization while maintaining a consistent workflow. class DataProcessor { // Template method process(data) { this.validate(data); const transformed = this.transform(data); this.save(transformed); this.notify(transformed); return transformed; } // Steps with default implementations (hooks) validate(data) { if (!data) throw new Error('No data provided'); return true; } transform(data) { return data; // Default: no transformation } save(data) { console.log('Saving data:', data); localStorage.setItem('data', JSON.stringify(data)); } notify(data) { console.log('Data processed:', data); } } class JSONProcessor extends DataProcessor { transform(data) { return typeof data === 'string' ? JSON.parse(data) : data; } } class EncryptingProcessor extends DataProcessor { transform(data) { // Simulate encryption return btoa(JSON.stringify(data)); } notify(data) { console.log('Encrypted data saved'); } } const processor = new JSONProcessor(); processor.process('{"name":"John"}'); // React component lifecycle as template method class Component { constructor(props) { this.props = props; this.state = {}; } // Template method mount() { this.componentWillMount(); const element = this.render(); this.componentDidMount(); return element; } // Hooks componentWillMount() {} componentDidMount() {} render() { throw new Error('Must implement render'); } } // Custom hook as template method function useAsyncOperation(operation, options = {}) { const [state, setState] = useState({ status: 'idle', data: null, error: null }); // Template method const execute = async (...args) => { // Step 1: Before hook options.onBefore?.(args); setState({ status: 'loading', data: null, error: null }); try { // Step 2: Core operation const data = await operation(...args); // Step 3: Success hook options.onSuccess?.(data); setState({ status: 'success', data, error: null }); return data; } catch (error) { // Step 4: Error hook options.onError?.(error); setState({ status: 'error', data: null, error }); throw error; } finally { // Step 5: Finally hook options.onFinally?.(); } }; return { ...state, execute }; } // HOC as template method function withDataFetching(WrappedComponent, fetchFn) { return function WithDataFetching(props) { const { status, data, error, execute } = useAsyncOperation(fetchFn); useEffect(() => { execute(); }, []); return ; }; } // Form validation template function useFormTemplate(initialValues, validationRules) { const [values, setValues] = useState(initialValues); const [errors, setErrors] = useState({}); // Template method const handleSubmit = async (onSubmit) => { const validationErrors = {}; // Step 1: Validate all fields for (const [field, rules] of Object.entries(validationRules)) { for (const rule of rules) { const error = rule(values[field]); if (error) { validationErrors[field] = error; break; } } } // Step 2: If validation fails, show errors if (Object.keys(validationErrors).length > 0) { setErrors(validationErrors); return false; } // Step 3: Submit data setErrors({}); await onSubmit(values); return true; }; return { values, setValues, errors, handleSubmit }; } // Abstract class with template method export abstract class DataService { // Template method async fetchData(endpoint: string): Promise { this.beforeFetch(); try { const data = await this.doFetch(endpoint); const transformed = this.transformData(data); this.onSuccess(transformed); return transformed; } catch (error) { this.onError(error); throw error; } finally { this.afterFetch(); } } // Hooks to be implemented by subclasses protected beforeFetch(): void {} protected afterFetch(): void {} protected transformData(data: any): any { return data; } protected onSuccess(data: any): void {} protected onError(error: any): void {} // Abstract method (must be implemented) protected abstract doFetch(endpoint: string): Promise; } @Injectable({ providedIn: 'root' }) export class UserService extends DataService { private loading = false; protected beforeFetch

Template Method Pattern

The Template Method pattern defines the skeleton of an algorithm in a method, deferring some steps to subclasses, allowing subclasses to redefine certain steps without changing the algorithm's structure.

Scenario Questions

Follow-up Questions