Javascript plugins Entwurfsmuster wie jQuery

Könnte jemand ein sehr einfaches grundlegendes Beispiel in Javascript notieren, um zu konzipieren (und hoffentlich lässt mich verstehen), wie das jQuery plugin Entwurfsmuster erfolgt und wie es funktioniert?Javascript plugins Entwurfsmuster wie jQuery

Ich bin nicht interessiert, wie das Erstellen von Plugin für jQuery (so kein jQuery-Code hier überhaupt). Ich interessiere mich für eine einfache Erklärung (vielleicht mit ein wenig Javascript-Code) zu erklären, , wie es das Plugin-Konzept getan wird.

Plz antworte mir nicht zu gehen und jQuery Code zu lesen, habe ich versucht, aber ich es ist zu komplex, sonst hätte ich hier keine Frage stellen.

Danke!

Quelle

2010-05-20 Marco Demaio

Es funktioniert, wie viele andere js Frameworks, mit Javascript-Prototyp-Orientierung.

Zum Beispiel können Sie eine einfache Funktion

var alertHelloWorld = function() { 
    alert('hello world'); 
}

erklären Und es dann zu einem bestehenden Objekt binden (einschließlich DOM-Knoten)

document.doMyAlert = alertHelloWorld;

Wenn Sie das tun

document.doMyAlert();

Die Funktion alertHelloWorld wird ausgeführt

Sie können mehr über JavaScript-Objekt lesen here

Quelle

2010-05-20 11:46:30 Benoit

Leider In Ihrem Beispiel wird kein Prototyping verwendet. Dies funktioniert, weil Funktionen in JavaScript Objekte erster Klasse sind und wie jede andere Variable übergeben und zugewiesen werden können. – adamnfish

Ja, ein Prototypobjekt existiert auf Objekten, die als solche deklariert sind, es funktioniert in ähnlicher Weise. Ich könnte kopieren/einfügen von der unteren Verknüpfung Object.prototype.inObj = 1; Funktion A() { this.inA = 2; } A.prototype.inAProto = 3; B.prototyp = neu A; // Einbinden von A in B's Prototyp-Kette B.prototype.constructor = B; Funktion B() { this.inB = 4; } B.prototype.inBProto = 5; x = neu B; document.write (x.inObj + ',' + x.inA + ',' + x.inAProto + ',' + x.inB + ',' + x.inBProto); – Benoit

jQuery Prototyping verfügt über eine Bibliothek von in einem internen Objekt gespeicherten Funktionen namens fn. Dies sind diejenigen, die Sie für jedes jQuery-Objekt aufrufen können. Wenn Sie $("div.someClass") tun, erhalten Sie ein jQuery-Objekt, das alle <div> Elemente dieser Klasse enthält. Jetzt können Sie $("div.someClass").each(someFunction) tun, um someFunction zu jedem von ihnen anzuwenden. Dies bedeutet, dass each() eine der in fn gespeicherten Funktionen ist (in diesem Fall eine eingebaute).

Wenn Sie das interne Objekt fn erweitern (hinzufügen), dann stellen Sie Ihre benutzerdefinierte Funktion automatisch derselben Syntax zur Verfügung. Nehmen wir an, Sie haben eine Funktion, die alle Elemente auf der Konsole protokolliert: log(). Sie können diese Funktion an $.fn anhängen und dann als $("div.someClass").log() verwenden.

Jede Funktion zum fn Objekt angehängt wird so gestellt, dass innerhalb der Funktionskörper, der this Schlüsselwort auf das jQuery-Objekt zeigen, wird verwendet haben.

Üblicherweise wird this am Ende der benutzerdefinierten Funktion zurückgegeben, damit die Methodenverkettung nicht bricht: $("div.someClass").log().each(someFunction).

Es gibt mehrere Möglichkeiten, Funktionen an das Objekt $.fn anzuhängen, einige sicherer als andere. Ein ziemlich sicher ist zu tun:

jQuery.fn.extend({ 
    foo: function() { 
    this.each(function() { console.log(this.tagName); }); 
    return this; 
    } 
})

Quelle

2010-05-20 11:51:50 Tomalak

Tomalak schon fast alles geschrieben Sie wissen müssen.

Es gibt eine letzte Sache, die jQuery hilft, den Trick mit dem dieses Schlüsselwort zu tun.

ist es AMethod genannt gelten()

var somefunction=function(){ 
alert(this.text); 
} 
var anObject={text:"hello"}; 

somefunction.apply(anObject); 
//alert "hello" will happen

Es hilft wirklich Abstraktionen zu schaffen, damit framework/Plugin Benutzer nur dieses verwenden würde als Intuition ihnen sagt, was auch immer es ist in Ihrem Code

Quelle

2010-05-20 11:58:45 naugtur

Javascript plugins Entwurfsmuster wie jQuery

Antwort

Verwandte Themen