Ext.js - वास्तुकला

Ext JS, MVC / MVVM आर्किटेक्चर का अनुसरण करता है।

MVC - मॉडल व्यू कंट्रोलर आर्किटेक्चर (संस्करण 4)

MVVM - मॉडल व्यू व्यूमॉडल (संस्करण 5)

यह वास्तुकला कार्यक्रम के लिए अनिवार्य नहीं है, हालांकि, अपने कोड को अत्यधिक बनाए रखने और व्यवस्थित करने के लिए इस संरचना का पालन करना सबसे अच्छा अभ्यास है।

एक्सटी जेएस ऐप के साथ प्रोजेक्ट संरचना

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

एक्सट जेएस ऐप फ़ोल्डर आपके प्रोजेक्ट के जावास्क्रिप्ट फ़ोल्डर में रहेगा।

अनुप्रयोग में नियंत्रक, दृश्य, मॉडल, स्टोर और उपयोगिता फ़ाइलें होंगी।

app.js- मुख्य फ़ाइल जहां से प्रोग्राम का प्रवाह शुरू होगा, जिसे मुख्य HTML फ़ाइल में शामिल किया जाना चाहिए <script> टैग। ऐप बाकी की कार्यक्षमता के लिए एप्लिकेशन के नियंत्रक को कॉल करता है।

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

View.js- इसमें एप्लिकेशन का इंटरफ़ेस हिस्सा है, जो उपयोगकर्ता को दिखाता है। एक्सट जेएस विभिन्न यूआई समृद्ध विचारों का उपयोग करता है, जिन्हें आवश्यकता के अनुसार यहां बढ़ाया और अनुकूलित किया जा सकता है।

Store.js- इसमें स्थानीय रूप से कैश किया गया डेटा होता है जिसे मॉडल ऑब्जेक्ट्स की मदद से व्यू पर दिया जाना होता है। स्टोर डेटा का उपयोग करता है, जो बैकएंड डेटा लाने के लिए सेवाओं के लिए परिभाषित पथ है।

Model.js- इसमें वे ऑब्जेक्ट्स होते हैं जो देखने के लिए स्टोर डेटा को बांधते हैं। यह दृश्य dataIndex के लिए बैकेंड डेटा ऑब्जेक्ट की मैपिंग है। डेटा को स्टोर की मदद से प्राप्त किया जाता है।

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

MVVM आर्किटेक्चर में, नियंत्रक को ViewModel द्वारा बदल दिया जाता है।

ViewModel- यह मूल रूप से दृश्य और मॉडल के बीच के परिवर्तनों की मध्यस्थता करता है। यह मॉडल से दृश्य में डेटा को बांधता है। इसी समय, दृश्य के साथ इसका कोई सीधा संपर्क नहीं है। इसमें केवल मॉडल का ज्ञान है।

यह काम किस प्रकार करता है

उदाहरण के लिए, यदि हम UI में दो-तीन स्थानों पर एक मॉडल ऑब्जेक्ट का उपयोग कर रहे हैं। यदि हम UI के एक स्थान पर मान बदलते हैं, तो हम उस परिवर्तन को सहेजे बिना भी देख सकते हैं। मॉडल का मूल्य बदल जाता है और इसलिए यूआई में सभी स्थानों पर परिलक्षित होता है, जहां भी मॉडल का उपयोग किया जाता है।

यह डेवलपर के प्रयास को बहुत कम और आसान बनाता है क्योंकि बाध्यकारी डेटा के लिए कोई अतिरिक्त कोडिंग की आवश्यकता नहीं है।