JQuery विजेट के साथ वेब अनुप्रयोग विकास का संगठन

समस्या

इस लेख में मैं jQuery का उपयोग करके वेब एप्लिकेशन विकसित करने में अपना अनुभव साझा करना चाहता था।
वेब एप्लिकेशन के लिए व्यावसायिक तर्क लिखने की प्रक्रिया के दौरान, परियोजना के आगे के विकास और रीफैक्टरिंग के लिए कोड का सही निर्माण करना आवश्यक हो गया। चूंकि यह "वेब उद्योग" में पहला अनुभव था, इसलिए इसे आगे बढ़ने का निर्णय लिया गया। कुछ समय बाद, यह स्पष्ट हो गया कि विकसित होने की तुलना में आवश्यक टुकड़े की खोज में बहुत अधिक समय लगता है। इसके बाद, मैं सही संगठन और jQuery कोड की संरचना के बारे में अपनी दृष्टि प्रदान करना चाहूंगा।

निर्णय

मौजूदा फैशन रुझानों का अध्ययन करने के बाद, यह स्पष्ट हो गया कि पैटर्न का सबसे अच्छा उपयोग। उनका संगठन अन्य प्रोग्रामिंग भाषाओं में पाया गया है और इस तरह दिखता है:
- "कंस्ट्रक्टर" (एक विधि जो आपको आवश्यक वस्तु बनाने या वापस करने की अनुमति देती है)
- बेस क्लास (आधार विधियों वाली संरचना)
- विरासत में मिला वर्ग (मूल लोगों के अलावा अतिरिक्त तरीकों से युक्त संरचना)।
इस प्रकार, आप jQuery को OOP के रूप में वर्गीकृत कर सकते हैं, क्योंकि कम से कम बहुरूपता मौजूद है।
ऊपर वर्णित संरचनाओं पर अधिक विस्तार से विचार करें। सबसे पहले, "निर्माता" पर विचार करें। यह एक फ़ंक्शन है जो आपको इसके साथ आगे के काम के लिए किसी ऑब्जेक्ट का एक उदाहरण बनाने या प्राप्त करने की अनुमति देता है। निम्न कोड इसकी संरचना को दर्शाता है:

$ .wget = फ़ंक्शन (नाम, ऑब्जेक्ट) {
$ .fn [नाम] = फ़ंक्शन (विकल्प) {
यह वापस लौटें।
var उदाहरण = $ .data (यह, नाम); // एक वस्तु प्राप्त करें यदि यह अन्यथा एक खाली वस्तु बनाई गई थी

अगर (उदाहरण) {
उदाहरण = $ .डाटा (यह, नाम, Object.create (ऑब्जेक्ट)); // एक ऑब्जेक्ट बनाएँ
उदाहरण। (विकल्प, यह);} // आरंभीकरण
});
};
};

जैसा कि आप कोड से देख सकते हैं, तंत्र सरल है। यह कार्य कुंजी (नाम) द्वारा एक्सेस किए गए ऑब्जेक्ट्स के तथाकथित कैशिंग को उबालता है। साथ ही, जब कोई ऑब्जेक्ट बनाया जाता है, तो इसे इनिशियलाइज़ किया जाता है, लेकिन यह क्रिया आवश्यक नहीं है, क्योंकि विलंबित इनिशियलाइज़ेशन संभव है।
अब विचार करें कि कक्षाओं को कैसा दिखना चाहिए। आइए आधार वर्ग से शुरू करें:

var BaseCl = {
init: फ़ंक्शन (विकल्प, तत्व) {
this.options = $ .extend ({}, this.options, विकल्प), // "glues" विकल्प विकल्प
this.element = $ (element); // बेस ऑब्जेक्ट के संदर्भ को सहेजें
}

विकल्प: {
नाम: ''
}

func1: फ़ंक्शन (वैल) {
...
}
func2: फ़ंक्शन (वैल) {
...
}
};

कक्षा में आवश्यक मापदंडों को शुरू करने के साथ-साथ अतिरिक्त विधियों और संरचनाओं का एक सेट के लिए एक init विधि शामिल है।
और अंतिम वर्ग, जो आधार का विस्तार है, विरासत में मिला है:

var ChildCl = BaseCl.extend ({
init: फ़ंक्शन (विकल्प, तत्व) {
this.options = $ .extend ({}, this.options, विकल्प), // "glues" विकल्प विकल्प
this.element = $ (element); // बेस ऑब्जेक्ट के संदर्भ को सहेजें
}

विकल्प: {
नाम: ''
}

func3: फ़ंक्शन () {
...
}
func4: फ़ंक्शन () {
...
}
});

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

अंत में, मैं आपको ऐसी विधियाँ दूंगा जो आपको निर्मित वस्तुओं तक पहुँचने की अनुमति दें:

$ .getget ('बच्चा', ChildCl);

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({

// ऐसे ही कॉल करें
$ ('# div')। बच्चा ({नाम: 'हैलो वर्ल्ड'});
var chld = $ ('# div')। डेटा ('बच्चा');
chld.func1 ('');
chld.func3 ();

// या तो
$ ('# div')। बच्चा ({नाम: 'नरक'});
$ ('# div')। बच्चा ('func1', '');

});

निष्कर्ष

इस संरचना ने एप्लिकेशन ऑब्जेक्ट्स के इंटरैक्शन को पूरी तरह से व्यवस्थित करने और कोड को खोजने और रिफैक्ट करने में लगने वाले समय को कम करने में मदद की।