Bermula dengan underscore.js

3

Takeaways Key

underscore.js adalah perpustakaan JavaScript yang menyediakan utiliti berfungsi untuk pelbagai kes penggunaan, menjadikan kod lebih mudah dibaca dan ditulis, dan menawarkan ciri -ciri yang tidak selalu tersedia dalam JavaScript asli.

Perpustakaan termasuk kaedah biasa seperti _.each () untuk menulis gelung yang boleh dibaca, _.template () untuk templating intuitif dan mudah, dan _.filter () untuk penapisan tatasusunan menggunakan fungsi boolean.

underscore.js ringan dan digunakan oleh banyak projek nama besar, termasuk USA Today, LinkedIn, dan Khan Academy.

Aplikasi demo menggunakan underscore.js, jQuery, dan API Web Spotify menunjukkan bagaimana perpustakaan boleh digunakan untuk mengambil dan memaparkan data dari API, dan membolehkan pengguna menapis hasil.
• Artikel ini dikaji semula oleh Agbonghama Collins dan Ryan Chenkie. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!
underscore.js adalah perpustakaan JavaScript, yang ditulis oleh Jeremy Ashkenas, yang menyediakan utiliti berfungsi untuk pelbagai kes penggunaan yang kita, sebagai pemaju, mungkin melihat ketika menghadapi projek web.
• ia menjadikan kod yang lebih mudah dibaca:

ia membuat kod yang lebih mudah ditulis:

Ia menawarkan ciri -ciri yang tidak ada kaedah asli 1: 1:

ia juga boleh digunakan sebagai enjin templat dengan haknya sendiri:

_.isEmpty({});
// true

Underscore adalah perpustakaan ringan (hanya 5.7kb, minified dan gzipped) dan digunakan oleh pelbagai projek nama besar, seperti:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

USA Today

_.range(5);
// [0, 1, 2, 3, 4]

LinkedIn

Khan Academy

_.template('<p><%= text %></p>', {text: 'SitePoint Rocks!'});
// <p>SitePoint Rocks!</p>

Sekarang mari kita dapatkan lebih spesifik dan mula menyelam ke dalam keupayaan utamanya.

• bahagian yang baik
• Dalam tutorial ini, saya akan menyerlahkan tiga kaedah yang paling biasa di bawah tanah:
_. Setiap ()

_. Template ()

_. Filter ()

Saya akan menerangkan bagaimana ia digunakan secara individu, kemudian mengikat mereka bersama -sama untuk membina aplikasi demo yang boleh anda temukan pada akhir tutorial. Seperti biasa, kod untuk demo ini boleh didapati di GitHub.

• Jika anda ingin mengikuti bersama -sama dengan contoh -contoh, anda perlu merebut salinan perpustakaan, contohnya dari CDN kegemaran anda:
Dan jika anda mendapati diri anda memerlukan bantuan di sepanjang jalan, atau anda hanya ingin tahu untuk mengetahui lebih lanjut, jangan lupa bahawa dokumentasi Underscore adalah luas. Ia juga mempunyai komuniti yang besar dan aktif, yang bermaksud bantuan mudah dicari.
_. Setiap: Tulis gelung yang boleh dibaca

tidak ada satu projek yang tidak mempunyai sesuatu yang serupa dengan coretan ini pada satu ketika dalam kod:

underscore membolehkan anda menulis kod setara, menggunakan sintaks yang lebih mudah dibaca:

<span><span><span><script</span> src<span>="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"</span>></span><span><span></script</span>></span>
</span>

_.isEmpty({});
// true

kemas, eh? _.each () mengambil dua parameter:

• array (atau objek) untuk melelehkan.
• fungsi panggil balik.

untuk setiap elemen dalam array kami _.each () akan memohon fungsi panggil balik (dirujuk dalam dokumentasi sebagai iterate ). Di dalam panggilan balik kami mendapat akses kepada tiga lagi parameter:

• Nilai array untuk indeks lelaran semasa (artis). Sebagai contoh, untuk coretan di atas kami akan mendapat "Pharrel Williams" untuk lelaran pertama.
• bilangan lelaran semasa (indeks), yang dalam kes kita akan berubah dari 0 hingga 2.
• array yang kita berulang melalui (artis).

kerana anda dapat melihat kod itu lebih mudah dibaca dan kami dapat mengakses unsur -unsur individu dalam array tanpa memerlukan artis [i], seperti yang kita lihat dalam contoh yang digunakan untuk gelung.

lihat pen _.each oleh sitepoint (@sitePoint) pada codepen.

Seterusnya, kita akan melihat bagaimana enjin templating berkelakuan.

_. Template (): intuitif dan lurus

Sejak kebangkitan aplikasi halaman tunggal, mempunyai enjin templating frontend yang boleh dipercayai telah menjadi keperluan asas untuk timbunan kerja kami.

Underscore menyediakan enjin templating, yang, bagi mereka yang biasa dengan bahasa seperti PHP, atau Ruby on Rails, akan kelihatan agak biasa.

Melaksanakan dari coretan sebelumnya, kami akan menunjukkan bagaimana _.template () berfungsi. Kami akan melakukan ini dengan menambahkan beberapa baris ke kod kami seperti yang ditunjukkan di bawah:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

di sini kita menggunakan fungsi _.template () dengan argumen rentetan, yang merangkumi beberapa data di dalam pembatas (). Apabila dipanggil dengan cara ini, _.template () mengembalikan fungsi yang boleh kita gunakan lagi dan lagi.

kita boleh menggunakan fungsi baru kita menggunakan ArtistTemplate (), lulus objek literal sebagai hujah. Ini akan mengembalikan rentetan yang pada asalnya kami lulus ke _.template (), menggantikan mana -mana sifat objek yang sesuai dengan pembolehubah percuma templat. Dalam kes kami akan digantikan dengan nilai dalam atribut artis objek.

enjin templating underscore, tidak hanya membenarkan nilai tunggal diganti, tetapi juga pelaksanaan skrip di dalam templat itu sendiri. Dengan satu pengubahsuaian, kita boleh membuat coretan kita lebih kuat.

_.range(5);
// [0, 1, 2, 3, 4]

Kami telah memasukkan panggilan kami ke _.Each () ke dalam rentetan yang mewakili templat kami, yang membawa kami untuk mengubah cara template dipanggil. Oleh kerana kita kini melangkah ke dalam fungsi _.template (), kita boleh lulus artis artis lengkap ke artisTemplate () (sebelum ini kita melewati artis individu). Output kod ini akan sama seperti dalam contoh sebelumnya.

Apabila kita mahu _.template () untuk menilai kod JavaScript, kita hanya perlu mengelilingi kod kita antara bukan .

Sejak menggunakan templat yang dihasilkan oleh _.Template berfungsi sama seperti menggunakan fungsi, kita boleh mengambil coretan kita satu langkah lebih jauh dan mempunyai satu templat yang dipanggil dari dalam yang lain, dengan menggunakan tag . Dengan cara ini, kita boleh membuat templat yang boleh diguna semula, kerana kita boleh mempunyai template pembalut yang berbeza untuk senarai artis kami dan hanya memohon templat untuk setiap item yang terkandung.

lihat pen _.template () oleh sitepoint (@sitePoint) pada codepen.

Akhirnya, mari kita lihat fungsi _.filter ().

_. Filter (): semua yang anda perlukan adalah fungsi boolean

_. Filter () menerima pelbagai dan fungsi panggil balik sebagai argumen. Ia kemudian memanggil fungsi untuk setiap elemen dalam array dan mengembalikan array baru yang mengandungi unsur -unsur yang mana fungsi dinilai kepada sesuatu yang benar.

Fungsi panggil balik kami juga akan menerima tiga argumen, seperti dalam kes _.each (): elemen dalam array yang sepadan dengan indeks lelaran semasa, indeks lelaran dan array itu sendiri.

Untuk menjelaskan ini, mari kita buat beberapa pengubahsuaian pada coretan kami.

Seperti yang anda mungkin dapati, dalam templat kami kami akan menerima ['ACDC'] sebagai hujah array. Berikut adalah demo apa yang telah kita ada setakat ini.

_.isEmpty({});
// true

lihat pen _.filter () oleh sitepoint (@sitePoint) pada codepen.

cukup berkata. Mari kita dapatkan sesuatu yang bekerja untuk sesuatu yang membuat sedikit lebih masuk akal.

Permohonan Demo kami

Jangan lupa, kod untuk demo ini boleh didapati di GitHub.

Kami akan membina aplikasi kecil yang menggunakan API, memaparkan maklumat yang diperoleh dan membolehkan pengguna menapis apa yang ditunjukkan. Untuk tujuan ini kita akan menggunakan:

underscore.js

• jQuery
• Api Web Spotify
lebih khusus, aplikasi itu akan mengambil beberapa maklumat artis dari Spotify dan dengan menggunakan underscore _.template, _.each dan _.filter, kami akan memaparkannya pada halaman dan membenarkan pengguna untuk menyempitkan hasilnya dengan genre.

Untuk melakukan ini, kami akan membahagikan kod kami ke dalam tiga modul yang berbeza:

_isawesome.config: memegang maklumat yang akan kami gunakan di seluruh aplikasi.

• _isawesome.template: menjaga kompilasi templat.
• _isawesome: Ini adalah modul utama yang bertanggungjawab untuk bertindak balas terhadap tindakan pengguna dan mengemas kini UI.
semuanya mengikuti corak modul.

modul konfigurasi

Modul konfigurasi mengandungi ID templat yang akan digunakan, bersama -sama dengan URL API yang akan kami tanya, ditambah dengan ID artis yang kami ingin dapatkan dari Spotify. Dengan cara ini, kita boleh menambah lebih banyak artis dengan hanya menambahkan elemen lebih lanjut ke array.

modul template

Modul ini adalah yang bertanggungjawab menyusun templat, dengan memanggil getTemplates () dalam modul konfigurasi.

modul utama

Modul ini bertanggungjawab untuk menghantar permintaan AJAX ke URL yang kami dapat dari modul konfigurasi dan menjadikan kandungan menggunakan templat dari modul template.

Selain itu, modul ini juga menjaga penapisan item berdasarkan penapis yang diklik oleh pengguna.

Kedua -dua penapis dan templat kami dimasukkan sebagai sebahagian daripada HTML.

Untuk melaksanakan penapisan, kami akan bergantung pada atribut data HTML 5 dan antara muka data JQuery. Ini lebih banyak persoalan kemudahan, tetapi sekiranya anda ingin melakukan ini secara asli, sokongan penyemak imbas sangat baik.

Ini adalah markup butang yang akan kami gunakan untuk melakukan penapisan:

_.isEmpty({});
// true

Ini adalah contoh objek yang akan kami lalui ke fungsi penapis kami:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

Kami akan mempunyai HTML untuk templat kami sebagai sebahagian daripada index.html kami, di dalam tag , yang kami menghalang daripada dilaksanakan dengan menetapkan jenisnya kepada sesuatu yang berbeza daripada teks biasa/JavaScript. Hanya demi konsistensi kami akan menetapkannya untuk menggariskan/templat.

Kami akan mempunyai dua templat. Yang pertama akan mengandungi senarai artis, sedangkan yang kedua akan mengandungi artis individu yang akan dipaparkan. Seperti yang kita lihat di atas, kita akan menggunakan apa yang kita panggil templat tertanam . Kami akan menggunakan satu template ('item-tpl') dari dalam satu lagi ('senarai item').

Kemudian, di bahagian bawah fail kami akan menyertakan perpustakaan kami dan tiga skrip kami. Juga, hanya untuk menjadikannya lebih menarik secara visual, kami akan mempunyai beberapa gaya asas dalam tajuk.

Dan itu sahaja.

Lihat pena yang menggembirakan pena oleh SitePoint (@SitePoint) pada codepen.

Kesimpulan

Underscore adalah kegembiraan untuk bekerja dengan dan, seperti yang telah saya tunjukkan, ia membolehkan anda menulis kod yang bersih, mudah dibaca dan mudah untuk dikekalkan.

Terdapat beberapa perkara lagi yang boleh kami tambahkan pada permohonan kami (mis. Memiliki penapis kami secara dinamik dihasilkan dengan menggunakan _.pluck ()), tetapi saya fikir kami mempunyai cukup untuk memulakan.

bagaimana dengan anda? Adakah anda pernah bekerja dengan garis bawah? Adakah anda bersedia mencubanya? Adakah anda mencuba alternatif (iaitu Lodash) yang menyediakan keupayaan yang sama? Beritahu saya dalam komen di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Underscore.js

Apakah tujuan utama underscore.js?

underscore.js adalah perpustakaan JavaScript yang menyediakan satu set fungsi utiliti yang berguna untuk tugas pengaturcaraan biasa. Ia direka untuk menjadi tambahan kepada fungsi terbina dalam JavaScript, menyediakan fungsi tambahan dan meningkatkan produktiviti. Ia menawarkan lebih daripada 100 fungsi, termasuk yang berurusan dengan tatasusunan, objek, fungsi, dan banyak lagi. Fungsi -fungsi ini membantu memanipulasi data dan objek dengan cara yang lebih cekap dan mudah, menjadikannya alat yang berharga bagi pemaju. Underscore.js, anda perlu memasukkannya ke dalam projek anda. Anda boleh melakukan ini dengan memuat turun perpustakaan dari laman web rasmi dan menghubungkannya dalam fail HTML anda, atau dengan menggunakan CDN. Sebaik sahaja ia dimasukkan ke dalam projek anda, anda boleh mula menggunakan fungsinya dengan memanggilnya dengan watak garis bawah (_) diikuti dengan nama fungsi. >

underscore.js menawarkan pelbagai fungsi, tetapi beberapa yang paling berguna termasuk:

1. _.each: Fungsi ini membolehkan anda melelehkan unsur -unsur array atau objek. _.MAP: Fungsi ini mewujudkan array baru dengan mengubah setiap elemen dalam array atau objek menggunakan fungsi. _.filter: Fungsi ini mengembalikan array baru dengan semua elemen yang lulus ujian kebenaran.

1. _.find: Fungsi ini mengembalikan elemen pertama yang melewati ujian kebenaran.

1. _.Reduce: Fungsi ini mengurangkan array atau objek ke satu nilai dengan menggunakan fungsi secara beransur -ansur. Ya, underscore.js direka untuk bersesuaian dengan perpustakaan JavaScript yang lain. Ia tidak memanjangkan objek JavaScript terbina dalam, jadi ia tidak akan bertentangan dengan perpustakaan atau skrip lain yang berjalan di halaman anda. , Underscore.js diselenggarakan secara aktif dan sentiasa dikemas kini. Perpustakaan adalah sumber terbuka, yang bermaksud bahawa pemaju dari seluruh dunia menyumbang kepada pembangunan dan penambahbaikannya. Dan Lodash menawarkan fungsi yang sama, tetapi terdapat beberapa perbezaan. Lodash adalah superset underscore.js, yang bermaksud ia termasuk semua fungsi underscore.js dan banyak lagi. Walau bagaimanapun, underscore.js lebih kecil dan lebih ringan, menjadikannya pilihan yang baik untuk projek -projek di mana prestasi menjadi kebimbangan. Underscore.js boleh digunakan dalam persekitaran node.js. Anda boleh memasangnya menggunakan NPM, Pengurus Pakej Node.js, dengan menjalankan perintah 'NPM Pasang Underscore'.

Apakah 'underscore' dalam underscore.js?

'underscore' dalam underscore.js merujuk kepada watak (_) yang digunakan untuk memanggil fungsi perpustakaan. Ini adalah konvensyen di JavaScript untuk menggunakan watak garis bawah untuk perpustakaan utiliti. Sesiapa sahaja boleh menyumbang kepada pembangunannya. Anda boleh menghantar laporan bug, mencadangkan ciri -ciri baru, atau menyumbang kod.

Di mana saya boleh mengetahui lebih lanjut mengenai underscore.js? Laman web rasmi menyediakan dokumentasi yang komprehensif, dan terdapat banyak tutorial dan artikel yang tersedia dalam talian. Di samping itu, terdapat beberapa buku dan kursus dalam talian yang meliputi garis bawah.

Atas ialah kandungan terperinci Bermula dengan underscore.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!