ti-enxame.com

Padrões de design usados ​​na biblioteca jQuery

o jQuery é altamente focado no DOM e fornece uma boa abstração ao seu redor. Ao fazer isso, ele usa vários conhecidos padrões de design que me atingiram ontem. Um exemplo óbvio seria o padrão Decorator . O objeto jQuery fornece funcionalidade nova e adicional em torno de um objeto DOM comum.

Por exemplo, o DOM possui um método nativo insertBefore mas não há um método insertAfter correspondente. Existem várias implementações disponível para preencher essa lacuna, e o jQuery é uma dessas bibliotecas que fornece essa funcionalidade:

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

Existem muitos outros exemplos do padrão Decorator sendo muito usado no jQuery.

Que outros exemplos, grandes ou pequenos, de padrões de design você notou que fazem parte da própria biblioteca? Além disso, forneça um exemplo do uso do padrão.

Tornando este um wiki da comunidade, pois acredito que várias coisas que as pessoas adoram no jQuery podem ser rastreadas até padrões de design conhecidos, apenas que eles não são comumente referidos pelo nome do padrão. Não há uma resposta para essa pergunta, mas a catalogação desses padrões fornecerá uma visão útil da própria biblioteca.

78
Anurag

Inicialização lenta:

$(document).ready(function(){
    $('div.app').myPlugin();
});

Adaptador ou invólucro

$('div').css({
    opacity: .1 // opacity in modern browsers, filter in IE.
});

Fachada

// higher level interfaces (facades) for $.ajax();
$.getJSON();
$.get();
$.getScript();
$.post();

Observador

// jQuery utilizes it's own event system implementation on top of DOM events.
$('div').click(function(){})
$('div').trigger('click', function(){})

Iterador

$.each(function(){});
$('div').each(function(){});

Estratégia

$('div').toggle(function(){}, function(){});

Proxy

$.proxy(function(){}, obj); // =oP

Construtor

$('<div class="hello">world</div>');

Protótipo

// this feels like cheating...
$.fn.plugin = function(){}
$('div').plugin();

peso da mosca

// CONFIG is shared
$.fn.plugin = function(CONFIG){
     CONFIG = $.extend({
         content: 'Hello world!'
     }, CONFIG);
     this.html(CONFIG.content);
}
92
BGerrissen

O padrão Composite também é muito usado no jQuery. Tendo trabalhado com outras bibliotecas, posso ver como esse padrão não é tão óbvio quanto parece à primeira vista. O padrão basicamente diz que,

um grupo de objetos deve ser tratado da mesma maneira que uma única instância de um objeto.

Por exemplo, ao lidar com um único elemento DOM ou um grupo de elementos DOM, ambos podem ser tratados de maneira uniforme.

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

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

Que tal o padrão Singleton/Módulo, conforme discutido neste artigo sobre YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

Acredito que o jQuery use esse padrão em sua essência, além de incentivar os desenvolvedores de plug-ins a usar o padrão. O uso desse padrão é uma maneira prática e eficiente de manter o espaço de nomes global livre de desordens, o que é ainda mais útil ao ajudar os desenvolvedores a escrever código limpo e encapsulado.

6
Ender

Aos olhos da programação funcional, o jQuery é uma mônada. Uma Mônada é uma estrutura que passa um objeto para uma ação, retorna o objeto modificado e o passa para a próxima ação. Como uma linha de montagem.

O artigo da Wikipedia cobre a definição muito bem.

2
nimrod