Om du lär dig någon större bit av frontend arkitekturfilosofi från denna serie, lär dig den här. Bara byta klass. I denna screencast börjar vi gå ner ett stort kaninhål av JavaScript bara för att stoppa, fånga oss själva och använda CSS istället. När du ändrar något visuellt är det domänen för CSS. Inte bara är det bra på det, det är vanligtvis mer performant och upprätthåller en hälsosam "åtskillnad av bekymmer" som ger en långsiktig hälsosam webbplats.
Efter att vi kommit till sinnet slutade vi helt enkelt att byta 1) knapptexten 2) ett data-stateattribut på behållaren.
$(".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")); ));Här hamnade vi:
Se Pen quFCo av Chris Coyier (@chriscoyier) på CodePen
Ja, den här videon (och känslan) är "bara ändra klasser!", Och vi ändrar attributet translate = "no"> data- * bara för att jag gillar dem. Jag tänker på dem som klasser med namn, eller klasser med värden. Förmodligen mer användbar i CSS än klasser och de har exakt samma specificitetsvärde.
Gör det ? /: syntax ser konstigt ut? I så fall är det känt som en ternär (eller "villkorad") operatör.
Den första raden är ett test, nästa rad (eller biten efter?) Är vad som händer om det testet är sant, den sista raden (eller biten efter :) är vad som händer om testet är falskt. Detta kanske hjälper:
// 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");Undvik inte dem bara för att de ser konstiga ut, de kan vara mer effektiva (och i slutändan läsa lika bra, så länge du inte blir nöjd) som om / annat logik.
Doug Neiner har en bra artikel om "bara byta klass" -idén. Klasser har så mycket kraft i CSS. Du kan dölja / visa saker, flytta saker, ändra utseendet på saker, utlösa animationer ... himlen är gränsen. Och ju högre upp i "trädet" (DOM) du använder klassen, desto mer kaskad kraft har du. En klassförändring i kroppen innebär att du kan styra vad som helst på hela sidan med en enda klass. Och allt med en mycket liten mängd JavaScript.
När du väl köpt dig till detta blir du en lyckligare utvecklare.