15 Teknik JavaScript Lanjutan Setiap Pemaju Harus Tahu
- 2340
- 397
- Clarence Tromp
JavaScript adalah bahasa pengaturcaraan yang serba boleh dan kuat yang telah digunakan secara meluas dalam pembangunan aplikasi web. Sebagai pemaju, penting untuk mempunyai pemahaman yang kukuh tentang keupayaan bahasa dan teknik canggih untuk mewujudkan aplikasi web yang mantap, cekap, dan berskala.
Berikut adalah 15 teknik JavaScript maju yang perlu diketahui setiap pemaju.
1. Penutupan
Penutupan adalah teknik yang kuat dalam JavaScript yang membolehkan anda membuat fungsi dengan keadaan yang berterusan. Pada asasnya, penutupan adalah fungsi yang "ingat" persekitaran di mana ia dicipta. Ini berguna untuk mewujudkan pembolehubah peribadi, dan juga untuk membuat fungsi yang boleh digunakan untuk menghasilkan fungsi lain.
Sebagai contoh:
fungsi kaunter () let count = 0; fungsi kembali () return ++ count; const c = counter (); konsol.log (c ()); // 1 konsol.log (c ()); // 2 konsol.log (c ()); // 3| 1234567891011 | fungsi kaunter () let count = 0; fungsi kembali () return ++ count; const c = counter (); konsol.log (c ()); // 1console.log (c ()); // 2console.log (c ()); // 3 |
Dalam contoh di atas, fungsi kaunter mengembalikan fungsi yang mempunyai akses kepada pemboleh ubah kiraan dalam skop luarnya. Setiap kali fungsi yang dikembalikan dipanggil, ia meningkatkan pemboleh ubah kiraan dan mengembalikan nilainya.
2. Kari
Currying adalah teknik di mana fungsi dengan pelbagai argumen diubah menjadi satu siri fungsi yang masing -masing mengambil satu hujah. Ini berguna untuk membuat lebih banyak kod modular, dan juga untuk membuat fungsi yang boleh digunakan semula dalam konteks yang berbeza.
Sebagai contoh:
fungsi tambah (a, b) return a + b; fungsi curryAdd (a) return function (b) return add (a, b); const add5 = curryadd (5); konsol.log (add5 (10)); // 15| 123456789101112 | fungsi tambah (a, b) return a + b; fungsi curryAdd (a) return function (b) return add (a, b); const add5 = curryadd (5); konsol.log (add5 (10)); // 15 |
Dalam contoh di atas, fungsi Tambah diubah menjadi fungsi kari menggunakan fungsi curryadd. Fungsi Curryadd mengambil hujah pertama dan mengembalikan fungsi baru yang mengambil hujah kedua b dan memanggil fungsi tambah asal dengan kedua -dua argumen.
3. Memoisasi
Memoisasi adalah teknik untuk mengoptimumkan prestasi fungsi dengan caching hasil perhitungan mahal. Ini berguna untuk fungsi yang sering dipanggil atau yang mengambil masa yang lama untuk dijalankan.
Sebagai contoh:
fungsi fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55| 12345678910111213141516171819202122 | fungsi fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55 |
Dalam contoh di atas, fungsi Memoize mengambil fungsi func dan mengembalikan fungsi baru yang cache hasil panggilan fungsi asal berdasarkan parameter inputnya. Kali berikutnya fungsi dipanggil dengan parameter input yang sama, ia mengembalikan hasil cache dan bukannya melaksanakan fungsi asal.
4. Pendikit
Thottling adalah teknik di mana fungsi dilaksanakan paling banyak sekali dalam selang waktu yang ditentukan. Ini dapat membantu mengehadkan bilangan kali fungsi dipanggil dan meningkatkan prestasi aplikasi anda.
Sebagai contoh:
Fungsi Throttle (Func, Delay) let LastCall = 0; fungsi kembali (... args) const sekarang = tarikh baru ().gettime (); jika (sekarang - lastcall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));| 123456789101112131415 | Fungsi Throttle (Func, Delay) let LastCall = 0; fungsi pulangan (...args) const sekarang = tarikh baru ().gettime (); jika (sekarang - lastcall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100)); |
Dalam contoh di atas, fungsi pendikit mengambil fungsi func dan kelewatan selang masa sebagai argumen dan mengembalikan fungsi baru yang melaksanakan func pada kebanyakan sekali setiap kelewatan milisaat.
Dalam contoh di atas, pendengar acara tatal dibalut dengan fungsi pendikit yang membatasi bilangan kali konsol.pernyataan log ('menatal') dilaksanakan semasa menatal.
5. Debouncing
Debouncing adalah teknik di mana fungsi ditangguhkan sehingga selang waktu yang ditentukan telah berlalu selepas penyerahan terakhir. Ini dapat membantu mengurangkan bilangan kali fungsi dipanggil dan meningkatkan prestasi aplikasi anda.
Sebagai contoh:
fungsi debounce (func, kelewatan) biarkan timerid; fungsi kembali (... args) if (timerid) clearTimeout (timerID); timerid = setTimeout (() => funcing.memohon (ini, args); timerid = null; , kelewatan); tetingkap.addEventListener ('Resize', Debounce (Function () Console.log ('saiz semula'); , 500));| 12345678910111213141516 | fungsi debounce (func, kelewatan) biarkan timerid; fungsi pulangan (...args) if (timerid) clearTimeout (timerId); timerid = setTimeout (() => funcing.memohon (ini, args); timerid = null; , kelewatan); tetingkap.addEventListener ('Resize', Debounce (Function () Console.log ('saiz semula');, 500)); |
Dalam contoh di atas, fungsi debounce mengambil fungsi func dan kelewatan selang masa sebagai argumen dan mengembalikan fungsi baru yang menangguhkan pelaksanaan func sehingga kelewatan milisaat telah berlalu sejak penyerahan terakhir.
Dalam contoh di atas, pendengar acara saiz semula dibalut dengan fungsi debounce yang membatasi bilangan kali konsol.pernyataan log ('saiz semula') dilaksanakan semasa mengubah saiz tetingkap.
6. Janji
Janji adalah cara untuk menguruskan kod tak segerak dalam javascript. Mereka pada dasarnya adalah pemegang tempat untuk nilai yang mungkin belum tersedia, tetapi akan berada di masa depan. Janji boleh digunakan untuk memastikan bahawa kod tertentu berjalan hanya setelah kod lain selesai melaksanakan, dan mereka juga boleh digunakan untuk mengendalikan kesilapan dengan cara yang lebih elegan daripada pengendalian ralat tradisional.
Sebagai contoh:
fungsi fetchData () kembali janji baru ((menyelesaikan, menolak) => fetch ('https: // contoh.com/data ') .Kemudian (respons => respons.json ()) .Kemudian (data => menyelesaikan (data)) .menangkap (ralat => menolak (ralat)); ); fetchData () .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat));| 123456789101112 | fungsi fetchData () kembali janji baru ((menyelesaikan, menolak) => fetch ('https: // contoh.com/data ') .Kemudian (respons => respons.json ()) .Kemudian (data => menyelesaikan (data)) .menangkap (ralat => menolak (ralat)); ); fetchData () .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat)); |
Dalam contoh di atas, fungsi FetchData mengembalikan janji yang menyelesaikan dengan data yang diambil dari https: // contoh.com/data. Janji kemudiannya dimakan menggunakan kaedah kemudian dan menangkap untuk mengendalikan data yang diselesaikan dan sebarang kesilapan yang berlaku.
7. Async/menunggu
Async/Await adalah gula sintaksis di atas janji -janji yang membolehkan anda menulis kod asynchronous yang kelihatan seperti kod segerak. Ini boleh menjadikan kod tak segerak lebih mudah dibaca dan lebih mudah untuk dijaga.
Sebagai contoh:
fungsi async fetchData () try const response = menunggu ambil ('https: // contoh.com/data '); data const = menunggu tindak balas.json (); pulangan data; menangkap (ralat) membuang ralat baru (ralat); fetchData () .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat));| 12345678910111213 | fungsi async fetchData () try const response = menunggu ambil ('https: // contoh.com/data '); data const = menunggu tindak balas.json (); pulangan data; menangkap (ralat) membuang ralat baru (ralat); fetchData () .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat)); |
Dalam contoh di atas, fungsi FetchData diisytiharkan dengan kata kunci async dan menggunakan kata kunci menunggu untuk menunggu nilai janji yang diselesaikan yang dikembalikan oleh pengambilan dan tindak balas.Kaedah JSON. Sebarang kesilapan ditangkap menggunakan blok percubaan/tangkapan.
8. Penjana
Penjana adalah ciri yang kuat dalam JavaScript yang membolehkan anda menjeda dan meneruskan pelaksanaan fungsi, sambil mengekalkan keadaan dalamannya. Ini boleh berguna untuk pelbagai aplikasi, dari pengaturcaraan tak segerak untuk membina iterators.
Berikut adalah contoh bagaimana anda boleh menggunakan penjana untuk membina iterator yang menghasilkan urutan tak terhingga nombor Fibonacci:
fungsi* fibonacci () let [prev, curr] = [0, 1]; sementara (benar) hasil curr; [prev, curr] = [curr, prev + curr]; const fib = fibonacci (); konsol.log (fib.Seterusnya ().nilai); // Log 1 konsol.log (fib.Seterusnya ().nilai); // Log 1 konsol.log (fib.Seterusnya ().nilai); // Log 2 konsol.log (fib.Seterusnya ().nilai); // Log 3 konsol.log (fib.Seterusnya ().nilai); // log 5| 123456789101112131415 | fungsi* fibonacci () let [prev, curr] = [0, 1]; sementara (benar) hasil curr; [prev, curr] = [curr, prev + curr]; const fib = fibonacci (); konsol.log (fib.Seterusnya ().nilai); // log 1console.log (fib.Seterusnya ().nilai); // log 1console.log (fib.Seterusnya ().nilai); // log 2console.log (fib.Seterusnya ().nilai); // log 3console.log (fib.Seterusnya ().nilai); // log 5 |
Dalam contoh ini, fungsi Fibonacci diisytiharkan sebagai fungsi penjana menggunakan sintaks fungsi*. Fungsi ini menggunakan gelung sementara untuk menghasilkan urutan nombor Fibonacci yang tidak terhingga, yang menghasilkan satu demi satu menggunakan kata kunci hasil. Pembolehubah FIB kemudiannya dimulakan sebagai objek iterator menggunakan fungsi Fibonacci (), dan setiap panggilan berikutnya ke kaedah seterusnya () menghasilkan nombor seterusnya dalam urutan.
9. Penyebaran pengendali
Pengendali penyebaran, yang dilambangkan oleh tiga titik (...), adalah ciri yang kuat dalam JavaScript yang membolehkan anda mengembangkan objek yang dapat dimulakan (seperti array atau rentetan) ke dalam elemen individu. Ini dapat digunakan untuk mempermudah dan menyelaraskan kod anda dalam beberapa cara.
Berikut adalah contoh bagaimana anda boleh menggunakan pengendali penyebaran untuk menggabungkan dua array:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [... arr1, ... arr2]; konsol.log (arr3); // log [1, 2, 3, 4, 5, 6]| 12345 | const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; konsol.log (arr3); // log [1, 2, 3, 4, 5, 6] |
Dalam contoh ini, pengendali penyebaran digunakan untuk menyatukan arr1 dan arr2 ke dalam array baru arr3. Sintaks… ARR1 memperluaskan array ARR1 ke dalam elemen individu, yang kemudiannya disatukan dengan ... sintaks arr2.
10. Fungsi pesanan lebih tinggi
Fungsi pesanan yang lebih tinggi adalah fungsi yang mengambil fungsi lain sebagai hujah atau mengembalikan fungsi sebagai hasilnya. Ini berguna untuk membuat kod boleh diguna semula yang boleh disesuaikan agar sesuai dengan kes penggunaan yang berbeza.
fungsi multiplyBy (faktor) return function (nombor) return number * factor; ; const double = MultiPlyBy (2); const triple = multiplyBy (3); konsol.log (double (5)); // log 10 konsol.log (triple (5)); // log 15| 1234567891011 | fungsi multiplyBy (faktor) return function (nombor) return number * factor; ; const double = MultiPlyBy (2); const triple = MultiPlyBy (3); konsol.log (double (5)); // log 10console.log (triple (5)); // log 15 |
Dalam contoh ini, fungsi multiplyBy mengembalikan fungsi lain yang mengalikan nombor yang diberikan oleh faktor yang ditentukan. Fungsi yang dikembalikan boleh digunakan untuk membuat fungsi lain yang berlipat ganda dengan faktor yang berbeza.
11. Merosakkan
Pemusnahan adalah cara untuk mengekstrak nilai dari objek atau tatasusunan dengan cara yang lebih ringkas. Ini sangat berguna apabila berurusan dengan struktur data yang kompleks, kerana ia membolehkan anda dengan cepat dan mudah mengeluarkan nilai yang anda perlukan.
const Person = name: 'John', umur: 30, alamat: Street: '123 Main St', City: 'AnyTown', State: 'Ca', Zip: '12345'; const name, umur, alamat: city = orang; konsol.log (nama); // konsol 'John'.log (umur); // 30 konsol.log (bandar); // 'anytown'| 12345678910111213141516 | const Person = name: 'John', umur: 30, alamat: Street: '123 Main St', City: 'AnyTown', State: 'Ca', Zip: '12345'; const name, umur, alamat: city = orang; konsol.log (nama); // 'John'console.log (umur); // 30console.log (bandar); // 'anytown' |
Dalam contoh ini, kita merosakkan objek orang untuk mengekstrak nama, umur, dan harta bandar dan menyerahkannya kepada pembolehubah.
12. Delegasi Acara
Delegasi Acara adalah teknik untuk mengendalikan acara di mana satu pengendali acara dilampirkan pada elemen induk, bukannya setiap elemen anak individu. Ini berguna untuk meningkatkan prestasi pengendalian acara, serta untuk mengendalikan acara pada kandungan yang dihasilkan secara dinamik.
- Perkara 1
- Perkara 2
- Perkara 3
| 123456789101112131415 |
|
Dalam contoh ini, kami melampirkan pendengar acara klik ke elemen UL dan kemudian menggunakan acara tersebut.sasaran harta untuk menentukan elemen li mana yang diklik. Ini berguna untuk mengendalikan peristiwa pada kandungan dinamik yang boleh ditambah atau dikeluarkan dari halaman.
13. Penggunaan kurungan keriting
Di JavaScript, kurungan keriting digunakan untuk membatalkan kod blok. Walau bagaimanapun, mereka juga boleh digunakan dengan cara yang lebih ringkas untuk membuat objek atau menghancurkan objek. Ini boleh menjadi sangat berguna apabila bekerja dengan struktur data yang kompleks.
fungsi myFunction () const x = 1; const y = 2; jika (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');| 12345678910 | fungsi myFunction () const x = 1; const y = 2; jika (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y'); |
Dalam contoh ini, kami menggunakan kurungan keriting untuk menentukan badan fungsi MyFunction dan pernyataan IF.
14. Modul JavaScript
Modul JavaScript adalah cara untuk mengatur kod ke dalam unit yang boleh diguna semula,. Mereka boleh digunakan untuk merangkum fungsi dan membuat lebih banyak kod yang boleh dipelihara.
// modul1.fungsi eksport JS Tambah (a, b) return a + b; // Module2.js import add dari './modul1.js '; const sum = tambah (2, 3); konsol.log (jumlah); // 5| 1234567891011 | // modul1.Fungsi JSExport Tambah (a, b) return a + b; // module2.jsimport add dari './modul1.js '; const sum = tambah (2, 3); konsol.log (jumlah); // 5 |
Dalam contoh ini, kami mengeksport fungsi tambah dari modul1.js dan kemudian mengimportnya ke modul2.js menggunakan penyata import. Ini membolehkan kami menggunakan semula fungsi tambah di bahagian yang berlainan kod kami.
15. Fungsi anak panah
Fungsi anak panah adalah cara ringkas untuk menentukan fungsi dalam JavaScript. Mereka amat berguna untuk mewujudkan fungsi tanpa nama, dan juga untuk membuat fungsi yang mengambil satu hujah.
nombor const = [1, 2, 3, 4, 5]; const evennumbers = nombor.penapis (num => num % 2 === 0); konsol.log (evennumbers); // [2, 4]| 12345 | nombor const = [1, 2, 3, 4, 5]; const evennumbers = nombor.penapis (num => num % 2 === 0); konsol.log (evennumbers); // [2, 4] |
Dalam contoh ini, kami menggunakan fungsi anak panah untuk menapis array nombor dan mengembalikan nombor juga. Sintaks fungsi anak panah lebih pendek dan lebih ringkas daripada sintaks fungsi tradisional.
Kesimpulan
Kesimpulannya, 15 teknik JavaScript maju ini penting bagi mana -mana pemaju yang ingin mengambil kemahiran mereka ke peringkat seterusnya. Sama ada anda sedang menjalankan projek kecil atau aplikasi yang besar, teknik ini dapat membantu anda menulis kod yang lebih efisien dan boleh dipelihara. Oleh itu, mulailah berlatih dan lihat bagaimana teknik -teknik ini dapat membantu anda mengambil kemahiran JavaScript anda ke peringkat seterusnya!