Se impari qualche pezzo importante della filosofia dell'architettura front-end da questa serie, impara questo. Basta cambiare classe. In questo screencast iniziamo a scendere in una grande tana del coniglio di JavaScript solo per fermarci, catturarci e utilizzare invece CSS. Quando stai cambiando qualcosa visivamente, questo è il dominio dei CSS. Non solo è bravo in questo, è in genere più performante e mantiene una sana "separazione delle preoccupazioni" che rende un sito web sano a lungo termine.
Dopo essere tornati in sé, abbiamo semplicemente finito per scambiare 1) il testo del pulsante 2) un data-stateattributo sul contenitore.
$(".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")); ));Ecco dove siamo finiti:
Guarda il Pen quFCo di Chris Coyier (@chriscoyier) su CodePen
Sì, questo video (e il sentimento) è "cambia solo classe!", E stiamo cambiando un translate = "no"> data- * attributi solo perché mi piacciono. Li considero come classi spaziate tra i nomi o classi con valori. Probabilmente più utili nei CSS rispetto alle classi e hanno lo stesso identico valore di specificità.
Lo fa? /: la sintassi sembra strana? In tal caso, è noto come operatore ternario (o "condizionale").
La prima riga è un test, la riga successiva (o il bit dopo?) È cosa succede se quel test è vero, l'ultima riga (o il bit dopo :) è cosa succede se quel test è falso. Forse questo aiuta:
// 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");Non evitarli solo perché sembrano strani, possono essere più efficienti (e alla fine leggono altrettanto bene, purché non impazzisci) come se / altro logica.
Doug Neiner ha un buon articolo sull'idea del "solo cambio di classe". Le classi hanno così tanto potere nei CSS. Puoi nascondere / mostrare cose, spostare cose, cambiare l'aspetto delle cose, attivare animazioni ... il cielo è il limite. E più in alto nell '"albero" (DOM) applichi la classe, maggiore è la potenza a cascata che hai. Un cambio di classe sul corpo significa che puoi controllare qualsiasi cosa sull'intera pagina con una singola classe. E tutto con una piccolissima quantità di JavaScript.
Una volta che avrai accettato questo, sarai uno sviluppatore più felice.