Jika Anda mempelajari sedikit filosofi arsitektur front end dari seri ini, pelajari yang satu ini. Ganti kelas saja. Dalam screencast ini kita mulai menelusuri lubang kelinci utama JavaScript hanya untuk berhenti, menahan diri, dan menggunakan CSS sebagai gantinya. Saat Anda mengubah sesuatu secara visual, itu adalah domain CSS. Tidak hanya bagus dalam hal itu, itu biasanya lebih berkinerja dan memelihara "pemisahan masalah" sehat yang membuat situs web sehat jangka panjang.
Setelah kami sadar, kami akhirnya menukar 1) teks tombol 2) data-stateatribut pada wadah.
$(".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")); ));Di sinilah kami berakhir:
Lihat Pen quFCo oleh Chris Coyier (@chriscoyier) di CodePen
Ya, video (dan sentimen) ini adalah "ubah kelas saja!", Dan kami mengubah atribut translate = "no"> data- * hanya karena saya menyukainya. Saya menganggapnya seperti kelas yang diberi spasi nama, atau kelas dengan nilai. Bisa dibilang lebih berguna di CSS daripada kelas dan mereka memiliki nilai spesifisitas yang sama persis.
Apakah itu? /: sintaks terlihat aneh? Jika demikian, itu dikenal sebagai operator terner (atau "bersyarat").
Baris pertama adalah tes, baris berikutnya (atau bit setelah?) Adalah apa yang terjadi jika tes itu jika benar, baris terakhir (atau bit setelah :) adalah apa yang terjadi jika tes itu salah. Mungkin ini membantu:
// 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");Jangan menghindarinya hanya karena terlihat aneh, mereka bisa lebih efisien (dan akhirnya membaca juga, selama Anda tidak menjadi gila) seolah-olah / lain logika.
Doug Neiner memiliki artikel bagus tentang gagasan "ganti kelas". Kelas memiliki banyak kekuatan dalam CSS. Anda dapat menyembunyikan / menampilkan sesuatu, memindahkan sesuatu, mengubah tampilan benda, memicu animasi… langit adalah batasnya. Dan semakin tinggi di "pohon" (DOM) yang Anda terapkan kelasnya, semakin banyak kekuatan cascading yang Anda miliki. Perubahan kelas pada isi berarti Anda dapat mengontrol apa pun di seluruh halaman dengan satu kelas. Dan semuanya dengan JavaScript yang sangat sedikit.
Setelah Anda membeli ini, Anda akan menjadi pengembang yang lebih bahagia.