Siri siaran ini diindeks di NgateSystems.com. Anda akan temui kemudahan carian kata kunci yang sangat berguna di sana juga.
Semakan terakhir: Nov '24
Siaran sebelumnya mencipta aplikasi web Svelte yang terdiri sepenuhnya daripada HTML ringkas. Ia tidak mengandungi sebarang Javascript dan dengan itu tidak menggunakan mana-mana kemudahan penjanaan HTML dinamik Svelte yang canggih. Siaran ini hanya akan menconteng permukaan ciri Svelte tetapi harus memberi anda rasa kuasa bahasa.
Dilihat secara objektif, apl web ialah hierarki halaman HTML, tetingkap timbul, jadual, borang dan butang HTML. Himpunan elemen visual yang memeningkan ini "dimaklumkan" oleh data. Jadual ditambah dengan kandungan tatasusunan JavaScript. Pop timbul muncul dan hilang mengikut arahan medan bendera. Bentuk berkembang dengan data apabila "dicucuk" oleh input tetikus dan papan kekunci. Pendek kata - ia rumit. Bagaimanakah semacam ketertiban boleh diwujudkan atas situasi ini?
Secara kolektif, badan data yang mentakrifkan penampilan apl web pada bila-bila masa dirujuk sebagai keadaan webapp. Banyak usaha telah dibelanjakan untuk teknologi pembangunan perisian yang direka bentuk untuk memudahkan anda menulis apl web yang bertindak balas dengan cekap apabila keadaan berubah. Platform seperti Svelte direka dengan jelas untuk menyampaikan kereaktifan yang baik.
Mari kita lihat pendekatan Svelte terhadap definisi State dan pelaksanaan Reaktivitinya.
Ciri biasa pada halaman web ialah tetingkap timbul yang dipaparkan (biasanya menjengkelkan) apabila anda memulakannya, tetapi kemudiannya, secara wajib, hilang apabila anda mengklik padanya. Mari lihat cara Svelte membenarkan anda menggunakan Keadaan dan Kereaktifan untuk melaksanakan perkara ini dalam apl web.
Dalam Javascript, anda perlu menentukan pembolehubah sebelum anda boleh menggunakannya. Jadi sebagai contoh, perintah seperti
console.log(myDataItem);
akan membuang ralat melainkan di suatu tempat sebelum ini dalam kod anda telah mentakrifkannya menggunakan pernyataan seperti
let myDataItem;
Selain itu, anda akan mendapati ia berguna untuk mempunyai akses kepada "taman permainan" yang membolehkan anda mencuba dengan pantas JavaScript seperti ini. Paparan "periksa" mana-mana halaman penyemak imbas menyediakan satu taman permainan sedemikian - buka pemeriksa pada halaman rawak dan pilih tab "konsol" pada bar menunya. Sebagai alternatif, anda boleh mencuba konsol javascript di PlayCode.
Terdapat banyak perkara yang boleh dikatakan tentang kata kunci let JavaScript (cuba tanya chatGPT tentang "skop") tetapi biarkan mempunyai kepentingan tambahan dalam Svelte kerana ini adalah cara anda mentakrifkan Negeri. Dalam program Svelte, sebarang pembolehubah yang ditakrifkan dengan let menjadi sebahagian daripada Keadaan program.
Jadi apa? Baiklah, saya katakan sebelum ini bahawa pembolehubah Negeri - pembolehubah yang mentakrifkan penampilan aplikasi web - adalah "reaktif". Ini bermakna apabila nilainya berubah, penampilan apl web diarahkan secara automatik untuk berubah dengan sewajarnya. Katakan anda menggunakan pembolehubah boolean popupVisible untuk menentukan keadaan popup. Bolehkah Svelte - platform reaktif - menggunakan nilai pembolehubah untuk menentukan sama ada tetingkap timbul kelihatan atau tidak? Jom cuba.
Ini kod yang saya cadangkan untuk digunakan. Saya akan menerangkan apa yang ia lakukan dalam satu minit:
//src/routes/ page.svelte - alih keluar baris ini sebelum berjalan
<skrip>
biarkan popupVisible = benar;
function togglePopup() {
popupVisible = !popupVisible;
}
</skrip>
<div>
{#if popupVisible}
<butang
>
<p>Kod di sini terbahagi kepada dua bahagian. Bahagian atas "skrip", ditakrifkan oleh <skrip></script> teg, mengisytiharkan pembolehubah javascript popupVisible dan fungsi togglePopup(). Bahagian "templat" yang lebih rendah, menentukan HTML "dimoderasi" oleh blok logik Svelte {#if} {/if}. Kod Svelte boleh merujuk pembolehubah dan fungsi yang ditakrifkan dalam <skrip> bahagian untuk membimbing penjanaan kod HTML. Rujukan disertakan dengan kurungan {} kerinting, kecuali apabila ia digunakan secara langsung dalam blok logik - lihat dokumen Svelte di Penanda Asas dan Blok Logik untuk butiran penuh.</p>
<p>Kod yang dipaparkan di atas sangat kasar. "pop timbul" biasanya ditakrifkan oleh <div> tag diformatkan dengan sempadan dan beberapa CSS kedudukan. Di sini saya telah menggunakan <butang> tag - sesuatu yang lebih biasa digunakan untuk mentakrifkan elemen "serahkan" pada borang. Saya telah melakukan ini semata-mata kerana ia membolehkan saya mengelakkan beberapa perkara teknikal yang mungkin mengganggu perhatian anda. Saya telah mewarnakan butang "pop timbul" dengan biru supaya anda boleh melihatnya.</p>
<p>Jika anda masih mempunyai salinan projek skeleton svelte-dev Svelte yang dibuat dalam Post 2.1, cuba gunakan kod ini untuk menggantikan keseluruhan kandungan src/routes/ page.svelte. Apabila anda membuka terminal pada projek dan memulakan pelayan pembangun seperti sebelum ini, penyemak imbas anda kini akan melompat ke dalam kehidupan dan memaparkan skrin yang ditunjukkan di bawah:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>Segi empat tepat biru ialah "pop timbul". Ia dipaparkan pada permulaan kerana pada ketika ini pembolehubah popupVisible ditetapkan kepada benar dan logik Svelte yang memacu penjanaan HTML halaman diarahkan untuk mencipta <butang> tag dalam kes ini.</p>
<p>Sekarang cuba klik pop timbul. Sihir! Ia hilang. Ini kerana <butang> tag yang menyatakan pop timbul mengandungi klausa onClick yang membuat klik pada elemen menjalankan fungsi togglePopup. Ini seterusnya menetapkan pembolehubah popupVisible kepada palsu.</p><p>Saya katakan sebelum ini bahawa menukar pembolehubah "keadaan" Svelte menyebabkan Svelte menyegarkan skrin dengan menjalankan semula bahagian templat halaman. Jadi, bahagian templat dijalankan semula dan sekarang, memandangkan nilai popupVisible adalah palsu, <butang> kod yang memaparkan pop timbul dipintas meninggalkan halaman kosong.</p>
<p>Luangkan sedikit masa sekarang untuk membiarkan ini tenggelam. Jika anda masih menggunakan kod manipulasi DOM primitif yang saya perkenalkan dalam Post 1.1 kesan ini hanya boleh dicapai dengan menulis banyak perkara yang agak teknikal (dan mungkin agak tidak cekap) kod peringkat rendah. Di sini, anda hanya perlu menukar nilai pembolehubah. Sveltekit telah mengendalikan akibat yang rumit <strong>secara automatik</strong> (dan, yakinlah, dengan cekap). </p>
<p>Ringkasnya, Svelte memberikan anda bahasa peringkat tinggi yang membolehkan anda menyerahkan butiran pengurusan skrin penyemak imbas yang membosankan kepada rangka kerja. </p>
<p><em>Pada Oktober '24, Svelte 5 memperkenalkan satu siri penambahbaikan kepada susunan definisi kereaktifannya. Konstruk let yang diterangkan di atas masih berfungsi dengan baik untuk semua dalam siri siaran ini, tetapi konsep rune baharu kini tersedia untuk mengendalikan keperluan yang lebih kompleks. Lihat Apa itu Runes untuk butiran.</em></p>
<h4>
2.2 Input Data
</h4>
<p>Mari jadikan pop timbul lebih menarik. Bayangkan anda mempunyai tugas untuk mengekalkan senarai "produk" untuk syarikat pembuatan. Anda mahukan utiliti yang memaparkan senarai semasa dan membolehkan anda menambah produk baharu. Dalam amalan, sudah tentu, anda juga ingin ia dapat mengedit dan memadamkan entri, tetapi mari kita permudahkan urusan buat masa ini. </p>
<p>Sila lihat kod berikut. Ia mungkin akan meluaskan pengetahuan JavaScript anda tetapi ulasan dalaman akan membantu.<br>
</p>
<pre class="brush:php;toolbar:false">//src/routes/ page.svelte - alih keluar baris ini sebelum berjalan
<skrip>
biarkan popupVisible = palsu;
biarkan newProductNumber = "";
biarkan produk = []; // Tatasusunan objek produk {productNumber: productNumber}
</skrip>
<div>
<p>Bahagian "template" di sini bermula dengan menyemak nilai popupVisible. Jika ini palsu (yang akan dimulakan kerana pembolehubah baru sahaja dimulakan dalam bahagian "skrip"), apl web memaparkan senarai semasa "produk" apl web (susunan Nombor produk yang disimpan dalam tatasusunan produk). </p>
<p>Kod kini bergerak dan memaparkan butang "Tambah Produk lain" - yang biasa sekarang, bukan versi aneh yang digunakan dalam contoh sebelumnya. Tetapi, seperti sebelum ini, ia mempunyai fungsi on:click yang berkaitan, dan yang ini menetapkan nilai popupVisible kepada benar.</p>
<p>Apakah yang akan berlaku jika butang itu diklik? Sebabnya, memandangkan popupVisible ialah pembolehubah reaktif, apl web akan memuat semula skrinnya.</p>
<p>Kali ini, bahagian paparan produk dalam borang diabaikan dan kawalan akan bergerak terus ke bahagian kedua bahagian templat.</p><p>Di sini, anda akan melihat sesuatu yang lebih seperti pop timbul konvensional. Yang ini menggunakan <borang> teg dalam div bekas> untuk mengumpul input bagi pembolehubah keadaanProductNumber baharu. Kelayakan "bind" khas Svelte digunakan di sini untuk menyegerakkan newProductNumber dengan menaip papan kekunci pengguna. Setiap kali pengguna menaip aksara ke dalam medan <input> borang, newProductNumber dikemas kini.
<p>Apabila pengguna akhirnya mengklik butang "Daftar" borang, fungsi on:click boleh menolak NomborProduk baharu yang dikemas kini sepenuhnya ke dalam tatasusunan produk dan menetapkan semula medan popupVisible.</p>
<p>Akhir sekali, memandangkan popupVisible ialah pembolehubah reaktif, bahagian "template" kod dijalankan semula dan pop timbul digantikan dengan senarai nombor produk yang dikemas kini.</p>
<p>Satu atau dua perkara lain mungkin membingungkan anda. Dalam contoh sebelumnya, anon:click qualifier merujuk fungsi yang ditakrifkan dalam <skrip> bahagian. Walau bagaimanapun, dalam versi baharu page.svelte ini, fungsi ditakrifkan secara eksplisit dalam <butang> spesifikasi HTML medan. Kedua-dua pendekatan adalah sah dengan sempurna. Versi yang digunakan di sini mungkin kelihatan agak pelik kepada anda, tetapi ia adalah susunan yang digunakan secara meluas yang mempunyai kelebihan bahawa logik fungsi ditakrifkan pada titik seruannya. Ini menjadikannya lebih mudah untuk melihat apa yang sedang berlaku. </p>
<p>Untuk rujukan, ungkapan:<br>
"() => { .... }" bermaksud "inilah fungsi yang ditakrifkan oleh pernyataan JavaScript berikut: "{ .... }". Terdapat banyak varian. Minta chatGPT untuk memberi anda tutorial tentang "arrow " fungsi .</p>
<p>Seterusnya, anda juga akan menyedari bahawa saya telah menjadi lebih mencabar dengan "penggayaan" saya. Terdapat tajuk, sebagai contoh, dan semuanya berpusat dengan baik (CSS "warisan" memastikan bahawa>
</p><p>Tetapi itu sudah cukup latar belakang. Mari lihat apl web beraksi. Tampalkan kod baharu pada kandungan semasa fail page.svelte anda, simpan dan (jika perlu) buka terminal pada projek anda dan mulakan semula pelayan dev anda dengan perintah npm run dev -- --open. Berikut ialah perkara yang anda patut lihat dalam penyemak imbas anda::</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>Dan inilah yang anda patut lihat apabila anda mengklik butang:<br><br></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>Memandangkan tiada pengesahan pada medanNomborProduk baharu, anda akan mendapati bahawa anda boleh memasukkan aksara serta nombor - kami akan membetulkannya dalam siaran akan datang. Walaupun begitu, apabila anda mengklik butang "Daftar", anda akan melihat pop timbul digantikan dengan halaman paparan Inventori asal, dengan "nombor" produk baharu anda ditambahkan pada senarai.</p>
<p>Svelte Svelte ini hampir mula kelihatan seperti sistem maklumat! </p><h3>
3. Maju dan Naik
</h3>
<p>Siaran ini telah memberi anda gambaran ringkas tentang konsep utama yang terkandung dalam bahasa Svelte. Malangnya, ada halangan. Seperti yang saya pasti anda akan perasan, contoh "Inventori" yang baru anda lihat adalah tidak berguna kerana setiap kali anda menutup aplikasi web senarai produknya hilang! Oleh itu, langkah seterusnya ialah memperkenalkan anda kepada teknologi pangkalan data <strong>Firestore</strong> Google. Ini akan membolehkan anda membuat storan <strong>berterusan</strong> pada hos pelayan. </p>
<h3>
Postscript (a): Apabila berlaku masalah - Menyiasat isu Reka Letak dengan Pemeriksa Chrome
</h3>
<p>"Apabila berlaku masalah" dalam Siaran 2.1 menerangkan cara menangani beberapa masalah teruk yang akan anda hadapi semasa membangunkan aplikasi web. Tetapi sekarang anda bekerja pada tahap yang lebih maju, anda memerlukan alat yang lebih canggih. Bahagian ini memperkenalkan anda kepada "Chrome Inspector", bantuan yang tidak ternilai apabila membetulkan masalah dengan reka letak skrin apl web anda dan ralat logik dalam JavaScript anda (dan banyak lagi selain, seperti yang anda akan lihat kemudian dalam siri ini).</p>
<p>Pemeriksa dilancarkan pada Halaman apl web dengan mengklik kanan pada halaman dan memilih pilihan "Periksa". Berikut ialah contoh outputnya:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>Dalam tangkapan skrin ini, saya ada:</p>Jika anda mencuba sendiri, anda akan mendapati bahawa tajuk itu telah memperoleh beberapa grafik berwarna. Ini menunjukkan kepada anda saiz dan kedudukan jidar, jidar dan padding yang telah ditambahkan pada teks anda. Panel pemeriksaan sebelah kanan menyediakan lebih terperinci. Jika anda mengklik tab yang dikira dalam menunya, anda akan mendapat grafik yang menerangkan pengekodan warna dan saiz terperinci untuk pelbagai elemen. Jika anda mengklik tab "gaya" anda akan melihat butiran gaya yang dilampirkan pada teks. Set masukan pertama dalam senarai mengesahkan gaya yang ditetapkan secara eksplisit dengan tag>
Keindahan panel ini ialah anda boleh menggunakan pemeriksa untuk melihat kesan menukar dan menambah gaya. Sebagai contoh, katakan anda ingin mencuba fon merah pada tajuk, klik di suatu tempat dalam entri element.style di bahagian atas panel dan masukkan warna: merah. Tajuk itu, secara terpaksa, kini bertukar menjadi merah. Perhatikan peluang untuk menggunakan autolengkap untuk mencuba warna yang berbeza.
Saya tidak mahu menjelaskan perkara ini, tetapi saya fikir anda sepatutnya mula melihat cara kemudahan ini boleh memberi anda alat yang tepat dan intuitif untuk menyiasat dan membetulkan isu reka letak. Untuk mendapatkan maklumat lanjut, lihat dokumentasi Google tentang pemeriksa di DevTools.
Bersedia untuk meluangkan sedikit masa untuk perkara ini. Inspektor ialah alat yang kompleks jadi agak lama sebelum anda boleh menggunakannya dengan yakin. Tetapi ini akan menjadi masa yang dihabiskan dengan baik. Inspektor pastinya telah menyelamatkan saya berjam-jam percubaan buta dengan tetapan kod sumber. Paparan grafik pemeriksa menunjukkan semua sifat tersembunyi bagi lebar elemen, jidar dan pelapik.
Pemeriksa juga boleh membantu anda mencari ralat logik dengan membolehkan anda melihat kod sumber anda dan menetapkan "titik putus" pada baris yang anda ingin perlaksanaan dihentikan. Selepas memuat semula aplikasi web (dengan Inspektor masih terbuka), anda boleh memeriksa nilai medan pada setiap titik putus. Berikut ialah tangkapan skrin Inspektor yang sedang beraksi:
Dalam tangkapan skrin ini, saya telah:
Kesan daripada semua ini ialah meletakkan apl web ke dalam mod "nyahpepijat kod". Sekarang, saya sedang menyahpepijat bahagian
Pada masa ini, aplikasi web dihentikan sebelum pelaksanaan pernyataan pertama dan oleh itu tidak melakukan apa-apa yang berguna. Tetapi maju ke pernyataan seterusnya dengan mengklik butang "Langkah seterusnya" dan ambil perhatian bahawa sorotan kini telah beralih ke baris kedua. Tetikus ke atas medan popupVisible dalam baris pertama dan ambil perhatian bahawa petua alat kini dipaparkan menunjukkan nilai semasanya - palsu, sudah tentu. Ulangi helah untuk mengesahkan tetapan NomborProduk dan produk baharu.
Nilai Inspektor lebih jelas dilihat jika anda menetapkan titik putus dalam fungsi Javascript yang ditakrifkan dalam
Malangnya, nyahpepijat dengan titik putus dalam bahagian "template" pada fail page.svelte tidak begitu mudah. Di sini, kod berjalan setiap kali halaman dipaparkan semula berikutan perubahan dalam pembolehubah reaktif, tetapi kod yang tab "sumber" dipaparkan di sini (iaitu kod Sveltekit asal page.svelte anda) bukanlah yang sebenarnya sedang dijalankan sekarang. . Kod asal telah digantikan dengan skrip Svelte yang dihasilkan oleh pelayan tempatan. Oleh itu, terdapat hanya skop terhad untuk anda mendapatkan maklumat tentang perkara yang berlaku.
Jika anda ingin mengetahui lebih lanjut tentang proses pemaparan dan sebab halaman anda. fail svelte berkelakuan seperti ini dalam Inspektor, langkau secara ringkas ke penghujung Post 4.4. Tetapi, amaran, ia adalah rumit!
Mengikut pengalaman saya, anda biasanya boleh menetapkan titik putus pada pernyataan Sveltekit dan dengan itu menjejaki laluan yang diambil semasa pemaparan semula. Tetapi ini tidak akan memaparkan nilai medan.
Anda boleh, walau bagaimanapun, menetapkan titik putus dengan berguna dalam fungsi terbenam. Contohnya, cuba tetapkan titik putus dalam products.push({productNumber: newProductNumber}); baris untuk butang "Daftar". Ambil perhatian bahawa keseluruhan blok
Jika semuanya gagal dan anda masih perlu menyemak nilai pembolehubah dalam bahagian templat, setara dengan "console.log" untuk pembolehubah "x" akan menjadi
Nilai x ialah {x }
kenyataan.Perhatikan bahawa butang pada baris "Dijeda dalam penyahpepijat" diduplikasi dalam bar menu Inspektor dan ditambah dengan butang "Langkah ke fungsi seterusnya" untuk membolehkan anda melintasi fungsi bersarang.
Seperti yang anda akan sedar dengan cepat, tetapan titik putus kekal dalam fail aplikasi web. Garis putus-putus dimatikan dengan mengkliknya sekali lagi. "Klik kanan" dalam entri untuk fail dalam panel "Breakpoints" Inspektor di sebelah kanan skrin akan mendedahkan togol induk untuk mengalih keluar semua titik putus.
Akhir sekali. ambil perhatian bahawa apabila apl web mengalami masalah besar dan "ranap", membuka Inspektor akan mendedahkan "kiraan ralat" merah di hujung sebelah kanan bar menunya. Apabila ini berlaku, butiran masalah boleh dilihat dalam tab "konsol" Pemeriksa.
Atas ialah kandungan terperinci NgSysV.Mencipta aplikasi web Reaktif Svelte yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
