Konsep getter dan setter di JavaScript hanyalah salah satu hal yang harus Anda pahami. Mereka bagus di jQuery karena API-nya sangat konsisten sehingga setelah Anda mendapatkannya, Anda bisa menebak bagaimana cara kerjanya untuk berbagai metode. Di tingkat paling dasar…
Setter melakukan sesuatu.
Getter mengembalikan nilai .
Seringkali satu metode dapat digunakan dengan cara apa pun. Ambil metode ketinggian misalnya.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Lihat perbedaannya? Penyetel mengirimkan parameter saat metode tersebut digunakan. Getter tidak melewatkan apa pun . Begitulah cara jQuery sendiri tahu apa yang harus dilakukan. Ini hanya menguji apakah ada parameter di sana atau tidak. Jika tidak, ia berperilaku seperti pengambil. Jika ada, ia berperilaku seperti penyetel. Ini hanyalah kenyamanan API yang bagus, daripada memiliki metode terpisah seperti getHeight dan setHeight.
Perlu dicatat bahwa getter yang digunakan dengan sendirinya tidak melakukan apa-apa.
// Useless $("#example").height();Dan jika Anda menyetel nilai variabel menggunakan penyetel, Anda akan mendapatkan objek jQuery dikembalikan.
// x will be a jQuery object containing #example var x = $("#example").height(100);Itu bisa membingungkan rambut, tetapi juga trik kecil yang bagus untuk menyimpan kode. Jika Anda tahu bahwa Anda perlu meng-cache objek jQuery itu dan mengatur tingginya, sebaiknya Anda melakukannya dalam satu baris kode.
Lihat Pena 8ff68485673396d452f650bfb437fb2a oleh Chris Coyier (@chriscoyier) di CodePen
Juga disebutkan dalam artikel tersebut box-sizing: border-box;. Ukuran kotak adalah properti CSS yang sangat berguna. Saya pendukung besar pengaturannya di semua elemen, seperti:
* ( box-sizing: border-box; )Seperti disebutkan dalam video, ini juga membuat height()jQuery sedikit lebih dapat diprediksi dan konsisten. Tanpa set border-box, height()sama dengan properti height di CSS, atau berapapun ketinggian elemen secara alami, tanpa padding dan border. Dengan border-boxset, height()adalah seberapa tinggi elemen yang dibutuhkan di layar, termasuk padding dan border. Tanpa border-boxset, untuk mendapatkannya, Anda perlu menggunakan outerHeight()jQuery.