jQueryライブラリで使われているデザインパターン
2023-10-08 19:59:58
質問
jQueryはDOMに非常に重点を置いており、その周りの素晴らしい抽象化を提供しています。その際、よく知られている様々な デザインパターン を利用しています。1 つの明白な例として デコレータ パターンです。jQuery オブジェクトは、通常の DOM オブジェクトの周囲に新しい追加機能を提供します。
例えば、DOMにはネイティブの insertBefore メソッドがありますが、対応する insertAfter メソッドはありません。様々な実装があり 利用可能 があり、jQueryはこの機能を提供するライブラリの1つです。
$(selector).after(..)
$(selector).insertAfter(..)
jQueryでDecoratorパターンが多用されている例は他にもたくさんあります。
ライブラリ自体の一部であるデザインパターンについて、大なり小なり他にどのような例にお気づきになりましたか?また、そのパターンの使用例も教えてください。
私は、人々がjQueryについて愛しているさまざまなことが、よく知られたデザインパターンにさかのぼることができると信じているので、これをコミュニティのwikiにすること、ただ、それらはパターンの名前によって一般的に参照されないことです。この質問に対する答えは1つではありませんが、これらのパターンをカタログ化することで、ライブラリ自体に対する有益な洞察を得ることができます。
どのように解決するのか?
$(document).ready(function(){
$('div.app').myPlugin();
});
$('div').css({
opacity: .1 // opacity in modern browsers, filter in IE.
});
// higher level interfaces (facades) for $.ajax();
$.getJSON();
$.get();
$.getScript();
$.post();
// jQuery utilizes it's own event system implementation on top of DOM events.
$('div').click(function(){})
$('div').trigger('click', function(){})
$.each(function(){});
$('div').each(function(){});
$('div').toggle(function(){}, function(){});
$.proxy(function(){}, obj); // =oP
$('<div class="hello">world</div>');
// this feels like cheating...
$.fn.plugin = function(){}
$('div').plugin();
// CONFIG is shared
$.fn.plugin = function(CONFIG){
CONFIG = $.extend({
content: 'Hello world!'
}, CONFIG);
this.html(CONFIG.content);
}
関連
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】関数型プログラミングはGoFデザインパターンに取って代わるか?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] ECMAScriptとは?
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?