Ak sa z tejto série naučíte akýkoľvek hlavný kúsok filozofie front-end architektúry, osvojte si túto. Stačí zmeniť triedy. V tomto obrazovom vysielaní začneme klesať po hlavnej králičej diere JavaScriptu, aby sme sa zastavili, chytili sa a použili namiesto toho CSS. Keď niečo vizuálne meníte, je to doména CSS. Nielen, že je na tom dobre, ale je zvyčajne výkonnejší a udržuje zdravé „oddelenie záujmov“, ktoré prispieva k dlhodobému zdravému webu.
Potom, čo sme sa spamätali, sme jednoducho skončili výmenou 1) textu tlačidla 2) data-stateatribútu na kontajneri.
$(".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")); ));Tu sme skončili:
Prezrite si Pen quFCo od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Áno, toto video (a sentiment) je „len zmeňte triedy!“ A atribúty translate = "no"> data- * meníme len preto, lebo sa mi páčia. Myslím na ne ako na triedy s odstupom mien alebo na triedy s hodnotami. Pravdepodobne sú užitočnejšie v CSS ako triedy a majú presne rovnakú hodnotu špecifickosti.
Je to tak? /: syntax vyzerá divne? Ak je to tak, znamená to ternárny (alebo „podmienený“) operátor.
Prvý riadok je test, ďalší riadok (alebo bit za?) Sa stane, ak je tento test pravdivý, posledný riadok (alebo bit za :) sa stane, ak je tento test nepravdivý. Možno to pomôž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");Nevyhýbajte sa im len preto, že vyzerajú čudne, môžu byť efektívnejšie (a nakoniec čítať rovnako dobre, pokiaľ nešibete) ako keby / iná logika.
Doug Neiner má dobrý článok o myšlienke „stačí zmeniť triedy“. Triedy majú toľko sily v CSS. Môžete skrývať / zobrazovať veci, presúvať ich, meniť vzhľad vecí, spúšťať animácie ... nebo je obloha. A čím vyššie v „strome“ (DOM) triedu použijete, tým viac kaskádovej sily máte. Zmena triedy na tele znamená, že môžete ovládať čokoľvek na celej stránke pomocou jednej triedy. A to všetko s veľmi malým množstvom kódu JavaScript.
Keď to raz kúpite, budete šťastnejším vývojárom.