माइक्रोस्पा, या एक वर्ग पहिया का आविष्कार कैसे करें

सभी को नमस्कार, मेरा नाम एंड्री याकोवेन्को है और मैं डिजिटल डिज़ाइन का एक वेब डेवलपर हूं।

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

गीतात्मक विषयांतर

हालांकि साइटफ़िनिटी में बोर्ड पर Angular.js है, लेकिन बंद स्रोत कोड के कारण अन्य रूपरेखाओं को एकीकृत करने की क्षमता अनुपस्थित है। हालांकि, यह हमें अन्य ढांचे की क्षमताओं का उपयोग करने से नहीं रोकता है।

इस लेख में उदाहरण एक रामबाण नहीं हैं और मुख्य रूप से सूचना के उद्देश्यों के लिए हैं।

एक नई खोज करें

चूंकि कोणीय, पहला संस्करण, पहले से ही साइटफिनिटी में मौजूद है, हम अपने सीएमएस को रिएक्ट या वेव्स के साथ बनाना चाहते थे।

ये दोनों रूपरेखा अपने तरीके से अच्छी हैं और अनुप्रयोग विकास के लिए अपने स्वयं के दृष्टिकोण हैं, हालांकि हम अगली तुलना नहीं करेंगे।

संभावित समाधानों पर त्वरित नज़र डालने के बाद, एक दिलचस्प परियोजना मिली जो कि संकलित पृष्ठों को React में static html में लिखा गया था। यह समाधान हमें शोभा नहीं देता, क्योंकि हमें ग्राहक पक्ष पर निष्पादन योग्य कोड के उपयोग के साथ SSR (सर्वर साइड रेंडर) के सभी विलंब को नहीं खोना चाहिए।

शब्दों से कर्मों तक

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

पहला तरीका (सरल)

यह विधि Vue.js को मुख्य पृष्ठ टेम्पलेट में लाइब्रेरी के रूप में जोड़ने में शामिल है।

उसके बाद, हम कहीं भी किसी भी विजेट में अपने आवेदन को इनिशियलाइज़ कर सकते हैं।

एक साधारण विजेट का एक उदाहरण:

new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, }) 

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

इस समस्या का समाधान अपने स्वयं के टेम्पलेट को लिखना है, जो विजेट की नकल करेगा। हम अपने घटक का विस्तार करेंगे।

एक उदाहरण:

 new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', }) 

अब हमारे विजेट के सभी HTML कोड को टेम्प्लेट फ़ील्ड में वर्णित टेम्पलेट से बदल दिया जाएगा, और विजेट मॉडल से Vue में डेटा स्थानांतरित करने के लिए, बस मॉडल को JSON में किसी भी सुविधाजनक तरीके से परिवर्तित करें और इसे डेटा फ़ील्ड में स्थानांतरित करें।

दूसरा तरीका (मुश्किल)

इस विधि के लिए, हमें एक वेबपैक चाहिए, जिसमें न्यूनतम विन्यास में vue-loader होगा। इसके अलावा, हमें html-extract-plugin का उपयोग करने की आवश्यकता नहीं है, जैसा कि हम js कोड में टेम्पलेट स्टोर कर सकते हैं।

अब हम Vue के सिंगल-फाइल घटकों का उपयोग कर सकते हैं।

एकल-फ़ाइल घटक का एक उदाहरण ( Sample.vue ):

 <template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script> 

एकल-फ़ाइल घटकों में पारंपरिक घटकों के सापेक्ष अधिक स्टाइलिंग विकल्प होते हैं, और परियोजना निर्देशिका में फ़ाइलों की संख्या को भी कम करते हैं।

विजेट घटक लिखने के बाद, हमें इसे आरंभ करने की आवश्यकता है।

उदाहरण विजेट आरंभीकरण:

 import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id') 

लेकिन इस मामले में, कोड को स्वयं द्वारा निष्पादित किया जाएगा, यदि आवेदन के आरंभीकरण को नियंत्रित करना आवश्यक है, उदाहरण के लिए, चयनकर्ता को निर्दिष्ट करने के लिए, एक तर्कसंगत समाधान एप्लिकेशन को एक विधि में लपेटने के लिए है जिसे पृष्ठ पर किसी भी समय बुलाया जा सकता है।

आइए हमारे उदाहरण का विस्तार करें:

 import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id') 

यह विजेट मॉडल डेटा को Vue.js घटक में स्थानांतरित करने के लिए बना हुआ है। वीयूई इंस्टेंस के डेटा ऑब्जेक्ट को पास करने से पहले उन्हें JSON में लिखकर यह करना आसान है, जिसके बाद उन्हें प्रॉम्प्ट के रूप में घटक को पास किया जा सकता है।

एक उदाहरण:

 import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ data: function () { return { some: 'some value', } }, render: function (h) { return h(Sample, { props: data }) } }).$mount(selector) } initWidget('#widget-id') 

छोटी समीक्षा

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

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

दूसरी ओर, यदि वांछित है, तो इस दृष्टिकोण का उपयोग करके, आप किसी भी फ्रेमवर्क, लाइब्रेरी को कनेक्ट कर सकते हैं या वेनिला जावास्क्रिप्ट या jQuery में अपना स्वयं का डोम मैनेजर लिख सकते हैं।

वह सब है। आपका ध्यान के लिए धन्यवाद।