Ako iz ove serije naučite bilo koji bitni dio filozofije front end arhitekture, naučite ovu. Samo promijenite nastavu. U ovom screencast-u počinjemo spuštati se u veliku zečju rupu JavaScript-a samo da bismo se zaustavili, uhvatili i umjesto toga koristili CSS. Kada nešto vizualno mijenjate, to je domena CSS-a. Ne samo da je dobar u tome, on je obično učinkovitiji i održava zdravo „razdvajanje briga“ što čini dugoročnu zdravu web stranicu.
Nakon što smo došli k sebi, jednostavno smo na kraju zamijenili 1) tekst gumba 2) data-stateatribut na spremniku.
$(".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")); ));Evo gdje smo završili:
Pogledajte Pen quFCo Chrisa Coyiera (@chriscoyier) na CodePenu
Da, ovaj video (i sentiment) je "samo promijenite klasu!", A mijenjamo atribute translate = "no"> data- * samo zato što mi se sviđaju. Mislim na njih kao na razrede s razmakom ili na predavanja s vrijednostima. Vjerojatno korisniji u CSS-u od klasa i imaju potpuno istu vrijednost specifičnosti.
Čini to ? /: sintaksa izgleda čudno? Ako je tako, to je poznato kao trokraki (ili "uvjetni") operator.
Prvi redak je test, sljedeći redak (ili bit nakon?) Je ono što se događa ako je test ako je istina, posljednji redak (ili bit nakon :) je ono što se događa ako je test netačan. Možda ovo pomaže:
// 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");Ne izbjegavajte ih samo zato što izgledaju čudno, mogu biti učinkovitiji (i u konačnici jednako dobro čitati, sve dok ne poludite) kao da je / inače logika.
Doug Neiner ima dobar članak o ideji "samo promijeni nastavu". Predavanja imaju toliko snage u CSS-u. Možete sakriti / pokazati stvari, premjestiti stvari, promijeniti izgled stvari, pokrenuti animacije ... nebo je granica. I što više u "stablu" (DOM) primijenite klasu, to imate veću kaskadnu snagu. Promjena klase na tijelu znači da jednim predmetom možete kontrolirati bilo što na cijeloj stranici. I sve to s vrlo malom količinom JavaScript-a.
Jednom kada kupite ovo, bit ćete sretniji programer.