Als je een groot deel van de front-end architectuurfilosofie uit deze serie leert, leer dan deze. Verander gewoon van klas. In deze screencast beginnen we een groot konijnenhol van JavaScript af te breken om te stoppen, onszelf te vangen en in plaats daarvan CSS te gebruiken. Wanneer u iets visueel verandert, is dat het domein van CSS. Het is niet alleen goed in, het is doorgaans ook beter presteren en zorgt voor een gezonde "scheiding van zorgen" die zorgt voor een gezonde website op de lange termijn.
Nadat we bij zinnen kwamen, hebben we uiteindelijk 1) de knoptekst 2) een data-stateattribuut op de container verwisseld .
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Hier zijn we terechtgekomen:
Zie de Pen quFCo door Chris Coyier (@chriscoyier) op CodePen
Ja, deze video (en sentiment) is "verander gewoon van klas!", En we veranderen een translate = "nee"> data- * attributen gewoon omdat ik ze leuk vind. Ik zie ze als klassen met tussenruimte op naam, of klassen met waarden. Ongetwijfeld nuttiger in CSS dan klassen en ze hebben exact dezelfde specificiteitswaarde.
Doet dat ? /: syntaxis ziet er raar uit? Als dat zo is, dan staat dat bekend als een ternaire (of "voorwaardelijke") operator.
De eerste regel is een test, de volgende regel (of het bit na de?) Is wat er gebeurt als die test waar is, de laatste regel (of het bit na de :) is wat er gebeurt als die test onwaar is. Misschien helpt dit:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");Vermijd ze niet alleen omdat ze er raar uitzien, ze kunnen efficiënter zijn (en uiteindelijk net zo goed lezen, zolang je niet gek wordt) alsof / anders logica.
Doug Neiner heeft een goed artikel over het idee van “gewoon van klas veranderen”. Klassen hebben zoveel kracht in CSS. Je kunt dingen verbergen / tonen, dingen verplaatsen, het uiterlijk van dingen veranderen, animaties activeren ... the sky is the limit. En hoe hoger in de "boom" (DOM) je de klasse toepast, hoe meer cascade-kracht je hebt. Een klassewijziging op de hoofdtekst betekent dat u alles op de hele pagina met één klasse kunt besturen. En dat allemaal met een heel klein beetje JavaScript.
Als je dit eenmaal hebt gekocht, zul je een gelukkiger ontwikkelaar zijn.