Javascript und der </body>-Tag

„Kaum macht man es richtig, schon funktioniert es.“

Ein simples Sprichwort – doch kann man das Ganze bei Javascript umdrehen:

„Es funktioniert, also ist es richtig?“

Womit ich beim Thema wäre :-)

Paul Lewis und Jake Archibald haben mich mit ihrem Videoblog HTTP 203 zum Grübeln gebracht. Als erfahrene JS Entwickler hängen wir unseren Code erst vor dem </body>-Tag ein und führen ihn frühestens im document.ready Event aus…

Und um ihr Beispiel (von mir frei übersetzt) zu zitieren:

„Das ist so, als würde man sicher stellen dass die Straßen bis 8:45h frei sind und dann fahren alle auf einmal los“ (HTTP 203: Performance Matters ~30s)

Weiterlesen

jQuery vs Vanilla JS featuring JSLint = good practice

Javascript Frameworks wie jQuery((jQuery – „write less, do more“)) erleichtern jedem Entwickler die Arbeit, aber können dem Browser mehr Arbeit bescheren.

JSLint((JSLint – The JavaScript Code Quality Tool)) ist in der JavaScript Entwicklung ein idealer Partner, doch leider ist jQuery für JSLint nicht ganz durchschaubar und so können sich schnell wieder „bad practices“ einschleichen.

Zu diesem Beitrag habe ich mir ein Testdokument erstellt, welches aus einem simplen html Gerüst besteht und als Inhalt einen <ul> mit 10.000 <li> Elementen besteht, welche jeweils ein Click Event bekommen um eine Klasse zu wechseln. Das erste Beispiel nutzt jQuery 1.7.2, alle weiteren jQuery 1.11.2. UPDATE: Nun habe ich auch eine Vanilla JS delegated Methode durchgemessen. UPDATE 2: Die kompletten Testdateien habe ich nun bei bitbucket hochgeladen: djpogo/vanilla-jquery-listener.

Bei jQuery ist es durchaus gängig einen Listener Funktion als anonyme Funktion zu implementieren. Das sieht dann so aus:

// jQuery < = 1.7.x 
$(".viewportChanger").click(function () { $(this).toggleClass("show"); });

// jQuery 1.11.2 ohne Delegation
$(".viewportChanger").on("click", function () { $(this).toggleClass("show"); });

// jQuery 1.11.2 mit Delegation
$(".viewport").on("click", ".viewportChanger", function () { $(this).toggleClass("show"); });

Weiterlesen