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