Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara Bawang menggunakan JavaScript

Cara Bawang menggunakan JavaScript

PHPz
Lepaskan: 2023-04-26 11:21:07
asal
560 orang telah melayarinya

JavaScript ialah bahasa skrip yang digunakan secara meluas yang boleh digunakan untuk membangunkan pelbagai jenis aplikasi, termasuk aplikasi web, aplikasi desktop, skrip sebelah pelayan, dsb. Dalam aplikasi ini, JavaScript sering digunakan untuk mencipta antara muka pengguna interaktif, memproses data, bertindak balas kepada peristiwa pengguna, dsb.

Dalam artikel ini, kami akan memperkenalkan perpustakaan JavaScript yang dipanggil "onion". Perpustakaan menyediakan satu siri fungsi utiliti yang membantu pembangun JavaScript menulis kod dengan lebih cekap.

1. Apa itu Bawang

Bawang ialah perpustakaan JavaScript yang ringan dengan paradigma pengaturcaraan berfungsi pada terasnya. Ia menyediakan banyak fungsi dan komponen praktikal untuk membantu pembangun menulis kod dengan lebih ringkas dan cekap.

Idea teras bawang adalah untuk membolehkan pembangun melihat program sebagai satu siri langkah pemprosesan data bersarang. Setiap langkah menerima data input dan menghasilkan data output, yang menjadi input untuk langkah seterusnya. Proses ini seperti mengupas lapisan bawang, jadi perpustakaan dipanggil "bawang".

2. Menggunakan bawang

Sebelum menggunakan bawang, kita perlu memasang perpustakaan terlebih dahulu. Ia boleh dipasang melalui alat baris arahan npm:

npm install @zhangmingkai2008/onion
Salin selepas log masuk

Selepas pemasangan selesai, kami boleh menggunakan perpustakaan bawang dalam projek JavaScript. Di bawah, kami akan memperkenalkan beberapa fungsi praktikal dan komponen yang disediakan oleh perpustakaan bawang.

  1. karang

Fungsi karang boleh menggabungkan berbilang fungsi menjadi satu fungsi. Fungsi ini akan dilaksanakan mengikut tertib dari kanan ke kiri, dan hasil keluaran akan digunakan sebagai input bagi fungsi seterusnya.

Sebagai contoh, kita boleh mentakrifkan tiga fungsi:

const add = x => x + 1;
const double = x => x * 2;
const square = x => x * x;
Salin selepas log masuk
Salin selepas log masuk

dan kemudian gunakan compose untuk menggabungkannya:

const composed = onion.compose(square, double, add);
Salin selepas log masuk

Melaksanakan fungsi yang digubah akan menghasilkan keputusan berikut :

composed(2); // 返回 36
Salin selepas log masuk

Dalam kod di atas, 2 diluluskan sebagai nilai input kepada fungsi tambah, kemudian fungsi berganda dilaksanakan, dan akhirnya fungsi segi empat sama dilaksanakan. Keluaran akhir ialah 36.

  1. paip

fungsi paip mempunyai kesan yang sama seperti fungsi gubah, tetapi susunan pelaksanaan adalah dari kiri ke kanan. Iaitu, fungsi paip melaksanakan fungsi pertama dan kemudian menghantar outputnya ke fungsi seterusnya.

Sebagai contoh, kita boleh mentakrifkan tiga fungsi:

const add = x => x + 1;
const double = x => x * 2;
const square = x => x * x;
Salin selepas log masuk
Salin selepas log masuk

dan kemudian gunakan paip untuk menggabungkannya:

const piped = onion.pipe(add, double, square);
Salin selepas log masuk

Melaksanakan fungsi paip akan menghasilkan keputusan berikut :

piped(2); // 返回 36
Salin selepas log masuk

Turutan pelaksanaan fungsi karang adalah bertentangan, fungsi tambah dilaksanakan dahulu, kemudian fungsi berganda dilaksanakan, dan akhirnya fungsi segi empat dilaksanakan. Keluaran akhir ialah 36.

  1. kari

Fungsi kari boleh menukar fungsi yang menerima berbilang parameter kepada satu siri fungsi yang hanya menerima satu parameter. Setiap fungsi mengembalikan fungsi baharu yang mengambil hujah seterusnya sebagai input.

Sebagai contoh, kita boleh mentakrifkan fungsi yang menerima tiga parameter:

const sum = (x, y, z) => x + y + z;
Salin selepas log masuk

dan kemudian gunakan fungsi kari untuk menukar:

const curriedSum = onion.curry(sum);
Salin selepas log masuk

Sekarang, kita boleh gunakan Kaedah berikut untuk memanggil fungsi curriedSum:

curriedSum(1)(2)(3); // 返回 6
curriedSum(1, 2)(3); // 返回 6
curriedSum(1)(2, 3); // 返回 6
Salin selepas log masuk

Setiap parameter panggilan fungsi curriedSum akan mengembalikan fungsi baharu dan fungsi baharu menerima parameter seterusnya. Apa yang akhirnya dikembalikan adalah hasil daripada fungsi terakhir.

  1. peta

Fungsi peta mengambil tatasusunan dan fungsi sebagai input, menggunakan fungsi itu pada setiap elemen tatasusunan dan mengembalikan tatasusunan baharu.

Sebagai contoh, kita boleh mentakrifkan tatasusunan dan fungsi:

const numbers = [1, 2, 3, 4];
const square = x => x * x;
Salin selepas log masuk

dan kemudian gunakan fungsi peta untuk menggunakan fungsi itu pada elemen tatasusunan:

const squaredNumbers = onion.map(square, numbers);
Salin selepas log masuk

Sekarang, Tatasusunan squaredNumbers hendaklah [1, 4, 9, 16].

  1. penapis

Fungsi penapis mengambil tatasusunan dan fungsi sebagai input, menggunakan fungsi untuk setiap elemen tatasusunan dan mengembalikan tatasusunan baharu yang mengandungi hanya unsur-unsur yang fungsi kembali benar.

Sebagai contoh, kita boleh mentakrifkan tatasusunan dan fungsi:

const numbers = [1, 2, 3, 4];
const isEven = x => x % 2 === 0;
Salin selepas log masuk

Kemudian gunakan fungsi penapis untuk menggunakan fungsi pada elemen tatasusunan:

const evenNumbers = onion.filter(isEven, numbers);
Salin selepas log masuk

Sekarang, tatasusunan evenNumbers hendaklah [2, 4].

3. Ringkasan

Dalam artikel ini, kami memperkenalkan beberapa fungsi praktikal dan komponen perpustakaan JavaScript Bawang. Fungsi ini membantu pembangun JavaScript menulis kod dengan lebih mudah dan cekap.

Idea teras bawang adalah untuk membolehkan pembangun melihat program sebagai satu siri langkah pemprosesan data bersarang. Langkah-langkah ini akan dikupas lapisan demi lapisan, dan data output akan menjadi input untuk langkah seterusnya. Menggunakan pendekatan ini boleh membantu pembangun menyusun kod dengan lebih baik dan meningkatkan kebolehselenggaraan dan kebolehbacaan kod.

Atas ialah kandungan terperinci Cara Bawang menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan