In der jQuery-Bibliothek verwendete Entwurfsmuster

jQuery konzentriert sich stark auf das DOM und bietet eine schöne Abstraktion. Dabei werden verschiedene bekannte Designmuster verwendet, die mich gestern gerade getroffen haben. Ein naheliegendes Beispiel wäre das Dekorationsmuster . Das jQuery-Objekt bietet neue und zusätzliche Funktionen für ein reguläres DOM-Objekt.

Das DOM verfügt beispielsweise über eine native insertBefore- Methode, es gibt jedoch keine entsprechende insertAfter-Methode. Es gibt verschiedene Ausführungen zur Verfügung , diese Lücke zu füllen, und jQuery ist eine solche Bibliothek , die diese Funktionalität bereitstellt:

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

Es gibt viele andere Beispiele für das Decorator-Muster, das in jQuery häufig verwendet wird.

Welche anderen großen oder kleinen Beispiele für Designmuster sind Ihnen aufgefallen, die Teil der Bibliothek selbst sind? Geben Sie außerdem ein Beispiel für die Verwendung des Musters an.

Dies zu einem Community-Wiki zu machen, da ich glaube, dass verschiedene Dinge, die Menschen an jQuery lieben, auf bekannte Designmuster zurückgeführt werden können, nur dass sie normalerweise nicht mit dem Namen des Musters bezeichnet werden. Es gibt keine Antwort auf diese Frage, aber die Katalogisierung dieser Muster bietet einen nützlichen Einblick in die Bibliothek selbst.

Faule 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

Baumeister

$('<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);
}

Das zusammengesetzte Muster wird auch sehr häufig in jQuery verwendet. Nachdem ich mit anderen Bibliotheken gearbeitet habe, kann ich sehen, dass dieses Muster nicht so offensichtlich ist, wie es auf den ersten Blick aussieht. Das Muster sagt im Grunde, dass,

Eine Gruppe von Objekten ist wie eine einzelne Instanz eines Objekts zu behandeln.

Wenn es sich beispielsweise um ein einzelnes DOM-Element oder eine Gruppe von DOM-Elementen handelt, können beide auf einheitliche Weise behandelt werden.

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

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

Wie wäre es mit dem Singleton / Module-Muster, wie in diesem Artikel über YUI beschrieben: http://yuiblog.com/blog/2007/06/12/module-pattern/

Ich glaube, dass jQuery dieses Muster in seinem Kern verwendet und Plug-In-Entwickler dazu ermutigt, das Muster zu verwenden. Die Verwendung dieses Musters ist eine praktische und effiziente Methode, um den globalen Namespace übersichtlich zu halten. Dies ist außerdem hilfreich, wenn Entwickler beim Schreiben von sauberem, gekapseltem Code unterstützt werden.

In den Augen der funktionalen Programmierung ist jQuery eine Monade. Eine Monade ist eine Struktur, die ein Objekt an eine Aktion übergibt, das geänderte Objekt zurückgibt und an die nächste Aktion weitergibt. Wie ein Fließband.

Der Wikipedia-Artikel behandelt die Definition sehr gut.