Cách sử dụng các mẫu thiết kế JavaScript

Các mẫu thiết kế JavaScript cung cấp các giải pháp đã được chứng minh cho các vấn đề phổ biến trong quá trình phát triển phần mềm. Hiểu và áp dụng các mẫu này sẽ cho phép bạn viết mã JavaScript tốt hơn, hiệu quả hơn.

Giới thiệu về các mẫu thiết kế JavaScript

Các khái niệm có trong các mẫu thiết kế JavaScript dùng để hướng dẫn bạn cách khắc phục các vấn đề phổ biến mà bạn sẽ gặp phải với tư cách là nhà phát triển JavaScript.

Bạn nên hiểu những khái niệm trừu tượng cơ bản đằng sau các mẫu, để bạn có thể áp dụng chúng cho vấn đề cụ thể của mình. Bạn cũng có thể xác định khi nào bất kỳ mẫu nào nói trên có thể hữu ích cho mã của bạn.

Mô hình mô-đun

Mẫu Mô-đun, cung cấp khả năng đóng gói, là một phần của hệ thống mô-đun của JavaScript. Nó cung cấp một cách để bảo mật dữ liệu và hành vi riêng tư trong một mô-đun trong khi hiển thị API công khai. Nó cho phép bạn tạo các đối tượng mô-đun độc lập với các cấp độ truy cập riêng tư và công khai.

Điều này hơi giống với cách bạn có thể sử dụng các công cụ sửa đổi truy cập trên một lớp bằng ngôn ngữ như Java hoặc C++.

Trong JavaScript, bạn có thể triển khai mẫu Mô-đun bằng cách sử dụng các bao đóng.

Bằng cách sử dụng bao đóng để bao quanh các thành viên riêng tư (hàm, biến, dữ liệu), bạn tạo một phạm vi nơi các thành viên này có thể truy cập được nhưng không được tiếp xúc trực tiếp với thế giới bên ngoài. Điều này giúp đạt được tính đóng gói, giữ cho các chi tiết bên trong ẩn khỏi mã bên ngoài.

Ngoài ra, việc trả về API công khai từ quá trình đóng cho phép quyền truy cập riêng tư vào các chức năng hoặc thuộc tính nhất định mà bạn muốn hiển thị như một phần của giao diện mô-đun.

Điều này sẽ cung cấp cho bạn quyền kiểm soát những phần nào của mô-đun mà các phần khác của cơ sở mã có thể truy cập được. Điều đó duy trì một ranh giới rõ ràng giữa chức năng công khai và riêng tư.

Đây là một ví dụ:

 const ShoppingCartModule = (function () {
  
  let cartItems = [];
  
  function calculateTotalItems() {
    return cartItems.reduce((total, item) => total + item.quantity, 0);
  }
  
  return {
    addItem(item) {
      cartItems.push(item);
    },
    getTotalItems() {
      return calculateTotalItems();
    },
    clearCart() {
      cartItems = [];
    }
  };
})();

ShoppingCartModule.addItem({ name: 'Product 1', quantity: 2 });
ShoppingCartModule.addItem({ name: 'Product 2', quantity: 1 });
console.log(ShoppingCartModule.getTotalItems()); 
ShoppingCartModule.clearCart();
console.log(ShoppingCartModule.getTotalItems()); 
 

Trong ví dụ này, các Mua SắmGiỏ HàngModule đại diện cho một mô-đun được tạo bằng mẫu mô-đun. Việc thực thi mã diễn ra như sau:

1. Các IIFE bao bọc toàn bộ khối mã, tạo ra một chức năng được thực thi ngay khi khai báo. Điều này thiết lập một phạm vi riêng cho các thành viên của mô-đun.
2. giỏ hàngMặt hàng là một mảng riêng tư. Nó không thể truy cập trực tiếp từ bên ngoài mô-đun.
3. tínhTotalItems() là một phương pháp riêng tính toán tổng số mặt hàng trong giỏ hàng. Nó sử dụng giảm bớt() phương pháp để lặp đi lặp lại trên giỏ hàngMặt hàng mảng và tổng hợp số lượng của tất cả các mặt hàng.
4. Mô-đun trả về API công khai của nó dưới dạng đối tượng theo nghĩa đen, hiển thị ba phương thức công khai: addItem(), getTotalItems()Và dọn dẹp giỏ hàng().
5. Bên ngoài mô-đun, bạn có thể truy cập các phương thức công khai của mô-đun để tương tác với chức năng giỏ hàng.

Ví dụ này minh họa cách mẫu mô-đun cho phép bạn đóng gói dữ liệu riêng tư (giỏ hàngMặt hàng) và hành vi (tính toánTotalItems) trong mô-đun trong khi cung cấp giao diện công cộng (thêm mục, getTotalItemsVà dọn dẹp giỏ hàng) để tương tác với mô-đun.

Mẫu người quan sát

Mẫu Người quan sát thiết lập sự phụ thuộc một-nhiều giữa các đối tượng. Khi trạng thái của một đối tượng thay đổi, nó sẽ thông báo cho tất cả các đối tượng phụ thuộc của nó và chúng sẽ tự động cập nhật. Mẫu này đặc biệt hữu ích để quản lý các tương tác theo hướng sự kiện hoặc các thành phần tách rời trong hệ thống.

Trong JavaScript, bạn có thể triển khai mẫu Người quan sát bằng cách sử dụng addEventListener tích hợp sẵn, công vănsự kiện hoặc bất kỳ cơ chế xử lý sự kiện nào. Bằng cách đăng ký người quan sát vào các sự kiện hoặc chủ đề, bạn có thể thông báo và cập nhật cho họ khi các sự kiện cụ thể xảy ra.

Ví dụ: bạn có thể sử dụng mẫu Người quan sát để triển khai một hệ thống thông báo đơn giản:

 
function NotificationSystem() {
  
  this.subscribers = [];
  
  this.subscribe = function (subscriber) {
    this.subscribers.push(subscriber);
  };
  
  this.unsubscribe = function (subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  };
  
  this.notify = function (message) {
    this.subscribers.forEach(function (subscriber) {
      subscriber.receiveNotification(message);
    });
  };
}

function Subscriber(name) {
  
  this.receiveNotification = function (message) {
    console.log(name + ' received notification: ' + message);
  };
}

const notificationSystem = new NotificationSystem();

const subscriber1 = new Subscriber('Subscriber 1');
const subscriber2 = new Subscriber('Subscriber 2');

notificationSystem.subscribe(subscriber1);
notificationSystem.subscribe(subscriber2);

notificationSystem.notify('New notification!');
 

Mục tiêu ở đây là cho phép nhiều người đăng ký nhận thông báo khi một sự kiện cụ thể xảy ra.

Các Hệ thống thông báo chức năng đại diện cho hệ thống gửi thông báo và Người đăng kí chức năng đại diện cho người nhận thông báo.

Hệ thống thông báo có một mảng được gọi là thuê bao để lưu trữ những người đăng ký muốn nhận thông báo. Các đặt mua phương pháp cho phép người đăng ký đăng ký bằng cách thêm chính họ vào mảng người đăng ký. Các hủy đăng ký phương thức sẽ xóa người đăng ký khỏi mảng.

Các thông báo phương thức trong NotificationSystem lặp qua mảng người đăng ký và gọi phương thức Nhận thông báo trên mỗi thuê bao, cho phép họ xử lý các thông báo.

Các thể hiện của hàm Subscriber đại diện cho những người đăng ký. Mỗi người đăng ký có một phương thức nhậnThông báo xác định cách họ xử lý các thông báo đã nhận. Trong ví dụ này, phương thức ghi thông báo nhận được vào bảng điều khiển.

Để sử dụng mẫu quan sát, hãy tạo một phiên bản của NotificationSystem. Sau đó, bạn có thể tạo các phiên bản của Người đăng ký và thêm chúng vào hệ thống thông báo bằng phương thức đăng ký.

Gửi thông báo sẽ kích hoạt phương thức nhậnThông báo cho từng người đăng ký và ghi nhật ký tin nhắn cho từng người đăng ký.

Mẫu Người quan sát cho phép khớp nối lỏng lẻo giữa hệ thống thông báo và người đăng ký, cho phép linh hoạt. Mẫu thúc đẩy việc phân tách các mối quan tâm, điều này sẽ giúp việc bảo trì trong các hệ thống hướng sự kiện trở nên dễ dàng hơn.

Sử dụng các mẫu JavaScript nâng cao

Dưới đây là một số mẹo chung để sử dụng hiệu quả các mẫu JavaScript nâng cao:

• Xem xét các hàm ý về hiệu suất: Các mẫu nâng cao có thể tạo ra độ phức tạp bổ sung, điều này có thể ảnh hưởng đến hiệu suất. Hãy chú ý đến ý nghĩa hiệu suất và tối ưu hóa khi cần thiết.
• Tránh các mẫu chống đối: Hiểu kỹ các mẫu và tránh rơi vào các mẫu chống đối hoặc lạm dụng chúng. Sử dụng các mẫu mà chúng có ý nghĩa và phù hợp với các yêu cầu của ứng dụng của bạn.
• Tuân thủ các quy ước mã hóa: Tuân thủ nhất quán các quy ước mã hóa để duy trì khả năng đọc và tính nhất quán trên cơ sở mã của bạn. Sử dụng các tên hàm và biến có ý nghĩa, đồng thời cung cấp tài liệu rõ ràng cho các mẫu của bạn.

Hãy cẩn thận khi áp dụng các mẫu này

Mẫu Mô-đun cho phép đóng gói và thúc đẩy quyền riêng tư của dữ liệu, tổ chức mã và tạo các mô-đun độc lập.

Mặt khác, mẫu Người quan sát tạo điều kiện giao tiếp giữa các thành phần bằng cách thiết lập mối quan hệ chủ thể-người đăng ký.

Bạn nên biết về những cạm bẫy tiềm ẩn và những lỗi phổ biến khi triển khai các mẫu JavaScript nâng cao. Tránh lạm dụng các mẫu khi có các giải pháp đơn giản hơn hoặc tạo mã quá phức tạp. Thường xuyên xem xét và cấu trúc lại mã của bạn để đảm bảo mã vẫn có thể bảo trì được.