Huhu zusammen,

ich wollte mal Fragen ob jemand ein Tutorial kennt wie man sein eigenes kleines Framework basteln kann.
Mir geht es darum, dass ich es hasse etwas einfach zu benutzen ohne zu verstehen, wie es funktioniert. Beste Beispiel ist jQuery. Überall wird's eingesetzt und kaum einer versteht was da passiert.

Und ich würde mal gerne wissen, wie so etwas funktioniert.
Wie macht jQuery z.b. dass dinge mit $ aufgerufen werden?

Das Problem ist, wenn man danach googelt wird man mit Beispiel und sonstigen Mist zugeworfen. Wie es aber wirklich funktioniert, weiß ich nicht..

Bin sehr dankbar für eure Tipps

paD

Code :

1 2 3

function $(id) {     return document.getElementById(id); }

definiert z.B. einfach eine Funktion, deren Name "$" ist und die dann etwa als

Code :

1

$('el1')

aufgerufen werden kann. Das ist ein legaler Funkionsname, allerdings besagte die ECMAScript-Spezifikation in Ausgabe 3, dass solche Namen nur von Maschinen-generiertem Code benutzt werden sollen. In der Ausgabe 5 der ECMAScript-Spezifikation hat man diese Einschränkung allerdings entfernt.

Okay, dass ist wirklich sehr einfach

Aber wie funktioniert dann z.b. dass:

Code javascript:

1 2 3

$('#a').click = function() {   }

Klar, das #a kann als Parameter übergeben.. Aber bei dem .click hört es mit dem Verstehen wieder auf

Selbst wenn ich mir die jQuery.js jetzt anschaue und das mit dem $ verstehe. Will mir das mit dem .click nicht so ganz gefallen.

Ich sehe irgendwie, dass die Funktion in Funktion aufruft und dadurch die Parameter übergeben werden. Aber wenn ich das versuche in vereinfachter form nach zu programmieren, schaff ich es einfach nicht.

paD

Hallo,

du könntest mal einen Blick auf den (unkomprimierten) Quelltext werfen:
http://code.jquery.com/jquery-1.7.1.js
(Bzw. auf der Startseite "Development" wählen und "Download" drücken).

Zum "Finden" der Elemente via Selektoren (#id, .class, [attr], ...) benutzt jQuery das Sizzle Framework.

Ein Tutorial für ein eigenes JS-Framework kenne ich jetzt nicht, aber hier habe ich dir mal ein kleines Beispiel geschrieben.


Edit:

click ist selbst auch nur eine Methode des jQuery-Objekts.
Vereinfacht schaut das wahrscheinlich so aus:

Code javascript:

1 2 3 4

jQueryObj.prototype.click = function( func ) {   func(); }

Wow, danke!
Dein Beispiel erklärt echt einiges.

Allerdings verstehe ich nicht wofür:

_$.prototype.html = function(str)
ist, bzw. wo es aufgerufen wird.

Und wie jQuery es macht, dass man statt domElement.addEventlistener einfach
$("select").chance = function () ...
schreiben kann..?

Ich meine, wäre nicht so tragisch, aber einfacher ist es schon.
Ich müsste in der $id das addEventListener einbauen oder..?

paD

Ja gut, die html-Methode rufe ich in dem Beispiel nie auf.

Hier noch einmal mit html()-Aufruf: http://jsfiddle.net/hvwXH/2/.

Und wie jQuery es macht, dass man statt domElement.addEventlistener einfach
$("select").chance = function () ...
schreiben kann..?

Da werden wahrscheinlich bei der Initialisierung die Funktionen gesetzt. Vielleicht schreibe ich auch noch ein Beispiel

Zitat von String

Und wie jQuery es macht, dass man statt domElement.addEventlistener einfach
$("select").chance = function () ...
schreiben kann..?

Kann man nicht. Es heißt

Code javascript:

1 2 3

$("select").change(function() {     // });

Was nur ein weiterer Methodenaufruf ist, dem eine Funktion übergeben wird. Und .change ist ein alias für

Code javascript:

1 2 3

$("select").on('change', function() {     // });

Und wenn du in den Code guckst (wie ComFreek gesagt hat), findest du dort (bei .on) den Aufruf "jQuery.event.add", was in seinen Tiefen dann tatsächlich folgenden, von dir gesuchten, Code versteckt.

Code javascript:

1 2 3 4 5

if ( elem.addEventListener ) {     elem.addEventListener( type, eventHandle, false ); } else if ( elem.attachEvent ) {     elem.attachEvent( "on" + type, eventHandle ); }

Okay, gut - so langsman komm ich weiter, danke dafür
Das Problem ist nicht, dass ich nicht in die jQuery Datei geschaut habe, sondern nicht wusste wonach ich suchen konnte.

Ich werd mal weiter rum Probieren und bald posten wie weit ich komme oder obs wieder irgendwo hängt

paD

Bin mittlerweile ne ganze ecke schneller.

Noch ein bisschen Zeit und mein Framework steckt jQuery locker weg *lach*.
Nein quatsch. Aber mittlerweile verstehe ich dir Vorgehensweise und hab auch schon einiges geschafft.

Thread erledigt

paD