Pengenalan kepada JavaScript Fungsional (1)_kemahiran javascript

Mari kita berpura-pura bahawa kita perlu menyelesaikan tugas sekarang: tulis kod JavaScript mengikut prinsip bahasa berfungsi sebanyak mungkin.

Siri artikel berikut direka bentuk untuk membolehkan anda memulakan perjalanan sedemikian dengan saya. Pertama, kita perlu membetulkan beberapa salah tanggapan tentang bahasa berfungsi yang mungkin ada dalam fikiran anda.

Ungkapan fungsional dalam bahasa JS disalahfahamkan dengan serius.

Jelas sekali, terdapat beberapa pembangun yang menggunakan paradigma berfungsi JavaScript setiap hari. Saya akan mengatakan bahawa sebahagian besar pembangun JavaScript tidak benar-benar memahami perkara ini.

Saya rasa sebabnya adalah kerana kebanyakan bahasa pembangunan yang digunakan pada pelayan web berasal daripada C, dan semua orang tahu bahawa bahasa ini bukan bahasa berfungsi.

Secara amnya terdapat dua tahap kekeliruan. Tahap pertama adalah mengenai penggunaan dalam contoh berikut, yang merupakan penggunaan yang sangat biasa dalam jQuery:

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

Dalam kod di atas: kami lulus fungsi tanpa nama sebagai parameter, iaitu fungsi panggil balik yang terkenal dalam JavaScript. Adakah fungsi ini akan dipanggil? Tidak sama sekali!

Contoh di atas menggambarkan ciri utama bahasa berfungsi: fungsi ialah parameter. Sebaliknya, contoh ini melanggar hampir setiap paradigma pengaturcaraan berfungsi yang boleh dilanggar hanya dalam tiga baris kod.

Tahap kedua kekeliruan adalah lebih halus. Lihat ini: Beginilah hanya segelintir pembangun JS yang bergaya melihat diri mereka:

Hmm, baguslah! Tetapi saya sudah memahami sepenuhnya pengaturcaraan berfungsi dan saya menggunakan Underscore.js dalam semua projek saya.

Underscore.js ialah perpustakaan JavaScript yang sangat terkenal dan ada di mana-mana. Sebagai contoh: katakan saya mempunyai satu set perkataan dan saya memerlukan dua huruf pertama bagi setiap perkataan. Ini sangat mudah untuk ditulis menggunakan Underscore.js:

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

Lihat contoh JavaScript ini. Saya menggunakan fungsi elegan dan praktikal dalam gaya berfungsi: _.map dan _.first. Apakah pendapat anda tentang ini?

Walaupun fungsi seperti underscore.js dan _.map adalah contoh berguna bagi paradigma berfungsi, meletakkannya bersama-sama seperti contoh ini agak mengelirukan saya. Adakah kita benar-benar perlu melakukan ini?

Jika kita mula berfikir tentang bagaimana untuk menjadi lebih "berfungsi", mungkin kita boleh menulis semula contoh di atas seperti ini:

// ...a little bit of magic
var firstTwoLetters = map(first(2));

Fikirkan baik-baik, baris kod ini mempunyai kesan yang sama seperti 5 baris di atas. Banyak perkataan hanyalah parameter atau ruang letak. Logik sebenar terletak pada menggabungkan fungsi peta, fungsi pertama, dan pemalar 2 dengan cara yang bermakna.

Sesetengah daripada anda mungkin berfikir: Apakah keajaiban dalam contoh ini? Lagipun, memanggil mana-mana contoh ajaib adalah sedikit seperti bercakap besar, bukan?

Saya bercadang untuk menggunakan dua artikel seterusnya untuk menerangkan keajaiban contoh di atas Jika anda ingin tahu, anda boleh teruskan membaca.

Siri blog ini adalah untuk membantu anda menggunakan keindahan pengaturcaraan berfungsi pada kod JavaScript anda.

Dalam bahagian seterusnya, saya akan membincangkan pelbagai elemen fungsi dan bukan fungsi bahasa JavaScript. Dengan pengetahuan ini, kami perlahan-lahan boleh membentuk sistem pengaturcaraan berfungsi yang lengkap dalam fikiran kami dengan menyepadukan elemen ini dan memahami prestasinya dalam JavaScript.