Apakah perpustakaan yang ada untuk javascript?

Pustaka Javascript termasuk: jQuery, React, "D3.js", Underscore, Lodash, Algolia Places, "Anime.js", Animate On Scroll, "Bideo.js", "Chart.js", dll .

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Apakah perpustakaan JavaScript?

Pustaka JavaScript mengandungi pelbagai fungsi, kaedah atau objek untuk melaksanakan tugas sebenar pada halaman web atau aplikasi berasaskan JS. Anda juga boleh membina laman web WordPress menggunakan mereka.

Anggap mereka sebagai perpustakaan tempat anda boleh membaca semula buku kegemaran anda. Anda mungkin seorang penulis dan menikmati buku penulis lain, memperoleh perspektif atau inovasi baharu yang anda gunakan dalam hidup anda.

Begitu juga, perpustakaan JavaScript mempunyai kod atau fungsi yang boleh digunakan semula oleh pembangun dan tersedia dengan sedikit pengubahsuaian. Pembangun menulis kod perpustakaan JS dan pembangun lain menggunakan semula kod yang sama untuk melaksanakan tugas tertentu, seperti menyediakan slaid, dan bukannya menulisnya dari awal. Ini menjimatkan banyak masa dan tenaga mereka.

Ia betul-betul motivasi untuk mencipta perpustakaan JavaScript, itulah sebabnya anda boleh menemui berpuluh-puluh daripadanya dalam berbilang kes penggunaan. Bukan sahaja ia menjimatkan masa anda, tetapi ia juga memudahkan keseluruhan proses pembangunan.

Cara menggunakan perpustakaan JavaScript

Untuk menggunakan pustaka JavaScript dalam apl anda, rujuk laluan sumber perpustakaan atau URL menggunakan atribut src. Ia menambahkan pada elemen

Baca dokumentasi untuk pustaka JavaScript yang anda bercadang untuk menggunakan untuk mendapatkan maklumat lanjut dan ikuti langkah yang disediakan di sini.

Kongsi beberapa perpustakaan javascript

1 jQuery

jQuery ialah perpustakaan JavaScript klasik , yang pantas, ringan dan kaya dengan ciri. Ia dibina pada tahun 2006 oleh John Resig dari BarCamp NYC. jQuery ialah perisian percuma dan sumber terbuka yang dilesenkan oleh MIT.

Ia menjadikan manipulasi dan traversal dokumen HTML, animasi, pengendalian acara dan Ajax lebih mudah.

Ciri dan kelebihan:

• Ia mempunyai API ringkas yang mudah digunakan.

• Ia menggunakan pemilih CSS3 apabila mengendalikan atribut gaya dan mencari elemen.

• jQuery ringan, hanya 30kb gzip dan dimampatkan serta menyokong modul AMD.

• Oleh kerana sintaksnya sangat serupa dengan CSS, ia mudah dipelajari oleh pemula.

• Boleh dilanjutkan melalui pemalam.

• Menampilkan kepelbagaian API yang menyokong berbilang penyemak imbas, termasuk Chrome dan Firefox.

Kes penggunaan:

• Manipulasi DOM menggunakan pemilih CSS yang menggunakan syarat tertentu untuk memilih nod dalam DOM. Syarat ini termasuk nama elemen dan atributnya (seperti kelas dan ID).

• Pilih elemen dalam DOM menggunakan Sizzle, enjin pemilih berbilang penyemak imbas sumber terbuka.

• Buat kesan, acara dan animasi.

• Penghuraian JSON.

• Pembangunan aplikasi Ajax.

• Pengesanan ciri.

• Gunakan objek Promise dan Deferred untuk mengawal pemprosesan tak segerak.

2. React.js

React.js (juga dikenali sebagai ReactJS atau React) ialah perpustakaan JavaScript bahagian hadapan sumber terbuka. Ia diasaskan pada 2013 oleh Jordan Walke, bekas jurutera perisian di Facebook.

Kini ia dilesenkan di bawah lesen MIT, tetapi pada asalnya dikeluarkan di bawah Lesen Apache 2.0. React direka bentuk untuk menjadikan penciptaan UI interaktif menjadi mudah.

Hanya reka bentuk paparan ringkas untuk setiap keadaan dalam apl anda. Seterusnya, ia akan memaparkan dan mengemas kini komponen yang betul dengan cekap berdasarkan perubahan data.

Ciri dan Faedah:

• Kod React mengandungi komponen atau entiti yang perlu dipaparkan sebagai elemen khusus dalam DOM dengan bantuan pustaka React DOM.

• Ia menggunakan DOM maya dengan mencipta cache dalam memori dalam struktur data, mengira perbezaan dan mengemas kini DOM yang dipaparkan dalam penyemak imbas dengan berkesan.

• Disebabkan pemaparan terpilih ini, prestasi aplikasi dipertingkatkan sambil menjimatkan usaha pembangun mengira semula reka letak halaman, gaya CSS dan pemaparan halaman penuh.

• Ia menggunakan kaedah kitaran hayat seperti render dan componentDidMount untuk membenarkan pelaksanaan kod pada titik tertentu dalam kitaran hayat entiti.

• Ia menyokong JavaScript XML (JSX) yang menggabungkan JS dan HTML. Ia memudahkan pemaparan komponen menggunakan elemen bersarang, atribut, ungkapan JS dan pernyataan bersyarat.

Kes Penggunaan:

• Digunakan sebagai asas apabila membangunkan aplikasi mudah alih atau halaman tunggal.

• Bentangkan keadaan kepada DOM dan uruskannya.

• Bina antara muka pengguna yang berkesan apabila membangunkan aplikasi web dan tapak interaktif.

• Penyahpepijatan dan ujian adalah lebih mudah.

Seperti yang kita sedia maklum, Facebook, Instagram dan Whatsapp semuanya menggunakan React.

3. D3.js

Dokumen Dipacu Data (pendek kata D3) atau D3.js ialah satu lagi perpustakaan JS terkenal yang boleh digunakan oleh pembangun untuk mengendalikan dokumen berasaskan data. Dikeluarkan pada 2011 di bawah lesen BSD.

Ciri dan Faedah:

• Ia menekankan standard web dan memberikan anda ciri penyemak imbas moden dan bukannya hanya satu rangka kerja.

• D3.js menyokong visualisasi data yang berkuasa.

• Ia menyokong HTML, CSS dan SVG.

• Mengambil pendekatan dipacu data dan menggunakannya untuk memanipulasi DOM.

• D3.js adalah pantas dan menyokong berbilang gelagat dinamik serta set data untuk animasi dan interaksi.

• Ia mengurangkan overhed, membolehkan kerumitan grafik yang lebih besar pada kadar bingkai yang tinggi.

Kes Penggunaan:

• Hasilkan visualisasi data yang interaktif dan dinamik.

• Ikat data pada DOM dan lakukan transformasi terdorong data padanya. Sebagai contoh, anda boleh menjana jadual HTML daripada tatasusunan nombor dan kemudian menggunakan D3.js untuk mencipta carta bar SVG atau plot permukaan 3D.

• Kod fungsinya menjadikannya boleh digunakan semula dengan sejumlah besar modul.

• D3 menyediakan berbilang mod untuk menukar nod, seperti menukar gaya atau atribut dengan mengambil pendekatan deklaratif, menambah, mengisih atau mengalih keluar nod, menukar teks atau kandungan HTML, dsb.

• Untuk membuat peralihan animasi, urutan peralihan kompleks melalui acara, lakukan peralihan CSS3 dan banyak lagi.

4. Underscore.js

Underscore ialah perpustakaan utiliti JavaScript yang menyediakan pelbagai fungsi untuk tugas pengaturcaraan biasa. Ia dicipta pada tahun 2009 oleh Jeremy Askenas dan dilesenkan di bawah lesen MIT. Kini, Lodash telah mengatasinya.

Ciri dan Faedah:

• Ia berfungsi sama dengan Prototype.js (satu lagi perpustakaan utiliti popular), tetapi Underscore mempunyai reka bentuk pengaturcaraan berfungsi dan bukannya sambungan Prototaip objek.

• Ia mempunyai lebih 100 fungsi dalam 4 jenis berbeza mengikut jenis data yang mereka kendalikan. Ini adalah fungsi untuk memanipulasi:

  • Objek

  • Array

  • Objek dan Tatasusunan

  • Ciri Lain

• Underscore serasi dengan Chrome, Firefox, Edge dan banyak lagi.

Kes penggunaan:

• Ia menyokong pembantu berfungsi seperti penapis, peta, dll., serta pembantu berfungsi seperti pengikatan, pengindeksan pantas, Templat JavaScript, Ujian kualiti dan fungsi khas lain.

5. Lodash

Lodash juga merupakan perpustakaan utiliti JS yang memudahkan penggunaan nombor, tatasusunan, rentetan, objek, dsb. Dikeluarkan pada 2013, ia juga menggunakan reka bentuk pengaturcaraan berfungsi seperti Underscore.js.

Ciri dan kelebihan:

• boleh membantu anda menulis kod JavaScript yang boleh diselenggara dan ringkas.

• Memudahkan tugas biasa seperti operasi matematik, acara mengikat, pendikit fungsi, penghias, had kekangan, nyahlantun dan banyak lagi.

• Fungsi rentetan seperti pemangkasan, camelcasing dan huruf besar semuanya dipermudahkan.

• Buat, ubah suai, mampatkan dan susun tatasusunan.

• Operasi lain pada set, objek dan jujukan.

Kes penggunaan:

Pendekatan modularnya membantu anda:

• Lelaran pada tatasusunan, rentetan dan objek.

• Buat fungsi komposit.

• Nilai operasi dan ujian.

6. Algolia Places

Algolia Places ialah perpustakaan JavaScript yang menyediakan cara mudah untuk menggunakan fungsi auto isi alamat di tapak anda dan diedarkan kaedah. Ini adalah alat yang sangat pantas dan tepat yang boleh membantu anda meningkatkan pengalaman pengguna tapak anda. Algolia Places memanfaatkan pangkalan data sumber terbuka OpenStreetMap yang mengagumkan untuk menyediakan liputan di seluruh dunia.

Sebagai contoh, anda boleh menggunakannya untuk meningkatkan kadar penukaran pada halaman produk anda.

Ciri & Faedah:

• Ia memudahkan proses pembayaran dengan mengisi berbilang input serentak.

• Anda boleh menggunakan pemilih negara atau bandar dengan mudah.

• Anda boleh melihat hasil carian dengan cepat dengan memaparkan cadangan pautan dalam masa nyata pada peta.

• Algolia Places boleh mengendalikan ralat menaip dan memaparkan hasil dengan sewajarnya.

• Ia menyampaikan hasil dalam milisaat dengan menghalakan semua pertanyaan secara automatik ke pelayan terdekat.

Kes Penggunaan:

• Membenarkan anda menggabungkan peta untuk menunjukkan lokasi tertentu yang sangat berguna.

• Ia membolehkan anda menggunakan borang dengan berkesan.

7. Anime.js

Jika anda ingin menambah animasi pada tapak atau aplikasi anda, Anime.js ialah yang terbaik yang boleh anda temui Salah satu perpustakaan JavaScript. Dikeluarkan pada 2019, ia ringan dan mempunyai API yang berkuasa namun ringkas.

Ciri dan Faedah:

• Anime.js berfungsi dengan sifat DOM, sifat CSS, SVG, transformasi CSS dan objek JS.

• Berfungsi dengan pelbagai penyemak imbas seperti Chrome, Safari, Firefox, Opera, dll.

• Kod sumbernya boleh dinyahsulit dan digunakan dengan mudah.

• Kaedah animasi yang rumit seperti bertindih dan mengikuti berperingkat menjadi lebih mudah.

Kes penggunaan:

• Anda boleh menggunakan sistem interleaving Anime.js pada sifat dan masa.

• Buat peralihan CSS berlapis dengan berbilang pemasaan serentak pada satu elemen HTML.

• Gunakan panggilan balik Anime.js dan ciri kawalan untuk memainkan, menjeda, mencetus, putar balik dan mengawal acara secara serentak.

8. Animate On Scroll (AOS)

Animate On Scroll sangat sesuai untuk tapak web paralaks satu halaman. Pustaka JS ini adalah sumber terbuka sepenuhnya dan membantu anda menambahkan animasi yang bagus pada halaman anda yang kelihatan cantik apabila anda menatal ke atas dan ke bawah.

Tingkatkan reka bentuk tapak web dan tingkatkan kepuasan pengguna dengan membantu anda menambah kesan pudar, kedudukan sauh statik, dsb.

Ciri dan Faedah:

• Pustaka ini boleh mengesan kedudukan elemen dan menambah kelas yang sesuai apabila ia muncul dalam port pandangan.

• Selain menambah animasi dengan mudah, ia juga membantu anda membuat perubahan dalam port pandangan.

• Ia berjalan lancar pada peranti yang berbeza, sama ada telefon mudah alih, tablet atau komputer,

• Memandangkan ia ditulis dalam JavaScript tulen Ditulis begitu sahaja tiada kebergantungan.

Kes penggunaan:

• Animasikan elemen berdasarkan kedudukan elemen lain.

• Animasikan elemen berdasarkan kedudukan skrinnya.

• Lumpuhkan animasi elemen pada mudah alih.

• Buat animasi yang berbeza seperti pudar, flip, slaid, skala, peletakan sauh, dsb.

9. Bideo.js

Adakah anda mahu memasukkan video skrin penuh ke latar belakang tapak web anda? Cuba Bideo.js.

Ciri dan Faedah:

• Menambah latar belakang video adalah sangat mudah menggunakan perpustakaan JavaScript ini.

• Ciri ini kelihatan hebat dan berfungsi dengan baik pada skrin nisbah dan saiz yang berbeza.

• Video yang ditambah boleh diubah saiz mengikut pelayar yang digunakan.

• Mudah untuk dilaksanakan menggunakan CSS/HTML.

Kes Penggunaan:

• Tambahkan video latar belakang skrin penuh responsif di tapak web anda.

10. Carta.js

Adakah tapak web atau projek anda berkaitan dengan bidang analisis data?

Adakah anda perlu menyediakan banyak statistik?

Chart.js ialah perpustakaan JavaScript yang sangat baik.

Chart.js ialah perpustakaan yang fleksibel dan ringkas untuk pereka bentuk dan pembangun yang boleh menambahkan carta cantik pada projek mereka dalam masa yang singkat. Pustaka JS ini adalah sumber terbuka dan disediakan dengan lesen MIT.

Ciri dan kelebihan:

• Carta asas yang elegan dan ringkas boleh ditambah.

• Jana halaman web responsif.

• Ringan, mudah dipelajari dan dilaksanakan.

• 8 jenis carta yang berbeza.

• Sangat sesuai untuk pemula.

• Ciri animasi menjadikan halaman lebih interaktif.

Kes Penggunaan:

• Sediakan perwakilan visual yang jelas semasa bekerja dengan set data yang berbeza dengan bantuan jenis carta bercampur.

• Plot set data yang jarang dan kompleks dalam logaritma, tarikh, masa atau skala tersuai.

11. Cleave.js

Jika anda ingin memformat kandungan teks, Cleave.js menyediakan penyelesaian yang menarik. Ia dicipta untuk menyediakan cara yang lebih mudah untuk meningkatkan kebolehbacaan medan input dengan memformat data yang ditaip.

Dengan cara ini anda tidak perlu lagi menutup corak atau menulis ungkapan biasa untuk memformat teks.

Ciri dan Faedah:

• Tingkatkan pengalaman pengguna dengan data konsisten yang diserahkan melalui borang.

• Anda boleh melakukan jenis pemformatan yang berbeza untuk nombor kad kredit, nombor telefon, tarikh, masa dan nombor.

• Formatkan blok tersuai, awalan dan pembatas.

• Menyokong komponen ReactJS dan banyak lagi.

Kes penggunaan:

• Laksanakan cleave.js ke dalam berbilang elemen DOM menggunakan pemilih CSS.

• Mengemas kini nilai primitif tertentu.

• Dapatkan rujukan medan teks.

• Ia berfungsi dengan borang Redux dalam Vue.js, jQuery dan Taman Permainan.

12. Choreographer.js

Gunakan Chrographer.js untuk menghidupkan CSS kompleks dengan berkesan. Ia juga boleh menambah lebih banyak ciri tersuai yang boleh digunakan untuk animasi bukan CSS.

Untuk menggunakan pustaka JavaScript ini, pasang pakejnya melalui npm atau tambahkan fail skripnya.

Ciri dan kelebihan:

• Kelas Animasinya menguruskan data animasi tunggal.

• objek animationConfig mengkonfigurasi setiap tika animasi.

• Termasuk 2 fungsi animasi terbina dalam "Tukar" dan "Zum".

• "Skala" digunakan untuk memetakan nilai diukur secara berperingkat kepada atribut gaya nod.

• "Tukar" mengalih keluar atau menambah atribut gaya.

Kes penggunaan:

• Lakukan animasi tatal segera.

• Buat animasi berdasarkan pergerakan tetikus.

13 Glimmer

Glimmer dikeluarkan pada tahun 2017 dan mempunyai komponen UI yang ringan dan pantas. Ia menggunakan Ember CLI yang berkuasa dan boleh menggunakan EmberJS sebagai komponen.

Ciri dan Faedah:

• Glimmer ialah enjin pemaparan DOM pantas yang memberikan prestasi luar biasa untuk pemaparan dan pengemaskinian.

• Ia serba boleh dan boleh digunakan dengan tindanan teknologi semasa anda tanpa memerlukan anda menulis semula kod anda.

Kes Penggunaan:

• Anda boleh menggunakannya sebagai komponen kendiri atau menambahnya sebagai komponen web dalam aplikasi sedia ada.

• Pemaparan DOM.

• Ia membantu anda membezakan antara kandungan statik dan kandungan dinamik.

• Gunakan Glimmer apabila anda memerlukan kuasa Ember tetapi dalam pakej yang lebih ringan.

14. Granim.js

Granim.js ialah perpustakaan JS yang membantu anda mencipta animasi kecerunan interaktif yang lancar. Dengan cara ini anda boleh menjadikan tapak web anda menonjol dengan latar belakang yang berwarna-warni.

Ciri dan Faedah:

• Kecerunan boleh menutup imej, berfungsi secara bebas, slaid di bawah topeng imej, dsb.

• Anda boleh menyesuaikan arah kecerunan menggunakan peratusan atau nilai piksel.

• Tetapkan arah kecerunan kepada pepenjuru, atas dan bawah, kiri dan kanan, jejari atau tersuai.

• Menetapkan tempoh animasi untuk perubahan keadaan dalam milisaat (ms).

• Sesuaikan warna dan kedudukan kecerunan.

• Penyesuaian imej berdasarkan kedudukan kanvas, sumber, penskalaan, dsb.

• Pilihan lain termasuk termasuk menetapkan panggilan balik, peristiwa pemancaran, kaedah kawalan kecerunan, dsb.

Kes penggunaan:

• Gunakan 3 kecerunan 2 warna untuk mencipta animasi kecerunan asas.

• Animasi kecerunan kompleks menggunakan 2 kecerunan dengan 3 warna.

• Animasikan kecerunan menggunakan satu imej latar belakang, dua warna dan mod adunan.

• Gunakan topeng imej untuk mencipta animasi kecerunan di bawah bentuk tertentu.

• Buat animasi kecerunan yang bertindak balas kepada acara.

15 fullPage.js

Pustaka JS sumber terbuka fullPage.js boleh membantu anda membuat tapak web skrol skrin penuh atau a. laman web satu halaman. Ia mudah digunakan dan juga boleh menambah peluncur mendatar dalam bahagian tapak.

Ciri dan Faedah:

• Menyediakan pelbagai pilihan penyesuaian dan konfigurasi.

• Menyokong rangka kerja JavaScript seperti react-fullpage, angular-fullpage dan vue-fullpage.

• Dayakan penatalan menegak dan mendatar.

• Reka bentuk yang boleh disesuaikan, sesuai untuk saiz skrin yang berbeza dan berbilang penyemak imbas.

• Tatal secara automatik apabila halaman dimuatkan.

• Malas memuatkan video/imej.

Kes Penggunaan:

• Gunakan banyak sambungan untuk menambah baik kefungsian lalai.

• Buat tapak menatal skrin penuh.

• Bina tapak web satu halaman.

16. Risalah

Risalah ialah salah satu perpustakaan JavaScript terbaik untuk memasukkan peta interaktif ke dalam tapak anda. Ia adalah sumber terbuka dan mesra mudah alih serta mempunyai berat kira-kira 39kb. Pemalam Peta MapPress untuk WordPress menggunakan Risalah untuk menggerakkan peta interaktifnya.

Ciri dan Faedah:

• Menyediakan ciri prestasi seperti pecutan perkakasan mudah alih dan keupayaan CSS.

• Lapisan unik termasuk lapisan berjubin, tetingkap timbul, penanda, lapisan vektor, GeoJSON dan tindanan imej.

• Fungsi interaktif, termasuk kuali seret, zum, navigasi papan kekunci, acara, dsb.

• Kawalan peta seperti penukar lapisan, sifat, skala dan butang zum.

• Menyokong penyemak imbas seperti Chrome, Safari, Firefox, Edge, dll.

• Penyesuaian termasuk kemudahan OOP, HTML dan penanda berasaskan imej, kawalan CSS3 dan pop timbul.

Kes Penggunaan:

• Melalui zum dan panning yang lebih baik, pemaparan poligon/poliline pintar, binaan modular dan animasi gerak tertunda klik, Tambah peta ke tapak anda.

17 Multiple.js

Multiple.js menggunakan CSS atau HTML tanpa pemprosesan koordinat JavaScript, dan boleh digunakan dalam pelbagai elemen Kongsi imej latar belakang antara .

Akibatnya, ia menghasilkan kesan visual yang menakjubkan untuk menambah lebih banyak interaksi pengguna.

18. Moment.js

Moment.js membantu anda mengurus masa dan tarikh dengan berkesan apabila menggunakan zon waktu yang berbeza, panggilan API dalam bahasa tempatan, dsb.

Anda boleh memudahkan tarikh dan masa dengan mengesahkan, menghuraikan, memformat atau memanipulasi tarikh dan masa.

19 Masonry

Masonry ialah perpustakaan reka letak grid JS yang hebat. Pustaka ini membantu anda meletakkan elemen grid di lokasi yang sesuai berdasarkan ruang menegak yang tersedia. Beberapa pemalam WordPress galeri popular juga menggunakannya.

20 Maha Mengetahui

Omniscient.js ialah perpustakaan JS yang menyediakan abstraksi komponen React untuk pemaparan atas-bawah pantas yang mengandungi data tidak boleh diubah.

Pustaka ini mengoptimumkan projek anda dan menyediakan ciri menarik untuk membantu anda membina projek anda dengan lancar.

21. Parsley

Adakah anda mahu menambah borang pada projek?

Jika ya, Parsley mungkin berguna kepada anda. Ia adalah perpustakaan JS yang mudah tetapi berkuasa yang boleh digunakan untuk mengesahkan borang.

22. Popper.js

Popper.js dicipta untuk membolehkan penempatan menu pop timbul, menu lungsur turun, petua alat dan elemen kontekstual lain (lebih dekat kepada butang atau elemen lain yang serupa) dengan lebih mudah.

Popper menyediakan cara yang bagus untuk menyusunnya, melekatkannya pada elemen tapak lain dan menjadikannya bermain dengan lancar pada sebarang saiz skrin.

23. Three.js

Three.js boleh menjadikan reka bentuk 3D anda menarik. Ia menggunakan WebGL untuk memaparkan pemandangan pada penyemak imbas moden. Jika anda menggunakan IE 10 dan lebih rendah, sila gunakan pemapar CSS3, CSS2 dan SVH yang lain.

24 Screenfull.js

Gunakan Screenfull.js untuk menambah elemen skrin penuh pada projek anda. Anda tidak akan menghadapi masalah menggunakan perpustakaan JavaScript ini berkat kecekapan penyemak imbas yang mengagumkan.

25. Polimer

Pustaka JavaScript sumber terbuka Google – Polimer, digunakan untuk membina aplikasi web menggunakan komponen.

26. VOCA

Idea di sebalik penciptaan Voca adalah untuk mengurangkan kesakitan bekerja dengan rentetan JavaScript. Ia datang dengan ciri berguna untuk memanipulasi rentetan dengan mudah seperti menukar sarung, padding, pemangkasan, pemotongan dan banyak lagi.

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Apakah perpustakaan yang ada untuk javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!