Modelli di progettazione utilizzati nella libreria jQuery

Question

jQuery è altamente focalizzato sul DOM e fornisce una bella astrazione attorno ad esso. In tal modo, fa uso di vari ben noti che mi ha colpito ieri. Un esempio ovvio potrebbe essere il modello Decorator. L'oggetto jQuery fornisce funzionalità nuove e aggiuntive attorno ad un normale oggetto DOM.

Ad esempio, il DOM ha un metodo nativo insertBefore ma non esiste un metodo insertAfter corrispondente. Ci sono varie implementazioni available per colmare questa lacuna, e jQuery è una tale libreria che fornisce questa funzionalità:

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

Ci sono molti altri esempi del motivo decoratore essendo molto utilizzati in jQuery.

Quali altri esempi, grandi o piccoli, di modelli di progettazione hai notato che fanno parte della libreria stessa? Inoltre, si prega di fornire un esempio dell'uso del modello.

Rendere questo un wiki della comunità come credo che le varie cose che la gente ama di jQuery possono essere ricondotte a modelli di design ben noti, solo che non sono comunemente indicati con il nome del modello. Non esiste una risposta a questa domanda, ma la catalogazione di questi modelli fornirà una utile visione della biblioteca stessa.

Answer 1

Lazy Initialization:

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

Adapter or wrapper

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

Facade

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

Observer

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

Iterator

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

Strategy

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

Proxy

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

Builder

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

Prototype

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

Flyweight

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

Answer 2

Come circa il pattern Singleton/modulo, come discusso in questo articolo su YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

Credo jQuery utilizza questo schema nel suo nucleo, nonché incoraggiando plug-in sviluppatori di utilizzare il pattern. L'utilizzo di questo modello è un modo pratico ed efficiente per mantenere lo spazio dei nomi globale libero da clutter, che è ulteriormente utile aiutando gli sviluppatori a scrivere codice pulito e incapsulato.

Answer 3

Il modello Composite è anche molto usato in jQuery. Avendo lavorato con altre biblioteche, posso vedere come questo modello non è così ovvio come sembra a prima vista. In pratica, il modello dice che,

un gruppo di oggetti deve essere trattato allo stesso modo di una singola istanza di un oggetto.

Ad esempio, quando si ha a che fare con un singolo elemento DOM o un gruppo di elementi DOM, entrambi possono essere trattati in modo uniforme.

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

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

Answer 4

Negli occhi di programmazione funzionale, jQuery è una Monade. Una Monade è una struttura che passa un oggetto a un'azione, restituisce l'oggetto modificato e lo passa all'azione successiva. Come una catena di montaggio.

Il Wikipedia article copre molto bene la definizione.