了解 JavaScript 中的觀察者：綜合指南-js教程-PHP中文網

Understanding Observers in JavaScript: A Comprehensive Guide

JavaScript 觀察者對於創建動態應用程式至關重要，它使開發人員能夠對物件、事件或資料流的變化做出反應。本指南透過詳細的解釋和實際範例探討了各種 JavaScript 觀察者類型。

1。事件觀察者（事件監聽）：基金會

事件監聽器是基本的 JavaScript 觀察者，對使用者互動（點擊、按鍵、滑鼠移動）等事件做出反應。

程式碼範例：

<code class="language-javascript">// Select a button
const button = document.querySelector('button');

// Add a click listener
button.addEventListener('click', (event) => {
    console.log('Button clicked!', event);
});

// Add a mouseover listener
button.addEventListener('mouseover', () => {
    console.log('Mouse over button!');
});</code>

登入後複製

用例：

表單提交
拖放功能
導航追蹤
鍵盤快速鍵（輔助使用）
動態 UI 回饋（懸停效果）

2。突變觀察者：監測 DOM 變化

突變觀察者追蹤 DOM 修改（新增、刪除或更改節點），這對於動態更新內容至關重要。

程式碼範例：

<code class="language-javascript">// Target node
const targetNode = document.querySelector('#target');

// Create a MutationObserver
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        console.log('DOM change detected:', mutation);
    });
});

// Configuration
const config = { childList: true, attributes: true, subtree: true };

// Start observing
observer.observe(targetNode, config);

// Simulate a change
setTimeout(() => {
    const newElement = document.createElement('p');
    newElement.textContent = 'New text!';
    targetNode.appendChild(newElement);
}, 2000);</code>

登入後複製

用例：

單頁應用程式 (SPA) 更新
使用者偏好設定（深色模式）
即時協作功能
即時通知系統
動態表單追蹤

3。交叉口觀察者：視口監控

交叉點觀察器會偵測元素何時進入或退出視口，非常適合延遲載入或動畫。

程式碼範例：

<code class="language-javascript">// Element to observe
const targetElement = document.querySelector('#box');

// Create an IntersectionObserver
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            console.log('Element in viewport:', entry.target);
        } else {
            console.log('Element out of viewport:', entry.target);
        }
    });
});

// Start observing
observer.observe(targetElement);</code>

登入後複製

用例：

延遲載入圖片
無限滾動
螢幕動畫觸發器
廣告展示追蹤
首屏內容優先權

4。調整觀察者的大小：響應式 UI 設計

調整大小觀察者監視元素大小的變化，這對於響應式 UI 至關重要。

程式碼範例：

<code class="language-javascript">// Element to observe
const box = document.querySelector('#resizable');

// Create a ResizeObserver
const observer = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
        const { width, height } = entry.contentRect;
        console.log(`New size: ${width}px x ${height}px`);
    });
});

// Start observing
observer.observe(box);

// Simulate a resize
setTimeout(() => {
    box.style.width = '400px';
    box.style.height = '200px';
}, 2000);</code>

登入後複製

用例：

響應式設計改編
調整圖表/畫布大小
動態媒體查詢
可調整大小的面板監控
使用者自訂調整

5。物件屬性觀察者（代理 API）

代理 API 允許觀察物件屬性更改，從而實現對更新的動態反應。

程式碼範例：

<code class="language-javascript">// Object to observe
const obj = { name: 'John', age: 30 };

// Use Proxy
const observedObj = new Proxy(obj, {
    set(target, property, value) {
        console.log(`Property '${property}' changed from '${target[property]}' to '${value}'`);
        target[property] = value;
        return true;
    },
});

// Trigger changes
observedObj.name = 'Jane';
observedObj.age = 31;</code>

登入後複製

用例：

應用狀態觀察與驗證
狀態管理系統偵錯
資料更新限制
反應式表單模型
動態驗證

6。可觀察模式 (RxJS)：流管理

RxJS 提供了先進的觀察者模式實現，以實現高效的資料流管理。

程式碼範例：

<code class="language-javascript">// Select a button
const button = document.querySelector('button');

// Add a click listener
button.addEventListener('click', (event) => {
    console.log('Button clicked!', event);
});

// Add a mouseover listener
button.addEventListener('mouseover', () => {
    console.log('Mouse over button!');
});</code>

登入後複製

用例：

非同步資料流（HTTP、WebSockets）
即時儀表板更新
框架中的響應式程式設計
非同步操作協調
事件去抖動/限制

7。性能觀察者：性能監控

效能觀察者追蹤效能事件（資源載入、長任務）以最佳化應用程式。

程式碼範例：

<code class="language-javascript">// Target node
const targetNode = document.querySelector('#target');

// Create a MutationObserver
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        console.log('DOM change detected:', mutation);
    });
});

// Configuration
const config = { childList: true, attributes: true, subtree: true };

// Start observing
observer.observe(targetNode, config);

// Simulate a change
setTimeout(() => {
    const newElement = document.createElement('p');
    newElement.textContent = 'New text!';
    targetNode.appendChild(newElement);
}, 2000);</code>

登入後複製

用例：

Web效能除錯與分析
資源載入時間測量
主執行緒阻塞任務辨識
使用者體驗指標監控（TTI）
第三方腳本影響分析

8。自訂觀察者：擴充功能

使用觀察者設計模式為內建 API 以外的場景建立自訂觀察者。

程式碼範例：

<code class="language-javascript">// Element to observe
const targetElement = document.querySelector('#box');

// Create an IntersectionObserver
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            console.log('Element in viewport:', entry.target);
        } else {
            console.log('Element out of viewport:', entry.target);
        }
    });
});

// Start observing
observer.observe(targetElement);</code>

登入後複製