Kui õpite sellest seeriast mõnda peamist arhitektuuri filosoofiat, õppige seda. Lihtsalt vahetage klassi. Selles ekraanipildis hakkame laskuma JavaScripti suuremast jäneseaugust ainult selleks, et peatuda, end tabada ja CSS-i kasutada. Kui muudate midagi visuaalselt, on see CSS-i domeen. See pole mitte ainult hea, vaid on tavaliselt toimivam ja säilitab tervisliku „murede lahususe“, mis on pikas perspektiivis tervislik veebisait.
Pärast mõistuse saamist vahetasime data-statekonteineris lihtsalt 1) nuputeksti 2) atribuudi.
$(".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")); ));Siia jõudsime:
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) Pen quFCo-d
Jah, see video (ja arvamus) on "lihtsalt vahetage klassi!" Ja me muudame atribuute translate = "no"> data- * lihtsalt sellepärast, et need mulle meeldivad. Ma arvan, et need on nimedega klassid või väärtusega klassid. Väidetavalt kasulikum CSS-is kui klassides ja neil on täpselt sama spetsiifilisuse väärtus.
Kas nii? /: süntaks tundub imelik? Kui jah, siis teame, et see on kolmepoolne (või tingimuslik) operaator.
Esimene rida on test, järgmine rida (või bitt pärast?) Juhtub siis, kui see test on tõene, siis viimane rida (või bitt pärast :) on see, mis juhtub, kui see test on vale. Võib-olla aitab see:
// 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");Ärge vältige neid lihtsalt sellepärast, et nad näevad imelikud välja, võivad nad olla tõhusamad (ja lõpuks lugeda sama hästi, kui te ei lähe pähe), justkui / muidu loogika.
Doug Neineril on hea artikkel idee “lihtsalt vahetage klassi” kohta. Klassidel on CSS-is nii palju jõudu. Saate asju peita / näidata, asju teisaldada, muuta nende välimust, käivitada animatsioone ... taevas on piir. Ja mida kõrgemale “puust” (DOM) te klassi rakendate, seda rohkem on teil kaskaadjõudu. Klassimuudatus kehal tähendab, et saate kogu lehel ühe klassiga kõike kontrollida. Ja seda kõike väga väikese JavaScripti kogusega.
Kui olete sellesse ostnud, olete õnnelikum arendaja.