1. ホーム
  2. javascript

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);
}