De-jquery-fisering

JQuery er almindelig javascript ... Desuden er der vel kun 4 eller 5 linier kode i det javascript. Og det er den del af javascript, som er mest stenet ... Nemlig dom manipulation og Ajax. Så jeg vil bare lade koden være som den er.

Hvis du laver ikke laver en stor 100% ajax/javascript drevet frontend-applikation i stil med Google Docs hvor du er nødt til at optimere helt ekstremt på dine DOM-kald og reflows, så kan det at undgå jquery slet, slet ikke betale sig. Det skulle da lige være hvis man foretrak fx MooTools eller lignende.

 $(document).ready(function() { // ...
 
 // Til:
 
 document.addEventListener('DOMContentLoaded', function(e) { // ...
 // Eller
 window.addEventListener('load', function(e) { // ...

 subtitleElement.attr('data-video');
 
 // Til:
 subtitleElement.getAttribute('data-video');

 subtitleElement.html(subtitles[subtitle].t);
 // og
 subtitleElement.html('');
 
 
 // Til:
 subtitleElement.innerHTML = subtitles[subtitle].t;
 // og
 subtitleElement.innerHTML = '';

 $('.srt').each(function() {
 
 // Til:
 var subs = document.querySelectorAll('.srt'), sub, i, length;
 for(i = 0, length = subs.length; i < length; i++) {
   sub = subs[i];
   // ...

 $(this).load(srtUrl, function (responseText, textStatus, req) { playSubtitles(subtitleElement)}) // ...
 
 // Til:
 var xhr = new XMLHttpRequest();
 xhr.open('GET', srtUrl, true);
 xhr.onreadystatechange = function(res) {
   if (xhr.readyState == 4 && xhr.status == 200) {
     playSubtitles(subtitleElement);
   }
 };
 xhr.send(null);

Det er altsammen trivielt - især med de nye lækre API's vi får til JavaScript. Fx kan din .each laves om til:

 [].forEach.call(document.querySelectorAll('.srt'), function(el) {
   // el
 });

Mine løsninger ovenfor, er formentlig ikke fuldkomne - Det var mere for at vise at det sagtens er muligt!

Længe leve JavaScriptens Befrielsesfront!