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

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 les modèles de conception qui vient de me frapper hier. Un exemple évident serait la 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 disponible 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.

InformationsquelleAutor |
  1. 91

    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);
}
    • agréable d'y travailler 🙂 .. je pense que la Façade modèle pour $.ajax ressemble à la méthode de Modèle modèle que nous avons des fonctionnalités de base, et chaque méthode supplémentaire comme $.get remplace la base et le rend plus précis.
    • Ouai, beaucoup de méthodes jQuery et effectivement JavaScript en général peut se conformer à une multitude de modèles de conception à la fois. C'est un excellent exemple de la puissance expressive de JavaScript en général et comment la programmation fonctionnelle peut compléter la programmation orientée objet. =)
    InformationsquelleAutor
  2. 14

    La Composite modèle est également 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
    InformationsquelleAutor
  3. 6

    Comment sur 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 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.

    • jQuery utilise le motif de Module, à divers endroits, dans son cœur, et recommande également pour les développeurs de plugin pour plus de trivial plugins. Belle trouvaille 🙂
    InformationsquelleAutor
  4. 2

    Dans les yeux de la programmation fonctionnelle, jQuery est une Monade. Une Monade est une structure qui passe d'un objet à une action, renvoie l'objet modifié et passe à l'action suivante. Comme une ligne d'assemblage.

    La Article de Wikipedia couvre la définition très bien.

    • Je pense que la monade signifie ici le chaînage de la capacité de la bibliothèque!
    • C'est exactement ce que je suis en train de décrire ici.
    InformationsquelleAutor