M

MLOG

Tiếng Việt

Khám phá sức mạnh của JavaScript decorators trong việc quản lý metadata và chỉnh sửa mã. Tìm hiểu cách nâng cao code của bạn một cách rõ ràng và hiệu quả, theo các thông lệ quốc tế tốt nhất.

JavaScript Decorators: Khai Phá Sức Mạnh Metadata và Chỉnh Sửa Mã

Decorator trong JavaScript cung cấp một cách mạnh mẽ và tinh tế để thêm metadata và sửa đổi hành vi của các lớp, phương thức, thuộc tính và tham số. Chúng cung cấp một cú pháp khai báo để nâng cao code với các mối quan tâm xuyên suốt như ghi log, xác thực, ủy quyền, v.v. Mặc dù vẫn là một tính năng tương đối mới, decorator đang ngày càng phổ biến, đặc biệt là trong TypeScript, và hứa hẹn sẽ cải thiện khả năng đọc, bảo trì và tái sử dụng code. Bài viết này khám phá các khả năng của JavaScript decorator, cung cấp các ví dụ thực tế và thông tin chi tiết cho các nhà phát triển trên toàn thế giới.

JavaScript Decorator là gì?

Về cơ bản, decorator là các hàm bao bọc các hàm hoặc lớp khác. Chúng cung cấp một cách để sửa đổi hoặc nâng cao hành vi của phần tử được trang trí mà không cần thay đổi trực tiếp mã gốc của nó. Decorator sử dụng ký hiệu @ theo sau là tên hàm để trang trí các lớp, phương thức, accessor, thuộc tính hoặc tham số.

Hãy coi chúng như một dạng cú pháp rút gọn (syntactic sugar) cho các hàm bậc cao, cung cấp một cách sạch sẽ và dễ đọc hơn để áp dụng các mối quan tâm xuyên suốt vào code của bạn. Decorator cho phép bạn tách biệt các mối quan tâm một cách hiệu quả, dẫn đến các ứng dụng có tính mô-đun và dễ bảo trì hơn.

Các loại Decorator

JavaScript decorator có nhiều loại, mỗi loại nhắm vào các yếu tố khác nhau trong code của bạn:

Cú pháp cơ bản

Cú pháp để áp dụng một decorator rất đơn giản:

@decoratorName
class MyClass {
  @methodDecorator
  myMethod( @parameterDecorator param: string ) {
    @propertyDecorator
    myProperty: number;
  }
}

Đây là phần giải thích:

Class Decorator: Sửa đổi hành vi của lớp

Class decorator là các hàm nhận hàm khởi tạo (constructor) của lớp làm đối số. Chúng có thể được sử dụng để:

Ví dụ: Ghi log khi tạo Lớp

Hãy tưởng tượng bạn muốn ghi log mỗi khi một instance mới của một lớp được tạo ra. Một class decorator có thể thực hiện điều này:

function logClassCreation(constructor: Function) {
  return class extends constructor {
    constructor(...args: any[]) {
      console.log(`Creating a new instance of ${constructor.name}`);
      super(...args);
    }
  };
}

@logClassCreation
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // Output: Creating a new instance of User

Trong ví dụ này, logClassCreation thay thế lớp User ban đầu bằng một lớp mới kế thừa từ nó. Hàm khởi tạo của lớp mới sẽ ghi lại một thông báo và sau đó gọi hàm khởi tạo ban đầu bằng cách sử dụng super.

Method Decorator: Nâng cao chức năng của Phương thức

Method decorator nhận ba đối số:

Chúng có thể được sử dụng để:

Ví dụ: Ghi log các lời gọi Phương thức

Hãy tạo một method decorator ghi log mỗi khi một phương thức được gọi, cùng với các đối số của nó:

function logMethodCall(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling method ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @logMethodCall
  add(x: number, y: number): number {
    return x + y;
  }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Output: Calling method add with arguments: [5,3]
                                 //         Method add returned: 8

Decorator logMethodCall bao bọc phương thức ban đầu. Trước khi thực thi phương thức ban đầu, nó ghi log tên phương thức và các đối số. Sau khi thực thi, nó ghi log giá trị trả về.

Accessor Decorator: Kiểm soát việc truy cập thuộc tính

Accessor decorator tương tự như method decorator nhưng áp dụng cụ thể cho các phương thức getter và setter (accessor). Chúng nhận ba đối số giống như method decorator:

Chúng có thể được sử dụng để:

Ví dụ: Xác thực giá trị của Setter

Hãy tạo một accessor decorator để xác thực giá trị đang được thiết lập cho một thuộc tính:

function validateAge(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalSet = descriptor.set;

  descriptor.set = function (value: number) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    originalSet.call(this, value);
  };

  return descriptor;
}

class Person {
  private _age: number;

  @validateAge
  set age(value: number) {
    this._age = value;
  }

  get age(): number {
    return this._age;
  }
}

const person = new Person();
person.age = 30; // Hoạt động bình thường

try {
  person.age = -5; // Gây ra lỗi: Age cannot be negative
} catch (error:any) {
  console.error(error.message);
}

Decorator validateAge chặn setter của thuộc tính age. Nó kiểm tra xem giá trị có âm hay không và gây ra lỗi nếu có. Nếu không, nó sẽ gọi setter ban đầu.

Property Decorator: Sửa đổi bộ mô tả thuộc tính

Property decorator nhận hai đối số:

Chúng có thể được sử dụng để:

Ví dụ: Đặt một thuộc tính thành chỉ đọc (Read-Only)

Hãy tạo một property decorator để đặt một thuộc tính thành chỉ đọc:

function readOnly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Configuration {
  @readOnly
  apiUrl: string = "https://api.example.com";
}

const config = new Configuration();

try {
  (config as any).apiUrl = "https://newapi.example.com"; // Gây ra lỗi ở chế độ nghiêm ngặt (strict mode)
  console.log(config.apiUrl); // Output: https://api.example.com
} catch (error) {
  console.error("Cannot assign to read only property 'apiUrl' of object '#'", error);
}

Decorator readOnly sử dụng Object.defineProperty để sửa đổi bộ mô tả thuộc tính, đặt writable thành false. Việc cố gắng sửa đổi thuộc tính bây giờ sẽ gây ra lỗi (trong chế độ nghiêm ngặt) hoặc bị bỏ qua.

Parameter Decorator: Cung cấp Metadata về Tham số

Parameter decorator nhận ba đối số:

Parameter decorator ít được sử dụng hơn các loại khác, nhưng chúng có thể hữu ích cho các kịch bản mà bạn cần liên kết metadata với các tham số cụ thể.

Ví dụ: Tiêm phụ thuộc (Dependency Injection)

Parameter decorator có thể được sử dụng trong các framework tiêm phụ thuộc để xác định các phụ thuộc cần được tiêm vào một phương thức. Mặc dù một hệ thống tiêm phụ thuộc hoàn chỉnh nằm ngoài phạm vi của bài viết này, đây là một minh họa đơn giản:

const dependencies: any[] = [];

function inject(token: any) {
  return function (target: any, propertyKey: string | symbol, parameterIndex: number) {
    dependencies.push({
      target,
      propertyKey,
      parameterIndex,
      token,
    });
  };
}

class UserService {
  getUser(id: number) {
    return `User with ID ${id}`;
  }
}

class UserController {
  private userService: UserService;

  constructor(@inject(UserService) userService: UserService) {
    this.userService = userService;
  }

  getUser(id: number) {
    return this.userService.getUser(id);
  }
}

//Simplified retrieval of the dependencies
const userServiceInstance = new UserService();
const userController = new UserController(userServiceInstance);
console.log(userController.getUser(123)); // Output: User with ID 123

Trong ví dụ này, decorator @inject lưu trữ metadata về tham số userService trong mảng dependencies. Một bộ chứa tiêm phụ thuộc (dependency injection container) sau đó có thể sử dụng metadata này để giải quyết và tiêm phụ thuộc thích hợp.

Ứng dụng thực tế và các trường hợp sử dụng

Decorator có thể được áp dụng cho nhiều kịch bản khác nhau để cải thiện chất lượng và khả năng bảo trì của code:

Lợi ích của việc sử dụng Decorator

Decorator mang lại một số lợi ích chính:

Những lưu ý và các phương pháp hay nhất

Decorator trong các Môi trường khác nhau

Mặc dù decorator là một phần của đặc tả ESNext, sự hỗ trợ của chúng thay đổi tùy theo các môi trường JavaScript khác nhau:

Góc nhìn toàn cầu về Decorator

Việc áp dụng decorator khác nhau giữa các khu vực và cộng đồng phát triển khác nhau. Ở một số khu vực, nơi TypeScript được áp dụng rộng rãi (ví dụ: một phần của Bắc Mỹ và Châu Âu), decorator được sử dụng phổ biến. Ở các khu vực khác, nơi JavaScript phổ biến hơn hoặc nơi các nhà phát triển ưa thích các mẫu đơn giản hơn, decorator có thể ít phổ biến hơn.

Hơn nữa, việc sử dụng các mẫu decorator cụ thể có thể thay đổi dựa trên sở thích văn hóa và tiêu chuẩn ngành. Ví dụ, trong một số nền văn hóa, phong cách viết code dài dòng và rõ ràng được ưa chuộng hơn, trong khi ở những nơi khác, phong cách ngắn gọn và biểu cảm hơn lại được yêu thích.

Khi làm việc trong các dự án quốc tế, điều cần thiết là phải xem xét những khác biệt về văn hóa và khu vực này và thiết lập các tiêu chuẩn viết code rõ ràng, ngắn gọn và dễ hiểu cho tất cả các thành viên trong nhóm. Điều này có thể bao gồm việc cung cấp thêm tài liệu, đào tạo hoặc hướng dẫn để đảm bảo rằng mọi người đều cảm thấy thoải mái khi sử dụng decorator.

Kết luận

JavaScript decorator là một công cụ mạnh mẽ để nâng cao code với metadata và sửa đổi hành vi. Bằng cách hiểu các loại decorator khác nhau và các ứng dụng thực tế của chúng, các nhà phát triển có thể viết code sạch hơn, dễ bảo trì hơn và có thể tái sử dụng hơn. Khi decorator được áp dụng rộng rãi hơn, chúng sẵn sàng trở thành một phần thiết yếu của bối cảnh phát triển JavaScript. Hãy nắm bắt tính năng mạnh mẽ này và khai phá tiềm năng của nó để nâng tầm code của bạn lên một tầm cao mới. Hãy nhớ luôn tuân theo các phương pháp hay nhất và xem xét các tác động về hiệu suất khi sử dụng decorator trong các ứng dụng của bạn. Với việc lập kế hoạch và triển khai cẩn thận, decorator có thể cải thiện đáng kể chất lượng và khả năng bảo trì của các dự án JavaScript của bạn. Chúc bạn viết code vui vẻ!