Modern JS/TS Pattern [4/4] - Mixin Pattern trong JavaScript / TypeScript

1. Mixin Pattern là gì?

Mixin Pattern là một mẫu thiết kế cho phép tái sử dụng code bằng cách kết hợp các class với nhau. Pattern này giúp:

Tái sử dụng code mà không cần kế thừa
Kết hợp các tính năng từ nhiều class khác nhau
Tránh các vấn đề của đa kế thừa
Tạo ra các class có tính module hóa cao

2. Triển khai trong JavaScript

2.1 Sử dụng Object.assign

// Mixin cho khả năng logging
const LoggerMixin = {
  log(message) {
    console.log(`[${this.name}] ${message}`);
  },
  error(message) {
    console.error(`[${this.name}] ERROR: ${message}`);
  },
};

// Mixin cho khả năng validation
const ValidatorMixin = {
  validateEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  },
  validatePhone(phone) {
    return /^\+?[\d\s-]{10,}$/.test(phone);
  },
};

// Class chính
class User {
  constructor(name) {
    this.name = name;
  }
}

// Kết hợp các mixin
Object.assign(User.prototype, LoggerMixin, ValidatorMixin);

// Sử dụng
const user = new User("John");
user.log("User created"); // [John] User created
console.log(user.validateEmail("[email protected]")); // true
console.log(user.validatePhone("1234567890")); // true

2.2 Sử dụng Function Mixins

// Mixin cho khả năng serialization
const SerializableMixin = (superclass) =>
  class extends superclass {
    toJSON() {
      return JSON.stringify(this);
    }

    fromJSON(json) {
      Object.assign(this, JSON.parse(json));
    }
  };

// Mixin cho khả năng caching
const CacheableMixin = (superclass) =>
  class extends superclass {
    constructor() {
      super();
      this.cache = new Map();
    }

    getCached(key) {
      return this.cache.get(key);
    }

    setCached(key, value) {
      this.cache.set(key, value);
    }
  };

// Class chính
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

// Kết hợp các mixin
class EnhancedProduct extends SerializableMixin(CacheableMixin(Product)) {}

// Sử dụng
const product = new EnhancedProduct("Laptop", 1000);
product.setCached("discount", 0.1);
console.log(product.getCached("discount")); // 0.1
console.log(product.toJSON()); // {"name":"Laptop","price":1000,"cache":{}}

3. Triển khai trong TypeScript

3.1 Sử dụng Interface và Type

// Định nghĩa các interface cho mixin
interface Logger {
  log(message: string): void;
  error(message: string): void;
}

interface Validator {
  validateEmail(email: string): boolean;
  validatePhone(phone: string): boolean;
}

// Định nghĩa các type cho constructor
type Constructor<T = {}> = new (...args: any[]) => T;

// Mixin functions
function LoggerMixin<T extends Constructor>(Base: T) {
  return class extends Base implements Logger {
    log(message: string): void {
      console.log(`[${(this as any).name}] ${message}`);
    }

    error(message: string): void {
      console.error(`[${(this as any).name}] ERROR: ${message}`);
    }
  };
}

function ValidatorMixin<T extends Constructor>(Base: T) {
  return class extends Base implements Validator {
    validateEmail(email: string): boolean {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    validatePhone(phone: string): boolean {
      return /^\+?[\d\s-]{10,}$/.test(phone);
    }
  };
}

// Class chính
class User {
  constructor(public name: string) {}
}

// Kết hợp các mixin
class EnhancedUser extends ValidatorMixin(LoggerMixin(User)) {}

// Sử dụng
const user = new EnhancedUser("John");
user.log("User created"); // [John] User created
console.log(user.validateEmail("[email protected]")); // true
console.log(user.validatePhone("1234567890")); // true

3.2 Sử dụng Decorators

// Mixin decorator
function Mixin(mixins: any[]) {
  return function (target: any) {
    mixins.forEach((mixin) => {
      Object.getOwnPropertyNames(mixin.prototype).forEach((name) => {
        if (name !== "constructor") {
          target.prototype[name] = mixin.prototype[name];
        }
      });
    });
  };
}

// Mixin classes
class LoggerMixin {
  log(message: string): void {
    console.log(`[${(this as any).name}] ${message}`);
  }

  error(message: string): void {
    console.error(`[${(this as any).name}] ERROR: ${message}`);
  }
}

class ValidatorMixin {
  validateEmail(email: string): boolean {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  validatePhone(phone: string): boolean {
    return /^\+?[\d\s-]{10,}$/.test(phone);
  }
}

// Class chính
@Mixin([LoggerMixin, ValidatorMixin])
class User {
  constructor(public name: string) {}
}

// Sử dụng
const user = new User("John");
user.log("User created"); // [John] User created
console.log(user.validateEmail("[email protected]")); // true
console.log(user.validatePhone("1234567890")); // true

4. Ví dụ Thực Tế: UI Components

// Mixin cho khả năng animation
interface Animatable {
  animate(duration: number): void;
  fadeIn(): void;
  fadeOut(): void;
}

function AnimatableMixin<T extends Constructor>(Base: T) {
  return class extends Base implements Animatable {
    animate(duration: number): void {
      console.log(`Animating for ${duration}ms`);
    }

    fadeIn(): void {
      console.log("Fading in");
    }

    fadeOut(): void {
      console.log("Fading out");
    }
  };
}

// Mixin cho khả năng responsive
interface Responsive {
  setBreakpoint(breakpoint: string): void;
  isMobile(): boolean;
  isTablet(): boolean;
  isDesktop(): boolean;
}

function ResponsiveMixin<T extends Constructor>(Base: T) {
  return class extends Base implements Responsive {
    private breakpoint: string = "desktop";

    setBreakpoint(breakpoint: string): void {
      this.breakpoint = breakpoint;
    }

    isMobile(): boolean {
      return this.breakpoint === "mobile";
    }

    isTablet(): boolean {
      return this.breakpoint === "tablet";
    }

    isDesktop(): boolean {
      return this.breakpoint === "desktop";
    }
  };
}

// Base component
class Component {
  constructor(public name: string) {}
}

// Enhanced component với các mixin
class EnhancedComponent extends ResponsiveMixin(AnimatableMixin(Component)) {
  render(): void {
    if (this.isMobile()) {
      console.log("Rendering mobile version");
    } else if (this.isTablet()) {
      console.log("Rendering tablet version");
    } else {
      console.log("Rendering desktop version");
    }
  }
}

// Sử dụng
const component = new EnhancedComponent("MyComponent");
component.setBreakpoint("mobile");
component.render(); // Rendering mobile version
component.animate(500); // Animating for 500ms
component.fadeIn(); // Fading in

5. Ưu điểm và Nhược điểm

5.1 Ưu điểm

Tái sử dụng code: Cho phép tái sử dụng code mà không cần kế thừa
Linh hoạt: Dễ dàng kết hợp các tính năng từ nhiều nguồn khác nhau
Module hóa: Giúp code có tính module hóa cao
Tránh đa kế thừa: Giải quyết các vấn đề của đa kế thừa

5.2 Nhược điểm

Phức tạp: Có thể làm code phức tạp hơn nếu sử dụng quá nhiều mixin
Xung đột: Có thể xảy ra xung đột tên phương thức giữa các mixin
Khó debug: Khó theo dõi nguồn gốc của các phương thức
Type safety: Có thể gặp vấn đề với type checking trong TypeScript

6. Khi nào nên sử dụng Mixin Pattern?

Mixin Pattern phù hợp khi:

Cần tái sử dụng code giữa nhiều class không liên quan
Muốn tránh các vấn đề của đa kế thừa
Cần tạo các class có tính module hóa cao
Muốn tách biệt các tính năng thành các module riêng biệt

7. Kết luận

Mixin Pattern là một mẫu thiết kế mạnh mẽ cho phép tái sử dụng code thông qua việc kết hợp các class. Pattern này đặc biệt hữu ích trong các tình huống cần tái sử dụng code mà không muốn sử dụng kế thừa. Trong TypeScript, việc sử dụng interface và type giúp đảm bảo type safety khi sử dụng mixin.