Giới thiệu

Chia sẻ component giữa các website ngày càng trở nên quan trọng trong phát triển ứng dụng web. Bài viết này sẽ cung cấp cái nhìn tổng quan về các phương pháp chia sẻ component, từ những giải pháp đơn giản đến những giải pháp hiệu quả, giúp các lập trình viên tối ưu hóa quy trình phát triển.

Component là gì?

Component (thành phần) là các khối mã độc lập có thể tái sử dụng, thường được sử dụng để xây dựng giao diện người dùng. Trong ứng dụng web, một số thành phần phổ biến có thể bao gồm nút, footer, header, v.v.

Chia sẻ Component Nút cơ Bản

Một trong những component đơn giản nhất nhưng rất phổ biến là nút. Ví dụ dưới đây là một component nút có thể dễ dàng chia sẻ giữa các website:

<button class="button">Click Me</button>
<style>
  .button {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
  }

  .button:hover {
    background-color: #45a049;
  }

  .button:active {
    transform: scale(0.95);
  }
</style>

Phương Pháp Chia Sẻ Component

Dưới đây là một số phương pháp chia sẻ component mà bạn có thể áp dụng:

1. Xuất File và Kết Nối Qua Script

Phương pháp đầu tiên là xuất thành phần ra thành một file JavaScript và kết nối bằng thẻ <script>. Ví dụ:

createButton.js

(function (global) {
  function createButton() {
    const style = document.createElement('style');
    style.textContent = `
      .button { /* Styles here */ }
    `;
    const button = document.createElement('button');
    button.className = 'button';
    button.textContent = 'Click Me';
    return { style, button };
  }
  global.buttonModule = { createButton };
})(window);

Sử dụng trong HTML

<script src="https://.../createButton.js"></script>
<script>
  const { style, button } = buttonModule.createButton();
  document.body.append(style, button);
</script>

Ưu điểm:

• Dễ dàng tích hợp vào dự án hiện tại mà không có cấu hình phức tạp.
• Phù hợp cho các ứng dụng nhỏ và nhanh chóng.

Nhược điểm:

• Kết quả không dễ duy trì khi nhiều component được sử dụng.
• Có nguy cơ xung đột tại không gian toàn cục.

2. Sử Dụng Thư Viện và API

Một phương pháp khác là sử dụng thư viện như HMPL để tải component từ máy chủ qua API. Để thực hiện điều này, bạn cần phải thiết lập một máy chủ backend sử dụng Express.js.

button.html

<button class="button">Click Me</button>
<style> /* Styles here */ </style>

Thiết lập API với Express.js

const express = require("express");
const app = express();
app.get("/getButton", (req, res) => res.sendFile("path/to/button.html"));
app.listen(PORT);

Sử dụng với HMPL

<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script>
  const wrapper = hmpl.compile(`<div id='wrapper'>{{ src: '/getButton' }}</div>`);
  document.body.append(wrapper());
</script>

Ưu điểm của phương pháp này:

• Tái sử dụng linh hoạt giữa nhiều website.
• Cung cấp nhiều chức năng mạnh mẽ cho component.

Nhược điểm:

• Cần cấu hình máy chủ và xây dựng API, có thể phức tạp đối với người mới bắt đầu.

Kết Luận

Tùy thuộc vào yêu cầu của dự án và số lượng component cần chia sẻ, bạn có thể chọn phương pháp phù hợp nhất. Phương pháp đơn giản thường phù hợp cho các dự án nhỏ, trong khi phương pháp API rất hiệu quả cho các dự án lớn có yêu cầu mở rộng hơn.

Cảm ơn bạn đã theo dõi bài viết và hy vọng các thông tin trên sẽ giúp ích cho bạn trong việc quản lý và chia sẻ component giữa các ứng dụng web.
source: viblo