Bina perpustakaan JavaScript pertama anda

Pernah tertanya -tanya bagaimana dojo berfungsi? Pernahkah anda ingin tahu tentang operasi pintar JQuery? Dalam tutorial ini, kami akan menyelinap di belakang tabir dan cuba membina versi jQuery yang super-simpli.

Kami menggunakan perpustakaan JavaScript hampir setiap hari. Sama ada ia melaksanakan algoritma, menyediakan abstraksi API, atau memanipulasi DOM, perpustakaan melaksanakan banyak fungsi di laman web yang paling moden.

Dalam tutorial ini, kami akan cuba membina perpustakaan seperti ini dari awal (ini adalah versi yang mudah). Kami akan membuat perpustakaan untuk operasi DOM, sama dengan jQuery. Ya, ia menyeronokkan, tetapi sebelum anda teruja, izinkan saya menjelaskan beberapa mata:

• Ini tidak akan menjadi perpustakaan yang dipaparkan sepenuhnya. Kami akan menulis satu set kaedah yang kukuh, tetapi ini bukan jQuery lengkap. Kami akan melakukan cukup untuk memberi anda pemahaman yang baik tentang jenis masalah yang akan anda hadapi ketika membina perpustakaan.
• Kami tidak mengejar keserasian penuh di semua pelayar di sini. Kod yang kami tulis hari ini harus dijalankan di Chrome, Firefox, dan Safari, tetapi mungkin tidak berfungsi pada pelayar yang lebih tua seperti IE.
• Kami tidak akan meliputi setiap penggunaan perpustakaan kami yang mungkin. Sebagai contoh, kaedah prepend kami hanya sah apabila anda meluluskannya contoh perpustakaan kami;

---

Rangka kerja untuk membuat perpustakaan

Kami akan bermula dengan modul itu sendiri. Kami akan menggunakan Modul Ecmascript (ESM), cara moden untuk mengimport dan mengeksport kod di web.

 Kelas Eksport Dome {Constructor (Selector) {}} 

Seperti yang anda lihat, kami mengeksport kelas yang dipanggil Dome , yang pembangunnya akan menerima parameter, tetapi ia boleh berbilang jenis. Jika ia adalah rentetan, kami akan menganggap ia adalah pemilih CSS, tetapi kami juga boleh menerima hasil node DOM tunggal atau document.QuerySelectorAll untuk mempermudah carian elemen. Jika ia mempunyai atribut panjang , kita akan tahu bahawa kita mempunyai senarai nod. Kami akan menyimpan unsur -unsur ini dalam this.elements , objek Dome boleh membungkus pelbagai elemen DOM, dan kami perlu gelung melalui setiap elemen dalam hampir setiap kaedah, jadi utiliti ini akan sangat mudah.

Mari kita mulakan dengan fungsi peta yang menerima parameter dan fungsi panggil balik. Kami akan gelung melalui item dalam array dan mengumpul kandungan yang dikembalikan oleh fungsi panggil balik.

Kami juga memerlukan kaedah foreach , secara lalai, kami hanya boleh menghantar panggilan ke mapone . Sangat mudah untuk melihat apa fungsi ini, tetapi soalan sebenar ialah, mengapa kita memerlukannya? Ini memerlukan sedikit apa yang anda panggil "konsep perpustakaan".

Perbincangan ringkas konsep

Jika membina perpustakaan hanya menulis kod, ia tidak akan terlalu sukar untuk dilakukan. Tetapi apabila bekerja pada projek ini, bahagian yang lebih sukar yang saya dapati adalah menentukan bagaimana kaedah tertentu harus berfungsi.

Tidak lama lagi kami akan membina objek kubah yang membungkus pelbagai nod dom ( $ ("li"). Text () ), dan anda akan mendapat rentetan tunggal yang mengandungi semua teks elemen yang disatukan bersama -sama. Adakah ini berguna? Saya tidak fikir begitu, tetapi saya tidak tahu apa nilai pulangan yang lebih baik.

Untuk projek ini, saya akan mengembalikan teks pelbagai elemen sebagai array kecuali hanya ada satu item dalam array; Saya fikir anda mendapat teks untuk satu elemen yang paling kerap, jadi kami dioptimumkan untuk keadaan ini. Walau bagaimanapun, jika anda mendapat teks untuk pelbagai elemen, kami akan mengembalikan apa yang boleh anda gunakan.

Mengembalikan Pengekodan

So, MapOne akan memanggil terlebih dahulu dan kemudian mengembalikan satu item dalam array atau array. Jika anda masih tidak pasti bagaimana ini berfungsi, tunggu: anda akan lihat!

const) {const m = ini. Perhatikan bahawa ini hanya melelehkan unsur -unsur dan menetapkan teks mereka. Jika kita mendapat, kita akan mengembalikan kaedah MAPOne unsur: Jika kita sedang bekerja pada pelbagai elemen, ini akan mengembalikan array;

html kaedah hampir sama dengan kaedah text , kecuali ia akan menggunakan innerHtml .

 html (html) {if (typeof html! == "undefined") {this.foreach (el) {el.innerHtml = html; .  <hr> <ol start="5"> <li> <h2 id="Kelas-operasi"> Kelas operasi </h2> </li> </ol> <p> Seterusnya, kita perlu menambah dan memadam kelas, jadi mari tulis <code> addClass </code> </p> <p> Kaedah <code> kami AddClass </code> akan menggunakan kaedah <code> classlist.add </code> pada setiap elemen. Apabila lulus rentetan, hanya kelas itu ditambah, dan apabila lulus array, kami akan melangkah ke atas array dan menambah semua kelas yang terkandung di dalamnya. </p> <pre class="brush:php;toolbar:false"> addClass (classes) {return this.foreach (function (el) {if (typeof classes! == "string") {for (const elclass of classes) {el.classlist.add (elclass);  <p> Sekarang, bagaimana dengan memadam kelas? Untuk ini anda hampir melakukan perkara yang sama, hanya gunakan kaedah <code> classlist.remove </code>. </p> <ol start="6"> <li> <h2 id="Menggunakan-atribut"> Menggunakan atribut </h2> </li> </ol> <p> Seterusnya, mari tambahkan fungsi <code> attr </code>. Ini akan mudah kerana ia hampir sama dengan kaedah <code> html </code> kami. Seperti kaedah ini, kami akan dapat mendapatkan dan menetapkan sifat pada masa yang sama: kami akan menerima satu nama dan nilai harta untuk ditetapkan, dan hanya satu nama harta untuk mendapatkannya. </p> <re> attr (attr, val) {if (typeof val! == "undefined") {return this.foreach (function (el) akan menggunakan kaedah <code> setAttribute </code>. Jika tidak, kami akan menggunakan kaedah <code> getAttribute </code>.  <ol start="7"> <li> <h2 id="Buat-elemen"> Buat elemen </h2> </li> </ol> <p> kita harus dapat membuat unsur -unsur baru, dan mana -mana perpustakaan yang baik boleh melakukan ini. Sudah tentu, ini tidak bermakna sebagai kaedah <code> kubah </code> kelas. </p> <pre class="brush:php;toolbar:false"> Fungsi eksport membuat (tagName, attrs) {} 

Seperti yang anda lihat, kami akan menerima dua parameter: nama elemen dan objek atribut. Kebanyakan sifat akan digunakan melalui kaedah attr kami, dan kandungan teks akan digunakan untuk objek Dome melalui kaedah teks . Berikut adalah bagaimana semua ini dilakukan:

 Fungsi eksport ( > Seperti yang anda lihat, kami membuat elemen dan menghantarnya terus ke objek <code> Dome </code> baru.  <p> Tetapi sekarang kita mencipta unsur -unsur baru, kita akan mahu memasukkannya ke dom, bukan? </p> <ol start="8"> <li> <h2 id="Tambah-dan-elemen-preemption"> Tambah dan elemen preemption </h2> </li> </ol> <p> Seterusnya, kami akan menulis <code> append </code> dan <code> prepend </code> kaedah. Fungsi -fungsi ini agak rumit, terutamanya kerana terdapat banyak kes penggunaan. Berikut adalah perkara -perkara yang kita mahu lakukan: </p> <pre class="brush:php;toolbar:false"> dome1.append (kubah2); > Pelbagai elemen yang sedia ada kepada satu atau lebih unsur yang ada   <p> Saya menggunakan "baru" untuk mewakili unsur -unsur yang belum ada di DOM; Mari kita jelaskan langkah demi langkah sekarang: </p> <pre class="brush:php;toolbar:false"> append (els) {} 

Kami mengharapkan els menjadi Dome objek. Perpustakaan DOM lengkap akan menerimanya sebagai nod atau senarai nod, tetapi kami tidak akan melakukannya. Kita perlu melangkah melalui setiap elemen kita, dan kemudian di dalamnya, kita melalui setiap elemen yang kita mahu lampirkan.

Jika kita sedang memasuki, i dari objek luaran yang diluluskan sebagai parameter hanya akan mengandungi nod asal (uncloned). Oleh itu, jika kita menambahkan hanya satu elemen kepada satu elemen, semua nod yang terlibat akan menjadi sebahagian daripada kaedah prepend masing -masing.

9. Padam elemen

Untuk kesempurnaan, mari tambahkan kaedah keluarkan . Ini akan menjadi sangat mudah kerana kita hanya perlu menggunakan kaedah RemoveChild . Untuk membuat perkara lebih mudah, kami akan menggunakan foreach gelung untuk membalikkan traversal, saya akan menggunakan penyingkiran kaedah untuk membalikkan traversal, dan kubah objek setiap elemen masih berfungsi dengan baik; Tidak teruk, bukan?

10. Menggunakan acara

Terakhir tetapi tidak kurang, kami akan menulis beberapa fungsi pengendali acara.

Lihat pada kaedah, dan kami akan membincangkannya:

 on (evt, fn) {return this.foreach (function (el) {el.addeventListener (evt, fn, false);}); Kami hanya perlu melangkah ke atas unsur -unsur dan menggunakan kaedah <code> addEventListener </code>. Fungsi  off (pengendali acara yang tidak disengajakan) hampir sama:  <pre class="brush:php;toolbar:false"> off (evt, fn) {return this.foreach (function (el) {el.removeeventListener (evt, fn, false);}; <code> Dome </code>, masukkannya ke dalam skrip dan importnya.  <pre class="brush:php;toolbar:false"> import {kubah, buat} dari "./dome.js" 

Dari sana, anda boleh menggunakannya seperti ini:

 kubah baru ("li") ... 

Pastikan skrip yang anda import itu adalah modul ES.

Itu sahaja!

Saya harap anda boleh mencuba perpustakaan kecil kami dan juga memperluaskannya sedikit. Seperti yang saya nyatakan sebelum ini, saya telah meletakkannya di GitHub. Jangan ragu untuk memadamkannya, bermain, dan hantar permintaan tarik.

Biarkan saya menjelaskan lagi: Tujuan tutorial ini tidak mencadangkan bahawa anda harus selalu menulis perpustakaan anda sendiri. Terdapat pasukan yang berdedikasi yang bekerjasama untuk menjadikan perpustakaan yang besar dan matang sebaik mungkin. Tujuan di sini adalah untuk memberi anda beberapa pandangan tentang apa yang mungkin berlaku di dalam perpustakaan; Saya harap anda telah mempelajari beberapa petua di sini.

Saya sangat mengesyorkan anda menggali di beberapa perpustakaan kegemaran anda. Anda akan mendapati bahawa mereka tidak misteri seperti yang anda fikirkan, dan anda mungkin banyak belajar. Berikut adalah beberapa titik permulaan yang baik:

• 11 perkara yang saya pelajari dari kod sumber jQuery (Paul Irish)
• Di sebalik tabir JQuery (James Padolsey) Jacob adalah pemaju web, penulis teknologi, freelancer dan penyumbang sumber terbuka.

Atas ialah kandungan terperinci Bina perpustakaan JavaScript pertama anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!