jQuery code verbeteren.

[MrVegeta]

Ik ben al een poosje bezig met iets en qua functionaliteit werkt het nu wel voor 90%, maar ik gebruik veel code en ik denk dat dat wel beter kan. Ik heb bijvoorbeeld deze twee functies

JavaScript:

    function selectJaMainButton() {
        $(this).parents('.container_vragen , .antwoorden').find('.ja').attr('checked', this.checked);
        $(this).parents('.container_vragen , .antwoorden').find('.nee , .open_sub_nee').removeAttr('checked');
        $(this).parents('.container_vragen').find('.akkoord').addClass('groen');
        $(this).parents('.container_vragen').find('.akkoord').removeClass('rood');
    };
    
    function selectNeeMainButton() {
        $(this).parents('.container_vragen , .antwoorden').find('.nee').attr('checked', this.checked);
        $(this).parents('.container_vragen , .antwoorden').find('.ja , .open_sub_ja').removeAttr('checked');
        $(this).parents('.container_vragen').find('.akkoord').addClass('rood');
        $(this).parents('.container_vragen').find('.akkoord').removeClass('groen');
    };

Ze doen praktisch hetzelfde alleen net iets anders voor de verschillende classes. Op wat voor manier zou ik deze code kunnen verbeteren?

[diabolofan]

Hoe je het in ieder geval makkelijker onderhoudbaar kunt maken is door de classes die tussen de parents() staan in een veriabele te zetten. Dan hoef je het maar op 1 plaats aan te passen wanneer deze classes wijzigen.

Verder kan hier wel een functie van gemaakt worden, maar omdat je veel verschillende dingen doet, zal het niet korter worden dan 4 regels. Ook zal je alsnog alle classes mee moeten geven die gebruikt worden om het dynamisch te houden, waar het ook niet echt overzichtelijker van wordt.

Wat je wel kan doen is er 1 functie van maken die zelf uitzoekt of het de ja of de nee button was, en daarna afhankelijk daarvan de betreffende code uitvoert.

Verdere verbeteringen zijn erg afhankelijk van de html structuur. Alsnog zal jQuery erg gevoelig blijven voor wijzigingen in de html structuur, zodat dit stukje bij veranderingen in de structuur waarschijnlijk bijna altijd geupdate zal moeten worden.

[418O2]

MrVegeta schreef op woensdag 16 januari 2013 @ 13:54:
Ik ben al een poosje bezig met iets en qua functionaliteit werkt het nu wel voor 90%, maar ik gebruik veel code en ik denk dat dat wel beter kan. Ik heb bijvoorbeeld deze twee functies

JavaScript:

    function selectJaMainButton() {
        $(this).parents('.container_vragen , .antwoorden').find('.ja').attr('checked', this.checked);
        $(this).parents('.container_vragen , .antwoorden').find('.nee , .open_sub_nee').removeAttr('checked');
        $(this).parents('.container_vragen').find('.akkoord').addClass('groen');
        $(this).parents('.container_vragen').find('.akkoord').removeClass('rood');
    };
    
    function selectNeeMainButton() {
        $(this).parents('.container_vragen , .antwoorden').find('.nee').attr('checked', this.checked);
        $(this).parents('.container_vragen , .antwoorden').find('.ja , .open_sub_ja').removeAttr('checked');
        $(this).parents('.container_vragen').find('.akkoord').addClass('rood');
        $(this).parents('.container_vragen').find('.akkoord').removeClass('groen');
    };

Ze doen praktisch hetzelfde alleen net iets anders voor de verschillende classes. Op wat voor manier zou ik deze code kunnen verbeteren?

sjongejonge wat ben jij een n00b zeg!

Je code kan sowieso beter, maar je kan hier idd 1 functie van maken, die je met 2 aanroepen aanroept (1 voor ja, 1 voor nee). Die laatste 2 regels chan je chainen. Je kan wat dingen in variabelen pleuren voor de leesbaarheid (heb ik bij de eerste aangepast)

JavaScript:

    function selectJaMainButton() {
                var scopeWithContainer =        $(this).parents('.container_vragen , .antwoorden');
                var scope = $(this).parents('.container_vragen');
                $('.ja', scopeWithAnswers).attr('checked', this.checked);
        $('.nee , .open_sub_nee', scopeWithAnswers)..removeAttr('checked');
        $(scope).find('.akkoord').addClass('groen').removeClass('rood');
    };
    
    function selectNeeMainButton() {
        $(this).parents('.container_vragen , .antwoorden').find('.nee').attr('checked', this.checked);
        $(this).parents('.container_vragen , .antwoorden').find('.ja , .open_sub_ja').removeAttr('checked');
        $(this).parents('.container_vragen').find('.akkoord').addClass('rood').removeClass('groen');
    };

[MrVegeta]

Het klopt dat ik een noob ben! Er wordt veel te weinig (lees: geen) les gegeven over dit soort dingen Maar goed, ik ben nu ongeveer wel zo ver dat ik zelf wat code kan schrijven dat doet wat ik wil. De volgende stap is om die code dan te optimaliseren en daar ben ik nu dus mee bezig .

diabolofan schreef op woensdag 16 januari 2013 @ 14:56:
Hoe je het in ieder geval makkelijker onderhoudbaar kunt maken is door de classes die tussen de parents() staan in een veriabele te zetten. Dan hoef je het maar op 1 plaats aan te passen wanneer deze classes wijzigen.

Verder kan hier wel een functie van gemaakt worden, maar omdat je veel verschillende dingen doet, zal het niet korter worden dan 4 regels. Ook zal je alsnog alle classes mee moeten geven die gebruikt worden om het dynamisch te houden, waar het ook niet echt overzichtelijker van wordt.

Wat je wel kan doen is er 1 functie van maken die zelf uitzoekt of het de ja of de nee button was, en daarna afhankelijk daarvan de betreffende code uitvoert.

Verdere verbeteringen zijn erg afhankelijk van de html structuur. Alsnog zal jQuery erg gevoelig blijven voor wijzigingen in de html structuur, zodat dit stukje bij veranderingen in de structuur waarschijnlijk bijna altijd geupdate zal moeten worden.

Duidelijke uitleg, ik zal eens uitzoeken wat ik er mee kan doen.

@Catch22, variablen gaan gebruiken dus. Duidelijk, zien wat voor informatie ik daar over kan vinden.

[418O2]

Als je een keer een masterclass wil moet je het maar zeggen

[MrVegeta]

En hoeveel moet dat gaan kosten .

[418O2]

Bier.

Kan je de html-structuur van hetgeen je manipuleert posten? Volgens mij kan je eea wel effectienter maken

[Anoniem: 2935]

Om dit goed te refactoren heb ik ook de HTML code nodig en moet ik zien hoe het wordt aangeroepen. Wat is de this in deze functies?

[TheNephilim]

Een tip die ik je sowieso kan geven; gebruik .prop() in plaats van .attr() voor je checkboxes.

Verder moet ik zeggen dat ik hier ook vaak teveel jQuery code heb, het enige waar ik mij druk om maak is leesbaarheid en een beetje performance. jQuery lost dingen under-the-hood vaak hetzelfde op, zelfs als je het op verschillende manieren je jQuery calls doet.

Over readability van jQuery code is verassend weinig te vinden met Google.

Hier een paar tips over hoe het wel en niet moet met jQuery: http://james.padolsey.com/javascript/jquery-code-smells/

[418O2]

Ik leer het meest door jQuery best pratice blogs te lezen, maar ook door algemene jQuery artikelen te lezen.

[Guillome]

Oh heb je wat linkjes Catch? Ik ben al een tijdje naar zulke blogs en artikelen op zoek

[418O2]

Tools, Libs e.d.
http://sass-lang.com/
http://lesscss.org/
http://jquery.com/
http://jqueryui.com/
http://mootools.net/
http://www.google.com/webfonts

Weblogs & Opinie
http://www.smashingmagazine.com/ (en http://www.smashingmagazine.com/network )
http://paulirish.com/
http://sixrevisions.com/
http://www.stuffandnonsense.co.uk/blog
http://mattgemmell.com/
http://www.informationarchitects.jp/en/articles/
http://bradfrostweb.com/blog/
http://lea.verou.me/

Typografie
http://ilovetypography.com/

Referentie
http://www.w3schools.com/html5/html5_reference.asp
http://caniuse.com/
http://www.quirksmode.org
http://webdesignerwall.com/
http://24ways.org/

en Chris Coyier, Paul Irish etc volgen op Twitter/Google plus

en volg deze google reader

http://www.google.com/rea...55727%2Fbundle%2Ffrontend

[Guillome]

Onwijs bedankt!

[Anoniem: 2935]

Ik kan ook Doug Neiner's Contextual jQuery presentaties aanraden:

• http://events.jquery.org/...ideo.php?talk=doug-neiner
(slides zie je hier: http://www.slideshare.net/dcneiner/contextual-jquery)

• YouTube: Contextual jQuery Part III: Just In Time & User Actions by Doug Neiner