Svelte: التعرف على الإجراءات

في الآونة الأخيرة ، ظهر مقال من sanReal على هابر ، حيث تحدث ألكسندر عن تقنيات وقدرات Svelte التي تعلمها من تجربته الخاصة. لقد فوجئت قليلاً بعدم رؤية في قائمته ذكر إحدى أقوى أدوات إطار العمل - الإجراءات . بالإضافة إلى ذلك ، عند التواصل مع الأشخاص في مجتمع sveltejs الذين يقومون بالفعل بإنشاء تطبيقات جيدة جدًا باستخدام Svelte ، ألاحظ أحيانًا أنه لا يستخدم الجميع الإجراءات ، حتى في الحالات التي يحل فيها تطبيقهم المشكلة بشكل مثالي. في هذه المقالة سأخبرك ما هي الإجراءات ، وأبسط الأمثلة ، سأعرض تطبيقها.

افترض أن لدينا مربع نص حيث يجب على المستخدم إدخال رقم هاتف. نحتاج إلى التأكد من أن المستخدم يمكنه إدخال أرقام فقط في الحقل.

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

عندما تكون المهمة هي منح عنصر HTML قياسي بميزات إضافية ، فمن الممارسة الشائعة عند العمل في أي مكون من مكونات الإطار لإنشاء مكون قابل لإعادة الاستخدام حول هذا العنصر ، حيث يتم تنفيذ منطق السلوك غير القياسي. يمكنك القيام بنفس الشيء في 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 />

العرض في العمل

تم الانتهاء من المهمة ، ولكن العنصر نفسه <input/>مخفي الآن داخل المكون ، لذلك لن نتمكن بعد الآن من معالجته كعنصر HTML عادي - "للتعليق" عليه أي فئات CSS أو معالجات الأحداث أو بعض السمات الخاصة لن تكون بهذه البساطة.

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

ملاحظة: قريبا جدا في موسكو سيعقد لقاء Svelte Russia # 1 . سجل ، لا تزال هناك مساحة. بالنسبة لأولئك الذين لن يتمكنوا من الحضور شخصيًا ، سيتم تنظيم بث وتسجيل للحدث.