web-dev-qa-db-ja.com

jQueryライブラリで使用されるデザインパターン

jQueryはDOMに重点を置いており、DOMを中心にすてきな抽象化を提供します。そうすることで、よく知られているさまざまな デザインパターン を利用します。明らかな例の1つは、 Decorator パターンです。 jQueryオブジェクトは、通常のDOMオブジェクトを取り巻く新しい機能と追加の機能を提供します。

たとえば、DOMにはネイティブの insertBefore メソッドがありますが、対応するinsertAfterメソッドはありません。さまざまな実装があります available このギャップを埋めるために、jQueryはこの機能を提供するライブラリの1つです。

$(selector).after(..)
$(selector).insertAfter(..)

JQueryで頻繁に使用されているDecoratorパターンの例は他にもたくさんあります。

ライブラリ自体の一部である、デザインパターンの大小を問わず、他にどのような例に気付きましたか？また、パターンの使用例も提供してください。

人々がjQueryについて好きなさまざまなものは、よく知られているデザインパターンにまでさかのぼることができると信じているので、これをコミュニティWikiにします。この質問に対する答えは1つではありませんが、これらのパターンをカタログ化することにより、ライブラリ自体の有用な洞察が得られます。

javascriptjquerydesign-patterns
78
Anurag

遅延初期化：

$(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);
}
92
BGerrissen

Composite パターンもjQueryで非常に一般的に使用されています。他のライブラリと連携して、このパターンが一見するとそれほど明白ではないことがわかります。このパターンは基本的に、

オブジェクトのグループは、オブジェクトの単一インスタンスと同じ方法で処理されます。

たとえば、単一のDOM要素またはDOM要素のグループを扱う場合、両方を同じ方法で処理できます。

$('#someDiv').addClass('green'); // a single DOM element

$('div').addClass('green');      // a collection of DOM elements
14
Anurag

YUIについてのこの記事で説明したシングルトン/モジュールパターンについてはどうですか。 http://yuiblog.com/blog/2007/06/12/module-pattern/

JQueryはコアでこのパターンを使用しているだけでなく、プラグイン開発者にパターンの使用を奨励していると思います。このパターンを使用すると、グローバルな名前空間を整理された状態に保つ便利で効率的な方法です。これは、開発者がクリーンでカプセル化されたコードを書くのを支援することでさらに役立ちます。

6
Ender

関数型プログラミングの観点では、jQueryはMonadです。 Monadは、オブジェクトをアクションに渡し、変更されたオブジェクトを返し、次のアクションに渡す構造です。組立ラインのように。

ウィキペディアの記事 は、定義を非常によくカバーしています。

2
nimrod