Wanneer het op 'normale' backendcode aankomt is refactoring
en het opnieuw schrijven van delen code welhaast een routineklus geworden.
JavaScript is daarin wat lastiger; scoping is minder transparant, dus je
breekt eenvoudig bestaande code die wellicht niets te maken heeft met jouw
deel; en de flexibiliteit kan tegen je gaan werken. Vandaar een artikel
over de wondere wereld van het herschrijven van de JavaScript voor de footer
op funda!
Eisen
Zoeken in het aanbod op funda, funda in business en funda landelijk
Afhankelijk van de categorie staat er een textbox, een lijst met provincies,
of een lijst met regio's
Backend code herschrijven we niet
Huidige situatie De huidige code voor de footer is als volgt. Key element hierin is de 'SoortAanbod'
enum die bij ons in code staat:
De dropdownlist met categorie-selectie is een directe mapping van deze
enum:
In de JavaScript wordt er weer met deze id's gewerkt voor het tonen
van de verschillende input-mogelijkheden (vanaf regel 86):
De input-elementen staan altijd op de pagina, en worden met 'display:
none' onzichtbaar gemaakt als ze niet mogelijk zijn qua selectie.
Huidige situatie op de server Ja, dit is bad-practice; maar dit artikel gaat over het herschrijven van JavaScript, we houden de werking dus intact.
Bij elke aanpassing in tekst, dropdown-waarde, etc. wordt een hidden field
bijgewerkt:
In dit hidden element moet de waarde als volgt worden opgemaakt:
Herbouwen We gebruiken jQuery als onze core-library voor al onze JavaScript. Veel
van onze componenten ontwikkelen we daarom ook als jQuery plugin: door
de best-practices hierin te gebruiken worden veel problemen m.b.t. scoping
opgelost.
De basis van de plugin:
Allereerst hebben we een lijst met alle controls nodig, door deze strong
te mappen is de kans op fouten kleiner:
Ook willen we af van de gehardcode waardes van de enum in code, dus maken
we de enum na. JavaScript kent geen 'enum' velden, maar eigenlijk
zijn ze sowieso zwaar overrated:
Events afvangen Het belangrijkste event dat we willen afvangen, is het moment dat iemand
de waarde in de dropdown verandert.
Goede control tonen:
Hidden element setten Nu wordt weliswaar het juiste element zichtbaar, maar de waarde is nog
niet zichtbaar. Daarvoor kunnen we inhaken op het 'submit' event
van ons formulier:
Et voila Werking is hetzelfde gebleven, maar de code gebruikt nu geen global vars,
magic numbers, etc. De logica voor de autosuggest is uit deze plugin gehaald,
want die heeft hier niets mee te maken. Wel hadden we nog een event nodig
waaraan gebruikers van onze plugin konden subscriben, om zo dingen te veranderen
aan de autosuggest-plugin. Je gebruikt de code ongeveer als volgt:
Hele plugin De hele plugin, inclusief het 'onTypeChanged' event, is hier te vinden.
There are 4 comments on this article, read them on
Coding Glamour.