Isyarat: Kereaktifan halus untuk kerangka JavaScript

Artikel ini meneroka secara mendalam bagaimana menggunakan isyarat dalam perpustakaan JavaScript yang moden dan responsif yang kebanyakannya bergantung kepada komponen untuk membina antara muka pengguna.

Kandungan:

Pengenalan isyarat
1. senario aplikasi isyarat
Apa itu pepejal?
Apa sebenarnya isyarat?
3. Contoh isyarat
4. isyarat dalam sudut
5. Ciri -ciri lain dari pepejal

Mata utama:

isyarat adalah salah satu trend terkini dalam pembangunan web, dan ia menyediakan cara yang responsif untuk mengemas kini nilai yang mudah berubah dalam program anda. Apabila nilai dikemas kini, semua kandungan menggunakan nilai dikemas kini, menjadikan isyarat unik. Ia digunakan dalam perpustakaan seperti pepejal, sudut, preact dan vue.

• pepejal adalah rangka kerja responsif yang dicipta oleh Ryan Carniato yang menggunakan isyarat untuk mewujudkan respons respons halus. Ia dipenuhi seperti svelte, yang bermaksud kurang kod perlu dihantar. Pepejal tidak menggunakan DOM maya, dan komponen hanya dipanggil sekali pada rendering pertama.
Isyarat
• adalah nilai yang boleh dilihat, mempunyai nilai awal, dan menyediakan kaedah getter dan setter yang boleh digunakan untuk melihat atau mengemas kini nilai ini. Apabila nilai isyarat berubah, ia menghantar isyarat, mencetuskan tindak balas. Ini biasanya panggilan untuk mengemaskini dan membuat sebarang komponen yang bergantung kepada nilai ini.
• Dalam pepejal, getter berkelakuan seperti fungsi, yang bermaksud ia secara automatik melanggan kesan kepada isyarat. Ini memastikan bahawa apabila nilai isyarat berubah, kesannya akan dijalankan dengan nilai baru. Ini juga bermakna sentiasa mengembalikan nilai semasa terkini.
• Di samping isyarat, pepejal juga mempunyai ciri -ciri lain yang patut memberi perhatian kepada. Ia sangat cepat dalam membuat dan mengemas kini kandungan dan mempunyai API yang sama untuk bertindak balas. Ia menambah beberapa ciri pintar ke JSX, seperti aliran kawalan, dan menyokong penyampaian, penghidratan dan streaming pelayan.

Pengenalan isyarat

Salah satu trend terkini dalam pembangunan web ialah penggunaan isyarat, yang menyediakan cara yang lebih responsif untuk mengemas kini nilai yang mudah berubah dalam program anda. Apabila nilai dikemas kini, semua kandungan menggunakan nilai itu dikemas kini juga. Itulah sebabnya isyaratnya begitu unik.

Pertumbuhan isyarat dan perhatiannya mengingatkan semua sensasi yang disebabkan apabila React 16.8 dikeluarkan pada tahun 2019, apabila pasukan React memperkenalkan cangkuk. Matlamat cangkuk adalah untuk membuat kemas kini negeri (akhirnya semua kemas kini) lebih banyak kaedah berfungsi dan menjauhkan diri daripada menggunakan kelas. Walaupun isyarat kelihatan hampir sama dengan cangkuk, terdapat sedikit perbezaan di antara mereka (kami meneroka di bawah).

senario aplikasi isyarat

Perpustakaan pepejal sentiasa menggunakan isyarat.

• Angular baru -baru ini menggunakan isyarat sebagai cara utamanya untuk mengesan perubahan dalam aplikasi.
• Preact baru -baru ini memperkenalkan isyarat sebagai alat untuk menguruskan negara.
• Vue mempunyai API responsif, di mana refs hampir menjadi isyarat di bawah nama yang berbeza.

Apa itu pepejal?

pepejal (juga dikenali sebagai pepejal) ditubuhkan pada tahun 2016 oleh Ryan Carniato dan dikeluarkan pada tahun 2018. Dalam kata-kata sendiri, "Ia berpunca dari keinginan untuk terus menggunakan corak reaktif yang halus yang saya suka dari knockout.js."

Dia tidak menyukai arah perkembangan perpustakaan seperti React dan Vue, "Dia lebih suka kawalan dan komposit yang dibawa menggunakan primitif yang lebih kecil dan lebih bebas daripada komponennya." Rangka kerja responsif yang menggunakan isyarat untuk mewujudkan responsif halus (corak isyarat yang kini dapat dilihat dalam banyak rangka kerja lain juga).

Pada pandangan pertama, pepejal sangat mirip dengan bertindak balas dengan cangkuk dan komponen berfungsi. Dalam beberapa cara, ini benar: mereka semua mempunyai falsafah yang sama ketika mengurus data, yang menjadikan pembelajaran lebih mudah jika kita sudah akrab dengan React.

Walau bagaimanapun, terdapat beberapa perbezaan utama:

pepejal adalah serupa dengan svelte dan dipraktikkan. Ini bermakna penambahbaikan prestasi dimasukkan ke dalam binaan akhir, jadi terdapat kurang kod yang akan dihantar.
pepejal tidak menggunakan dom maya, dan walaupun komponen hanya berfungsi (seperti dalam reaksi), mereka hanya dipanggil sekali pada rendering pertama. (Dalam React, mereka akan dipanggil selagi ada kemas kini kepada komponen.)

Apa sebenarnya isyarat?

isyarat didasarkan pada mod pemerhati, yang merupakan salah satu geng klasik dari empat corak reka bentuk. Malah, kalah mati menggunakan sesuatu yang sangat mirip dengan isyarat, yang dipanggil "objek yang boleh dilihat".

Isyarat adalah bahagian paling atom dari aplikasi responsif. Mereka adalah nilai yang boleh dilihat, mempunyai nilai awal, dan menyediakan kaedah getter dan setter untuk melihat atau mengemas kini nilai ini. Walau bagaimanapun, untuk memanfaatkan isyarat, kita memerlukan reaksi

, yang merupakan kesan melanggan isyarat dan berjalan sebagai tindak balas kepada perubahan nilai.

Apabila nilai isyarat berubah, ia sebenarnya memancarkan peristiwa (atau "isyarat") dan kemudian mencetuskan tindak balas (atau "kesan"). Ini biasanya panggilan untuk mengemaskini dan membuat sebarang komponen yang bergantung kepada nilai ini. Komponen -komponen ini dipanggil

langganan isyarat. Ini bermakna jika nilai isyarat berubah, hanya komponen ini akan dikemas kini.

Konsep utama dalam pepejal adalah bahawa

semuanya adalah kesan, bahkan rendering pandangan. Setiap isyarat berkait rapat dengan komponen tertentu yang menjejaskannya. Ini bermakna bahawa apabila nilai berubah, pandangan boleh diubah dengan cara yang sangat halus tanpa pengubahsuaian penuh halaman mahal.

Contoh isyarat

Untuk membuat isyarat dalam pepejal, kita perlu menggunakan fungsi createsignal dan menetapkan dua pembolehubah kepada nilai pulangannya seperti yang ditunjukkan di bawah:

<code class="language-javascript">const [name, setName] = createSignal("Diana Prince");</code>

Kedua -dua pembolehubah ini mewakili kaedah getter dan setter. Dalam contoh di atas, nama adalah getter dan setname adalah setter. Nilai 0 yang diluluskan kepada CreateSignal menunjukkan nilai awal isyarat.

Ini pastinya kelihatan biasa untuk bertindak balas pemaju. Menggunakan Cangkuk React untuk membuat kod yang sama kelihatan seperti ini:

<code class="language-javascript">const [name, setName] = useState("Diana Prince");</code>

Dalam React, getter (nama) bertindak seperti pembolehubah, manakala setter (setName) adalah fungsi.

Walau bagaimanapun, walaupun mereka kelihatan sangat serupa, perbezaan utama ialah nama itu bertindak seperti pembolehubah dalam React, sementara dalam pepejal ia adalah fungsi.

Mengambil nama sebagai fungsi bermaksud bahawa apabila dipanggil di dalam kesannya, ia secara automatik melanggan kesannya kepada isyarat. Ini bermakna apabila nilai isyarat berubah, kesannya akan dijalankan dengan nilai baru.

Berikut adalah contoh menggunakan nama () isyarat:

Fungsi createeffect

<code class="language-javascript">const [name, setName] = createSignal("Diana Prince");</code>

boleh digunakan untuk menjalankan kesan berdasarkan sebarang nilai isyarat, seperti merakam nilai ke konsol. Ia akan melanggan sebarang isyarat yang dirujuk di dalam fungsi tersebut. Jika nilai sebarang perubahan isyarat, kod kesan akan dijalankan semula.

Dalam contoh kami, jika kami menggunakan fungsi setname setter untuk menukar nilai isyarat nama, kami dapat melihat kod kesan dijalankan dan merakam nama baru ke konsol:

<code class="language-javascript">const [name, setName] = useState("Diana Prince");</code>

mengambil getter sebagai fungsi juga bermakna sentiasa mengembalikan nilai semasa terkini, sementara rangka kerja lain boleh mengembalikan nilai "basi" walaupun selepas nilai dikemas kini. Ia juga bermakna bahawa sebarang isyarat boleh dengan mudah terikat pada nilai yang dikira dan menghafal:

<code class="language-javascript">createEffect(() => console.log(`Hello ${name()}`))</code>

Ini akan mewujudkan isyarat baca sahaja yang boleh diakses menggunakan namelength (). Nilainya akan dikemas kini sebagai tindak balas kepada sebarang perubahan dalam nilai isyarat nama.

Jika isyarat () isyarat dimasukkan ke dalam komponen, komponen secara automatik akan melanggan isyarat ini dan membuat semula apabila perubahannya berubah:

<code class="language-javascript">setName("Wonder Woman")</code>

Mengemaskini nilai isyarat nama dengan setName akan menyebabkan neraka yang diberikan semula. Di samping itu, fungsi hellocomponent dipanggil hanya sekali untuk membuat HTML yang berkaitan. Sebaik sahaja ia dipanggil, ia tidak perlu dijalankan semula, walaupun terdapat sebarang kemas kini kepada nilai isyarat nama. Walau bagaimanapun, dalam React, fungsi komponen dipanggil apabila sebarang perubahan berlaku dalam nilai yang mereka ada.

Satu lagi perbezaan utama kepada pepejal adalah walaupun ia menggunakan JSX untuk melihat logik, ia tidak menggunakan dom maya sama sekali. Sebaliknya, ia mempraktikkan kod menggunakan alat membina Vite moden. Ini bermakna bahawa terdapat kurang JavaScript yang diperlukan untuk dihantar dan tiada perpustakaan pepejal sebenar diperlukan untuk dihantar dengannya (sangat mirip dengan Svelte). Pandangan dibina di HTML. Kemudian, gunakan sistem teks templat untuk mengenali sebarang perubahan dan kemudian lakukan operasi DOM gaya lama yang baik untuk kemas kini halus secara dinamik.

Pengasingan dan kemas kini halus ini ke kawasan tertentu DOM sangat berbeza dari pendekatan React untuk membina semula DOM maya sepenuhnya selepas sebarang perubahan. Kemas kini langsung ke DOM mengurangkan overhead mengekalkan DOM maya dan menjadikannya sangat cepat. Malah, pepejal mempunyai beberapa data yang mengagumkan dari segi kelajuan rendering -hanya untuk JavaScript asli.

Semua tanda aras boleh dilihat di sini.

isyarat dalam sudut

Seperti yang dinyatakan sebelum ini, isyarat baru-baru ini mengadopsi isyarat untuk kemas kini halus. Mereka bekerja sama dengan isyarat pepejal, tetapi dicipta sedikit berbeza.

Untuk membuat isyarat, anda boleh menggunakan fungsi isyarat dan lulus nilai awal sebagai parameter:

<code class="language-javascript">const nameLength = createMemo(() => name().length)</code>

Nama pembolehubah yang diberikan kepada isyarat (nama dalam contoh di atas) kemudian boleh digunakan sebagai getter:

<code class="language-javascript">const [name, setName] = createSignal("Diana Prince");</code>

isyarat juga mempunyai kaedah set yang boleh digunakan untuk mengemas kini nilainya seperti yang ditunjukkan di bawah:

<code class="language-javascript">const [name, setName] = useState("Diana Prince");</code>

Kaedah kemas kini halus dalam sudut hampir sama seperti pepejal. Pertama, sudut mempunyai kaedah kemas kini () yang berfungsi serupa dengan set, tetapi memperoleh nilai bukannya menggantikan nilai:

<code class="language-javascript">createEffect(() => console.log(`Hello ${name()}`))</code>

Satu -satunya perbezaan di sini ialah mengambil nilai (nama) sebagai parameter dan melaksanakan arahan di atasnya (.touppercase ()). Ini berguna apabila nilai akhir getter diganti tidak diketahui dan mesti diperolehi.

Kedua, Angular juga mempunyai fungsi yang dikira () untuk membuat isyarat hafalan. Ia berfungsi sama seperti Creatememo Solid:

<code class="language-javascript">setName("Wonder Woman")</code>

Seperti pepejal, nilai isyarat yang dikira berubah apabila perubahan dalam nilai isyarat dalam fungsi pengiraan dikesan.

Akhirnya, sudut mempunyai fungsi kesan (), yang berfungsi sama seperti fungsi createeeffect () dalam pepejal. Apabila nilai yang bergantung pada dikemas kini, kesan sampingan dilaksanakan semula:

<code class="language-javascript">const nameLength = createMemo(() => name().length)</code>

Ciri -ciri lain pepejal

Bukan hanya isyarat yang membuat perhatian yang kukuh. Seperti yang telah kami sebutkan, ia sangat cepat dalam membuat dan mengemas kini kandungan. Ia juga mempunyai API yang sangat serupa untuk bertindak balas, jadi ia harus mudah dimulakan untuk sesiapa sahaja yang telah menggunakan React sebelum ini. Walau bagaimanapun, kerja pepejal sangat berbeza di lapisan asas dan secara amnya melakukan lebih baik.

Satu lagi ciri pepejal yang bagus ialah ia menambah beberapa ciri pintar kepada JSX, seperti aliran kawalan. Ia membolehkan kita membuat gelung untuk menggunakan komponen , dan kita boleh menggunakan komponen untuk mengandungi ralat.

Di samping itu, komponen

juga mudah untuk memaparkan kandungan (seperti modaliti) di luar proses biasa. Dan reaktif bersarang bermaksud bahawa apa-apa perubahan pada array nilai atau objek akan membuat semula bahagian yang diubah dari pandangan tanpa perlu membuat semula keseluruhan senarai. Pepejal menggunakan kedai untuk menjadikannya lebih mudah. Pepejal juga menyokong penyampaian, penghidratan dan streaming pelayan.

Bagi sesiapa yang ingin mencuba pepejal, terdapat tutorial pengenalan yang sangat baik di laman web pepejal di mana kita boleh bereksperimen dengan kod di taman permainan pepejal.

Kesimpulan

Dalam artikel ini, kami memperkenalkan konsep isyarat dan bagaimana ia digunakan dalam pepejal dan sudut. Kami juga melihat bagaimana mereka membantu Solid melakukan kemas kini halus ke DOM tanpa memerlukan DOM maya. Ramai kerangka kini mengamalkan paradigma isyarat, jadi mereka pasti cara yang harus kita menguasai!

FAQ pada isyarat dalam JavaScript

Apakah perbezaan utama antara isyarat dalam JavaScript dan pemprosesan acara tradisional?

Pemprosesan acara tradisional dalam JavaScript melibatkan melampirkan pendengar acara ke elemen DOM dan bertindak balas terhadap interaksi pengguna atau peristiwa sistem. Walau bagaimanapun, pendekatan ini boleh menjadi kompleks dan sukar untuk dikendalikan dalam aplikasi besar. Sebaliknya, isyarat memberikan pendekatan berbutir yang lebih baik untuk responsif. Mereka membolehkan anda membuat unit tingkah laku reaktif bebas yang boleh digabungkan untuk mewujudkan interaksi yang kompleks. Tidak seperti pendengar acara, isyarat tidak terikat kepada mana -mana elemen DOM tertentu atau jenis acara, yang menjadikannya lebih fleksibel dan lebih mudah untuk digunakan semula di bahagian -bahagian yang berlainan aplikasi.

Bagaimanakah prestasi isyarat dalam JavaScript berbanding dengan model reaktif lain?

Isyarat direka untuk menjadi cekap dan berprestasi. Mereka menggunakan model reaktif berasaskan tarik, bermakna mereka hanya mengira nilai mereka apabila diperlukan. Ini boleh membawa kepada peningkatan prestasi yang signifikan dalam aplikasi dengan tingkah laku reaktif yang kompleks, kerana perhitungan yang tidak perlu dapat dielakkan. Walau bagaimanapun, perbezaan prestasi yang tepat bergantung kepada kes penggunaan tertentu dan tahap pengoptimuman model reaktif.

Bolehkah isyarat digunakan dengan kerangka JavaScript lain seperti React atau Vue?

Ya, isyarat boleh digunakan dengan rangka kerja JavaScript lain seperti React atau Vue. Mereka boleh diintegrasikan ke dalam sistem reaktif rangka kerja ini untuk memberikan fleksibiliti dan kawalan tambahan terhadap tingkah laku respons. Walau bagaimanapun, adalah penting untuk diperhatikan bahawa setiap rangka kerja mempunyai cara tersendiri untuk mengendalikan reaksi, jadi anda perlu memahami bagaimana isyarat sesuai dengan model.

Bagaimana untuk debug aplikasi JavaScript yang menggunakan isyarat?

Debugging Aplikasi JavaScript yang menggunakan isyarat mungkin sedikit berbeza daripada debugging aplikasi yang didorong oleh peristiwa tradisional. Oleh kerana isyarat tidak terikat kepada peristiwa tertentu atau elemen DOM, anda perlu menjejaki aliran data dalam isyarat dan kebergantungannya. Alat seperti Chrome Devtools berguna untuk ini, kerana ia membolehkan anda melangkah melalui kod dan menyemak status isyarat pada setiap langkah.

Apakah batasan atau kekurangan menggunakan isyarat dalam JavaScript?

Walaupun isyarat memberikan banyak faedah, mereka juga mempunyai beberapa batasan. Satu kelemahan yang berpotensi ialah mereka boleh menjadikan kod anda lebih kompleks dan sukar difahami, terutamanya bagi pemaju yang tidak biasa dengan konsep reaktifan. Selain itu, kerana isyarat adalah konsep yang agak baru dalam JavaScript, mungkin terdapat sumber dan sokongan masyarakat yang kurang daripada corak dan kerangka yang lebih matang.

Bagaimana untuk menguji aplikasi JavaScript menggunakan isyarat?

Aplikasi JavaScript menggunakan isyarat boleh diuji menggunakan teknik yang sama seperti mana -mana aplikasi JavaScript lain. Anda boleh menggunakan ujian unit untuk menguji isyarat individu dan tingkah laku mereka, dan menggunakan ujian integrasi untuk menguji bagaimana isyarat berinteraksi antara satu sama lain dan dengan bahagian lain aplikasi anda. Alat seperti Jest atau Mocha boleh digunakan untuk tujuan ini.

Bolehkah isyarat digunakan dalam persekitaran Node.js?

Ya, isyarat boleh digunakan dalam persekitaran Node.js. Mereka tidak terikat kepada penyemak imbas atau DOM, jadi mereka boleh digunakan dalam mana -mana persekitaran JavaScript. Ini menjadikan mereka alat yang berkuasa untuk membina tingkah laku reaktif dalam aplikasi sisi pelayan.

Bagaimana menangani kesilapan dalam aplikasi JavaScript yang menggunakan isyarat?

Kaedah pengendalian kesilapan dalam aplikasi JavaScript menggunakan isyarat adalah serupa dengan mana -mana aplikasi JavaScript yang lain. Anda boleh menggunakan blok percubaan/menangkap untuk menangkap kesilapan dan mengendalikannya dengan betul. Di samping itu, anda boleh menggunakan isyarat ralat untuk menyebarkan kesilapan melalui graf isyarat dan memprosesnya secara berpusat.

Bolehkah isyarat digunakan untuk membina aplikasi masa nyata?

Ya, isyarat boleh digunakan untuk membina aplikasi masa nyata. Mereka menyediakan cara yang kuat untuk mengurus dan bertindak balas terhadap kemas kini data masa nyata, menjadikannya pilihan yang sangat baik untuk aplikasi seperti aplikasi sembang, papan pemuka masa nyata, dan permainan berbilang pemain.

Bagaimana untuk mengoptimumkan prestasi aplikasi JavaScript menggunakan isyarat?

Mengoptimumkan prestasi aplikasi JavaScript yang menggunakan isyarat melibatkan pengurusan yang teliti terhadap kebergantungan isyarat dan mengelakkan pengiraan yang tidak perlu. Anda boleh menggunakan alat seperti Chrome DevTools untuk menganalisis aplikasi anda dan mengenal pasti kesesakan prestasi. Di samping itu, anda boleh menggunakan teknik seperti memori dan penilaian kelewatan untuk meningkatkan prestasi isyarat anda.

Atas ialah kandungan terperinci Isyarat: Kereaktifan halus untuk kerangka JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!