अल्पाइन.जेएस क्या है और आप इसका उपयोग कैसे करते हैं?

वेब विकास की दुनिया अस्त-व्यस्त है—ढांचे अस्तित्व में और बाहर आते हैं और चीजें नए और अनुभवी डेवलपर्स दोनों के लिए समान रूप से भारी हो सकती हैं।

अधिकांश वेब विकास रूपरेखाओं के विपरीत, अल्पाइन.जेएस का उद्देश्य जितना संभव हो उतना सरल होना है, फिर भी प्रतिक्रियाशीलता और साइड इफेक्ट जैसी अवधारणाओं से निपटने के लिए पर्याप्त शक्तिशाली है।

अल्पाइन.जेएस के साथ आरंभ करना

अल्पाइन.जेएस स्थापित करना काफी सरल है। आपको केवल निम्नलिखित शामिल करने की आवश्यकता है लिखी हुई कहानी अपने एचटीएमएल में टैग करें:

<लिखी हुई कहानीआस्थगित करेंस्रोत=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">लिखी हुई कहानी>

वैकल्पिक रूप से, आप नोड पैकेज मैनेजर का उपयोग करके अपने प्रोजेक्ट में अल्पाइन.जेएस स्थापित कर सकते हैं:

एनपीएम अल्पाइनज स्थापित करें

अल्पाइन.जेएस में प्रतिक्रियाशीलता

एक बनाएं index.htm फ़ाइल और निम्न बॉयलरप्लेट कोड जोड़ें:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8">





instagram viewer


<मेटाHTTP-समतुल्य="एक्स-यूए-संगत"संतुष्ट="आईई = किनारा">
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0">
<शीर्षक>अल्पाइन.जेएसशीर्षक>
सिर>
<शरीर>
<लिखी हुई कहानीआस्थगित करेंस्रोत=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">लिखी हुई कहानी>
शरीर>
एचटीएमएल>

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

Alpine.js जैसे कई निर्देश प्रदान करता है एक्स-डाटा जिसका उपयोग यह डेटा को स्टोर करने के लिए करता है x-पाठ जिसे यह सेट करने के लिए उपयोग करता है innerText संलग्न घटक का। इन निर्देशों का उपयोग करने के लिए, निम्न कोड को अपने HTML में जोड़ें।

<डिवएक्स-डाटा="{नाम:'डेविड उज़ोंडू', संगठन:'मेक यूज ऑफ'}">
 मेरा नाम है <मज़बूतx-पाठ="नाम">मज़बूत>
 और <मैंx-पाठ="संगठन">मैं> कमाल है
डिव>

एक्स-डेटा निर्देश कुंजी के साथ एक वस्तु को संग्रहीत करता है नाम और संगठन. फिर आप उन चाबियों को एक्स-टेक्स्ट निर्देश में पास कर सकते हैं। जब आप कोड चलाते हैं, तो अल्पाइन.जेएस मूल्यों को पॉप्युलेट करेगा:

अल्पाइन.जेएस रिएक्ट से कैसे तुलना करता है

अल्पाइन.जेएस एक हल्का ढांचा है जो इसे छोटी परियोजनाओं और प्रोटोटाइप के विकास के लिए उपयुक्त बनाता है।

रिएक्ट जैसे बड़े ढांचे में, आप उपयोग करते हैं हुक पसंद है उपयोग प्रभाव () घटक जीवनचक्र में दुष्प्रभावों को संभालने के लिए। जब भी निर्भरता सरणी के तत्वों में से कोई एक बदलता है तो यह हुक कॉलबैक फ़ंक्शन चलाता है:

आयात {उपयोग प्रभाव} से"प्रतिक्रिया";
समारोहMyComponent() {
 उपयोग प्रभाव (() => {
/ * कॉलबैक फ़ंक्शन यहां जाता है * /
 }, [ / * निर्भरता सरणी वैकल्पिक है * / ]);
}

अल्पाइन.जेएस में दुष्प्रभावों को संभालने के लिए, आप इसका उपयोग कर सकते हैं x प्रभाव निर्देश। उदाहरण के लिए, मान लें कि आप एक चर देखना चाहते हैं और जब भी यह बदलता है तो मान लॉग करें:

<डिवएक्स-डाटा="{नंबर 1}"x प्रभाव="कंसोल.लॉग (संख्या)">
<एच 1x-पाठ="संख्या">एच 1>
<बटन @क्लिक="संख्या = संख्या + 1">नया नंबर जोड़ेंबटन>
डिव>

पहली बात जो आप देख सकते हैं वह यह है कि आपको निर्भरता निर्दिष्ट करने की आवश्यकता नहीं है। अल्पाइन केवल पास किए गए सभी वेरिएबल्स में बदलाव के लिए सुनेंगे x प्रभाव. @क्लिक करें निर्देश संख्या चर को 1 से बढ़ाता है।

Alpine.js में सशर्त प्रतिपादन

तत्वों को सशर्त रूप से प्रस्तुत करना कुछ ऐसा है जो आप रिएक्ट जैसे ढांचे में कर सकते हैं। अल्पाइन.जेएस आपको तत्वों को सशर्त रूप से प्रस्तुत करने की अनुमति भी देता है। यह एक प्रदान करता है एक्स-अगर निर्देश और एक विशेष खाका तत्व जिसे आप सशर्त रूप से तत्वों को प्रस्तुत करने के लिए उपयोग कर सकते हैं।

दूसरा बनाओ index.htm फाइल करें और पहले जैसा ही बॉयलरप्लेट कोड जोड़ें। HTML के मुख्य भाग में निम्न कोड जोड़ें।

<डिवएक्स-डाटा="{दिखाया गया: सच}">
<बटन @क्लिक="दिखाया गया=!दिखाया गया"x-पाठ="दिखाया? 'तत्व छुपाएं': 'तत्व दिखाएं'">टॉगलबटन>
<खाकाएक्स-अगर="दिखाया">
<डिव>तेज भूरी लोमड़ी कुत्ते के ऊपर से कूद गई।डिव>
खाका>
डिव>

एक्स-अगर को निर्देश दिया जाता है खाका तत्व। यह महत्वपूर्ण है क्योंकि यह अल्पाइन.जेएस को उस तत्व का ट्रैक रखने की अनुमति देता है जिसे पृष्ठ से जोड़ा या हटाया जा रहा है। खाका एलिमेंट में एक रूट-लेवल एलिमेंट होना चाहिए; निम्नलिखित कोड उस नियम का उल्लंघन करेगा:

<खाकाएक्स-अगर="दिखाया">
<डिव>यह तत्व ठीक प्रदान किया जाएगा।डिव>
<डिव>इस तत्व को अल्पाइन.जेएस द्वारा अनदेखा किया जाएगाडिव>
खाका>

Alpine.js के साथ टू-डू एप्लिकेशन बनाना

अब तक आपने जो कुछ भी सीखा है उसे संयोजित करने और स्थानीय भंडारण समर्थन के साथ एक सरल टू-डू एप्लिकेशन बनाने का समय आ गया है। सबसे पहले, एक फोल्डर बनाएं और इसे एक के साथ पॉप्युलेट करें index.htm फ़ाइल और ए शैली.सीएसएस फ़ाइल। बॉयलरप्लेट कोड को index.htm फ़ाइल में जोड़ें और इसके लिए एक संदर्भ शामिल करें शैली.सीएसएस फ़ाइल:

<जोड़नासंबंधित="शैली पत्रक"href="शैली.सीएसएस">

यहाँ CSS के बारे में चिंता न करें, बस कॉपी करें शैली.सीएसएस इससे फाइल करें प्रोजेक्ट का GitHub रिपॉजिटरी.

पृष्ठ पुनः लोड होने के बाद डेटा को बनाए रखने के लिए, आपको अल्पाइन.जेएस की आवश्यकता है दृढ़ रहना लगाना। इस प्लगइन के सीडीएन बिल्ड को एक के रूप में जोड़ें लिखी हुई कहानी टैग, कोर अल्पाइन.जेएस सीडीएन बिल्ड के ठीक ऊपर:

<लिखी हुई कहानीआस्थगित करेंस्रोत=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">लिखी हुई कहानी>

में शरीर एक परिभाषित करें डिव एक के साथ तत्व एक्स-डाटा निर्देश। इस निर्देश में एक सरणी होनी चाहिए जिसे कहा जाता है allTasks. फिर, एक जोड़ें एच 1 "टू-डू एप्लिकेशन" पाठ के साथ तत्व।

<डिवएक्स-डाटा="{allTasks:$persist([])}">
<एच 1>करने के लिए आवेदनएच 1>
डिव>

$ जारी प्लगइन के लिए एक आवरण है जावास्क्रिप्ट लोकलस्टोरेज एपीआई। यह ब्राउजर को एरे को लोकल स्टोरेज में स्टोर करने के लिए कहता है, ताकि पेज रीलोड होने के बाद भी डेटा बरकरार रहे। एक जोड़ना प्रपत्र के साथ जमा करना निर्देश जो डिफ़ॉल्ट सबमिट कार्रवाई को भी रोकता है।

<प्रपत्र @सबमिट करें। रोकें="
 ($Refs.task.value.trim().length && !allTasks.map (x=>x.task).शामिल है($refs.task.value.trim()))
? allTasks = [{कार्य: $refs.task.value.trim(), आईडी: दिनांक.अब(), किया: गलत}]। concat (सभी कार्य)
: $refs.task.value.trim() '' 
? चेतावनी ('इनपुट मान खाली नहीं हो सकता')
: चेतावनी ('कार्य पहले ही जोड़ा जा चुका है।');
 $refs.task.value=''
">
प्रपत्र>

$ संदर्भ खंड "कार्य" के साथ DOM तत्व तक पहुंच की अनुमति देता है एक्स-रेफरी निर्देश। कोड कुछ सत्यापन को भी संभालता है और यह सुनिश्चित करता है कि यह सूची में खाली स्ट्रिंग्स या डुप्लिकेट कार्यों को नहीं जोड़ता है। प्रपत्र समाप्त करने से पहले, एक जोड़ें इनपुट एक के साथ तत्व एक्स-रेफरी "कार्य" और प्लेसहोल्डर का। फिर एक बटन जोड़ें और इसके प्रकार को "सबमिट" पर सेट करें।

<इनपुटप्रकार="मूलपाठ"एक्स-रेफरी="काम">
<बटनप्रकार="जमा करना">कार्य जोड़ेंबटन>

अगला, वर्ग "आइटम" के साथ एक div परिभाषित करें। इस div में दो अन्य divs होने चाहिए: एक के साथ एक्स-डाटा एक "अपूर्ण" सरणी पर सेट करें और दूसरा "पूर्ण" सरणी पर सेट करें। दोनों divs में एक होना चाहिए x प्रभाव निर्देश और सरणी में लपेटा जाना चाहिए $ जारी खंड जैसा कि पहले दिखाया गया है।

<डिवकक्षा="सामान">
<डिवएक्स-डाटा="{अधूरा: $ जारी रहता है ([])}"x प्रभाव="अपूर्ण = allTasks.filter (x=>x.donefalse)">
डिव>

<डिवएक्स-डाटा="{पूरा हुआ: $ जारी रहता है ([])}"x प्रभाव="पूर्ण = सभी कार्य। फ़िल्टर (y => y। किया गया)। रिवर्स ()">
डिव>
डिव>

पहले डिव में एक जोड़ें h3 "अपूर्ण" पाठ के साथ टैग करें। फिर प्रत्येक तत्व के लिए अपूर्ण सरणी, रेंडर ए डिव जो "नियंत्रण" और कार्य को ही धारण करता है।

नियंत्रण उपयोगकर्ता को किसी आइटम को हटाने या पूर्ण के रूप में चिह्नित करने की अनुमति देते हैं:

<h3>अपूर्णh3>
<खाकाएक्स के लिए="अपूर्ण में तत्व":चाबी="एलिमेंट.आईडी">
<डिवएक्स-डाटा="{showControls: false}" @माउस के ऊपर="शोकंट्रोल = सच" @माउसआउट="शोकंट्रोल = झूठा"
 वर्ग = "कार्य"
 >
<डिवकक्षा="नियंत्रण">
<डिवएक्स शो="शोकंट्रोल" @क्लिक="तत्व। किया = सच">[एम]डिव>
<डिवएक्स शो="शोकंट्रोल" @क्लिक="allTasks=allTasks.filter (x=>x.id!==element.id)">[आर]डिव>
डिव>
<डिवx-पाठ="एलिमेंट.टास्क" >डिव>
डिव>
खाका>

आप उपयोग कर सकते हैं एक्स के लिए एक सरणी के माध्यम से पुनरावृति करने और तत्वों को प्रस्तुत करने का निर्देश। यह उसके जैसा है वी-के लिए Vue में और ऐरे.मैप () सरणी विधि प्रतिक्रिया में। "नियंत्रण" डिव में स्ट्रिंग "[एम]" और "[आर]" के साथ दो डिव होते हैं। ये तार "मार्क के रूप में किया गया" और "निकालें" के लिए खड़े हैं। आप चाहें तो इन्हें उचित आइकन से बदल सकते हैं।

एक्स शो निर्देश एक तत्व सेट करता है दिखाना सीएसएस संपत्ति को कोई नहीं यदि निर्देश की ओर इशारा करने वाला मूल्य गलत है। "आइटम" div में दूसरा div कुछ उल्लेखनीय अपवादों के साथ पहले वाले के समान है: The h3 पाठ "पूर्ण" पर सेट है, "नियंत्रण" div के पहले बच्चे में "[M]" के बजाय "[U]" पाठ है और इस div में @क्लिक करें निर्देश, तत्व किया इसके लिए सेट है असत्य.

<डिवएक्स शो="शोकंट्रोल" @क्लिक="एलिमेंट.किया = झूठा">[यू]डिव>

और बस इतना ही, आपने अल्पाइन.जेएस की बुनियादी बातों पर ध्यान दिया है और आपने जो कुछ सीखा है उसका इस्तेमाल एक बुनियादी टू-डू एप्लिकेशन बनाने के लिए किया है।

अल्पाइन.जेएस कोड को लिखना आसान बनाना

जब आप अल्पाइन.जेएस कोड लिखना शुरू करते हैं, तो अपने सिर को चारों ओर लपेटना मुश्किल हो सकता है। सौभाग्य से, विज़ुअल स्टूडियो कोड जैसे कोड संपादक एक्सटेंशन की एक विस्तृत श्रृंखला प्रदान करते हैं जो विकास को आसान बनाते हैं।

एक्सटेंशन मार्केटप्लेस में, आप Alpine.js IntelliSense एक्सटेंशन प्राप्त कर सकते हैं जो निर्देशों के साथ काम करना आसान बनाता है। यह आपकी परियोजनाओं में अल्पाइन.जेएस का उपयोग करते समय आपकी उत्पादकता में सुधार करने में मदद कर सकता है।