Svelte: Aktionen kennenlernen

Kürzlich erschien auf Habr ein Artikel von @sanReal , in dem Alexander darüber sprach, welche Techniken und welche Fähigkeiten von Svelte er aus eigener Erfahrung gelernt hatte. Ich war ein wenig überrascht, in seiner Liste nicht die Erwähnung eines der mächtigsten Framework-Tools zu sehen - Aktionen . Wenn ich mit Leuten in der @veltejs- Community kommuniziere , die bereits sehr gute Anwendungen mit Svelte erstellen, stelle ich manchmal fest, dass nicht jeder Aktionen verwendet, selbst wenn ihre Anwendung das Problem ideal lösen würde. In diesem Artikel werde ich Ihnen sagen, was Aktionen sind, und anhand der einfachsten Beispiele werde ich ihre Anwendung zeigen.

Angenommen, wir haben ein Textfeld, in das der Benutzer eine Telefonnummer eingeben muss. Wir müssen sicherstellen, dass der Benutzer nur Zahlen in das Feld eingeben kann.

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

Wenn die Aufgabe darin besteht, ein Standard-HTML-Element mit zusätzlichen Funktionen auszustatten, ist es üblich, in einer beliebigen Komponente des Frameworks eine wiederverwendbare Komponente um dieses Element herum zu erstellen, in der die Logik des nicht standardmäßigen Verhaltens implementiert ist. Sie können dasselbe in Svelte tun:

<!-- 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 />

In Aktion anzeigen

Die Aufgabe wurde abgeschlossen, aber das Element selbst ist <input/>jetzt in der Komponente verborgen, sodass wir es nicht mehr als reguläres HTML-Element bearbeiten können. Es ist nicht so einfach, CSS-Klassen, Ereignishandler oder einige spezielle Attribute daran zu "hängen".

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 , , .

Hinweis: In Kürze findet in Moskau das Svelte Russia Meetup # 1 statt . Registrieren, es ist noch Platz. Für diejenigen, die nicht persönlich teilnehmen können, wird eine Sendung und Aufzeichnung der Veranstaltung organisiert.