funktion mit unterfunktion :S

[Name]

Hi weis jemand wie man eine Funktion mit einer Unterfunktion zum laufen kriegt? Sry mir fällt grad nix passenderes ein das zu beschreiben. Habs mal so probiert was leider nicht funktioniert:

var a = function(id) {
      var b = document.getElementById(id);
      red : function() {
            b.style.color = 'red';
      },
      blue : function() {
            b.style.color = 'blue';
      }
}

window.onload = function() { a('test').red(); }

Im body dann halt noch:

<span id="test">Irgendein schwarzer Text der rot werden soll</span>

Wie das mit einer Funktion also quasi a('test','red') gehen würd weis ich nur so möcht ichs nicht ich will halt functionA().functionB()

[ChrisB]

Hi,

Hi weis jemand wie man eine Funktion mit einer Unterfunktion zum laufen kriegt? Sry mir fällt grad nix passenderes ein das zu beschreiben.

Objekt und Methode sind die gaengigen Bezeichner.

Wie das mit einer Funktion also quasi a('test','red') gehen würd weis ich nur so möcht ichs nicht ich will halt functionA().functionB()

Nein, das waere beim gezeigten Code kaum sinnvoll.

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/
http://aktuell.de.selfhtml.org/artikel/javascript/oomodell/
seien als Lektuere zum grundlegenden Verstaendnis empfohlen.

MfG ChrisB

[ChrisB]

Hi,

ich will halt functionA().functionB()

Nein, das waere beim gezeigten Code kaum sinnvoll.

OK, waere es ggf. dann, wenn du damit erst mal eine neues Instanz eines Objektes functionA erzeugen, und direkt anschliessend seine Methode functionB ausfuehren lassen willst.

new functionA().functionB();

MfG ChrisB

[molily]

Hallo,

ich will halt functionA().functionB()

Dann muss jede Funktion ein Objekt zurückgeben, das wieder diese Funktionen hat.

http://www.dustindiaz.com/roll-out-your-own-interface/

Mathias

[Name]

http://www.dustindiaz.com/roll-out-your-own-interface/

Irgendwie kapier ich das nicht so kann auch damit zusammenhängen das mein englisch auch nicht sehr gut ist :'( Kannst du mir vieleicht genauer erklären wie ich mein Script umschreiben kann damit es funktioniert??

[molily]

Hallo,

Kannst du mir vieleicht genauer erklären wie ich mein Script umschreiben kann damit es funktioniert??

Das Mitdenken kann ich dir nicht abnehmen. ;)

Die nötige Info habe ich dir schon gegeben: »Dann muss jede Funktion ein Objekt zurückgeben, das wieder diese Funktionen hat.«

Okay, also muss a ein Objekt zurückgeben. Du hast schon eine Andeutung gemacht, so ein Objekt zu erzeugen, mit der Object-Literalschreibweise.

Dann bau das auch zuende. Da fehlten nur die Klammern:

{  
  red : function() {  
    b.style.color = 'red';  
  },  
  blue : function() {  
    b.style.color = 'blue';  
  }  
}

(Warum du da b schreiben kannst, werden wir gleich sehen.)

Jetzt, und da kommt mein Tipp, gibst du dieses Objekt als Rückgabewert zurück:

return {  
  red : function() {  
    b.style.color = 'red';  
  },  
  blue : function() {  
    b.style.color = 'blue';  
  }  
};

Den Rest der Funktion hast du bereits.

Okay, warum kannst du einfach b zum Zugriff auf das Element benutzen? Wenn diese in der Funktion a notierten Funktionen als Closures wirken und die Funktionsvariablen von a nach dessen Ausführung noch konserviert werden, sodass red und blue über b auf das richtige Elementobjekt Zugriff haben.

Damit kannst du a("id").blue() schreiben.

Langfristig solltest du dich aber an das verlinkte Konzept gewöhnen.

Damit ist auch $("id").blue().red().yellow() und so weiter möglich. Das ist natürlich nur sinnig, wenn man mehrere Operationen mit demselben Element vornehmen will. Also wenn du irgendwann auf die Idee kommst, neben red und blue noch weitere Funktionen anzulegen, die du in einer Kette aufrufen willst, dann nimm das verlinkte Gerüst. Das sähe auf dem Stand deiner Anforderungen so aus:

(function() {  
  
  function _$ (id) {  
   this.element = document.getElementById(id);  
  }  
  
  _$.prototype = {  
  
    red : function () {  
      this.element.style.color = 'red';  
      return this;  
    }.  
  
    blue : function () {  
      this.element.style.color = 'blue';  
      return this;  
    }  
  
  };  
  
  window.$ = function (id) {  
    return new _$(id);  
  }  
  
})();

Hier wird objektorientiert gearbeitet und das bekannte Object als Prototyp definiert. Ruft man $("id") auf, wird ein neues Objekt mit dem Konstruktor _$ angelegt. Im Konstuktor wird die Instanz-Eigenschaft element gesetzt, darin wird das Element gespeichert. In den Methoden red und blue greift man auf dieselbe Weise wieder darauf zu. Für die Verkettung entscheidend ist, dass blur und red die Instanz wieder zurückgeben. $("bla") hat also denselben Rückgabewert wie $("bla").red() usw.
Das ganze ist mit einer anonymen Funktion umschlossen, die sofort ausgeführt wird. Sinn davon ist, dass _$ keine globale Variable wird, sondern nur $.

Mathias

[Name]

Vielen Dank! dieses return {} dings hat ja nur gefehlt aber eine Frage noch wenn ich das andere da benutzen will was du mir gegeben hast dieses

(function() {

function _$ (id) {
   this.element = document.getElementById(id);
  }

_$.prototype = {

red : function () {
      this.element.style.color = 'red';
      return this;
    }.

blue : function () {
      this.element.style.color = 'blue';
      return this;
    }

};

window.$ = function (id) {
    return new _$(id);
  }

})();

wie soll ich das denn einsetzen? und heist meine funktion dann nicht mehr a() sondern $() ??

[molily]

Hallo,

wie soll ich das denn einsetzen? und heist meine funktion dann nicht mehr a() sondern $() ??

Ja. Hatte ich das nicht in meinen Erklärungen erwähnt? ;)

Du kannst sie natürlich nennen, wie du willst, du siehst ja, an welcher Stelle der Name vergeben wird:
window.$ = ...
Da kannst du auch nach Belieben auch window.a oder window.husseldiguggeldidu hinschreiben.

Mathias