Beberapa tahun yang lalu, selama kita menulis JavaScript, kita harus menggunakan beberapa fungsi yang umum digunakan, seperti AddEventListener dan AttachEvent, yang bukan untuk teknologi dan fungsi canggih, tetapi hanya beberapa tugas dasar, dan alasannya disebabkan oleh perbedaan antara berbagai browser. Seiring berlalunya waktu, teknologi terus meningkat, masih ada beberapa fungsi JavaScript yang penting untuk hampir semua programmer web, baik untuk kinerja atau untuk fungsionalitas.
Debounce Function yang mencegah panggilan frekuensi tinggi
Fungsi Debounce ini adalah fungsi peningkatan kinerja yang penting bagi mereka yang melakukan tugas yang digerakkan oleh acara. Jika Anda tidak menggunakan fungsi downscaling saat menggunakan gulir, mengubah ukuran, kunci* dan acara lain untuk memicu tugas, Anda akan membuat kesalahan besar. Debounce Debounce Debounce Down-Frequency berikut dapat membuat kode Anda efisien:
// Kembalikan fungsi, bahwa, selama itu terus dipanggil, tidak akan // dipicu. Fungsi akan dipanggil setelah berhenti dipanggil untuk // n milidetik. Jika `langsung` dilewati, memicu fungsi pada // terdepan, bukannya trailing.function debounce (func, tunggu, langsung) {var timeout; return function () {var context = this, args = argumen; var kemudian = function () {timeout = null; if (! segera) func.Apply (konteks, args); }; var callnow = segera &&! Timeout; ClearTimeout (timeout); timeout = setTimeout (nanti, tunggu); if (callnow) func.Amply (konteks, args); };}; // usagevar myeficientfn = debounce (function () {// Semua barang pajak yang Anda lakukan}, 250); window.addeventListener ('mengubah ukuran', myefficientfn);Fungsi Debounce hanya memungkinkan fungsi panggilan balik yang Anda berikan untuk dieksekusi sekali dalam interval waktu tertentu, sehingga mengurangi frekuensi eksekusi. Pembatasan seperti itu sangat penting ketika peristiwa yang dipicu frekuensi tinggi ditemui.
Setel fungsi deteksi siklus waktu/frekuensi
Fungsi Debounce yang disebutkan di atas dipicu oleh bantuan suatu peristiwa. Tetapi kadang -kadang tidak ada peristiwa seperti itu yang tersedia, jadi kami hanya dapat menulis fungsi sendiri untuk memeriksanya sesekali.
Poll Function (fn, callback, err, timeout, interval) {var startTime = (new date ()). getTime (); var pi = window.setInterval (function () {if (math.floor (((tanggal baru) .getTime () - startTime) / 1000) <= timeout) {if (fn ()) {callback ();}} else {window.clearInterval (pi); err ();}}}} {window.clearInterval (pi);Setelah fungsi yang melarang panggilan berulang dan hanya memungkinkan eksekusi sekali
Sering kali, kami hanya ingin beberapa tindakan dieksekusi sekali, sama seperti kami menggunakan Onload untuk membatasi untuk dieksekusi hanya sekali ketika beban selesai. Fungsi berikut akan memungkinkan operasi Anda untuk dieksekusi sekali dan tidak akan dieksekusi berulang kali.
fungsi sekali (fn, konteks) {var hasil; return function () {if (fn) {result = fn.Apply (konteks || ini, argumen); fn = null; } hasil pengembalian; };} // usagevar canonlyfireonce = sekali (function () {console.log ('dipecat!');}); CanOnlyfireonce (); // "Dipecat!" canonlyfireonce (); // nadaFungsi ini sekali dapat memastikan bahwa fungsi yang Anda berikan hanya dieksekusi sekali dan mencegah eksekusi berulang.
Dapatkan alamat absolut dari tautan getabsoluteurl
Mendapatkan alamat absolut dari tautan tidak sesederhana yang Anda pikirkan. Berikut ini adalah fungsi yang sangat praktis yang dapat memperoleh alamat absolut berdasarkan alamat relatif yang Anda masukkan:
var getAbsoluteUrl = (function () {var a; return function (url) {if (! a) a = document.createElement ('a'); a.href = url; return a.href;};}) (); // usageteGetAbsoluteUrl ('/sesuatu');Di sini kami menggunakan tag HREF untuk menghasilkan URL absolut lengkap, yang sangat dapat diandalkan.
Tentukan apakah fungsi JavaScript adalah fungsi sistem asli adalah
Banyak skrip JS pihak ketiga akan memperkenalkan fungsi baru ke dalam variabel global, dan beberapa bahkan akan menimpa fungsi asli sistem. Metode berikut adalah memeriksa apakah itu fungsi asli:
; (function () {// Digunakan untuk menyelesaikan `[[kelas]]` dari nilai var tostring = objek.prototype.tostring; // yang digunakan untuk menyelesaikan sumber fungsi yang didekompilasi var fntostring = function.prototype.tostring; // digunakan untuk mendeteksi host host (safari> 4; benar -benar /function) var rePhy; . +? Konstruktor/] $/; .replace (/[.*+?^$ {} () | [/] ////]/g, '// $ &') // Ganti menyebutkan `tostring` dengan`.*? `Untuk menjaga templat generik. .replace (/tostring | (fungsi).*? (? = /// () | for. +? (? = ///])/g, '$ 1.*?') + '$'); Renative.test (FNTOSTRING.CALL (Nilai)) // Fallback ke Host Object Pemeriksaan Karena beberapa lingkungan akan mewakili // Hal -hal seperti Array yang diketik sebagai metode DOM yang mungkin tidak sesuai dengan // POLA NEKAN NORMAL. isnative;} ()); // usageisnative (waspada);Meskipun metode ini tidak begitu ringkas, masih bisa menyelesaikan tugas!
Buat aturan CSS baru dengan JavaScript Insertrule
Terkadang kami menggunakan pemilih CSS (seperti Document.QuerySelectorall) untuk mendapatkan nodelist dan kemudian memodifikasi gaya untuk masing -masing pada gilirannya. Bahkan, ini bukan pendekatan yang efisien. Ini adalah pendekatan yang efisien untuk membuat aturan gaya CSS baru menggunakan JavaScript:
// Bangun lembar lembar yang lebih baik sheet = (function () {// build style var style = document.createElement ('style'); style.setAttribute ('media', 'screen'); style.appendChild (document.createTextNode ('')); document.head.AppendChild (style); // build dan return function function function function single return function single return function single return function tunggal) {style) (style); style.sheet.cssrules.length);};}) (); // Kemudian panggil sebagai functionheet (". Statistik {posisi: relatif; atas: 0px}");Praktik -praktik ini sangat efisien. Dalam beberapa skenario, seperti saat menggunakan AJAX untuk memuat HTML baru, Anda tidak perlu mengoperasikan konten HTML yang baru dimuat.
Tentukan apakah elemen halaman web memiliki atribut dan gaya tertentu yang matchesselector
fungsi Matchesselector (EL, Selector) {var p = element.prototype; var f = p.matches || p.webkitmatchesselector || p.mozmatchesselector || p.msmatchesselector || function (s) {return [] .indexof.call (document.queryselectorall (s), this)! == -1; }; return f.call (el, selector);} // usageMatchesselector (document.geteLementById ('myDiv'), 'div.someselector [beberapa-attribut = true]')7 Fungsi JavaScript ini adalah semua yang harus diketahui oleh setiap programmer web.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.