Sinnvolle jQuery-Struktur

[Siri]

Hallo,

wie schaut denn eine sinnvolle jQuery-Struktur für ein Miniframework aus (fang gerade an mich einzuarbeiten)?

Ansatz (nur mal so als Beispiel!):

$(document).ready(function(){  
  
  // Vorbereiten einer Diashow für alle Element der Klasse "dia-show"  
  $(".dia-show").dosomething  
  ...  
  
  //Starte Diashow  
  $(".dia-show-starter").click(function(){  
    // Anweisungen für Diashow-Ablauf  
  
  });	  
  
  
  // Vorbereiten von Elementen, die ein parallax-scrolling der Seite ermöglichen  
  $(".parallax-element").dosomething  
  ...  
  
  //Starte Parallax-Scrolling  
  $(".parallax-scrolling-starter").click(function(){  
    // Anweisungen für Diashow-Ablauf  
  
  });	  
  
 // uswundsofort  
  
  
})  

Das wird ja sehr bald sehr unübersichtlich...

Also, neuer Ansatz:

$(document).ready(function(){  
  
 (function() {  
    // Vorbereiten einer Diashow für alle Element der Klasse "dia-show"  
    $(".dia-show").dosomething  
    ...  
  
    //Starte Diashow  
    $(".dia-show-starter").click(function(){  
      // Anweisungen für Diashow-Ablauf  
  
    });	  
  })();  
  
 (function() {  
    // Vorbereiten von Elementen, die ein parallax-scrolling der Seite ermöglichen  
    $(".parallax-element").dosomething  
    ...  
  
    //Starte Parallax-Scrolling  
    $(".parallax-scrolling-starter").click(function(){  
      // Anweisungen für Diashow-Ablauf  
  
    });	  
  
 })();  
 // uswundsofort  
  
  
})

Jetzt habe ich es "optisch gruppiert", aber mehr auch nicht... Soll man überhaupt alle Anweisungen inerhalb einem
$(document).ready(function(){})
schreiben oder besser für jeden Part (im Beispiel: Diashow und Parallax-Scrolling) ein eigenes
$(document).ready(function(){})
verwenden?

Und soll man die function direkt hier reinschreiben:

    $(".dia-show-starter").click(function(){  
  
  
    });	

oder besser eine funtion aufrufen?

    $(".dia-show-starter").click(  
  
       var diashow = new diaShow();  
       diashow.start();  
    );	  

In erster Linie gehts mir um Übersichtlichkeit und Wartbarkeit. Wie macht ihr das?

Viele Grüße
Siri

[molily]

Hallo,

jQuery bietet einem wenig zur Strukturierungsmöglichkeiten. Klar, es gibt $(document).ready() und selbstausführende Funktionen (function() {})(). Aber das sind eigentlich keine Werkzeuge, um JavaScript-Code in Modulen zu strukturieren. Dafür gibt es eigene Techniken. Siehe meine JavaScript-Doku zur Organisation von JavaScripten, speziell:

• Module und Kapselung
• Konstruktoren, Prototypen und Instanzen (Pseudoklassen)

$(".dia-show-starter").click(

var diashow = new diaShow();
       diashow.start();
    );

  
Das wäre ein Beispiel für Pseudoklassen. Das kann man so machen, ja. Wobei die Diashow auch das Event-Handling übernehmen sollte. Von außen kann das konfigurierbar sein. Beispielsweise:  
  
~~~javascript
var diashow = new DiaShow({ starter: '.dia-show-starter' });  
diashow.start();

Grüße,
Mathias

[Siri]

Hallo,

jQuery bietet einem wenig zur Strukturierungsmöglichkeiten. Klar, es gibt $(document).ready() und selbstausführende Funktionen (function() {})(). Aber das sind eigentlich keine Werkzeuge, um JavaScript-Code in Modulen zu strukturieren. Dafür gibt es eigene Techniken. Siehe meine JavaScript-Doku zur Organisation von JavaScripten, speziell:

OK! Wenn ich das richtig verstanden habe, dann komme ich zu folgendem Ansatz:

var TestFW = (function () {  
  
  function init() {	  
    $(".dia-show-starter").click(  
       var diashow = new DiaShow();  
       diashow.startShow();  
    );   	  
  }  
	  
  function DiaShow() {  
	  
    this.startShow = function() {  
      //doSomething with JS and JQ	  
    }		  
		  
    this.stopShow() {  
		  
    }  
	  
  }  
	  
  return {				  
    afterLoad: function() {		  
      init();	  
    }		  
  }			  
	  
})();	  
  
$(document).ready(function(){  
	TestFW.afterLoad  
}

Wobei man sicher in diesem kleinen Beispiel auf function init() verzichten könnte und alles im return/afterLoad starten könnte.

...Das kann man so machen, ja. Wobei die Diashow auch das Event-Handling übernehmen sollte. Von außen kann das konfigurierbar sein. Beispielsweise:

var diashow = new DiaShow({ starter: '.dia-show-starter' });

diashow.start();

Das habe ich nicht richtig verstanden! Ich möchte doch über alle Elemente der Klasse "dia-show-starter" loopen und eine neue Diashow instantiieren. Wie kann ich da das Eventhandling mit übergeben?  
  
Danke und viele Grüße  
Siri  

[unknown]

OK! Wenn ich das richtig verstanden habe, dann komme ich zu folgendem Ansatz:

TestFW und die anonyme Funktion brauchst du auch nicht.

...Das kann man so machen, ja. Wobei die Diashow auch das Event-Handling übernehmen sollte. Von außen kann das konfigurierbar sein. Beispielsweise:

var diashow = new DiaShow({ starter: '.dia-show-starter' });

diashow.start();

> Das habe ich nicht richtig verstanden! Ich möchte doch über alle Elemente der Klasse "dia-show-starter" loopen und eine neue Diashow instantiieren. Wie kann ich da das Eventhandling mit übergeben?  
  
Bei click willst du ja auch keine neue Diashow instantiieren, sondern deine starten.  
  
function DiaShow(starter) {  
  this.startShow = function() {  
    //doSomething with JS and JQ	  
  }		  
  var diashow = this;  
  $(starter).click(  
    diashow.startShow();  
  );  
}  
  
Und bei Doc-Ready musst du nur noch sagen, dass du eine Diashow mit den entsprechenden Bildern haben möchtest.  
  
$(document).ready(function(){  
  new DiaShow(".dia-show-starter");  
}  

[Siri]

Hallo,

Und bei Doc-Ready musst du nur noch sagen, dass du eine Diashow mit den entsprechenden Bildern haben möchtest.

$(document).ready(function(){
  new DiaShow(".dia-show-starter");
}

Nein, es geht nicht darum, dass auf der Seite EINE neue DiaShow ist, die ich kenne und gezielt mit bestimmten Bildern starten möchte, sondern es geht darum, dass das JS-Framework schaut, ob es auf der Seite 1 bis n DiaShows gibt und diese dann instantiiert. Ob die dann automatisch loslaufen oder auf einen Klick reagieren sei mal offen.

Unter dem Aspekt macht mein Konstrukt doch Sinn. Für eine DisShow, die ich kenne braucht's ja kein Framework ;-)

Viele Grüße
Siri

[unknown]

Nein, es geht nicht darum, dass auf der Seite EINE neue DiaShow ist, die ich kenne und gezielt mit bestimmten Bildern starten möchte, sondern es geht darum, dass das JS-Framework schaut, ob es auf der Seite 1 bis n DiaShows gibt und diese dann instantiiert. Ob die dann automatisch loslaufen oder auf einen Klick reagieren sei mal offen.

OK, dann gehört dieser DiaShowContainer, genauso wie die DiaShow selbst, zu deinem Objektmodell, als eine weitere Ebene über der DiaShow. Dann würde ich versuchen die einzelnen Objekte weitestgehend gleich zu modellieren. Also wenn du die DiaShow als eigenes Objekt mit Konstruktor modellierst, mach das doch mit dem Container außen rum genauso.
Die DiaShow selbst im Container zu kapseln muss auch nicht sein. Warum sollte man keine einzelne DiaShow anlegen können. Kann man aber auch so machen.

Für eine DisShow, die ich kenne braucht's ja kein Framework ;-)

Die DiaShow hat mit Sicherheit mehr Code als der Container. Ob nun die DiaShow alleine oder mit Container ist, spielt bei der Bezeichnung als Framework wohl nicht die Rolle.