अपने वेब एप्लिकेशन को शुद्ध जावास्क्रिप्ट से Vue.js में पोर्ट करना

Vue.js एक वेब एप्लिकेशन डेवलपमेंट फ्रेमवर्क है। इसमें एक प्रतिक्रिया प्रणाली है जो डेवलपर को एप्लिकेशन की स्थिति का अनुकरण करने और इसे प्रबंधित करने की अनुमति देता है। परिणामस्वरूप, जब डेटा बदलता है, तो यह स्वचालित रूप से उपयोगकर्ता इंटरफ़ेस पर प्रतिबिंबित करता है, जबकि डेवलपर को DOM तक पहुंचने की आवश्यकता नहीं होती है। यदि आप शुद्ध जावास्क्रिप्ट या jQuery का उपयोग करके एप्लिकेशन बनाते हैं, तो इसका मतलब है कि आपको इंटरफ़ेस में एप्लिकेशन की स्थिति में परिवर्तन को प्रतिबिंबित करने के लिए DOM तत्वों को स्पष्ट रूप से एक्सेस करना होगा और उन्हें अपडेट करना होगा, उदाहरण के लिए, वेब पेज पर कुछ डेटा प्रदर्शित करें।


बड़ी परियोजनाओं के मामले में, मैन्युअल रूप से राज्य और एप्लिकेशन इंटरफ़ेस के सिंक्रनाइज़ेशन का प्रबंधन करना आसान काम नहीं है। सामग्री के लेखक, जिसका अनुवाद आज हम आपके ध्यान में प्रस्तुत करते हैं, अपने शोध के कुछ परिणामों को एक प्रगतिशील वेब अनुप्रयोग के दो संस्करणों की तुलना करने के उद्देश्य से साझा करना चाहते हैं, जो हुडी का उपयोग करते हुए खरीदारी की सूची है । इस एप्लिकेशन का मूल संस्करण शुद्ध जेएस में लिखा गया है ( इस लेख में आप इसके बारे में विवरण पा सकते हैं)। यहां Vue.js के लिए आवेदन का अनुवाद इस ढांचे की बुनियादी विशेषताओं की एक उत्तीर्ण परीक्षा और अंत में क्या हुआ, इसके विश्लेषण के साथ दिखाया जाएगा।


तैयार आवेदन

यदि आप इस सामग्री के माध्यम से काम करना चाहते हैं, तो आप शुद्ध जेएस में एप्लिकेशन के स्रोत कोड को डाउनलोड कर सकते हैं और लेखक का अनुसरण कर सकते हैं, इसे Vue का उपयोग करके संसाधित कर सकते हैं।

उत्पादों को सूची में जोड़ना

▍JavaScript

आवेदन उपयोगकर्ता को अपनी खरीदारी सूची में उत्पादों को जोड़ने की अनुमति देता है। यह सार्वजनिक फ़ोल्डर में index.html फ़ाइल में किया जाता है। मार्कअप इस फ़ाइल की 92-124 लाइनों में निहित है। वहाँ वह है।

 <div> <div class="mdl-grid center-items"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="text" id="new-item-name">     <label class="mdl-textfield__label" for="new-item-name">Item Name</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="number" id="new-item-cost">     <label class="mdl-textfield__label" for="new-item-cost">Item Cost</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="number" id="new-item-quantity">     <label class="mdl-textfield__label" for="new-item-quantity">Quantity</label> </div> </div> <div class="mdl-grid center-items"> <button id="add-item" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">     Add Item </button> </div> </div> 

डेटा को संसाधित करने और सहेजने का कोड public/js/src/index.js फ़ाइल में है। 28 लाइन पर saveItems() फ़ंक्शन डेटा दर्ज करने और उस डेटा को सहेजने के लिए उपयोग किए गए नियंत्रणों से मान एकत्र करने के लिए जिम्मेदार है। यह फ़ंक्शन add-item बटन के click इवेंट के लिए बाध्य है। यहाँ प्रश्न में कोड है।

 function saveNewitem() { let name = document.getElementById("new-item-name").value; let cost = document.getElementById("new-item-cost").value; let quantity = document.getElementById("new-item-quantity").value; let subTotal = cost * quantity; if (name && cost && quantity) {   hoodie.store.withIdPrefix("item").add({     name: name,     cost: cost,     quantity: quantity,     subTotal: subTotal   });   document.getElementById("new-item-name").value = "";   document.getElementById("new-item-cost").value = "";   document.getElementById("new-item-quantity").value = ""; } else {   let snackbarContainer = document.querySelector("#toast");   snackbarContainer.MaterialSnackbar.showSnackbar({     message: "All fields are required"   }); } } document.getElementById("add-item").addEventListener("click", saveNewitem); 

▍Vue

Vue का उपयोग करके इस परियोजना को फिर से शुरू करने से पहले, आपको पृष्ठ से रूपरेखा को जोड़ने की आवश्यकता है। हमारे मामले में, index.html फ़ाइल में, यह निम्नानुसार किया जाता है:

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 

इसके अलावा, पहचानकर्ता app साथ एक <div> तत्व जोड़ा गया था, जिसमें body टैग के अंदर स्थित सभी पृष्ठ तत्व शामिल होंगे। ऐसा इसलिए है क्योंकि जब Vue इंस्टेंस को इनिशियलाइज़ किया जाता है, तो फ्रेमवर्क को इस बात की जानकारी देनी होती है कि उसे किस पेज के किस हिस्से को मैनेज करना चाहिए। इस मामले में, हम रूपरेखा को सूचित करते हैं कि उसे इस ब्लॉक में मौजूद हर चीज से निपटना चाहिए।

अब परियोजना को Vue में बदलना शुरू करते हैं। सबसे पहले, हम कुछ Vue निर्देशों का उपयोग करने के लिए मार्कअप को संशोधित करते हैं। Vue के निर्देश v- साथ उपसर्ग किए गए विशेष गुण हैं। यहाँ अद्यतन मार्कअप कैसा दिखता है।

 <form v-on:submit.prevent="onSubmit"> <div class="mdl-grid center-items">   <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="text" id="new-item-name" v-model="name">     <label class="mdl-textfield__label" for="new-item-name">Item Name</label>   </div>   <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="number" id="new-item-cost" v-model.number="cost">     <label class="mdl-textfield__label" for="new-item-cost">Item Cost</label>   </div>   <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">     <input class="mdl-textfield__input" type="number" id="new-item-quantity" v-model.number="quantity">     <label class="mdl-textfield__label" for="new-item-quantity">Quantity</label>   </div> </div> <div class="mdl-grid center-items">   <button id="add-item" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">     Add Item   </button> </div> </form> 

यहाँ उपयोग किया v-on निर्देश डोम घटनाओं को सुनने के लिए उपयोग किया जाता है। ऊपर दिए गए कोड स्निपेट में, इसे फॉर्म एलीमेंट में submit इवेंट को सुनने के लिए उपयोग किया जाता है। इसके अलावा, यह .prevent संशोधक का उपयोग करता है, जो v-on निर्देश को event.preventDefault() कहा जाता है पर कॉल करने के लिए कहता है। हमने डेटा प्रविष्टि के लिए उपयोग किए जाने वाले तत्वों के लिए v-model निर्देश का उपयोग किया। यह आवश्यक है, जैसा कि तत्वों को बनाने के लिए, दो-तरफ़ा डेटा बाइंडिंग बनाने के लिए। इससे सिस्टम अपने प्रकार के आधार पर किसी आइटम को अपडेट करने के लिए स्वचालित रूप से सही तरीके से चयन कर सकता है। हमने cost और quantity तत्वों के लिए .number संशोधक का उपयोग किया।

यह स्वचालित रूप से इनपुट फ़ील्ड से मूल्य प्रकार को एक नंबर में परिवर्तित करता है। ऐसा इसलिए किया जाता है क्योंकि भले ही type=number सेट किया गया हो, लेकिन मान हमेशा एक स्ट्रिंग के रूप में वापस आ जाएगा। यहां उपयोग किए गए संशोधक अतिरिक्त चेक के निष्पादन को स्वचालित करते हैं जिन्हें पहले स्वतंत्र रूप से निष्पादित किया जाना था।

अगला, एक नई फ़ाइल बनाएं, index-vue.js , जिसमें हम index.js में एक के बराबर कोड रखते हैं, लेकिन Vue की क्षमताओं का उपयोग करते हैं। इस फ़ाइल का कोड नीचे दिखाया गया है। यह फ़ॉर्म घटनाओं को संसाधित करने और डेटा एकत्र करने के लिए आवश्यक गुणों के साथ Vue का एक उदाहरण बनाता है।

 const vm = new Vue({ el: "#app", data: {   name: "",   cost: "",   quantity: "" }, methods: {   onSubmit: function(event) {     if (this.name && this.cost && this.quantity) {       hoodie.store.withIdPrefix("item").add({         name: this.name,         cost: this.cost,         quantity: this.quantity,         subTotal: this.cost * this.quantity       });       this.name = "";       this.cost = "";       this.quantity = "";     } else {       const snackbarContainer = document.querySelector("#toast");       snackbarContainer.MaterialSnackbar.showSnackbar({         message: "All fields are required"       });     }   } } }); 

इस कोड स्निपेट में Vue का एक उदाहरण बनाया गया था, और इसके लिए एक ऑब्जेक्ट पास किया गया था, जिसमें Vue को एप्लिकेशन को कॉन्फ़िगर करने का तरीका बताया गया था। el संपत्ति, DOM तत्व के पहचानकर्ता को ढांचा बताती है, जिसकी सामग्री को इसके "क्षेत्र" पर विचार करते हुए, Vue द्वारा नियंत्रित किया जाएगा। यह इस तत्व के भीतर है कि Vue फ्रेमवर्क-विशिष्ट निर्देशों (और Vue से संबंधित अन्य सब कुछ) पर विचार करेगा, और, फ्रेमवर्क को शुरू करने की प्रक्रिया में, यह एप्लिकेशन के लिए बाइंडिंग और इवेंट हैंडलर को कॉन्फ़िगर करेगा।

data प्रॉपर्टी में एप्लिकेशन की स्थिति होती है। यहाँ उपलब्ध वस्तु में सभी गुण, Vue को आरम्भ करते समय, फ्रेमवर्क की जवाबदेही प्रणाली में जोड़े जाएंगे। यह इस प्रणाली की कार्रवाइयाँ हैं जो DOM से जुड़े मूल्यों को बदलते समय उपयोगकर्ता इंटरफ़ेस को अद्यतन करने की ओर ले जाती हैं। उदाहरण के लिए, name संपत्ति v-model="name" निर्देश का उपयोग करके name नियंत्रण के लिए बाध्य है। यह निर्देश संपत्ति और नियंत्रण के बीच दो-तरफ़ा डेटा बाइंडिंग को इस तरह सेट करता है कि जब इनपुट फ़ील्ड में कुछ जोड़ा जाता है (या इसमें से कुछ निकाला जाता है), तो name संपत्ति अद्यतन की जाती है। नतीजतन, इनपुट फ़ील्ड की सामग्री name संपत्ति की वर्तमान स्थिति को दर्शाती है।

इसी तरह, बंधन अन्य नियंत्रणों के साथ काम करता है।

methods गुण शामिल हैं। उपरोक्त कोड में, onSubmit() फ़ंक्शन onSubmit() , जो submit() फॉर्म ईवेंट से जुड़ा हुआ है।

किसी पृष्ठ पर सहेजा गया डेटा प्रदर्शित करना

▍JavaScript

onSubmit फ़ंक्शन एक हूडि में डेटा बचाता है। उसके बाद, हमें एक तालिका के रूप में, स्टोर में जोड़े गए आइटम को प्रदर्शित करने की आवश्यकता है। नियमित जेएस में लिखे गए आवेदन के मामले में, संबंधित मार्कअप इस तरह दिखता है:

 <div class="mdl-grid center-items"> <table id="item-table" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">   <thead>     <tr>       <th class="mdl-data-table__cell--non-numeric">Item Name</th>       <th class="mdl-data-table__cell--non-numeric">Cost</th>       <th class="mdl-data-table__cell--non-numeric">Quantity</th>       <th class="mdl-data-table__cell">Sub-total</th>       <th class="mdl-data-table__cell--non-numeric">         <button class="mdl-button mdl-js-button mdl-button--icon">           <i class="material-icons">delete</font></i>         </button>       </th>     </tr>   </thead>   <tbody>   </tbody> </table> </div> <div class="mdl-grid center-items"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">   <input class="mdl-textfield__input" type="number" id="total-cost" readonly value="0">   <label class="mdl-textfield__label" for="cost">Total Item Cost</label> </div> </div> <script id="item-row" type="text/template"> <tr id='{{row-id}}'>        <td class="mdl-data-table__cell--non-numeric">{{name}}</td>   <td class="mdl-data-table__cell--non-numeric">{{cost}}</td>   <td class="mdl-data-table__cell--non-numeric">{{quantity}}</td>   <td class="mdl-data-table__cell">{{subTotal}}</td>   <td class="mdl-data-table__cell--non-numeric">         <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"         onclick="pageEvents.deleteItem('{{item-id}}')">         <i class="material-icons">remove</font></i>         </button>   </td> </tr> </script> 

तालिका में गतिशील रूप से जोड़ा गया डेटा शामिल होगा, इसलिए यहां हमें प्लेसहोल्डर्स को वास्तविक डेटा के साथ बदलने और डोम के साथ जो कुछ हुआ उसे संलग्न करने के लिए किसी तरह की आवश्यकता है। हमारे मामले में, यह समस्या माइक्रो-टेम्प्लेट का उपयोग करके हल की गई है।

निम्न कोड उपयोगकर्ता इंटरफ़ेस में तत्वों को जोड़ते हुए दिखाता है।

 function addItemToPage(item) { if (document.getElementById(item._id)) return; let template = document.querySelector("#item-row").innerHTML; template = template.replace("{{name}}", item.name); template = template.replace("{{cost}}", item.cost); template = template.replace("{{quantity}}", item.quantity); template = template.replace("{{subTotal}}", item.subTotal); template = template.replace("{{row-id}}", item._id); template = template.replace("{{item-id}}", item._id); document.getElementById("item-table").tBodies[0].innerHTML += template; let totalCost = Number.parseFloat(   document.getElementById("total-cost").value ); document.getElementById("total-cost").value = totalCost + item.subTotal; } hoodie.store.withIdPrefix("item").on("add", addItemToPage); 

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

▍Vue

Vue पर स्विच करते समय, स्क्रिप्ट द्वारा उपयोग किए गए टेम्पलेट को हटा दिया गया था, और तालिका तत्वों को फिर से काम किया गया था ताकि वे Vue v-for directive का उपयोग करें, जो आपको एक संपत्ति के माध्यम से लूप करने की अनुमति देता है जिसमें तत्वों का डेटा होता है। इसी प्रकार अब मार्कअप दिखता है।

 <div class="mdl-grid center-items"> <table id="item-table" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">   <thead>     <tr>       <th class="mdl-data-table__cell--non-numeric">Item Name</th>       <th class="mdl-data-table__cell--non-numeric">Cost</th>       <th class="mdl-data-table__cell--non-numeric">Quantity</th>       <th class="mdl-data-table__cell">Sub-total</th>       <th class="mdl-data-table__cell--non-numeric">         <button class="mdl-button mdl-js-button mdl-button--icon">           <i class="material-icons">delete</font></i>         </button>       </th>     </tr>   </thead>   <tbody>     <tr v-for="item in items" :key="item._id">       <td class="mdl-data-table__cell--non-numeric">{{ item.name}}</td>       <td class="mdl-data-table__cell--non-numeric">{{ item.cost}}</td>       <td class="mdl-data-table__cell--non-numeric">{{ item.quantity}}</td>       <td class="mdl-data-table__cell">{{ item.subTotal}}</td>       <td class="mdl-data-table__cell--non-numeric">         <button @click="deleteRow(item._id)" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">           <i class="material-icons">remove</font></i>         </button>       </td>     </tr>   </tbody> </table> </div> <div class="mdl-grid center-items"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">   <!-- <input class="mdl-textfield__input" type="number" id="total-cost" readonly value="0">   <label class="mdl-textfield__label" for="cost">Total Item Cost</label> -->   <h4>Total Cost: {{ total }}</h4> </div> </div> 

वास्तव में, मार्कअप में इतने बड़े बदलाव नहीं किए गए हैं। यहां पहले उपयोग किए गए माइक्रो-टेम्प्लेट की सामग्री की नकल की जाती है और Vue टेक्स्ट के निर्देशों और प्रक्षेप तंत्र का उपयोग किया जाता है। v-for निर्देश का उपयोग उन वस्तुओं को सूचीबद्ध करने के लिए किया जाता है, जिनका डेटा items संपत्ति से लिया गया था। Vue {{ item.name }} निर्माण की क्षमताओं का उपयोग करके स्तंभों में डेटा प्रदर्शित किया जाता है। यह तंत्र सूक्ष्म-टेम्पलेट में उपयोग किए जाने वाले प्लेसहोल्डर्स के समान है। पाठ इंटरपोलेशन तकनीक का उपयोग करके पृष्ठ पर कुल राशि भी प्रदर्शित की जाती है।

अब हम index-vue.js में जावास्क्रिप्ट कोड को अंतिम रूप देंगे और निम्नलिखित प्राप्त करेंगे।

 const vm = new Vue({ el: "#app", data: {   name: "",   cost: "",   quantity: "",   items: [] }, computed: {   //     total: function() {     // `this`    vm     return this.items.reduce(       (accumulator, currentValue) => accumulator + currentValue.subTotal,       0     );   } }, methods: {   ..... } }); hoodie.store.withIdPrefix("item").on("add", item => vm.items.push(item)); 

Vue द्वारा तैयार किए गए वर्णित तंत्र का एक प्रकार, नियमित JS का उपयोग करके बनाए गए से बहुत छोटा और सरल निकला। इस कोड में, items डेटा प्रॉपर्टी को जोड़ा गया था, जिसका उपयोग पूर्वोक्त v-for निर्देश में किया जाता है। जब कोई आइटम जोड़ा जाता है, तो हुडी एक फ़ंक्शन को कॉल करता है जो vm.items.push(item) की स्थिति को अपडेट करने के लिए vm.items.push(item) ऑपरेशन करता है, और यह, Vue रिएक्टिविटी सिस्टम के लिए धन्यवाद, स्वचालित रूप से उपयोगकर्ता इंटरफ़ेस अपडेट करता है। कुल राशि की गणना करने के लिए, DOM तत्वों को संदर्भित करने की आवश्यकता नहीं है। यहां हम एक गणना की गई संपत्ति items उपयोग करते हैं जो .reduce() फ़ंक्शन का उपयोग करके items डेटासेट की प्रक्रिया करती है। अब, Vue प्रतिक्रियाशीलता प्रणाली के लिए धन्यवाद, जब ये मान बदलते हैं, तो उपयोगकर्ता इंटरफ़ेस अपडेट किया जाता है। अच्छी बात यह है कि यह सब प्रोग्रामर को कोड में DOM तत्वों के साथ काम करने की चिंता नहीं करने देता है। परिणामस्वरूप, छोटे कोड की मदद से, हमने उसी समस्या को हल किया, जिसे नियमित जेएस के मामले में बहुत अधिक कोड की आवश्यकता थी (शायद, अगर इस स्थिति में साधारण जेएस के बजाय jQuery लाइब्रेरी का उपयोग किया जाएगा, तो बिल्ली भी बड़े आकार के साथ बाहर आ जाएगी; Vue का उपयोग करते समय आपको जो मिला है)।

सूची के रूप में आइटम सहेजना

▍JavaScript

तत्वों को जोड़ने के बाद, आपको उन्हें बाद में उपयोग करने के लिए सहेजने की आवश्यकता है, ताकि बाद में आप सिस्टम में अन्य तत्वों की सूची जोड़ सकें। एप्लिकेशन में एक Save List बटन है, जो डेटा को इकट्ठा करने के लिए जिम्मेदार है, उन्हें हूडी का उपयोग करने वाले तत्वों के एक समूह के रूप में सहेजने के लिए, और उपयोगकर्ता के लिए सिस्टम में तत्वों के एक नए सेट को जोड़ने में सक्षम होना चाहिए।

नियमित जावास्क्रिप्ट का उपयोग करते समय, संबंधित फ़ंक्शन onClick बटन onClick लिए बाध्य है। यहाँ मार्कअप है।

 //index.html <div class="mdl-grid center-items"> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" onclick="pageEvents.saveList()">   Save List </button> </div> 

यहाँ फ़ंक्शन कोड है।

 //index.js function saveList() { let cost = 0; hoodie.store   .withIdPrefix("item")   .findAll()   .then(function(items) {     for (var item of items) {       cost += item.subTotal;     }     //      hoodie.store.withIdPrefix("list").add({       cost: cost,       items: items     });     //      hoodie.store       .withIdPrefix("item")       .remove(items)       .then(function() {         //          document.getElementById("item-table").tBodies[0].innerHTML = "";         //          var snackbarContainer = document.querySelector("#toast");         snackbarContainer.MaterialSnackbar.showSnackbar({           message: "List saved succesfully"         });       })       .catch(function(error) {         //             var snackbarContainer = document.querySelector("#toast");         snackbarContainer.MaterialSnackbar.showSnackbar({           message: error.message         });       });   }); } window.pageEvents = { deleteItem: deleteItem, saveList: saveList .... }; 

▍Vue

Vue में जाने पर बहुत अधिक बदलाव की आवश्यकता नहीं होगी। हमें बटन को क्लिक करने पर ट्रिगर होने वाली घटना के लिए हैंडलर को बांधने की आवश्यकता है, इसके अलावा, हमें इस घटना को जोड़ने की आवश्यकता है, जो इस ईवेंट के हैंडलर को Vue ऑब्जेक्ट की methods प्रॉपर्टीज में है जब इसे इनिशियलाइज़ किया जाता है।

इस तरह अब मार्कअप दिखेगा।

 <div class="mdl-grid center-items"> <button @click="saveList" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">   Save List </button> </div> 

@click="saveList" v-on:click="saveList" लिए एक आशुलिपि है v-on:click="saveList" । इस तंत्र का उपयोग DOM इवेंट्स को सुनने के लिए किया जाता है। वही saveList फ़ंक्शन, जिसका उपयोग शुद्ध जेएस में लिखे गए एप्लिकेशन संस्करण में किया गया था, को वीयू ऑब्जेक्ट के methods संपत्ति में जोड़ा जाता है।

नेविगेशन बार

▍JavaScript

अब जब तत्वों को एक सूची के रूप में सहेजा जा सकता है, तो हम उन सामानों के कुल मूल्य पर डेटा के साथ पहले से सहेजी गई सूचियों को देखने में सक्षम होना चाहेंगे। यह जानकारी दूसरे पृष्ठ पर प्रदर्शित होगी, यह नीचे दिखाए गए अक्षर की तरह दिखाई देगी।


पहले निर्मित उत्पाद सूचियों पर डेटा

इस पृष्ठ का मार्कअप public/history.html फ़ाइल में है, इसी जेएस कोड को public/js/src/history.js फ़ाइल में है। इस पृष्ठ और index.html में कुछ सामान्य है। यह एक नेविगेशन बार है जो खिड़की के शीर्ष पर स्थित है। इस पैनल में विभिन्न पृष्ठों के लिंक, Login और Register लिंक हैं जो सिस्टम में प्रवेश करने और इसमें पंजीकरण करने के लिए संवाद रूपों का आह्वान करते हैं। लॉग आउट करने के लिए एक Signout बटन भी है।
साधारण जेएस का उपयोग करके बनाए गए एप्लिकेशन के संस्करण में, आपको दोनों पृष्ठों पर समान मार्कअप की नकल करनी होगी। यह नेविगेशन बार HTML कोड जैसा दिखता है।

 <header class="mdl-layout__header">   <div class="mdl-layout__header-row">   <!-- Title -->   <span class="mdl-layout-title">Shopping List</span>   <!-- Add spacer, to align navigation to the right -->   <div class="mdl-layout-spacer"></div>   <!-- Navigation. We hide it in small screens. -->   <nav class="mdl-navigation mdl-layout--large-screen-only">       <a class="mdl-navigation__link" href="index.html">Home</a>       <a class="mdl-navigation__link" href="history.html">History</a>       <a onclick="pageEvents.showLogin()" style="cursor: pointer" class="mdl-navigation__link login">Login</a>       <a onclick="pageEvents.showRegister()" style="cursor: pointer" class="mdl-navigation__link register">Register</a>       <a onclick="pageEvents.signout()" style="cursor: pointer" class="mdl-navigation__link logout">Logout</a>   </nav>   </div> </header> <div class="mdl-layout__drawer">   <span class="mdl-layout-title">Shopping List</span>   <nav class="mdl-navigation">   <a class="mdl-navigation__link" href="index.html">Home</a>   <a class="mdl-navigation__link" href="history.html">History</a>   <a onclick="pageEvents.showLogin()" style="cursor: pointer" class="mdl-navigation__link login">Login</a>   <a onclick="pageEvents.showRegister()" style="cursor: pointer" class="mdl-navigation__link register">Register</a>   <a onclick="pageEvents.signout()" style="cursor: pointer" class="mdl-navigation__link logout">Logout</a>   </nav> </div> 

इस कोड का विश्लेषण करने के बाद, आप देखेंगे कि जब आप Login , Register और Logout लिंक पर क्लिक करते हैं, तो उनके संबंधित कार्यों को बुलाया जाएगा। इस मार्कअप में वर्णित तत्वों के लिए ईवेंट हैंडलर index.js फ़ाइल में परिभाषित किए गए हैं।

 import * as shared from "shared.js"; .... shared.updateDOMLoginStatus(); window.pageEvents = { showLogin: shared.showLoginDialog, showRegister: shared.showRegisterDialog, signout: shared.signOut }; 

नेविगेशन बार के साथ काम करने के लिए जिम्मेदार कार्य shared.js । shared.js फ़ाइल में घोषित किए गए हैं।

 //   let loginDialog = document.querySelector("#login-dialog"); dialogPolyfill.registerDialog(loginDialog); let registerDialog = document.querySelector("#register-dialog"); dialogPolyfill.registerDialog(registerDialog); let showLoginDialog = function() { loginDialog.showModal(); }; let showRegisterDialog = function() { registerDialog.showModal(); }; let showAnonymous = function() { document.getElementsByClassName("login")[0].style.display = "inline"; document.getElementsByClassName("login")[1].style.display = "inline"; document.getElementsByClassName("register")[0].style.display = "inline"; document.getElementsByClassName("register")[1].style.display = "inline"; document.getElementsByClassName("logout")[0].style.display = "none"; document.getElementsByClassName("logout")[1].style.display = "none"; }; let showLoggedIn = function() { document.getElementsByClassName("login")[0].style.display = "none"; document.getElementsByClassName("login")[1].style.display = "none"; document.getElementsByClassName("register")[0].style.display = "none"; document.getElementsByClassName("register")[1].style.display = "none"; document.getElementsByClassName("logout")[0].style.display = "inline"; document.getElementsByClassName("logout")[1].style.display = "inline"; }; let updateDOMLoginStatus = () => { hoodie.account.get("session").then(function(session) {   if (!session) {     //          showAnonymous();   } else if (session.invalid) {     //   ,          showAnonymous();   } else {     //         showLoggedIn();   } }); }; let signOut = function() { hoodie.account   .signOut()   .then(function() {     showAnonymous();     let snackbarContainer = document.querySelector("#toast");     snackbarContainer.MaterialSnackbar.showSnackbar({       message: "You logged out"     });     location.href = location.origin;   })   .catch(function() {     let snackbarContainer = document.querySelector("#toast");     snackbarContainer.MaterialSnackbar.showSnackbar({       message: "Could not logout"     });   }); }; export { signOut, showRegisterDialog, showLoginDialog, updateDOMLoginStatus }; 

यह कोड उन फ़ंक्शंस को निर्यात करता है, जिनका उपयोग index.js में किया गया था। showLoginDialog() और showRegisterDialog() फ़ंक्शन लॉगिंग और इसके साथ पंजीकरण करने के लिए क्रमशः मॉडल डायलॉग बॉक्स दिखाते हैं। showAnonymous() फ़ंक्शन उपयोगकर्ता को लॉगऑन करने और कॉल करने की अनुमति देता है showAnonymous() फ़ंक्शन, जो Logout लिंक को छुपाता है और केवल Register और Login लिंक दिखाता है। यदि उपयोगकर्ता प्रमाणित है और उपयुक्त लिंक प्रदर्शित करता है तो updateDOMLoginStatus() फ़ंक्शन जाँचता है। पृष्ठ लोड होने पर इस फ़ंक्शन को कहा जाता है।

दो अलग-अलग पृष्ठों पर एक ही नेविगेशन बार रखने के लिए, हमें मार्कअप को डुप्लिकेट करना पड़ा, डोम तत्वों का उपयोग करना और पैनल पर लिंक को दिखाने और छिपाने के लिए सीएसएस सुविधाओं का उपयोग करना। आइए Vue द्वारा बनाए गए एक वैकल्पिक नेविगेशन बार को देखें।

▍Vue

कई वेब अनुप्रयोगों में एक ही स्निपेट का उपयोग विभिन्न पृष्ठों पर किया जाता है। उदाहरण के लिए, नेविगेशन बार। ऐसी संस्थाओं को कंटेनरों में रखा जाना चाहिए या पुन: उपयोग के लिए उपयुक्त घटकों के रूप में प्रस्तुत किया जाना चाहिए। Vue डेवलपर को एक घटक इंजन प्रदान करता है जिसका उपयोग हम जिस समस्या पर विचार कर रहे हैं, उसे हल करने के लिए किया जा सकता है। स्वर घटक स्व-निहित और पुन: प्रयोज्य हैं।

Vue घटकों का उपयोग करने के लिए परियोजना को स्थानांतरित करना, हम एक नई फ़ाइल, shared-vue.js । Vue, . .

 Vue.component("navigation", { props: ["isLoggedIn", "toggleLoggedIn"], template: `<div>             <header class="mdl-layout__header">       <div class="mdl-layout__header-row">         <!-- Title -->         <span class="mdl-layout-title">Shopping List</span>         <!-- Add spacer, to align navigation to the right -->         <div class="mdl-layout-spacer"></div>         <!-- Navigation. We hide it in small screens. -->         <nav class="mdl-navigation mdl-layout--large-screen-only">           <a class="mdl-navigation__link" href="index.html">Home</a>           <a class="mdl-navigation__link" href="history.html">History</a>           <a v-show="!isLoggedIn" @click="showLogin" style="cursor: pointer" class="mdl-navigation__link login">Login</a>           <a v-show="!isLoggedIn" @click="showRegister" style="cursor: pointer" class="mdl-navigation__link register">Register</a>           <a v-show="isLoggedIn" @click="logout" style="cursor: pointer" class="mdl-navigation__link logout">Logout</a>         </nav>       </div>     </header>     <div class="mdl-layout__drawer">       <span class="mdl-layout-title">Shopping List</span>       <nav class="mdl-navigation">         <a class="mdl-navigation__link" href="index.html">Home</a>         <a class="mdl-navigation__link" href="history.html">History</a>         <a v-show="!isLoggedIn" @click="showLogin" style="cursor: pointer" class="mdl-navigation__link login">Login</a>         <a v-show="!isLoggedIn" @click="showRegister" style="cursor: pointer" class="mdl-navigation__link register">Register</a>         <a v-show="isLoggedIn" @click="logout" style="cursor: pointer" class="mdl-navigation__link logout">Logout</a>       </nav>     </div>           </div>`, methods: {   showLogin: function() {     const loginDialog = document.querySelector("#login-dialog");     dialogPolyfill.registerDialog(loginDialog);     loginDialog.showModal();   },   showRegister: function() {     const registerDialog = document.querySelector("#register-dialog");     dialogPolyfill.registerDialog(registerDialog);     registerDialog.showModal();   },   logout: function() {     hoodie.account       .signOut()       .then(() => {         this.toggleLoggedIn();       })       .catch(error => {         alert("Could not logout");       });   } } }); 

Vue, navigation , , , Vue. — props . props — . , , , props . isLoggedIn , .

, template , , . , , JS, , Vue — v-show @click . v-show . Logout , isLoggedIn true , false — Login Register . , Vue v-if v-else . . @click — v-on:click . showLogin , showRegister logout .

methods . logout , , this.toggleLoggedIn() , props . , props , , isLoggedin , . , Vue DOM.
index.html . , 59-84. .

 <navigation v-bind:is-logged-in="isLoggedIn" v-bind:toggle-logged-in="toggleLoggedIn"></navigation> 

JS- isLoggedIn toggleLoggedIn , , props , , kebab-case. v-bind . isLoggedIn . : v-bind , .

 <navigation :is-logged-in="isLoggedIn" :toggle-logged-in="toggleLoggedIn"></navigation> 

isLoggedIn , toggleLoggedIn — , Vue index-vue.js . .

 const vm = new Vue({ el: "#app", data: {   name: "",   cost: "",   quantity: "",   items: [],   isLoggedIn: false }, computed: {   .....//   }, methods: {   toggleLoggedIn: function() {     this.isLoggedIn = !this.isLoggedIn;   },   ......//   } }); .....//   hoodie.account.get("session").then(function(session) { if (!session) {   //       vm.isLoggedIn = false; } else if (session.invalid) {   vm.isLoggedIn = false; } else {   //       vm.isLoggedIn = true; } }); 

Vue , , , , Vue. , Vue DOM , .

▍JavaScript

Login Register , . , , , . 171-244 index.html 100-158 history.html .

 <dialog id="login-dialog" class="mdl-dialog"> <h4 class="mdl-dialog__title">Login</h4> <div class="mdl-dialog__content">   <div class="mdl-grid center-items">     <!-- Simple Textfield -->     <div class="mdl-textfield mdl-js-textfield">       <input class="mdl-textfield__input" type="text" id="login-username">       <label class="mdl-textfield__label" for="login-username">Username</label>     </div>   </div>   <div class="mdl-grid center-items">     <!-- Simple Textfield -->     <div class="mdl-textfield mdl-js-textfield">       <input class="mdl-textfield__input" type="password" id="login-password">       <label class="mdl-textfield__label" for="login-password">Password</label>     </div>   </div>   <div class="mdl-grid center-items">     <!-- Simple Textfield -->     <div class="mdl-textfield mdl-js-textfield">       <span id="login-error"></span>     </div>   </div> </div> <div class="mdl-dialog__actions">   <button onclick="pageEvents.closeLogin()" type="button" class="mdl-button close">Cancel</button>   <button onclick="pageEvents.login()" type="button" class="mdl-button">Login</button> </div> </dialog> <dialog id="register-dialog" class="mdl-dialog"> <h4 class="mdl-dialog__title">Login</h4> <div class="mdl-dialog__content">   <div class="mdl-grid center-items">     <!-- Simple Textfield -->     <div class="mdl-textfield mdl-js-textfield">       <input class="mdl-textfield__input" type="text" id="register-username">       <label class="mdl-textfield__label" for="register-username">Username</label>     </div>   </div>   <div class="mdl-grid center-items">     <!-- Simple Textfield -->     <div class="mdl-textfield mdl-js-textfield">       <input class="mdl-textfield__input" type="password" id="register-password">       <label class="mdl-textfield__label" for="register-password">Password</label>     </div>   </div>   <div class="mdl-grid center-items">     <!-- Simple Textfield -->     <div class="mdl-textfield mdl-js-textfield">       <span id="register-error"></span>     </div>   </div> </div> <div class="mdl-dialog__actions">   <button onclick="pageEvents.closeRegister()" type="button" class="mdl-button close">Cancel</button>   <button onclick="pageEvents.register()" type="button" class="mdl-button">Register</button> </div> </dialog> 

, , shared.js index.js .

 //shared.js //   let loginDialog = document.querySelector("#login-dialog"); dialogPolyfill.registerDialog(loginDialog); let registerDialog = document.querySelector("#register-dialog"); dialogPolyfill.registerDialog(registerDialog); let closeLoginDialog = function() { loginDialog.close(); }; let closeRegisterDialog = function() { registerDialog.close(); }; let showAnonymous = function() { ... }; let showLoggedIn = function() { .... }; let signOut = function() { .... }; let updateDOMLoginStatus = () => { .... }; let login = function() { let username = document.querySelector("#login-username").value; let password = document.querySelector("#login-password").value; hoodie.account   .signIn({     username: username,     password: password   })   .then(function() {     showLoggedIn();     closeLoginDialog();     let snackbarContainer = document.querySelector("#toast");     snackbarContainer.MaterialSnackbar.showSnackbar({       message: "You logged in"     });   })   .catch(function(error) {     console.log(error);     document.querySelector("#login-error").innerHTML = error.message;   }); }; let register = function() { let username = document.querySelector("#register-username").value; let password = document.querySelector("#register-password").value; let options = { username: username, password: password }; hoodie.account   .signUp(options)   .then(function(account) {     return hoodie.account.signIn(options);   })   .then(account => {     showLoggedIn();     closeRegisterDialog();     return account;   })   .catch(function(error) {     console.log(error);     document.querySelector("#register-error").innerHTML = error.message;   }); }; export { register, login, closeRegisterDialog, closeLoginDialog, ... }; 

index.js.

 //index.js window.pageEvents = { closeLogin: shared.closeLoginDialog, showLogin: shared.showLoginDialog, closeRegister: shared.closeRegisterDialog, showRegister: shared.showRegisterDialog, login: shared.login, register: shared.register, signout: shared.signOut }; 

▍Vue

Vue . , .

 Vue.component("login-dialog", { data: function() {   return {     username: "",     password: ""   }; }, props: ["toggleLoggedIn"], template: `<dialog id="login-dialog" class="mdl-dialog">     <h4 class="mdl-dialog__title">Login</h4>     <div class="mdl-dialog__content">       <div class="mdl-grid center-items">         <!-- Simple Textfield -->         <div class="mdl-textfield mdl-js-textfield">           <input v-model="username" class="mdl-textfield__input" type="text" id="login-username">           <label class="mdl-textfield__label" for="login-username">Username</label>         </div>       </div>       <div class="mdl-grid center-items">         <!-- Simple Textfield -->         <div class="mdl-textfield mdl-js-textfield">           <input v-model="password" class="mdl-textfield__input" type="password" id="login-password">           <label class="mdl-textfield__label" for="login-password">Password</label>         </div>       </div>       <div class="mdl-grid center-items">         <!-- Simple Textfield -->         <div class="mdl-textfield mdl-js-textfield">           <span id="login-error"></span>         </div>       </div>     </div>     <div class="mdl-dialog__actions">       <button @click="closeLogin" type="button" class="mdl-button close">Cancel</button>       <button @click="login" type="button" class="mdl-button">Login</button>     </div>   </dialog>`, methods: {   closeLogin: function() {     const loginDialog = document.querySelector("#login-dialog");     dialogPolyfill.registerDialog(loginDialog);     loginDialog.close();   },   login: function(event) {     hoodie.account       .signIn({         username: this.username,         password: this.password       })       .then(() => {         this.toggleLoggedIn();         this.closeLogin();       })       .catch(error => {         console.log(error);         document.querySelector("#login-error").innerHTML = "Error loggin in";       });   } } }); 

data , props , template methods , Vue.component() .

, , Vue .

 //index.html <login-dialog v-bind:toggle-logged-in="toggleLoggedIn"></login-dialog> 

.

, , Vue. , , . , - Push API .

परिणाम

-, JS, Vue.js. HTML, CSS JavaScript (jQuery), Vue . ES6 , .

Vue , , . , , , Vue. , , Vue .

, JS. — , Vue.

प्रिय पाठकों! - ?