Jei iš šios serijos sužinosite bet kokį pagrindinį architektūros filosofijos elementą, sužinokite apie tai. Tiesiog pakeisk klases. Šioje ekrano kopijoje mes pradedame žemyn didžiausią „JavaScript“ triušio skylę, kad tik sustotume, susigaudytume ir vietoj to naudotume CSS. Kai ką nors vizualiai keičiate, tai yra CSS domenas. Tai ne tik gerai, bet ir labiau veikia ir palaiko sveiką „rūpesčių atskyrimą“, kuris ilgainiui sukuria sveiką svetainę.
Apsipratę paprasčiausiai data-stateant konteinerio apsikeitėme 1) mygtuko tekstu 2) atributu.
$(".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")); ));Štai kur mes atsidūrėme:
Žiūrėkite Chriso Coyier (@chriscoyier) „Pen quFCo“ svetainėje „CodePen“
Taip, šis vaizdo įrašas (ir nuotaika) yra „tiesiog pakeisk klases!“, Ir mes keičiame „translate =" no "> data- * atributus tik todėl, kad man jie patinka. Aš manau, kad jie panašūs į klases su pavadinimais arba klases su vertybėmis. Neabejotinai naudingiau CSS nei klasėse ir jie turi tą pačią specifiškumo vertę.
Ar taip? /: sintaksė atrodo keistai? Jei taip, tai žinokite kaip trinarį (arba „sąlyginį“) operatorių.
Pirmoji eilutė yra testas, kita eilutė (arba šiek tiek po?) Yra tai, kas atsitiks, jei šis testas yra teisingas, paskutinė eilutė (arba bitai po :) yra tai, kas atsitinka, jei tas testas yra klaidingas. Galbūt tai padeda:
// 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");Nevenkite jų vien dėl to, kad jie atrodo keistai, jie gali būti efektyvesni (ir galų gale skaityti taip pat gerai, jei jums nepritaria), tarsi logika.
Dougas Neineris turi gerą straipsnį apie „tiesiog pakeisk klases“ idėją. Klasės turi tiek daug galios CSS. Galite slėpti / rodyti daiktus, perkelti daiktus, pakeisti daiktų išvaizdą, sukelti animacijas ... dangus yra riba. Kuo aukščiau „medyje“ (DOM) jūs pritaikote klasę, tuo daugiau pakopinių jėgų turite. Klasės kūno pakeitimas reiškia, kad galite valdyti viską visame puslapyje naudodami vieną klasę. Ir viskas su labai mažu „JavaScript“ kiekiu.
Įsigiję tai, būsite laimingesni kūrėjai.