jquery.initialize

著者 (pie6k) からのメモ。私は数年前にこのライブラリを作成しましたが、当時は素晴らしかったです。おそらく、そのような用途には jQuery を使用せず、React または同様のものを使用する必要があります。ありがとう。 — 2018-11-21

バグレポートは引き続き受け付けています。

jQuery.初期化

jQuery.initializeプラグインは、ページ上で動的に作成された要素を維持するために作成されます。

あらすじ

jQuery.initialize は、セレクターに一致する各要素を反復処理し、コールバック関数を適用します。次に、ドキュメント オブジェクト モデルへの変更をリッスンし、元のセレクターと一致するドキュメントに挿入された新しい要素にコールバック関数を適用します。

 $.initialize([selector], [callback]);

これにより、開発者は、セレクターに一致する新しい要素が DOM に挿入されるたびに適用される初期化コールバックを定義できます。 AJAX 経由でロードされた要素に対しても機能します。

簡単なデモ – ここをクリック

使用例

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
});

ただし、 .some-elementセレクターに一致する新しい要素がページに表示されると、即座に初期化されるようになりました。新しい項目を追加する方法は重要ではありません。コールバックなどを気にする必要はありません。

 $("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!

観察しない

ドキュメントの監視を停止するには、返されたMutationObserverインスタンスでdisconnect()を呼び出してオブザーバーを切断します。これにより、 observe()が再度呼び出されるまで、それ以降の通知の受信が停止されます。 。例えば、

 var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();

オプション

target

デフォルトでは、ドキュメント全体の変更が監視されます。これにより、パフォーマンスが低下する可能性があります。 DOM 内の特定のノードは、ターゲットを指定することで監視できます。

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });

それ以外の場合、ターゲットはデフォルトでdocument.documentElementになります。

observer

カスタムMutationObserverInit提供することもできます。指定しない場合は、デフォルトの内部構成が使用されます。

ブラウザの互換性

プラグインはMutationObserverに基づいています。 IE9 以降 (以下の注をお読みください) およびすべての最新ブラウザで動作します。

注: IE9 および IE10 で動作させるには、ここにあるような MutationObserver ポリフィルを追加する必要があります: https://github.com/webcomponents/webcomponentsjs

---

パフォーマンステスト ( @bezborodowと@liuhongboに感謝)

藤堂

• bowerとnpm互換にし、高度なパフォーマンス テストを追加します。

貢献者

• アダム・ピエトラシアク
• ダミアン・ベズボロドフ
• マイケル・ハルス