Javascript ialah bahasa yang sangat fleksibel. Kami boleh menulis pelbagai gaya kod mengikut kesukaan kami , selesaikan masalah biasa dan mudah dielakkan
Kecekapan pelaksanaan JavaScript sendiri
Rantaian skop, penutupan, warisan prototaip, eval dan ciri-ciri lain dalam Javascript bukan sahaja menyediakan pelbagai fungsi ajaib, tetapi juga membawa pelbagai masalah kecekapan Jika digunakan secara sembarangan, ia akan membawa kepada kecekapan pelaksanaan yang rendah.
1. Import global
Kami akan menggunakan beberapa pembolehubah global (tetingkap, dokumen, pembolehubah global tersuai, dsb.) lebih kurang semasa proses pengekodan Sesiapa sahaja yang memahami rantaian skop JavaScript mengetahui bahawa mengakses pembolehubah global dalam skop tempatan memerlukan Keseluruhan skop. rantaian dilalui lapisan demi lapisan sehingga skop peringkat atas, dan kecekapan capaian pembolehubah tempatan akan menjadi lebih pantas dan lebih tinggi Oleh itu, apabila beberapa objek global kerap digunakan dalam skop tempatan, ia boleh diimport ke dalam skop tempatan, untuk. contoh:
Kod JavaScript akan melakukan operasi "pra-penyusun" yang serupa sebelum pelaksanaan: ia mula-mula akan mencipta objek aktif dalam persekitaran pelaksanaan semasa dan menetapkan pembolehubah tersebut yang diisytiharkan dengan var sebagai atribut objek aktif, tetapi pada masa ini ini pembolehubah Nilai tugasan semuanya tidak ditentukan, dan fungsi yang ditakrifkan dengan fungsi juga ditambah sebagai sifat objek aktif, dan nilainya adalah betul-betul takrifan fungsi tersebut. Walau bagaimanapun, jika anda menggunakan "eval", kod dalam "eval" (sebenarnya rentetan) tidak dapat mengecam konteksnya terlebih dahulu dan tidak boleh dihuraikan dan dioptimumkan terlebih dahulu, iaitu, operasi yang telah dikompilasi tidak boleh dilakukan. Oleh itu, prestasinya juga akan sangat berkurangan
Sebenarnya, orang jarang menggunakan eval pada masa kini Apa yang saya ingin bincangkan di sini ialah dua senario seperti eval (Fungsi baharu{}, setTimeout, setInterver)
Salin kod
Kod adalah seperti berikut:
1. Kurangkan aliran semula
Apakah reflow?
Apabila sifat elemen DOM berubah (seperti warna), penyemak imbas akan memberitahu pemaparan untuk melukis semula elemen yang sepadan Proses ini dipanggil mengecat semula.
Jika perubahan melibatkan reka letak elemen (seperti lebar), penyemak imbas membuang atribut asal, mengira semula dan menghantar keputusan untuk membuat lukis semula elemen halaman Proses ini dipanggil aliran semula.
Kaedah untuk mengurangkan aliran semula
Tetapkan paparan elemen kepada "tiada", dan kemudian tukar paparan kepada nilai asal selepas melengkapkan pengubahsuaian
Apabila mengubah suai berbilang atribut gaya, tentukan kelas kelas dan bukannya mengubah suai atribut gaya berbilang kali (disyorkan untuk pelajar tertentu)
Gunakan documentFragment
apabila menambahkan sejumlah besar elemen pada halaman
Contohnya
Salin kod
document.getElementById("parent").appendChild(anak);
}
Apabila kod perlu mengakses maklumat status elemen beberapa kali, kami boleh menyimpannya buat sementara waktu dalam pembolehubah jika status kekal tidak berubah Ini boleh mengelakkan overhed memori yang disebabkan oleh berbilang akses kepada DOM. Contoh biasa ialah:
4. Gunakan delegasi acara
Senario penggunaan: Senarai dengan bilangan rekod yang besar Setiap rekod perlu diikat pada peristiwa klik untuk melaksanakan fungsi tertentu selepas tetikus diklik halaman Terdapat sejumlah besar pendengar acara, yang akan menjadi tidak cekap.
Berdasarkan prinsip pemantauan acara yang diperkenalkan di atas, mari kita tulis semula
Sudah tentu, kita tidak perlu menilai sumber acara setiap kali Kita boleh mengabstrakkannya dan menyerahkannya kepada kelas alat untuk diselesaikan. Kaedah delegate() dalam jquery melaksanakan fungsi ini
Sintaksnya seperti ini $(selector).delegate(childSelector, event, data, function), contohnya:
Salin kod
Perihalan parameter (dipetik daripada w3school)
Perihalan Parameter
childSelector diperlukan. Menentukan satu atau lebih elemen anak yang mana pengendali acara dilampirkan.
acara diperlukan. Menentukan satu atau lebih acara untuk dilampirkan pada elemen. Berbilang nilai acara dipisahkan oleh ruang. Mesti acara yang sah.
data adalah pilihan. Menentukan data tambahan untuk dihantar ke fungsi.
fungsi yang diperlukan. Menentukan fungsi untuk dijalankan apabila peristiwa berlaku.
Petua: Satu lagi faedah perwakilan acara ialah walaupun peristiwa yang dicetuskan pada elemen ditambah secara dinamik selepas pengikatan acara juga boleh dipantau, jadi tidak perlu untuk mengikat acara kepada elemen setiap kali ia ditambahkan secara dinamik pada halaman