NikaFramework (NKF) का परिचय। भाग 1

NikaFramework क्या है

NikaFramework वेब UI डेवलपर्स के लिए एक वास्तुशिल्प जावास्क्रिप्ट ढांचा है।
समझने वाली पहली बात यह है कि यह यूआई फ्रेमवर्क नहीं है, उदाहरण के लिए। ExtJS या SmartClient।
यह एक फ्रेमवर्क है जो आपके कोड को व्यवस्थित करने के लिए डिज़ाइन किया गया है, जिससे डेवलपर के विवेक पर स्वतंत्र रूप से टाइपसेट पृष्ठों की क्षमता छोड़ते हुए, जटिल डायनेमिक पेज लिखना एक आसान काम है।



फ्रेमवर्क किन कार्यों को हल करता है?

1. कोड का संगठन
बड़े वेब अनुप्रयोगों को लिखने की समस्याओं में से एक यह है कि अक्सर कोड का आयोजन नहीं किया जाता है, और फ़ाइल के विभिन्न भाग फाइलों में होते हैं जो अर्थ में नाम के अनुरूप नहीं होते हैं। इसके अलावा, समस्या यह है कि आप 100% यह नहीं कह सकते कि यह या फ़ंक्शन का हिस्सा कहाँ स्थित होगा।

इस समस्या को हल करने के लिए, NKF पृष्ठ को इसके घटकों में विभाजित करता है:
लेआउट (लेआउट), पृष्ठ (पृष्ठ), विजेट (विजेट), घटक (घटक)।

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



लेकिन अगर उपयोगकर्ता लॉग-इन स्थिति में है, तो हम शीर्ष मेनू दिखाते हैं जहां आप पहले से ही पृष्ठों के माध्यम से नेविगेट कर सकते हैं।



लेआउट जरूरी नहीं कि एक जमीनी / असम्बद्ध अवस्था हो। इसे संदर्भ के लिए एक लेआउट के रूप में भी इस्तेमाल किया जा सकता है, एक विकी जहां मार्कअप शुरू में अलग होता है।

लेआउट के शीर्ष पर एक घटक है - पृष्ठ (पेज)। ये साधारण पृष्ठ हैं जैसे मानक साइटों पर, उदा। होम, हमारे बारे में, उत्पाद, आदि।
पृष्ठ स्वयं लेआउट (लेआउट) के समान है, एक अंतर के साथ कि पृष्ठ बदलते समय, इसकी सामग्री बदल जाती है, जबकि लेआउट (लेआउट) केवल वैश्विक दृश्य (लॉग-इन / अनलॉग्ड / हेल्प / विकी, आदि) बदलते समय बदलता है। )।

लेआउट और पेज दोनों विगेट्स से बने हैं। बेशक, कोई भी आपको लेआउट (लेआउट) और पृष्ठ (पृष्ठ) में सीधे HTML लिखने के लिए मना नहीं करता है।
लेकिन फ़ाइल को विजेट्स में रखना अधिक तर्कसंगत है। विजेट फ़ाइल के UI का उपयोगकर्ता हिस्सा है। उदाहरण के लिए। यदि आप gmail पृष्ठ को देखते हैं, तो विगेट्स को मोटे तौर पर विभाजित किया जा सकता है:
- शीर्ष (शीर्ष)
- क्रियाएँ (बाएं)
- GTalk (बाएं)
- मेललिस्ट (केंद्र)

ऐसा विभाजन उस में सुविधाजनक है, फिर यह विजेट ढूंढना और फिर से लिखना आसान है, क्योंकि यह एक निश्चित, पहले से ज्ञात स्थान पर है।



अब देखते हैं कि यह एनकेएफ फाइलों को कैसे स्टोर करता है।
xhtml - डोम में
सीएसएस, एससीएस - शैली में
json - डेटा में
js - तर्क में
चित्र - img में
+ आप अपने खुद के विकल्प बना सकते हैं

इस प्रकार, आपके पास हमेशा कोड का एक स्पष्ट संगठन होता है।



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

मेरे लिए व्यक्तिगत रूप से, एक सच्चे वेब UI डेवलपर के रूप में, यह बहुत महत्वपूर्ण है।

यहां, कोड लिखने का दृष्टिकोण क्लासिक बना हुआ है।
पहले हम मेकअप (एचटीएमएल) करते हैं, फिर हम स्टाइल (सीएसएस) और तर्क (जावास्क्रिप्ट) देते हैं।

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

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

3. मांग पर संसाधनों तक पहुंच
यह सुविधा एनकेएफ की महत्वपूर्ण विशेषताओं में से एक है।
कल्पना करें कि हमें एक सरल मेनू विजेट लिखने की आवश्यकता है जिसमें सिर्फ 3 आइटम हैं।

और इसलिए, dom / index.xhtml में हम मुख्य मार्कअप लिखते हैं।
डेटा / menu.json में हम मेनू के लिए डेटा का पूर्वनिर्धारित सेट संग्रहीत करेंगे।
Dom / item.html में हम एक मेनू आइटम के लिए मार्कअप का वर्णन करेंगे

dom / index.xhtml:

<div class="menu-list"> <ul></ul> </div> 

dom / item.xhtml:

 <li> <a /> </li> 

डेटा / मेनू। संदेश:

 [ { "id": 1, "name": "Home", "url": "/home" }, { "id": 2, "name": "Products", "url": "/products" }, { "id": 3, "name": "Contacts", "url": "/contacts" } ] 

तर्क / मेनू .js

 /* .... */ //   index.xhtml,     .  var domComponent = this._getComponent(); //   data/menu.json,    var menuData = this._getComponent({ componentPart: "data", // data  JSON componentPartName: "menu" }); //   dom/item.xhtml var itemEl = this._getComponent({ componentPartName: "item" //    xhtml  }); var root = domComponent.find("ul"); $.each(menuData, function(key, value) { var el = itemEl.clone(); el.find("a").attr({ href: value.url, "data-id": value.id }).text(value.name); root.append(el); }); /* .... */ 

यहाँ तैयार मेनू है। ध्यान दें कि जावास्क्रिप्ट में हम HTML कोड के टुकड़े नहीं लिखते हैं, लेकिन केवल
DOM पर काम करते हैं। मैं इस तथ्य पर भी ध्यान आकर्षित करता हूं कि index.xhtml, item.xhtml, menu.json AJAX का उपयोग करके नहीं खींचा जाता है, लेकिन पहले से ही क्लाइंट साइड पर हैं, पैकेजिंग के लिए धन्यवाद वेब रिसोर्स बंडल रिसोर्सेज और प्रोजेक्ट के बिल्ड सिस्टम के लिए विधि, और आप उन्हें उपयोग करके एक्सेस कर सकते हैं। विरासत में मिली विधियाँ।
मैं यह भी नोट करना चाहूंगा कि प्रोजेक्ट कॉन्फ़िगरेशन फ़ाइल में केवल वही फ़ाइल लिखनी होगी जो Menu.js.
अन्य सभी संसाधन स्वचालित रूप से बिल्ड सिस्टम द्वारा शामिल किए जाएंगे।

जारी है ...