Svelte: क्रियाएँ जानना

हाल ही में, हसन पर @sanReal का एक लेख छपा , जहाँ अलेक्जेंडर ने इस बात पर चर्चा की कि किस तकनीक और स्वेल्ट की क्षमताओं से उन्होंने अपने अनुभव से सीखा। मुझे उनकी सूची में सबसे शक्तिशाली फ्रेमवर्क टूल - क्रियाओं में से एक का उल्लेख नहीं देखकर थोड़ा आश्चर्य हुआ । इसके अलावा, @sveltejs समुदाय के लोगों के साथ संचार करना, जो पहले से ही Svelte का उपयोग करके बहुत अच्छे एप्लिकेशन बना रहे हैं, मैं कभी-कभी यह नोटिस करता हूं कि हर कोई Actions का उपयोग नहीं करता है , यहां तक ​​कि जहां उनका एप्लिकेशन आदर्श रूप से समस्या का समाधान करेगा। इस लेख में मैं आपको बताऊंगा कि कार्य क्या हैं और, सबसे सरल उदाहरणों के साथ, मैं उनका आवेदन दिखाऊंगा।

मान लीजिए हमारे पास एक टेक्स्ट बॉक्स है जिसमें उपयोगकर्ता को एक फ़ोन नंबर दर्ज करना होगा। हमें यह सुनिश्चित करने की आवश्यकता है कि उपयोगकर्ता फ़ील्ड में केवल संख्या दर्ज कर सकता है।

: +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 तत्व के रूप में हेरफेर करने में सक्षम नहीं होंगे - किसी भी सीएसएस वर्गों, घटना संचालकों, या कुछ विशेष विशेषताओं पर "लटका" करने के लिए यह सरल नहीं होगा।

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 Meetup # 1 आयोजित किया जाएगा । रजिस्टर, अभी भी कमरा है। उन लोगों के लिए जो व्यक्तिगत रूप से उपस्थित नहीं हो पाएंगे, आयोजन का एक प्रसारण और रिकॉर्डिंग का आयोजन किया जाएगा।