[ Better ] [ Javascript ] Animation biểu diễn observer pattern 2024

Mục lục

Animation biểu diễn observer pattern để các bạn dễ hiểu hơn

Animation biểu diễn observer pattern để làm cho giao diện trở nên đẹp hơn và tích hợp Font Awesome cho các nút cũng như SweetAlert cho thông báo, bạn có thể làm theo hướng dẫn dưới đây:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Observer Pattern Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .observer {
            margin-bottom: 10px;
        }
        .observer input {
            margin-right: 5px;
        }
        #notifyBtn {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #notifyBtn:hover {
            background-color: #45a049;
        }
        #notifyBtn i {
            margin-right: 10px;
        }
        #notifications {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: white;
            border-radius: 5px;
        }
        .notification-item {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            animation: fadeIn 1s forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <h1>Observer Pattern Example</h1>
    <div id="observers">
        <div class="observer">
            <input type="checkbox" id="observer1" checked>
            <label for="observer1">Observer 1</label>
        </div>
        <div class="observer">
            <input type="checkbox" id="observer2" checked>
            <label for="observer2">Observer 2</label>
        </div>
    </div>
    <button id="notifyBtn"><i class="fas fa-bell"></i>Notify Observers</button>
    <div id="notifications">
        <h2>Notifications</h2>
        <ul id="notificationList"></ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
    <script src="observer.js"></script>
</body>
</html>

JavaScript (observer.js)

class Subject {
    constructor() {
        this.observers = []; // Danh sách các observers
    }

    // Thêm một observer
    addObserver(observer) {
        this.observers.push(observer);
    }

    // Loại bỏ một observer
    removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    // Thông báo cho tất cả các observers
    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    constructor(name, elementId) {
        this.name = name;
        this.elementId = elementId;
    }

    // Phương thức update sẽ được gọi khi subject thông báo
    update(data) {
        const notificationList = document.getElementById('notificationList');
        const listItem = document.createElement('li');
        listItem.classList.add('notification-item');
        listItem.textContent = `${this.name} nhận được thông báo: ${data}`;
        notificationList.appendChild(listItem);

        Swal.fire({
            position: 'top-end',
            icon: 'info',
            title: `${this.name} nhận được thông báo: ${data}`,
            showConfirmButton: false,
            timer: 3000,
            toast: true,
            customClass: {
                popup: 'slide-in-left'
            }
        });
    }
}

// Tạo đối tượng Subject
const subject = new Subject();

// Tạo các observers
const observer1 = new Observer('Observer 1', 'observer1');
const observer2 = new Observer('Observer 2', 'observer2');

// Thêm observers vào subject
subject.addObserver(observer1);
subject.addObserver(observer2);

// Sự kiện khi nhấn nút thông báo
document.getElementById('notifyBtn').addEventListener('click', () => {
    const message = 'Cập nhật mới!';
    subject.notify(message);
});

// Sự kiện khi thay đổi checkbox
document.getElementById('observer1').addEventListener('change', (event) => {
    if (event.target.checked) {
        subject.addObserver(observer1);
    } else {
        subject.removeObserver(observer1);
    }
});

document.getElementById('observer2').addEventListener('change', (event) => {
    if (event.target.checked) {
        subject.addObserver(observer2);
    } else {
        subject.removeObserver(observer2);
    }
});

Đây là kết quả:

Animation biểu diễn observer pattern 2024

Khi nhấn vào 2 subject

Khi nhấn vào notify

Giải thích

HTML:Thêm liên kết đến Font Awesome để sử dụng các biểu tượng.Thêm liên kết đến SweetAlert để tạo các thông báo đẹp mắt.
Thêm liên kết đến Font Awesome để sử dụng các biểu tượng.
Thêm liên kết đến SweetAlert để tạo các thông báo đẹp mắt.
CSS:Thêm một số style để làm cho giao diện đẹp hơn.Sử dụng animation CSS để tạo hiệu ứng mờ dần cho các thông báo.
Thêm một số style để làm cho giao diện đẹp hơn.
Sử dụng animation CSS để tạo hiệu ứng mờ dần cho các thông báo.
JavaScript:Thêm lớp notification-item với animation fadeIn khi thông báo mới được thêm vào danh sách.Sử dụng SweetAlert để hiển thị thông báo với hiệu ứng trượt từ trái qua phải và tự động biến mất sau 3 giây.
Thêm lớp notification-item với animation fadeIn khi thông báo mới được thêm vào danh sách.
Sử dụng SweetAlert để hiển thị thông báo với hiệu ứng trượt từ trái qua phải và tự động biến mất sau 3 giây.

HTML:

Thêm liên kết đến Font Awesome để sử dụng các biểu tượng.
Thêm liên kết đến SweetAlert để tạo các thông báo đẹp mắt.

CSS:

Thêm một số style để làm cho giao diện đẹp hơn.
Sử dụng animation CSS để tạo hiệu ứng mờ dần cho các thông báo.

JavaScript:

Thêm lớp notification-item với animation fadeIn khi thông báo mới được thêm vào danh sách.
Sử dụng SweetAlert để hiển thị thông báo với hiệu ứng trượt từ trái qua phải và tự động biến mất sau 3 giây.

Khi bạn mở trang HTML này trong trình duyệt và tương tác với giao diện, các thông báo sẽ xuất hiện với hiệu ứng trượt từ trái qua phải và tự động biến mất sau một khoảng thời gian ngắn, làm cho giao diện trở nên sinh động và chuyên nghiệp hơn.

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

#Base Code #Souce Code

Bộ công cụ My Self: @tools.mtips5s.com

Github: @github

Npm: @npm

Docker: @docker

Chúc các bạn thành công!