Frage Entwurfsmuster, die in der jQuery-Bibliothek verwendet werden


jQuery konzentriert sich stark auf das DOM und bietet eine schöne Abstraktion. Dabei nutzt es verschiedene bekannte Methoden Designmuster Das hat mich gestern getroffen. Ein offensichtliches Beispiel wäre die Dekorateur Muster. Das jQuery-Objekt bietet neue und zusätzliche Funktionen für ein normales DOM-Objekt.

Zum Beispiel hat das DOM eine native einfügenBefore Methode, aber es gibt keine entsprechende 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 bietet:

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

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

Welche anderen Beispiele, große oder kleine, von Designmustern haben Sie bemerkt, die Teil der Bibliothek selbst sind? Geben Sie auch 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ückzuführen sind, nur dass sie nicht allgemein durch den Namen des Musters bezeichnet werden. Es gibt keine eindeutige Antwort auf diese Frage, aber die Katalogisierung dieser Muster bietet einen nützlichen Einblick in die Bibliothek selbst.


76


Ursprung


Antworten:


Lazy Initialisierung:

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

Adapter oder Hülle

$('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

Erbauer

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

89



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

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

Wenn Sie beispielsweise mit einem einzelnen DOM-Element oder einer Gruppe von DOM-Elementen arbeiten, können beide einheitlich behandelt werden.

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

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

13



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

Ich glaube, dass jQuery dieses Muster in seinem Kern verwendet und Plug-in-Entwickler ermutigt, das Muster zu verwenden. Die Verwendung dieses Musters ist eine praktische und effiziente Methode, um den globalen Namensraum frei von Unordnung zu halten. Dies ist außerdem hilfreich, um Entwicklern beim Schreiben von sauberem, gekapseltem Code zu helfen.


5



In den Augen der funktionalen Programmierung ist jQuery eine Monade. Eine Monade ist eine Struktur, die ein Objekt an eine Aktion übergibt, das modifizierte Objekt zurückgibt und es an die nächste Aktion weitergibt. Wie eine Montagelinie.

Das Wikipedia-Artikel deckt die Definition sehr gut ab.


2