ORDINA BLOGT

jQuery op maat

jQuery is een zeer handige en uitgebreide library voor JavaScript, die het werk van web developers aanzienlijk eenvoudiger kan maken. Een groot pijnpunt van web development vandaag de dag is dat een web developer rekening moet houden met de grote diversiteit aan moderne, maar ook oudere browsers en hun functionaliteit.

  • Raf Vandeput
  • 24 april 2015

Voor o.a. dit probleem komt jQuery [1].zeer goed van pas. Het voorziet namelijk een uniforme en eenvoudige manier om dynamische functionaliteit toe te voegen aan een webpagina, waarbij de developer helemaal geen rekening moet houden met de verschillende implementaties van de diverse browsers. Al deze verschillen in implementaties worden namelijk door jQuery zelf intern afgehandeld. 

De volledige jQuery library is beschikbaar als één JavaScript bestand, dat net zoals alle andere JavaScript bestanden eerst van de webserver naar het apparaat van de gebruiker moet gedownload worden vooraleer het kan gebruikt worden. De scripts in een JavaScript bestand worden namelijk lokaal door de web browser van de gebruiker uitgevoerd. In het geval van jQuery spreken we over een bestand van enkele honderden kilobytes dat gedownload moet worden. In de meeste gevallen is deze hoeveelheid vandaag de dag verwaarloosbaar, maar er zijn toch situaties waarin een web developer rekening moet houden met de grootte van de te downloaden bestanden. Denk bijvoorbeeld maar aan mobiele data- of roaming pakketten, waarbij de hoeveelheid aan dataverkeer relatief beperkt is of de gebruiker moet betalen naargelang de gebruikte data.  

Voor dit probleem hebben de makers van jQuery zelf al een oplossing voorzien onder de vorm van een zogenaamd minified jQuery bestand. Dit bestand bevat identiek dezelfde functionaliteit als het originele jQuery bestand, maar hierin zijn alle onnodige tekens, zoals spaties en andere witruimtes en commentaarregels weggelaten. Voor de meest recente versies van jQuery resulteert dit bijvoorbeeld in bestanden, waarvan de grootte ongeveer drie keer zo klein is als de grootte van de originele bestanden[2].  

Er is echter nog een tweede methode beschikbaar om de bestandsgrootte van de jQuery library te beperken. Hierbij is het belangrijk om te weten dat jQuery is opgebouwd uit verschillende modules, die los van elkaar gebruikt kunnen worden. Zo bevat jQuery naast de core module o.a. een module voor Ajax-functionaliteit, een module voor CSS-styling en een module om op een eenvoudige manier effecten toe te voegen aan een webpagina. In de meeste gevallen heeft een web developer echter niet al deze modules nodig. In deze gevallen komt de online tool “jQuery Builder”[3], gecreëerd door Greg Allen[4], zeer handig van pas. Met behulp van deze tool kan een gebruiker namelijk een aangepaste versie van jQuery genereren die enkel de modules bevat die de gebruiker kiest. Wanneer de gebruiker één of meerdere modules uitschakelt, wordt de code voor deze modules niet opgenomen in het resultaat. Dit resulteert in een bestand dat kleiner[5] is dan het originele en waarvoor bijgevolg minder dataverkeer nodig is om het te downloaden.

 

 

[1] https://www.jquery.com/ en https://www.jquery.com/download/ 
[2] De originele bestanden van de meest recente versies zijn ca. 244 KB groot en de minified versies zijn ca. 84 KB groot.
[3] http://projects.jga.me/jquery-builder/ 
[4] Twitter: @greg_allen 
[5] Als we bijvoorbeeld het minified bestand van jQuery versie 2.1.1 kiezen en alle extra modules uitschakelen (en dus enkel de core module overhouden) verkrijgen we een bestand van ca. 44 KB groot, wat ongeveer de helft is van het originele minified bestand. Als we daarnaast de populaire Ajax- en CSS-modules kiezen, verkrijgen we een bestand van ca. 55 KB, wat nog altijd aanzienlijk kleiner is dan het originele minified bestand.