Jeśli z tej serii nauczysz się jakiejś większej filozofii architektury frontendu, naucz się tego. Po prostu zmień zajęcia. W tym screencastie zaczynamy zagłębiać się w wielką króliczą dziurę JavaScript, aby zatrzymać się, złapać się i zamiast tego użyć CSS. Kiedy zmieniasz coś wizualnie, jest to domena CSS. Nie tylko jest w tym dobry, ale zazwyczaj jest bardziej wydajny i utrzymuje zdrowy „podział problemów”, który zapewnia długoterminową, zdrową stronę internetową.
Kiedy opamiętaliśmy się, po prostu zamieniliśmy 1) tekst przycisku 2) data-stateatrybut w kontenerze.
$(".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")); ));Oto, gdzie skończyliśmy:
Zobacz quFCo Pen autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Tak, ten film (i sentyment) to „po prostu zmień klasy!” I zmieniamy atrybuty translate = "no"> data- * tylko dlatego, że je lubię. Myślę o nich jak o klasach rozdzielonych nazwami lub klasach z wartościami. Prawdopodobnie bardziej przydatne w CSS niż klasy i mają dokładnie tę samą wartość specyficzności.
Robi to ? /: składnia wygląda dziwnie? Jeśli tak, to jest to operator potrójny (lub „warunkowy”).
Pierwsza linia to test, następna linia (lub bit po znaku?) To to, co się stanie, jeśli ten test jest prawdziwy, a ostatnia linia (lub bit po :) jest tym, co się stanie, jeśli ten test jest fałszywy. Być może to pomoż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");Nie unikaj ich tylko dlatego, że wyglądają dziwnie, mogą być bardziej wydajne (i ostatecznie równie dobrze czytać, o ile nie zwariujesz), jak logika „if / else”.
Doug Neiner ma dobry artykuł na temat idei „po prostu zmień zajęcia”. Klasy mają tak dużą moc w CSS. Możesz ukrywać / pokazywać rzeczy, przesuwać je, zmieniać ich wygląd, uruchamiać animacje… niebo jest granicą. Im wyżej w „drzewie” (DOM) zastosujesz klasę, tym większą masz moc kaskadową. Zmiana klasy w treści oznacza, że możesz kontrolować wszystko na całej stronie za pomocą jednej klasy. A wszystko z bardzo małą ilością JavaScript.
Kiedy już to kupisz, będziesz szczęśliwszym programistą.