JavaScript のオブザーバーを理解する: 包括的なガイド-jsチュートリアル-php.cn

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. Mutation Observers: 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、WebSocket)
リアルタイムのダッシュボード更新
フレームワークでのリアクティブプログラミング
非同期操作の調整
イベントのデバウンス/スロットリング

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>

ログイン後にコピー