Modèles de conception utilisés dans la bibliothèque jQuery

Question

jQuery est très axée sur les DOM et offre une belle abstraction autour d'elle. En agissant de la sorte, il fait usage de divers bien connu des modèles de conception qui vient de me frapper hier. Un exemple évident serait le Décorateur modèle. L'objet jQuery fournit des nouvelles et des fonctionnalités supplémentaires à travers un véritable objet DOM.

Par exemple, le DOM est un natif insertBefore méthode, mais il n'y a pas de méthode insertAfter. Il existe différentes implémentations disponibles pour combler cette lacune, et jQuery est une bibliothèque qui fournit cette fonctionnalité:

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

Il existe de nombreux autres exemples de Décorateur modèle très utilisé en jQuery.

Quels sont les autres exemples, petites ou grandes, des modèles de conception avez-vous remarqué qui font partie de la bibliothèque elle-même? Aussi, veuillez fournir un exemple de l'utilisation de la répétition.

Ce qui en fait un wiki de la communauté car je crois que les diverses choses que les gens aiment à propos de jQuery peut être retracée à bien connu des modèles de conception, juste qu'ils ne sont généralement pas visés par la répétition du nom. Il n'y a pas de réponse unique à cette question, mais de catalogage de ces modèles permettra de fournir un aperçu utile de la bibliothèque elle-même.

Answer 1

Initialisation:

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

L'adaptateur ou le papier d'emballage

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

Façade

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

Observateur

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

Itérateur

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

Stratégie

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

Proxy

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

Constructeur

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

Prototype

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

Poids mouche

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

Answer 2

Le Composite est aussi très couramment utilisés dans jQuery. Après avoir travaillé avec d'autres bibliothèques, je peux voir comment ce modèle n'est pas si évident, comme il semble à première vue. Le modèle dit essentiellement que,

un groupe d'objets doivent être traités de la même façon qu'une seule instance d'un objet.

Par exemple, lorsque l'on traite avec un seul élément du DOM ou un groupe d'éléments du DOM, les deux peuvent être traitées de manière uniforme.

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

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

Answer 3

Comment est le Singleton/motif de Module, tel que discuté dans cet article à propos de YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

Je crois que jQuery utilise ce modèle dans son noyau, ainsi que d'encourager les développeurs de plug-in pour utiliser le modèle. L'utilisation de ce modèle est un outil pratique et efficace de garder l'espace de noms global encombrée, ce qui est encore plus utile en aidant les développeurs à l'écriture propre, encapsulé code.

Answer 4

Aux yeux de la programmation fonctionnelle, jQuery est une Monade. Une monade est une structure qui transmet un objet à une action, renvoie l'objet modifié et le transmet à l'action suivante. Comme une chaîne de montage.

L' article de Wikipedia couvre très bien la définition.