Pokud se z této řady naučíte jakýkoli hlavní kousek filozofie front-end architektury, naučte se tuto. Stačí změnit třídy. V tomto screencastu začneme sestupovat po hlavní králičí jámě JavaScriptu, abychom se zastavili, chytili se a místo toho použili CSS. Když něco vizuálně měníte, je to doména CSS. Nejen, že je na tom dobře, je obvykle výkonnější a udržuje zdravé „oddělení obav“, které přispívá k dlouhodobému zdravému webu.
Poté, co jsme se dostali k rozumu, jsme jednoduše skončili výměnou 1) textu tlačítka 2) data-stateatributu na kontejneru.
$(".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")); ));Zde jsme skončili:
Podívejte se na Pen quFCo od Chrisa Coyiera (@chriscoyier) na CodePen
Ano, toto video (a sentiment) je „jen změňte třídy!“ A měníme atributy translate = "no"> data- * jen proto, že se mi líbí. Přemýšlím o nich jako o třídách oddělených jmény nebo třídách s hodnotami. Pravděpodobně užitečnější v CSS než třídy a mají přesně stejnou hodnotu specificity.
Ano? /: syntaxe vypadat divně? Pokud ano, je to znám jako ternární (nebo „podmíněný“) operátor.
První řádek je test, další řádek (nebo bit za?) Je to, co se stane, pokud je tento test pravdivý, poslední řádek (nebo bit za :) je to, co se stane, pokud je tento test nepravdivý. Možná 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ýbejte se jim jen proto, že vypadají divně, mohou být efektivnější (a nakonec se budou číst stejně dobře, pokud nebudete rozumět) jako logika / else.
Doug Neiner má dobrý článek o myšlence „prostě změnit třídy“. Třídy mají v CSS tolik síly. Můžete skrýt / ukázat věci, přesouvat věci, měnit vzhled věcí, spouštět animace ... obloha je limit. A čím výše ve „stromu“ (DOM) použijete třídu, tím více kaskádové síly máte. Změna třídy na těle znamená, že můžete ovládat cokoli na celé stránce pomocí jedné třídy. A to vše s velmi malým množstvím JavaScriptu.
Jakmile do toho nakoupíte, budete šťastnějším vývojářem.