前の記事では、サイズのオブザーバーAPIを使用するのがはるかに簡単なものにリファクタリングする方法を示しました。

 //これから
const observer = new resizeObserver（Observerfn）

関數(shù)Observerfn（エントリ）{
  for（エントリの入力をしましょう）{
    //各エントリで何かをします
  }
}

const element = document.queryselector（ '＃some-element'）
Observer.observe（element）;

 //これに 
const node = document.queryselector（ '＃some-element'）
const obs = resizeobserver（node、{
  callback（{entry}）{
    //各エントリで何かをします
  }
}）

今日、私たちはMutationObserverとIntersectionObserverについても同じことをします。

リファクタリング変異オブザーバー

MutationObserverは、ResizeObserverのAPIとほぼ同じAPIを持っています。したがって、MutationObserverからMutationObserverのために書いたコードの全部分を?qū)g際にコピーすることができます。

エクスポート関數(shù)MutationObserver（node、options = {}）{
  const observer = new MutationObserver（Observerfn）
  const {callback、... opts} = options
  Observer.observe（node、opts）

  関數(shù)Observerfn（エントリ）{
    for（エントリのconstエントリ）{
      //コールバックパターン
      if（options.callback）options.callback（{エントリ、エントリ、オブザーバー}）
      //イベントリスナーパターン
      それ以外 {
        node.dispatchevent（
          新しいCustomevent（ 'Mutate'、{
            詳細：{エントリ、エントリ、オブザーバー}、
          }）
        ））
      }
    }
  }
}

これで、コールバックパターンまたはイベントリスナーパターンでMutationObserverを使用できます。

 const node = document.queryselector（ '。some-element'）

//コールバックパターン 
const obs = mutationobserver（node、{
  callback（{エントリ、エントリ}）{
    //各エントリで必要なことをします
  }
}）

//イベントリスナーパターン
node.addeventlistener（ 'mutate'、event => {
  const {entry} = event.detail
  //各エントリで必要なことをします
}）

ずっと簡単です！

オブザーバーを切斷します

要素の観察を停止する2つの方法を持つResizeObserverとは異なり、MutationObserverには切斷方法が1つしかありません。

エクスポート関數(shù)MutationObserver（node、options = {}）{
  // ... 
  戻る {
    disconnect（）{
      Observer.disconnect（）
    }
  }
}

しかし、あなたが切斷する前に、未処理の記録を得ることができるように、mutationobserverhas atakerecordsmethod。切斷する前にコードをテーカードする必要があるため、切斷內(nèi)で使用してみましょう。

完全なAPIを作成するには、この方法も返すことができます。

エクスポート関數(shù)MutationObserver（node、options = {}）{
  // ... 
  戻る {
    // ...
    disconnect（）{
      const Records = observer.takerecords（）
      Observer.disconnect（）
      if（records.length> 0）Observerfn（records）
    }
  }
}

これで、突然変異オブザーバーを切斷して切斷することができます。

 const node = document.queryselector（ '。some-element'）
const obs = mutationobserver（/ * ... */）

obs.disconnect（）

MutationObserverの観察オプション

あなたが疑問に思っていた場合、MutationObserverの観察方法は7つのオプションを取ることができます。それらのそれぞれが何を観察するかを決定し、それらはすべてデフォルトでfalseになります。

• サブツリー：ノードのサブツリー全體を監(jiān)視します
• チャイルドリスト：子供の要素を追加または除去するためのモニター。サブツリーが真である場合、これはすべての子孫要素を監(jiān)視します。
• 屬性：屬性の変更のためのモニター
• AttributeFilter：監(jiān)視する特定の屬性の配列
• 屬性oldValue：変更された場合に以前の屬性値を記録するかどうか
• CharpleData：文字データの変更のためのモニター
• CharateDataOldValue：以前の文字データ値を記録するかどうか

リファクタリング交差點オブザーバー

IntersectionObserverのAPIは、他のオブザーバーに似ています。繰り返しますが、あなたは次のようにしなければなりません

1. 新しいオブザーバーを作成します：新しいキーワードを使用します。このオブザーバーは、オブザーバー機能を?qū)g行して実行します。
2. 観察された変更で何かを行います。これは、オブザーバーに渡されるオブザーバー関數(shù)を介して行われます。
3. 特定の要素を観察する：観察方法を使用して。
4. （オプション）要素を観察しない： Unobserveまたは切斷方法を使用することにより（使用している観測者に応じて）。

ただし、交差點擔當者は、ステップ1ではなくステップ1でオプションを渡す必要があります。したがって、これは、交差點擔當者APIを使用するコードです。

 //ステップ1：新しいオブザーバーを作成し、関連するオプションを渡す
const options = {/*...*/}
const observer = new IntersectionObserver（Observerfn、Options）

//ステップ2：観察された変更で何かをします
関數(shù)Observerfn（エントリ）{
  for（エントリのconstエントリ）{
    //エントリで何かをします
  }
}

//ステップ3：要素を観察します
const element = document.queryselector（ '＃some-element'）
Observer.observe（要素）

//ステップ4（オプション）：使用が完了したら、オブザーバーを外します
Observer.Disconnect（要素）

コードは類似しているため、MutationObserverのために書いたコードを交差點擔當者にコピーすることもできます。そうするとき、オプションを互いに互いのオーブサーバーに渡すことを忘れないでください。

エクスポート関數(shù)MutationObserver（node、options = {}）{
  const {callback、... opts} = options
  const observer = new MutationObserver（Observerfn、Opts）
  Observer.observe（ノード）

  関數(shù)Observerfn（エントリ）{
    for（エントリのconstエントリ）{
      //コールバックパターン
      if（options.callback）options.callback（{エントリ、エントリ、オブザーバー}）
      //イベントリスナーパターン
      それ以外 {
        node.dispatchevent（
          新しいCustomevent（ 'Intersect'、{
            詳細：{エントリ、エントリ、オブザーバー}、
          }）
        ））
      }
    }
  }
}

これで、同じ使いやすいAPIを使用して、交差點擔當者を使用できます。

 const node = document.queryselector（ '。some-element'）

//コールバックパターン 
const obs = Intersectionobserver（node、{
  callback（{エントリ、エントリ}）{
    //各エントリで必要なことをします
  }
}）

//イベントリスナーパターン
node.addeventlistener（ 'intersect'、event => {
  const {entry} = event.detail
  //各エントリで必要なことをします
}）

交差點オブザーバーを切斷します

IntersectionObserverの方法は、seizeobserverとmutationobserverの両方の結(jié)合です。 4つの方法があります。

• 観察：要素を観察します
• Unobserve：1つの要素の観察を停止します
• 切斷：すべての要素の観察を停止します
• TakerCords：処理されていないレコードを取得します

したがって、これについては、resizeobserverとmutationobserverで作成した方法を組み合わせることができます。

 Export関數(shù)IntersectionObserver（node、options = {}）{
  // ...
  戻る {
    Unobserve（node）{
      Observer.unobserve（ノード）
    }、

    disconnect（）{
      //切斷する前にレコードを取得します。
      const Records = observer.takerecords（）
      Observer.disconnect（）
      if（records.length> 0）Observerfn（records）
    }、
    
    takercords（）{
      return observer.takerecords（）
    }、
  }
}

これで、Unobserveまたは切斷メソッドでの観察を停止できます。

 const node = document.queryselector（ '。some-element'）
const obs = Intersectionobserver（node、/*...*/）

//オブザーバーを切斷します
obs.disconnect（）

交差點オプション

あなたが疑問に思っていた場合、IntersectionObserverは3つのオプションを取り入れます。

• ルート：観測された要素が表示されているかどうかを確認するために使用される要素
• rootmargin：ルートの端からオフセット量を指定できます
• しきい値：オブザーバーエントリをいつログするかを決定します

交差點オプションのオプションを理解するのに役立つ記事を次に示します。

Splandid Labzを介して実際にこれを使用しています

Splandid Labzには、seizeobserver、mutationobserver、およびIntersectionobserverを含むUtilsライブラリがあります。

上記のスニペットをすべてのプロジェクトにコピーしたくない場合は、それらを使用できます。

輸入 { 
  ResizeObserver、 
  交差點裝置、 
  MutationObserver 
}「SplendidLabz/Utils/Dom」から

const mode = document.queryselector（ 'some-element'）

const resizeobs = seizeobserver（node、 / * ... * /）
const Intersectobs = IntersectionObserver（ノード、 / * ... * /）
const mutateobs = mutationobserver（node、 / * ... * /）

上記のコード（および前の記事で）を作成したコードとは別に、Splendid Labzの各オブザーバー方法は、複數(shù)の要素を一度に観察して観察することを停止させることができます（Unobserveメソッドがないため、MutationObserverを除く）

 const items = document.queryselectorall（ '。要素'）
const obs = resizeobserver（items、{
  callback（{エントリ、エントリ}）{
    / *ここでやりたいことをする */
  }
}）

// 2つのアイテムを一度に観察しません
const subset = [items [0]、items [1]]
Obs.Unobserve（Subset）

そのため、私がすでに作成した機能を使用するのは少し簡単かもしれません。 ??

恥知らずなプラグ：Splandid Labzには、CSS、JavaScript、Astro、Svelteの有用なユーティリティがたくさん含まれています。

私はそれらをすべて素晴らしいlabzに駐車したので、ほとんどのWebプロジェクトで有用な機能を求めてインターネットを精査する必要はもうありません。あなたが見てみると、あなたは私が従ったものを楽しむかもしれません！

（執(zhí)筆時點でまだドキュメントを作成しているので、比較的空っぽに見えるようになります。時々チェックしてください?。?/p>

ものをリファクタリングすることを?qū)Wぶ

あなたが私がオブザーバーAPIをリファクタリングする方法を説明した方法を気に入っているなら、あなたは私がJavaScriptをどのように教えるかを見つけるかもしれません。

私のJavaScriptコースでは、20の実生活のコンポーネントを構(gòu)築することを?qū)Wびます。シンプルなものから始め、機能を追加し、途中でリファクタリングします。

リファクタリングは學ぶための非常に重要なスキルです。ここでは、脳にそれを固めることを確認します。

それでおしまい！この作品を読んで楽しんだことを願っています！

以上が交差點と突然変異オブザーバーのより良いAPIの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。