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

0
jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

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

HTML5 Webdesign aus Duisburg Logo

HTML5 Webdesign aus Duisburg Logo

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.

 

CSS3 Webdesign aus Duisburg Logo

CSS3 Webdesign aus Duisburg Logo

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

About Author

PHP Kurs und Inhouse Schulungen für Webdevelopment mit Continuous Integration - Clean Coder, Blogger, Autor, Dozent und Senior Webdeveloper www.rolandgolla.de

Leave A Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.