Bu diziden herhangi bir önemli ön uç mimari felsefesi öğrenirseniz, bunu öğrenin. Sadece sınıfları değiştir. Bu ekran video kaydında, yalnızca durdurmak, kendimizi yakalamak ve bunun yerine CSS kullanmak için JavaScript'in büyük bir tavşan deliğine girmeye başladık. Görsel olarak bir şeyi değiştirirken, bu CSS'nin etki alanıdır. Sadece bunda iyi olmakla kalmaz, aynı zamanda daha performanslıdır ve uzun vadeli sağlıklı bir web sitesi sağlayan sağlıklı bir "endişeler ayrımı" sağlar.
Duyularımıza geldikten sonra, basitçe 1) düğme metnini 2) data-statekabın üzerindeki bir niteliği değiştirdik.
$(".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")); ));İşte sona erdiğimiz yer:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen quFCo'ya bakın
Evet, bu video (ve duygu) "sadece sınıfları değiştir!" Ve sadece onları sevdiğim için translate = "no"> data- * özelliklerini değiştiriyoruz. Bunları isim aralıklı sınıflar veya değerleri olan sınıflar gibi düşünüyorum. Muhtemelen CSS'de sınıflardan daha kullanışlıdır ve aynı özgüllük değerine sahiptirler.
Öyle mi? /: sözdizimi tuhaf görünüyor mu? Öyleyse, bu üçlü (veya "koşullu") operatör olarak bilinir.
İlk satır bir testtir, sonraki satır (veya? 'Den sonraki bit) bu test doğruysa ne olur, son satır (veya :)' den sonraki bit bu test yanlışsa ne olur. Belki bu yardımcı olur:
// 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");Tuhaf göründükleri için onlardan kaçınmayın, sanki / else mantığı gibi daha verimli olabilirler (ve nihayetinde delirmediğiniz sürece aynı şekilde okuyabilirler).
Doug Neiner'ın “sadece sınıfları değiştir” fikri üzerine iyi bir makalesi var. CSS'de sınıflar çok fazla güce sahiptir. Bir şeyleri gizleyebilir / gösterebilir, hareket ettirebilir, nesnelerin görünümünü değiştirebilir, animasyonları tetikleyebilirsiniz ... sınır gökyüzüdür. Ve “ağaçta” (DOM) yukarı çıktıkça, sınıfı uygularsanız, daha fazla kademeli güce sahip olursunuz. Gövdedeki bir sınıf değişikliği, tüm sayfadaki her şeyi tek bir sınıfla kontrol edebileceğiniz anlamına gelir. Ve hepsi çok az miktarda JavaScript ile.
Bunu satın aldığınızda daha mutlu bir geliştirici olacaksınız.