JQuery best practice: Javascript Funktionen auslagern und über Klassen aufrufen

Javascript jQuery best practice:
Alle Javascript Funktionen sollten in ein externes Javascript File ausgelagert werden. Das Javascript File wird dann über ein <script>-Tag im head-Bereich oder vor dem schließenden Body-Tag </body> eingebunden. Schauen wir uns ein praktisches Javascript Best Practice Beispiel an. Belegen wir einen HTML Link mit einer Javascript Function:

 

 

jQuery Javascript best practice example:
HTML in der Seite
<a href=“#“ class=“doSomeMagic“>Do some magic</a>

Javascript jQuery best practice im ausgelagerten JS-File
$(‚a.doSomeMagic‘).click(function(){
// Magic code or simple
console.log(‚Right here!‘);
});

Die jQuery .click() Methode erlaubt uns einfach ein Event an ein bestimmtes HTML

Element zu binden. In diesem Falle wird die oben beschriebene Javascript Funktion an alle Links mit der Klasse „doSomeMagic“ gebunden. Das ist auch der große Vorteil dieser Art der Programmierung. Es ist zentral und Darstellung und Logik von einander getrennt. Betrachten wir hierzu ein Javascript jQuery bad practice example.

Javascript jQuery bad practice example
<a onclick=“doSomething()“ href=“#“>Click!</a>

Hier wird direkt der Javascript Funktionsaufruf im A-Tag HTML Element ausgeführt. Dadurch ist das Javascript nicht mehr klar vom HTML Code getrennt. Würde sich die Funktion ändern, also umbenannt oder Parameter hinzugefügt, müsste das immer an allen Stellen im HTML Code geändert werden. Das macht dann erheblichen Mehraufwand bei Änderungen.

 

Weiterführende Links Javascript jQuery:
jQuery Library
http://www.jquery.com/