Close
Awesome Image

javascript

[ Better ] [ Javascript ] Pattern Observer JavaScript cơ bản 2024

Pattern observer javascript thực hiện chức năng thêm và tự động cập nhật

Pattern Observer Javascript là một mẫu thiết kế phần mềm giúp một đối tượng (được gọi là “Subject“) thông báo cho các đối tượng khác (được gọi là “Observers“) khi có sự thay đổi trạng thái.
Dưới đây là ví dụ về cách bạn có thể triển khai pattern Observer bằng JavaScript:

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) {
        this.name = name;
    }

    // Phương thức update sẽ được gọi khi subject thông báo
    update(data) {
        console.log(`${this.name} nhận được thông báo: ${data}`);
    }
}

// Sử dụng pattern Observer

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

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

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

// Subject thay đổi trạng thái và thông báo cho tất cả các observers
subject.notify('Cập nhật mới!');

// Loại bỏ một observer
subject.removeObserver(observer1);

// Thông báo một lần nữa để kiểm tra
subject.notify('Cập nhật tiếp theo!');

Trong đoạn mã trên:

  1. Class Subject:addObserver(observer): Thêm một observer vào danh sách các observers.removeObserver(observer): Loại bỏ một observer khỏi danh sách các observers.notify(data): Thông báo cho tất cả các observers rằng có sự thay đổi trạng thái, truyền dữ liệu mới cho họ.
  2. addObserver(observer): Thêm một observer vào danh sách các observers.
  3. removeObserver(observer): Loại bỏ một observer khỏi danh sách các observers.
  4. notify(data): Thông báo cho tất cả các observers rằng có sự thay đổi trạng thái, truyền dữ liệu mới cho họ.
  5. Class Observer:update(data): Phương thức này sẽ được gọi khi subject thông báo về sự thay đổi.
  6. update(data): Phương thức này sẽ được gọi khi subject thông báo về sự thay đổi.
  7. Sử dụng pattern Observer:Tạo đối tượng Subject.Tạo các đối tượng Observer.Thêm các observers vào subject.Khi subject thay đổi trạng thái, nó sẽ gọi phương thức notify để thông báo cho tất cả các observers.Bạn có thể kiểm tra việc loại bỏ một observer bằng cách gọi phương thức removeObserver và sau đó thông báo lại.
  8. Tạo đối tượng Subject.
  9. Tạo các đối tượng Observer.
  10. Thêm các observers vào subject.
  11. Khi subject thay đổi trạng thái, nó sẽ gọi phương thức notify để thông báo cho tất cả các observers.
  12. Bạn có thể kiểm tra việc loại bỏ một observer bằng cách gọi phương thức removeObserver và sau đó thông báo lại.

Class Subject:

  • addObserver(observer): Thêm một observer vào danh sách các observers.
  • removeObserver(observer): Loại bỏ một observer khỏi danh sách các observers.
  • notify(data): Thông báo cho tất cả các observers rằng có sự thay đổi trạng thái, truyền dữ liệu mới cho họ.

Class Observer:

  • update(data): Phương thức này sẽ được gọi khi subject thông báo về sự thay đổi.

Sử dụng pattern Observer:

  • Tạo đối tượng Subject.
  • Tạo các đối tượng Observer.
  • Thêm các observers vào subject.
  • Khi subject thay đổi trạng thái, nó sẽ gọi phương thức notify để thông báo cho tất cả các observers.
  • Bạn có thể kiểm tra việc loại bỏ một observer bằng cách gọi phương thức removeObserver và sau đó thông báo lại.

Hy vọng mã này sẽ giúp bạn hiểu rõ hơn về pattern Observer và cách triển khai nó trong JavaScript.

Cho tôi giao diện tương tác

Để tạo giao diện tương tác sử dụng pattern Observer, chúng ta có thể tạo một trang HTML đơn giản với JavaScript để quản lý và hiển thị các thông báo từ subject đến các observers.
Dưới đây là một ví dụ hoàn chỉnh:

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>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .observer {
            margin-bottom: 10px;
        }
        .observer input {
            margin-right: 5px;
        }
        #notifications {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </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">Notify Observers</button>
    <div id="notifications">
        <h2>Notifications</h2>
        <ul id="notificationList"></ul>
    </div>

    <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.textContent = `${this.name} nhận được thông báo: ${data}`;
        notificationList.appendChild(listItem);
    }
}

// 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);
    }
});

Thử nghiệm Observer pattern

Pattern Observer JavaScript cơ bản 2024
Pattern Observer JavaScript cơ bản 2024
Pattern Observer JavaScript cơ bản 2024
Pattern Observer JavaScript cơ bản 2024
Pattern Observer JavaScript cơ bản 2024
Pattern Observer JavaScript cơ bản 2024

Giải thích

  1. HTML:Tạo giao diện đơn giản với hai checkbox cho các observers và một nút để thông báo.Một khu vực hiển thị các thông báo được gửi đến observers.
  2. Tạo giao diện đơn giản với hai checkbox cho các observers và một nút để thông báo.
  3. Một khu vực hiển thị các thông báo được gửi đến observers.
  4. JavaScript (observer.js):Định nghĩa các class Subject và Observer như trước.Tạo các đối tượng Subject và Observer.Thêm sự kiện cho nút thông báo để gửi thông báo đến tất cả các observers.Thêm sự kiện cho các checkbox để thêm hoặc loại bỏ observers khỏi subject.
  5. Định nghĩa các class Subject và Observer như trước.
  6. Tạo các đối tượng Subject và Observer.
  7. Thêm sự kiện cho nút thông báo để gửi thông báo đến tất cả các observers.
  8. Thêm sự kiện cho các checkbox để thêm hoặc loại bỏ observers khỏi subject.

HTML:

  • Tạo giao diện đơn giản với hai checkbox cho các observers và một nút để thông báo.
  • Một khu vực hiển thị các thông báo được gửi đến observers.

JavaScript (observer.js):

  • Định nghĩa các class Subject và Observer như trước.
  • Tạo các đối tượng Subject và Observer.
  • Thêm sự kiện cho nút thông báo để gửi thông báo đến tất cả các observers.
  • Thêm sự kiện cho các checkbox để thêm hoặc loại bỏ observers khỏi subject.

Khi bạn mở trang HTML này trong trình duyệt, bạn có thể tương tác với giao diện để thêm hoặc loại bỏ observers và gửi thông báo cho họ.

#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!

Leave A Comment

 Prev Post

27

Jul
  

javascript

[ Better ] [ Javascript ] ...

Next Post 

27

Jul

javascript

  

[ Better ] [ Javascript ] ...