ओओ JQuery और कक्षाएं

Question

मैं एक साइट पर काम कर रहा हूं और अनिवार्य रूप से पहली बार JQuery का उपयोग कर रहा हूं। मैंने ज्यादातर पिछली परियोजनाओं के लिए म्यूटूल का उपयोग किया है, और मेरे पास MooTools Class संरचना का उपयोग करके मैंने कुछ विजेट क्लास लिखे हैं। मैं उन्हें JQuery पर पोर्ट करना चाहता हूं, लेकिन ऐसा लगता है कि जब ऑब्जेक्ट क्लासेस की बात आती है तो MooTools कार्यक्षमता के समान कुछ भी नहीं होता है।

मैंने थोड़ी सी खोज की है, और इसमें बहुत कुछ नहीं मिला है। डिग में rolled their own प्रतीत होता है, लेकिन मुझे यकीन नहीं है कि यह ऐसा है जो मुझे उपयोग करना चाहिए। क्या कोई बेहतर तरीका है? ऑब्जेक्ट उन्मुख लोगों को आम तौर पर JQuery के साथ कैसे मिलता है? यूआई विजेट (या किसी भी कार्यात्मक वर्ग संरचना) encapsulating की सामान्य विधि क्या है?

मैं एक संभव MooTools विजेट वर्ग के एक नकली उदाहरण पोस्ट करेंगे:

var ZombatWidget = new Class({ 
    Extends: BaseWidget, 
    widgetPropertyX = 'prop1', 
    widgetPropertyY = 'prop2', 
    attach = function(el) { 
     var f = function() { 
      //do something widgety 
     }; 
     el.addEvent('dblclick',f); 
     el.addClass('widgetized'); 
    } 
}); 

var z = new ZombatWidget(); 
z.attach($('widgetDiv')); 

क्या मुझे मिल गया है कि की तुलना में बहुत बड़ा है, लेकिन आप विचार मिलता है। क्या मुझे इसे कक्षा/विरासत संरचना के prototype विधि में बदलने की आवश्यकता है? JQuery का उपयोग करके आप इस प्रकार की ऑब्जेक्ट क्लास कैसे लिखेंगे?

Answer 1

आपको इस दृष्टिकोण को हिस्सेदारी पर काम करने के लिए उपयोगी हो सकता है : building an object-oriented jquery plugin.

और यह आलेख अजाक्सियन "a real OO class system with jquery" पर है।

Answer 2

सवाल यह है कि ... आप म्यूटूल से क्यों दूर जा रहे हैं यह आपकी आवश्यकताओं के अनुरूप है? मुझे लगता है कि MooTools ठीक काम कर रहा था, और ऐसा कुछ भी नहीं है जो jQuery करता है कि MooTools नहीं कर सकता है। (विपरीत सच नहीं है)।

दुर्भाग्यवश, jQuery क्लासिकल ओओपी का समर्थन करने के लिए नहीं बनाया गया है क्योंकि म्यूटूल है इसलिए आपको अपनी कक्षाओं को jQuery प्लगइन के रूप में लिखना होगा।

Answer 3

प्लगइन्स कभी-कभी चाल करते हैं।

बेशक, आप कक्षा/विरासत मॉडल प्राप्त करने के लिए बस पर्याप्त mootools का उपयोग कर सकते हैं। 1.2.3 में document.id "संगतता मोड" के कार्यान्वयन के साथ आप अपना केक ले सकते हैं और इसे भी खा सकते हैं (मुझे लगता है - मैंने इसे स्वयं नहीं किया है।)

Answer 4

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

तो आपको jQuery में अतिरिक्त ओओ क्षमताओं की आवश्यकता क्यों नहीं होगी जबतक कि आप अन्य jQuery प्लगइन से प्राप्त करने में सक्षम नहीं होना चाहते हैं?

क्योंकि आपको लगता है कि आप निम्नलिखित करने की अनुमति देता एक प्लगइन हो सकता है:

$(".spiffyness").yourSpiffyficationPlugin1(); 

और, जबकि पहले से ही कुछ बहुत अच्छा awesomeness कर रही है, तो आप इस के शीर्ष पर अधिक spiffyness की जरूरत है। लेकिन आप ऐसा करके भी वहाँ पाने के नहीं होता

$(".spiffyness").yourSpiffyficationPlugin2(); //plugin inherited from 1 

...:

इसलिए आप जो परिणाम में अपना पहला प्लगइन से प्राप्त करना चाहते

$(".spiffyness").yourSpiffyficationPlugin1().yourSpiffyficationPlugin2(); 

कहाँ दूसरी प्लगइन बस यह छोटा (लेकिन भयानक;)) चीज पहले के शीर्ष पर अतिरिक्त है?

दूसरे शब्दों में: क्या आप चाहते हैं, ओओ शुद्धवाद के लिए प्रयास के लायक है? या jQuery पाइप तंत्र पर्याप्त है और शायद आपको जो भी चाहिए?

मैं कहूंगा कि जिम्मेदारियों को अलग करना और/या आपके मूतूल मानसिकता यहां असली समस्या हो सकती है। JQuery को यह करने दें कि यह क्या अच्छा है, इसका शक्तिशाली पाइप तंत्र का उपयोग करें, अपने स्वयं के प्लगइन्स पाइप करें (जिसमें फैंसी ओओ सामान शामिल हो सकते हैं) ... और आपका कोड अभी भी साफ होने पर आपके पास बहुत अच्छे परिणाम हो सकते हैं।

यदि आपको लगता है कि मैं यहां बहुत सरल सोच रहा हूं, तो आपके बिंदु के सार का एक अच्छा उदाहरण स्वागत होगा! :-)

और इससे आगे होने के लिए, यदि आप कुछ वास्तव में उन्नत कर रहे हैं और आप किसी और चीज के ऊपर कुछ करने के साथ दूर नहीं जाते हैं, तो आप प्लगइन भी अपने ओओ कक्षाओं में से एक को भेज सकते हैं । जैसे जैसे:

$.fn.totalAwesomeness = function(options) { 
    var defaults = { 
    mode: 1, 
    title: 'Awesome' 
    }; 
    var opts = $.extend(defaults, options); 
    return this.each(function() { 
    var $this = $(this); 
    var handler = null; 
    if(defaults.mode == 1) 
     handler = new com.myStuff.class1($this); 
    else if(defaults.mode == 2) 
    handler = new com.myStuff.class2($this); //class2 inherits from class1 
    handler.doMagic(); 
    }); 
}; 

Answer 5

आप हमेशा moo4q - http://moo4q.com/ का उपयोग भी कर सकते हैं। यह jQuery के लिए MooTools वर्ग समर्थन जोड़ता है।

Answer 6

मैं कुछ समय पहले एक लेख लिखा था jQuery वस्तु उन्मुख प्लगइन्स के बारे में, आशा है कि यह उपयोगी

http://ajax911.com/jquery-object-oriented-plugins/

Answer 7

तृतीय पक्ष जावास्क्रिप्ट वर्ग कार्यान्वयन कि बहुत शक्तिशाली आत्मनिरीक्षण capabilites प्रदान करते हैं हो जाएगा। मैं विशेष रूप से JS.Class और Joose को हाइलाइट करना चाहता हूं। जबकि जेएस क्लास को रूबी के बाद मॉडलिंग किया गया है, जोस को मूस के बाद मॉडलिंग किया गया है। मैं mootools उपयोगकर्ता नहीं हूं इसलिए मैं mootools के संबंध में उनके फायदे/नुकसान पर टिप्पणी नहीं कर सकता। लेकिन मैं उनकी मुख्य विशेषताओं का सारांश दूंगा।

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

जोस, कोई परीक्षण ढांचा/पैकेज प्रबंधन सुविधा प्रदान करता है, उन्नत विशेषता प्रबंधन सुविधाओं, फ़िल्टर और बेहतर आत्मनिरीक्षण सुविधाओं के संदर्भ में उत्कृष्टता प्रदान करता है।

उनमें से दोनों वास्तव में अच्छे दस्तावेज हैं और ब्राउज़र और सर्वर में भी इसका उपयोग किया जा सकता है।

Answer 8

मैंने अभी अपनी मिनी प्रोजेक्ट की पहली रिलीज पूरी की है: https://github.com/op1ekun/plOOgins। यह Jquery प्लगइन के रूप में उपयोग करने के लिए ओओपी कोड लिखने के बारे में है। यह रॉकेट विज्ञान नहीं है बस कुछ ऐसा कुछ है जिसे हम अपने कार्यस्थल पर उपयोग करना चाहते थे। शायद यह आपको थोड़ा सा मदद करेगा। सौभाग्य!