forum Sea of Sin / Startseite sitemap

Sea of Sin / Blog

Zentrum der Langeweile

JavaScript Autoload und Header Loading

2009/11/13 von de_henne
Fronteers, JavaScript und das autoloading ... jetzt gibts mal wieder jede Menge Stoff für JavaScript Entwickler
Es wird mal Zeit das ich mich wieder zu Wort melde :-)
Wie es halt so ist, viel zu tun, viel um die Ohren, viel passiert … zu wenig Zeit für nebensächliche Sachen wie Blog … dafür gibt’s jetzt mal nen richtig schönen Schnipsel für JavaScript Entwickler.

Vorweg, es wird technisch, sehr technisch … und zu allem Überfluss gibt es auch noch eine Vorgeschichte.

Ein Kumbel von mir besuchte in den schönen Niederlanden die Fronteers (www.fronteers.nl) und erzählte mir von einem kleinen Googletrick welcher bei Gmail verwendet wird.
Im Prinzip legen Sie den JavaScript Code in den Header und geben jedem Skriptteil eine id.

Zum Beispiel so:

  1. <script type="text/javascript" id="blockid"></script>

Darin definieren Sie nun eine Funktion / Klasse (was auch immer) und kommentieren das ganze aus.

  1. <script type="text/javascript" id="blockid">
  2. /*
  3.   function test(v)
  4.   {
  5.   // irgendein Code
  6.   };
  7. */
  8. </script>

Wenn die Funktion / Klasse test nun benötigt wird, werden die Kommentare entfernt und ein eval auf den inneren Teil des Skriptblockes gemacht.
Somit ist die Funktion / Klasse nun vorhanden … der Clou, es muss nichts geladen werden, der Browser lädt nur eine Datei und zwar die HTML Seite und nicht zusätzlich eine separate JavaScript Datei.

Vom Laden der Sachen geht dies also um einiges schneller.
Das Interpretieren der JavaScript Dateien im Header fällt auch weg, noch mal Leistung gespart, die Funktion / Klasse wird ja nur interpretiert wenn diese benötigt wird.

Das Problem an der Sache, überall wo ich nun test() benötige muss ich prüfen ob es die Funktion / Klasse schon gibt. Da es in JavaScript keine wirkliche autoload Funktionalität gibt wie in anderen Sprachen, zum Beispiel PHP, hab ich nach einer Lösung gesucht.

Und zwar eine globale autoload Funktion welche prüft ob die Klasse / Funktion schon gibt, falls nicht wird diese geladen, falls doch wird diese zurück gegeben.

Da ich weiterhin mit dem Wörtchen new arbeiten wollte um Objekte zu erstellen war dies etwas kniffliger.

Lösung war dann folgendes:


Als erstes erstellen wir uns eine Test Klasse:

  1. <script type="text/javascript" id="class_echo">
  2. /*
  3.   function test(p)
  4.   {
  5.   var t = this;
  6.  
  7.   t.echo = function()
  8.   {
  9.   alert('echo');
  10.   };
  11.  
  12.   return t;
  13.   };
  14. */
  15. </script>

Danach geht’s an unsere autoload, die den Block interpretiert.


  1. <script type="text/javascript">
  2.  
  3. function __autoload(cl)
  4. {
  5. if (typeof cl != 'object')
  6. {
  7. var decl = document.getElementById('class_echo').innerHTML.
  8. replace('*/', '').
  9. replace('/*', '');
  10.  
  11. eval(decl);
  12. };
  13.  
  14. return eval(cl);
  15. };
  16.  
  17. </script>

Wie funktionierts nun, wir übergeben der autoload welche Klasse geladen werden soll. Die schaut ob es die Klasse gibt, falls nicht wird der Inhalt des Skriptblockes geholt und die Kommentarzeichen entfernt. Danach wird per eval das ganze interpretiert.


Anstatt nun wie normal new test(); zu verwenden, gehen wir jetzt über die __autoload();

Also:

  1. var Test = new __autoload('test')();


Was beachtet werden muss, ist lediglich, das in einer Klassendefinition ein return gemacht werden muss, sonst funktioniert es nicht.

Mit dieser Methode ist es aber nun möglich während der Laufzeit Sachen schnell und unkompliziert nachzuladen und vor allem automatisiert nachzuladen.

Recht interessanter Weg welcher wohl noch etwas an Tests benötigt, daraus lässt sich aber bestimmt so einiges in Sachen Performance anstellen.

Bei Fragen könnt ihr mir gerne ne Mail oder im Forum schreiben.

Gruß
hen


  • Keine Kommentare