Konsep getter dan setter dalam JavaScript adalah salah satu perkara yang harus anda fahami. Mereka bagus dalam jQuery kerana API begitu konsisten sehingga setelah anda mendapatkannya, anda dapat meneka bagaimana ia berfungsi dengan pelbagai kaedah. Pada tahap paling asas…
Pengatur melakukan sesuatu.
Penerima mengembalikan nilai .
Selalunya satu kaedah boleh digunakan sama ada. Ambil kaedah 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 perbezaannya? Setter melewati parameter ketika kaedah digunakan. Penerima tidak memberikan apa-apa . Begitulah jQuery sendiri tahu apa yang harus dilakukan. Ia hanya menguji sama ada terdapat parameter di sana atau tidak. Sekiranya tidak, ia berkelakuan seperti pemula Sekiranya ada di sana, ia berkelakuan seperti pengatur. Ini hanyalah kemudahan API yang bagus, daripada mempunyai kaedah yang terpisah seperti getHeight dan setHeight.
Perlu diingat bahawa pengguna yang digunakan dengan sendirinya tidak melakukan apa-apa.
// Useless $("#example").height();Dan jika anda menetapkan nilai pemboleh ubah menggunakan setter, anda akan mendapatkan objek jQuery dikembalikan.
// x will be a jQuery object containing #example var x = $("#example").height(100);Itu boleh menjadi rambut yang membingungkan, tetapi juga helah kecil yang bagus untuk menyelamatkan kod. Sekiranya anda tahu bahawa anda memerlukan cache objek jQuery dan menetapkan ketinggiannya, mungkin juga melakukannya dalam satu baris kod.
Lihat Pen 8ff68485673396d452f650bfb437fb2a oleh Chris Coyier (@chriscoyier) di CodePen
Juga disebut dalam artikel tersebut adalah box-sizing: border-box;. Ukuran kotak adalah harta CSS yang sangat berguna. Saya penyokong besar menetapkannya pada semua elemen, seperti:
* ( box-sizing: border-box; )Seperti yang dinyatakan dalam video, ini juga menjadikan height()jQuery sedikit lebih dapat diramalkan dan konsisten. Tanpa set kotak sempadan, height()sama dengan ketinggian harta benda dalam CSS, atau ketinggian apa pun elemennya secara semula jadi, tolak pelapik dan sempadan. Dengan border-boxset, height()berapa tinggi elemen yang diambil di layar, termasuk padding dan border. Tanpa border-boxset, untuk mendapatkannya, anda perlu menggunakan outerHeight()jQuery.