[Pattern] Adapter - làm thế nào để giúp các đối tượng làm việc với nhau?

Vấn đề

Hãy tưởng tượng bạn là một lập trình viên Front-end, bạn đã hoàn thiện xong phần giao diện và chỉ chờ kết nối với API nữa thôi. Nhưng đến ngày đội Back-end bảo chưa thể bàn giao ngay cho bạn được thế nên đành phải phải chờ đến lúc có API thì mới tiếp tục công việc.

Hay ở một tình huống khác, bạn được sếp giao cho công việc kết nối hệ thống với một bên đối tác thông qua API. Tài liệu họ đã cung cấp đầy đủ còn bạn chỉ tiến hành kết nối với dữ liệu như đã mô tả. Nhưng đến ngày gần làm xong, đối tác báo lại đã thay đổi dữ liệu ở một vài nơi, bạn cảm thấy bực bội vì phải ngồi rà soát và sửa lại mã ở rất nhiều nơi trong dự án.

Bên trên là hai tình huống khá phổ biến trong công việc của mỗi lập trình viên, nếu bạn đã từng gặp rồi và còn lúng túng khi phải đối diện với cảnh như vậy thì bài viết này tôi xin trình bày một Pattern có tên là Adapter để phần nào giúp bạn trải qua được nỗi đau này.

Mẫu thiết kế - Adapter

Adapter là một mẫu thiết kế cấu trúc cho phép các đối tượng có giao diện (interface) không tương thích có thể hoạt động với nhau.

Adapter đóng vai trò trong việc chuyển đổi dữ liệu (đối tượng) của một đối tượng này để đối tượng khác có thể hiểu được nó. Adapter che giấu sự phức tạp của quá trình chuyển đổi đó, đối tượng nhận dữ liệu thậm chí không cần quan tâm đến dữ liệu từ đối tượng kia mà tất cả hãy thông qua một Adapter.

Ví dụ một thư viện vẽ biểu đồ chỉ hoạt động với dữ liệu nhận vào ở dạng JSON nhưng dữ liệu bạn lấy ra trong hệ thống là XML. Lúc đó bạn cần tạo một hàm để chuyển đổi dữ liệu từ XML thành JSON đưa vào thư viện, hàm đó được gọi là Adapter.

... -> XML -> Adapter (function) -> JSON -> Library -> ...

Quay trở lại vấn đề một khi đã biết đến Adapter bạn không hoàn toàn bị phụ thuộc vào dữ liệu ở API nữa. Việc cần làm là tạo tối tượng chứa dữ liệu cần cho giao diện hiển thị hoặc xử lý, sau đó tạo hàm Adapter để chuyển đổi dữ liệu từ API thành đối tượng đó là xong.

<template>
  <a-list item-layout="horizontal" :data-source="data.list">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta :description="item.description" >
          <template #title>
            <a :href="item.url">{{ item.title }}</a>
          </template>
          <template #avatar>
            <a-avatar :src="item.avatar" />
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";

// dữ liệu được lấy từ server có định dạng
// [{
//   tieu_de: "xxx",
//   mo_ta: "xxx",
//   anh_dai_dien: "xxx",
//   lien_ket: "xxx"
// }]
const fetchData = () => {
  return fetch("https://api.example.com/list");
}

// hàm adapter chuyển dữ liệu từ API vào data
const convertRespToData = (resp: any) => {
  return resp.map((item: any) => {
    return {
      title: item.tieu_de,
      description: item.mo_ta,
      avatar: item.anh_dai_dien,
      url: item.lien_ket
    };
  });
}

export default defineComponent({
  setup() {
    // data là biến giao diện cần ghép
    const data = reactive<any>({
      list: [],
    });

    // tải dữ liệu và ghép vào data
    onMounted(() => {
      fetchData().then(resp => {
        data.list = convertRespToData(resp);
      });
    });

    return {
      data,
    };
  },
});
</script>

Hơn nữa việc tạo trước và kiểm soát dữ liệu ở client sẽ hạn chế được lỗi phát sinh từ dữ liệu không tương thích từ API. Thay vì nhận dữ liệu trực tiếp từ API để ghép thẳng vào giao diện thì hãy thông qua một Adapter.

Tương tự với vấn đề hai, chúng ta không nên quá phụ thuộc vào dữ liệu từ API của một bên thứ ba mà hãy tự tạo dữ liệu và viết hàm Adapter để chuyển đổi dữ liệu từ chúng. Tránh nhận và sử dụng dữ liệu trực tiếp, có thể những trường dữ liệu họ cung cấp không truyền đạt đúng và đầy đủ nội dung cần cho hệ thống, cho nên nếu có một hàm chuyển đổi ở giữa thì có thể dễ đàng xử lý dữ liệu tập trung và phát hiện lỗi sớm nhất có thể.

Ưu điểm là nhiều tuy nhiên Adapter cũng có một ít hạn chế đó là bạn phải viết nhiều mã hơn một ít, độ phức tạp của mã có thể tăng dần lên nếu như càng có nhiều Adapter và chúng gắn kết với nhau. Thế nên hãy cố gắng tổ chức mã của bạn gọn gàng nhất có thể.

Tổng kết

Trên đây là hai ví dụ tôi nêu ra trong thực tế để áp dụng Adapter hy vọng nó sẽ giúp ích cho mọi người. Adapter còn có nhiều cách triển khai tuỳ thuộc vào từng loại ngôn ngữ và tuỳ bài toán áp dụng. Để tìm hiểu chi tiết hơn bạn đọc có thể bấm vào liên kết tham khảo bên dưới.

Tài liệu tham khảo:

• https://refactoring.guru/design-patterns/adapter