Svelte: mengenal Tindakan

Baru-baru ini, sebuah artikel dari @sanReal muncul di Habr , di mana Alexander berbicara tentang teknik apa dan kemampuan apa dari Svelte yang dia pelajari dari pengalamannya sendiri. Saya sedikit terkejut tidak melihat dalam daftarnya menyebutkan salah satu alat kerangka kerja yang paling kuat - Tindakan . Selain itu, berkomunikasi dengan orang-orang di komunitas @sveltejs yang sudah membuat aplikasi yang sangat baik menggunakan Svelte, kadang-kadang saya perhatikan bahwa tidak semua orang menggunakan Tindakan, bahkan di mana aplikasi mereka idealnya akan menyelesaikan masalah. Dalam artikel ini saya akan memberi tahu Anda apa Tindakan itu dan, dengan contoh paling sederhana, saya akan menunjukkan aplikasi mereka.

Misalkan kita memiliki kotak teks di mana pengguna harus memasukkan nomor telepon. Kami perlu memastikan bahwa pengguna hanya dapat memasukkan angka di bidang.

: +7 <input type="text" />

Ketika tugasnya adalah untuk memberikan elemen HTML standar dengan fitur tambahan, itu adalah praktik umum ketika bekerja di komponen kerangka mana pun untuk membuat komponen yang dapat digunakan kembali di sekitar elemen ini, di mana logika perilaku non-standar diimplementasikan. Anda dapat melakukan hal yang sama di Svelte:

<!-- InputDigits.svelte -->
<script>
    function clean_value(e){
        e.target.value =  e.target.value.replace(/[^\d]/g,'');
    }
</script>

<input type="text" on:input={clean_value} />

<!-- App.svelte -->
...
: +7 <InputDigits />

Lihat beraksi

Tugas telah selesai, tetapi elemen itu sendiri <input/>sekarang tersembunyi di dalam komponen, jadi kami tidak akan lagi dapat memanipulasinya sebagai elemen HTML biasa - untuk "menggantung" di atasnya setiap kelas CSS, event handler, atau beberapa atribut khusus tidak akan begitu sederhana.

Svelte — ( Actions). Svelte , , , , — "" , . — - HTML-. , DOM. DOM-, .

:

<script>
    function onlydigits(node) {

        function clean_value(){
            node.value = node.value.replace(/[^\d]/g,'');
        }

        node.addEventListener('input',clean_value);

        return {
            destroy: ()=>node.removeEventListener('input',clean_value)
        }

    }
</script>

: +7 <input type="text" use:onlydigits />

onlydigits, . , DOM- node input. , destroy, DOM-, .

Svelte, - HTML- , use. <input/> use:onlydigits.

. , 10 :

<script>
    function onlydigits(node) { ... }

    function max10symbols(node) {

        function trim_value(){
            node.value = node.value.substring(0, 10);
        }

        node.addEventListener('input',trim_value);

        return {
            destroy: ()=>node.removeEventListener('input',trim_value)
        }

    }
</script>

: +7 <input type="text" use:onlydigits use:max10symbols />

<input /> — use:onlydigits use:max10symbols. .

use , . , . :

<script>
    function format_by_pattern(node,pattern) {

        function set_cursor(){
            const match = node.value.match(/[\d]/gi);
            const pos = match ? node.value.lastIndexOf(match.pop())+1 : 0;
            node.setSelectionRange(pos, pos);
        }

        function format_value(e){
            let digits = node.value.replace(/[^\d]/g,'').split('');
            node.value = pattern.replace(/[*]/g,(m)=>digits.shift()||m);
            set_cursor();
        }

        node.addEventListener('input',format_value);

        format_value();

        return {
            destroy: ()=>node.removeEventListener('input',format_value)
        }

    }
</script>

: +7 <input type="text" use:format_by_pattern={'(***) ***-**-**'} /> <br/>
: <input type="text" use:format_by_pattern={' **** №******'} />

<input /> HTML-. format_by_pattern, . , Svelte, JavaScript-.

, , , . .

<script>
    function format_by_pattern(node,pattern) {

        function set_cursor(){...}
        function format_value(){...}

        ...

        return {
            destroy: ...,
            update: (new_pattern)=>{
                pattern=new_pattern;
                format_value();
            }
        }

    }

    let zagran = false;
</script>

: +7 <input type="text" use:format_by_pattern={'(***) ***-**-**'} /> <br/>
: <input type="text" use:format_by_pattern={zagran ? ' ** №*******' : ' **** №******'} /> <br/>
<input type="checkbox" bind:checked={zagran}/> - 

, . , , bind:checked, zagran true false. , Svelte use:format_by_pattern.

, , DOM-, <input /> DOM-, . .

, , , — update. , . .

. , . , , DOM- — , . Svelte. Svelte , , .

Catatan: Sebentar lagi di Moskow akan diadakan Svelte Russia Meetup # 1 . Daftar, masih ada kamar. Bagi mereka yang tidak dapat hadir secara langsung, siaran dan rekaman acara akan diselenggarakan.