[jQuery] - Selektor Prinzip bzw. Struktur von jQuery nachbilden

[Munch]

hi,

also ich versuch jetzt seit einiger Zeit die Methodik die hinter jQuery steckt herauszufinden. Der Grund: Ich denke das die Jungs wissen wie man am effektivsten mit JavaScript Programmiert und möchte schauen, ob man den Stiel auch für eigene Projekte nutzen kann.
Dafür hab ich mich erstmal mit Prototypen beschäftigt und anschließend eingehend den Quellcode von jQuery Core unter http://code.jquery.com/jquery-1.4.2.js studiert. Ich meine das Prinzip auch verstanden zu haben, allerdings ist es mir nicht möglich es nach zu bilden. Dafür hab ich folgendes gemacht:

var $=function() { return new $.fn.init(); };

$.fn = $.prototype = {
	init: function(obj) {
		alert("init");
		return(this);
	},
	test: function() {
		alert("Test OK");
	}
};
//So gehts leider auch nicht:
$.prototype.test2 = function() {
	alert("Test2 OK");
};


function main() {	
	$(); 		//Geht
	$.fn.test();	//Geht
	$().test();	//Erste Funktion geht, zweite nicht
	$.test();	//Geht nicht
	$().test2();	//Geht nicht
}

Nach meinem verständnis müsste die $-Funktion durch das Prototyp argument die funktion test "erben", allerdings geschieht das nicht. Ich kann einfach nicht direkt auf die Funktion zugreifen, auch nicht wenn ich nur per $.test() darauf zugreife. Woran liegt das? Was mach ich falsch?

Grüße
Jan

 

[Sven Mintel]

Moin Jan,

folgende, vielleicht etwas unscheinbare, aber wichtige Zeile hast du nicht berücksichtigt:

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

Wenn du diese in dein Skript einfügst, funktioniert es wie gewünscht, bis auf dies:

$.test();

....denn $ besitzt keine Methode namens test(), es ist eine Methode seines Members prototype.

Du kommst dort möglicherweise durcheinander mit anderen Dingen, die du über das Wörtchen prototype gelesen hast, es spielt ja eine spezielle Rolle in JS.

Damit kannst du Objekte erweitern.
Aber:
greifst du so zu:

$.irgendwas()

...liefert das $ lediglich das Function-Objekt, diesem Funktionsobjekt wurde per prototype lediglich ein Member zugewiesen mit dem Namen prototype.
Um das $-Funktions-Objekt echt per prototype zu Erweitern, müsstest du dies auch über das den Prototype des Function-Objektes machen:

Function.prototype.foo='bar';

...was sich auf sämtliche Funktionen auswirken würde.

greifst du aber so zu:

$().irgendwas()

...liefert dir $() ein Object-Objekt ...., dieses besitzt die Eigenschaften, um die du es erweitert hast...das Wörtchen "prototype" hat dort seine Wirkung entfaltet, die es in JS von Hause aus hat.

 

[Munch]

Hi,

doch noch ne Frage...

Gibt es für diese Art der JavaScript Programmierung irgendeinen Namen, so das ich mich da mal weiter einlesen kann?

Mich würden auch Bücher interressieren wo man sowas nachlesen könnte.

Grüße
Jan

 

[Sven Mintel]

Mmmh, ein spezieller Name dafür ist mir noch nicht begegnet, javascript+oop dürfte dir guten Lesestoff liefern.
Eine gute Anlaufstelle dürfte auf jeden Fall Douglas Crockford sein, Bücher hat er auch geschrieben.