ऑब्जेक्ट उन्मुख तरीके से jQuery का उपयोग कर

Question

jQuery का उपयोग करके निम्नलिखित प्राप्त करना संभव है: मैं दो अलग-अलग ऑब्जेक्ट्स बनाना चाहता हूं जिनमें एक ही नाम के साथ अलग-अलग फ़ंक्शन हैं।

var item = new foo(); 
item.doSomething(); 
var item2 = new bar(); 
item2.doSomething(); 

इसके अलावा, मैं के रूप में "नियमित" jQuery वस्तुओं बनाए गए आइटम का उपयोग करने में सक्षम होना चाहते हैं - उदाहरण के लिए, & आइटम ड्रॉप और सही DoSomething निष्पादित खींचें करने के लिए() फ़ंक्शन जब खींचकर बंद कर दिया है।

Answer 1

हम समस्या का समाधान लेकर आए हैं ड्रॉप करने के लिए। यह 3 अलग चरण होते हैं: पहले प्रारंभिक jQuery आइटम बनाया जाना चाहिए:

 
var item = $.create("div"); 

तो javascript ऑब्जेक्ट आप बना सकते हैं और jQuery आइटम पर यह कार्य करता है और सभी गुणों की प्रतिलिपि बनाना चाहते हैं का एक उदाहरण बनाने :

 
$.extend(item, new foo.bar()); 

अंत में, ऑब्जेक्ट को प्रारंभ करें। ध्यान दें कि "इस" ऑब्जेक्ट अलग होने के बाद पिछले चरण में कन्स्ट्रक्टर का उपयोग नहीं किया जा सकता है।

 
item.initialize(); 

इस के बाद, वस्तु $ (आइटम) एक नियमित jQuery वस्तु की तरह इस्तेमाल किया जा सकता है, साथ ही यह कार्य करता है और एक नियमित रूप से जावास्क्रिप्ट वस्तु की तरह स्थानीय चर है।

 
item.doSomething(); 
var offset = $(item).offset(); 

तो आप डोम ऑब्जेक्ट्स बना सकते हैं जिनके पास "क्लास" है जिसे jQuery द्वारा उपयोग किया जा सकता है। बीटीडब्ल्यू, हमने नामस्थान बनाने के लिए डीयूआई का उपयोग किया।

उम्मीद है कि कोई समाधान सहायक पाएगा। यह हमारे कोड को बहुत अच्छा बना दिया।

Answer 2

ऑब्जेक्ट ओरिएंटेशन भाग के बारे में निश्चित नहीं है, लेकिन jQuery ने आपके द्वारा वर्णित ड्रैग-एंड-ड्रॉप क्षमता के लिए समर्थन में बेक किया है।

JQuery का उपयोग खींचें जोड़ें और समर्थन http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

Answer 3

मैं अभी भी जेएस और jQuery के लिए बहुत नया हूं, इसलिए मुझे नीचे शूट करने के लिए स्वतंत्र महसूस करें (उर्फ 'रचनात्मक आलोचना प्रदान करें'), लेकिन मुझे पता चला है कि यह जेएस ऑब्जेक्ट्स बनाने के लिए अच्छी तरह से काम करता है, स्क्रीन प्रतिनिधित्व:

function SomeClass (params) { 
    // other properties and functions... 

    this.view = function() { 
     var e = $('<div />', { 
      'class': 'someClass' 
     }); 
     return e; 
    }(); 
} 

var someClassInstance = new SomeClass(params); 
$('#someClassContainer').append(someClassInstance.view); 

अधिक पारंपरिक ओओपी पृष्ठभूमि से आ रहा है, और एमवीसी पैटर्न का उपयोग करने के लिए उपयोग किया जा रहा है, यह मेरे लिए अनुकूल है। कोई सुझाव स्वागत है ...

Answer 4

मैं जॉनीयन एट अल द्वारा प्रस्तुत की गई एक सरल विधि पसंद करता हूं।

मूल रूप से, मैं एक वर्ग बनाता हूं और संपत्ति को डीओएम तत्व असाइन करता हूं।

उदाहरण के लिए।

/* CONSTRUCTOR: Tile */ 
function Tile(type, id){ 
    this.type = type; 
    this.id = id; 
    this.DOM = $('#' + id); 
} 

/* METHOD: nudge */ 
Tile.prototype.nudge = function(direction){ 
    var pos = this.DOM.offset(); 
    var css_top = this.DOM.css("top"); 
    var top = css_top.substring(0 , css_top.indexOf('px')); 
    var css_left = this.DOM.css("left"); 
    var left = css_left.substring(0 , css_left.indexOf('px')); 
    var width = this.DOM.width(); 
    var height = this.DOM.height(); 

    switch(direction){ 
    case 'up': 
     this.DOM.css({ "top": (+top - 75) + "px" }); 
    break; 
    case 'left': 
     this.DOM.css({ "left": (+left - 75) + "px" }); 
    break; 
    case 'right': 
     this.DOM.css({ "left": (+left + 75) + "px" }); 
    break; 
    case 'down': 
     this.DOM.css({ "top": (+top + 75) + "px" }); 
    break; 
    } 
} 

नोट: यह अनचाहे कोड है, लेकिन यह मेरे बिंदु को दिखाता है।

Answer 5

<script type="text/javascript">// <![CDATA[ 
//Lets consider it as our class wrapper 
(function($) { 

    $.fn.testClass = function(initvar) { 

     this.testMethod = function(status) { 
      this.test = status; 

      //lets call a method of a class 
      this.anotherMethod(); 
     }; 

     this.anotherMethod = function() { 
      alert("anotherMethod is called by object " + this.test); 
     }; 

     this.getVars = function() { 
      alert("Class var set in testMethod: I am object " + this.test + "\nClass var set in constractor: " + this.class_var); 
     }; 

     //lets init some variables here, consider it as a class constractor 
     this.class_var = initvar; 

     //THIS IS VERY IMPORTANT TO KEEP AT THE END 
     return this; 
    }; 

})(jQuery); 


$(function() { 

    //Now lets create objects 
    var object1 = $(document.body).testClass("1"); 
    var object2 = $(document.body).testClass("2"); 

    //lets call method testMethod 
    object1.testMethod("1"); 
    object2.testMethod("2"); 

    //lets lets see what we have at the end 
    object1.getVars(); 
    object2.getVars(); 

}); 
// ]]></script> 

संदर्भ: http://ajax911.com/jquery-object-oriented-plugins/

Answer 6

मैं जानता हूँ कि इस सवाल पुराना है, लेकिन यह कैसे मैं अपने ग्राहक साइड कोड का निर्माण होता है।

मैं अपने नियंत्रक/ऐप्स बनाने के लिए अपने स्वयं के ओप फ्रेमवर्क का उपयोग करता हूं। यदि मैं एक सिंगलटन के रूप में कक्षा निर्धारित करता हूं, तो इसे डॉक्टर पर तैयार किया जाता है और क्लाइंट ऐप के लिए मेरे प्रवेश बिंदु के रूप में कार्य करता है।

https://github.com/KodingSykosis/jOOP

किसी भी कोड है कि विश्व स्तर पर सुलभ होने की जरूरत है, मैं $ .extend या $ .fn.extend का उपयोग कर jQuery का विस्तार।

api.jquery.com/jQuery.extend

देखें या प्रस्तुति शैली कोड, मैं jQueryUI विजेट कारखाने का उपयोग करें। मेरे नियंत्रक वर्गों को विजेट को तत्काल करने के लिए आवश्यक तत्व बनाने के साथ कार्य किया जाता है। किसी भी संचार को घटनाओं या कॉलबैक के उपयोग के माध्यम से सुविधा प्रदान की जाती है।

http://api.jqueryui.com/jQuery.widget

Answer 7

यह वहाँ भी इस पैटर्न, Tagger इस पद्धति के आधार पर पर आधारित एक प्लगइन है Building Object-Oriented jQuery Plugins

(function($){ 
    var MyPlugin = function(element, options){ 
    var elem = $(element); 
    var obj = this; 
    var settings = $.extend({ 
     param: 'defaultValue' 
    }, options || {}); 

    // Public method - can be called from client code 
    this.publicMethod = function(){ 
     console.log('public method called!'); 
    }; 

    // Private method - can only be called from within this object 
    var privateMethod = function(){ 
     console.log('private method called!'); 
    }; 
    }; 

    $.fn.myplugin = function(options){ 
    return this.each(function(){ 
     var element = $(this); 

     // Return early if this element already has a plugin instance 
     if (element.data('myplugin')) return; 

     // pass options to plugin constructor 
     var myplugin = new MyPlugin(this, options); 

     // Store plugin object in this element's data 
     element.data('myplugin', myplugin); 
    }); 
    }; 
})(jQuery); 

टेस्ट उपयोग

$('#test').myplugin(); 
var myplugin = $('#test').data('myplugin'); 
myplugin.publicMethod(); // prints "publicMethod() called!" to console 

से है।