Entwurfsmuster, die in der jQuery-Bibliothek verwendet werden

jQuery ist sehr fokussiert auf den DOM und bietet eine schöne Abstraktion um ihn herum. Dabei macht es die Verwendung von verschiedenen bekannten design patternsdas traf mich gestern. Ein offensichtliches Beispiel wäre die Decorator Muster. Das jQuery-Objekt bietet neue und zusätzliche Funktionalität, um einen regelmäßigen DOM-Objekt.

Beispielsweise der DOM hat eine native insertBefore Methode, aber es gibt keine entsprechenden insertAfter-Methode. Es gibt verschiedene Implementierungen verfügbar um diese Lücke zu füllen, und jQuery ist eine solche Bibliothek, die diese Funktionalität bereitstellt:

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

Gibt es noch viele andere Beispiele, die Dekorator-Muster stark verwendet wird, die in jQuery.

Welche anderen Beispiele, groß oder klein, von design patterns haben Sie bemerkt, dass ein Teil von der Bibliothek selbst? Auch, bitte geben Sie ein Beispiel für die Verwendung der Muster.

So dass dies ein community-wiki, da ich glaube, dass verschiedene Dinge, die Menschen lieben jQuery zurückverfolgt werden können, um bekannte design-patterns, nur, dass Sie sich nicht gemeinhin durch das Muster der name. Es gibt keine eine Antwort auf diese Frage, aber Katalogisierung diese Muster geben einen nützlichen Einblick in die Bibliothek selbst.

InformationsquelleAutor der Frage |

  1. 89

    Lazy-Initialisierung:

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

    Adapter oder wrapper

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

    Fassade

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

    Beobachter

    //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(){});

    Strategie

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

    Proxy

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

    Builder

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

    Prototyp

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

    Fliegengewicht

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

    InformationsquelleAutor der Antwort

  2. 13

    Den Composite Muster ist auch sehr Häufig in jQuery. Durch die Zusammenarbeit mit anderen Bibliotheken, ich kann sehen, wie das Muster ist nicht so offensichtlich, wie es aussieht auf den ersten Blick. Das Muster der im Grunde sagt, dass,

    einer Gruppe von Objekten behandelt werden in der gleichen Weise wie eine einzelne Instanz eines Objekts.

    Zum Beispiel, wenn Sie sich mit einem einzigen DOM-element oder eine Gruppe von DOM-Elementen, die beide behandelt werden können, in einer einheitlichen Art und Weise.

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

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

    InformationsquelleAutor der Antwort

  3. 5

    Wie über die Singleton - /Modul-Muster, wie in diesem Artikel beschrieben über YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

    Glaube ich jQuery verwendet dieses Muster in seinem Kern, sowie die Förderung von plug-in-Entwickler die Verwendung der Muster. Mit diesem Muster ist eine praktische und effiziente Weg, um den globalen Namensraum frei von Unordnung, die ist weiter nützlich, indem die Entwickler schreiben saubere, gekapselte code.

    InformationsquelleAutor der Antwort

  4. 2

    In den Augen der funktionalen Programmierung, jQuery ist eine Monade. Eine Monade ist eine Struktur, übergibt ein Objekt, um eine Aktion, gibt das modifizierte Objekt und übergibt es an die nächste Aktion. Wie am Fließband.

    Den Wikipedia-Artikel umfasst die definition sehr gut.

    InformationsquelleAutor der Antwort

Schreibe einen Kommentar