jQueryのオブザーバーpattern_jqueryの詳細説明

jQuery では、要素にイベントをバインドできる on メソッドと、イベントを手動でトリガーできる Trigger メソッドに焦点を当てて、jQuery の Observer パターンを体験してみましょう。

■ on メソッドは組み込みイベントをバインドし、それらを自然にトリガーします

たとえば、クリックイベントをページのbody要素にバインドする場合は、次のように記述します。

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('クリックされました~~');
});
});

こんにちは

上記では、本文をクリックすることによってのみクリック イベントをトリガーできます。つまり、組み込みイベントがページ要素にバインドされている場合、組み込みイベントが発生した瞬間にイベントがトリガーされます。

■ on メソッドは組み込みイベントをバインドし、手動でトリガーします

トリガー メソッドを使用すると、要素にバインドされた組み込みイベントを手動でトリガーすることもできます。

<スクリプトタイプ="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('クリックされました~~');
});
$('body').trigger('click');
});
上記では、本文をクリックする必要はありません。ページが読み込まれた後、本文は自動的にクリック イベントをトリガーします。

■ on メソッドはカスタム イベントをバインドし、手動でトリガーします

click は jquery の組み込みイベントであることはわかっていますが、このイベントをカスタマイズして手動でトリガーすることはできるでしょうか。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(function() {
$('body').on('someclick', function () {
console.log('クリック~~');
});
$('body').trigger('someclick');
});

上記では、someclick イベントをカスタマイズしました。結果は上記と同じです。

それで、カスタム イベントを要素にバインドし、trigger メソッドを使用してイベントをトリガーできることがわかりました。

もちろん、カスタム イベントの名前は、app.someclick などの「namespace.カスタム イベント名」の形式で記述することができます。これは、カスタム イベント名の競合を効果的に回避できるため、大規模なプロジェクトで特に役立ちます。

「パブリッシュとサブスクライブ」という観点から見ると、on メソッドはサブスクライバーとオブザーバーに相当し、trigger メソッドはパブリッシャーに相当します。

■「json データを非同期で取得する」から jQuery オブザーバー モードを体験

ルート ディレクトリには、data.json ファイルがあります。

{
"one" : "こんにちは"、
"two" : "世界"
}
次に、json データを非同期で取得します。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$.getJSON('data.json', function(data) {
console.log(データ);
});
});

グローバル変数を使用して非同期で取得された JSON データを受け取る場合。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
var data;
$.getJSON('data.json', function(results) {
データ = 結果;
});
console.log(データ);
});

今回、得られた結果は未定義でした。これはなぜですか?

--$.getJSON メソッドがまだデータを取得している間に console.log(data) が実行されており、この時点ではデータが存在しないためです。

この問題を解決するにはどうすればよいですか?

--$.getJSONメソッドとは別に実行する必要があるメソッドを定義してから、実際に$.getJSONメソッドのコールバック関数内でこのメソッドをトリガーすれば解決するのではないでしょうか？

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$.getJSON('data.json', function(results) {
$(document).trigger('app.myevent', results) //公開と同等
});
$(document).on('app.myevent', function(e, results) { //サブスクリプションと同等
console.log(結果);
});
});

上記の on メソッドはカスタム イベント app.myevent をサブスクライブするサブスクライバーに似ており、トリガー メソッドはサブスクライバー メソッドが実際に実行される前にイベントとパラメーターを公開するパブリッシャーに似ています。

■ jQuery オブザーバーパターンの拡張メソッド

この目的のために、jQuery オブザーバー パターン専用の拡張メソッドを作成することもできます。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$.getJSON('data.json', function (result) {
$.publish('app.myevent', results);
});
$.subscribe('app.myevent', function(e, results) {
console.log(結果);
});
});
(関数($) {
var o = $({});//カスタム イベント オブジェクト
$.each({
トリガー: '公開'、
上: '購読'、
オフ: '購読解除'
}, function(key, val) {
jQuery[val] = function() {
o[キー].apply(o, 引数);
};
});
})(jQuery);

上記は、いつでも呼び出すことができるグローバル パブリッシュ メソッドとサブスクライブ メソッドを定義しています。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$.getJSON('data.json', function (result) {
$.publish('app.myevent', results);
});
$.subscribe('app.myevent', function(e, results) {
$('body').html(
results.one
);
});
});

要約: jQuery のオブザーバー モードでは、実際には、 on メソッドによってバインドされたカスタム イベントは、トリガー メソッドを使用してイベントをトリガーするまで実行されません。 jQuery のオブザーバー パターンを使用する利点は、一度パブリッシュし、複数回サブスクライブできることです。