Dacă înveți din această serie o parte importantă a filozofiei arhitecturii front-end, învață-o pe aceasta. Schimba doar clasele. În acest screencast începem să coborâm într-o gaură majoră de iepure din JavaScript doar pentru a ne opri, a ne prinde și a folosi CSS în schimb. Când schimbați ceva vizual, acesta este domeniul CSS. Nu numai că este bun, dar este de obicei mai performant și menține o „separare a preocupărilor” sănătoasă, ceea ce face un site web sănătos pe termen lung.
După ce ne-am revenit, am ajuns pur și simplu să schimbăm 1) textul butonului 2) un data-stateatribut de pe container.
$(".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")); ));Iată unde am ajuns:
Vedeți Pen quFCo de Chris Coyier (@chriscoyier) pe CodePen
Da, acest videoclip (și sentimentul) este „doar schimbă clasele!” Și schimbăm un atribut translate = "nu"> data- * doar pentru că îmi plac. Mă gândesc la ele ca la clase distanțate între nume sau clase cu valori. Este probabil mai util în CSS decât clasele și au exact aceeași valoare de specificitate.
Nu? /: sintaxa pare ciudată? Dacă da, este cunoscut ca operator ternar (sau „condițional”).
Prima linie este un test, următoarea linie (sau bitul de după?) Se întâmplă dacă testul este adevărat, ultima linie (sau bitul de după :) este ceea ce se întâmplă dacă testul este fals. Poate că acest lucru ajută:
// 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");Nu le evitați doar pentru că arată ciudat, pot fi mai eficiente (și, în cele din urmă, citite la fel de bine, atâta timp cât nu vă înnebuniți) ca și cum ar fi logica.
Doug Neiner are un articol bun despre ideea „doar schimbă clasele”. Clasele au atât de multă putere în CSS. Puteți ascunde / arăta lucruri, mișca lucruri, schimba aspectul lucrurilor, declanșa animații ... cerul este limita. Și cu cât aplicați clasa mai sus în „copac” (DOM), cu atât aveți mai multă putere în cascadă. O schimbare de clasă pe corp înseamnă că puteți controla orice pe întreaga pagină cu o singură clasă. Și toate cu o cantitate foarte mică de JavaScript.
Odată ce ați cumpărat acest lucru, veți fi un dezvoltator mai fericit.