मक्खी

Question

हाय पर बनाया जा रहा है तरीकों मैं एक jQuery प्लगइन लेखक को कोशिश कर रहा हूँ और मैं के बाद वे जैसे वस्तु उस तरह, के रूप में प्रारंभ कर रहे हैं तत्वों के लिए सुलभ तरीकों की आवश्यकता है:

$('.list').list({some options}); //This initializes .list as a list 

//now I want it to have certain methods like: 
$('.list').find('List item'); //does some logic that I need 

मैं

साथ करने की कोशिश की

$.fn.list = function (options) { 
    return this.each(function() { 
     // some code here 
     this.find = function(test) { 
      //function logic 
     } 
    } 
} 

और कई अन्य अलग-अलग प्रयास, मैं बस यह नहीं समझ सकता कि इसे कैसे किया जाए।

संपादित करें:

मैं इसे बेहतर समझाऊंगा।

मैं एक तालिका को सूची में बदलने की कोशिश कर रहा हूं, मूल रूप से कॉलम हेडर और क्रमबद्ध वस्तुओं और सबकुछ के साथ कंप्यूटर पर एक सूची की तरह। आप की तरह

$(this).list({ 
    data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}] 
}); 

.list एक आदेश के साथ तालिका आरंभ <tbody> sortable बनाने के लिए और कुछ अन्य प्रारंभिक कार्यों को पूरा करेगा, तो तत्व के लिए निम्न विधियों जोड़ें:
.findItem(condition) आपके द्वारा एक निश्चित आइटम ढूंढने के लिए अनुमति देगा किसी स्थिति (findItem('name == "Second"')
.list(condition) की तरह सभी आइटम है कि किसी भी हालत से मेल सूची जाएगा
.sort(key) सभी वस्तुओं किसी कुंजी के
आदि

012 के आधार पर सॉर्ट जाएगा

ऐसा करने के लिए जाने का सबसे अच्छा तरीका क्या है?

Answer 1

मैं यहाँ इस समाधान पाया: http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

यह ठीक है कि मैं क्या जरूरत है ऐसा करने के लिए लगता है।

(function($) { 
    var TaskList = function(element, options) 
    { 
     var $elem = $(element); 
     var options = $.extend({ 
      tasks: [], 
      folders: [] 
     }, options || {}); 

     this.changed = false; 
     this.selected = {}; 

     $elem.sortable({ 
      revert: true, 
      opacity: 0.5 
     }); 

     this.findTask = function(test, look) { 
      var results = []; 

      for (var i = 0,l = options.tasks.length; i < l; i++) 
      { 
       var t = options['tasks'][i]; 
       if (eval(test)) 
       { 
        results.push(options.tasks[i]); 
       } 
      } 
      return results; 
     } 

     var debug = function(msg) { 
      if (window.console) { 
       console.log(msg); 
      } 
     } 
    } 

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

      if (element.data('taskList')) { return; } 

      var taskList = new TaskList(this, options); 

      element.data('taskList', taskList); 

     }); 
    } 

})(jQuery); 

तब मैं

$('.task-list-table').taskList({ 
     tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'), 
     folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)') 
    }); 
    var taskList = $('.task-list-table').data('taskList'); 

है और मैं taskList.findTask(condition);

उपयोग कर सकते हैं और मैं भी list(condition) आदि जैसे तरीकों यह पूरी तरह से काम करता है के लिए jQuery उदाहरण संपादित कर सकते हैं के बाद से निर्माता $elem है।

Answer 2

this.each की आवश्यकता नहीं है। यह करना चाहिए:

$.fn.list = function (options) { 
    this.find = function(test) { 
     //function logic 
    }; 
    return this; 
}; 

ध्यान दें कि आप jQuery के देशी find विधि को अधिलेखित होगी, और ऐसा करने की सलाह नहीं दी है।

---

इसके अलावा, इसके लायक होने के लिए, मुझे नहीं लगता कि यह एक अच्छा विचार है। jQuery उदाहरणों को केवल jQuery की प्रोटोटाइप ऑब्जेक्ट से विरासत में प्राप्त विधियों के रूप में माना जाता है, और ऐसा लगता है कि आप जो करना चाहते हैं वह आम तौर पर स्वीकृत jQuery-प्लगइन व्यवहार के अनुरूप नहीं होगा - यानी this ऑब्जेक्ट (jQuery उदाहरण) अपरिवर्तित वापस लौटाएं।

Answer 3

यदि आप इन विधियों को किसी भी jQuery ऑब्जेक्ट पर उपलब्ध करना चाहते हैं, तो आपको उनमें से प्रत्येक को jQuery के प्रोटोटाइप में जोड़ना होगा। कारण यह है कि हर बार जब आप $(".list") पर कॉल करते हैं तो एक नई नई वस्तु बनाई जाती है, और पिछले किसी ऑब्जेक्ट से जुड़ी किसी भी विधि को खो दिया जाएगा।

असाइन के रूप में jQuery के प्रोटोटाइप के लिए प्रत्येक विधि:

jQuery.fn.extend({ 
    list: function() { .. }, 
    findItem: function() { .. }, 
    sort: function() { .. } 
}); 

यहाँ list विधि विशेष है, क्योंकि यह दो अवसरों पर लागू किया जा सकता है। सबसे पहले, सूची शुरू करते समय, और दूसरी स्थिति में विशेष आइटम ढूंढते समय। आपको इन दोनों मामलों के बीच किसी भी तरह से अंतर करना होगा - या तो तर्क प्रकार, या कुछ अन्य पैरामीटर द्वारा।

आप data एपीआई का उपयोग अपवाद फेंकने के लिए भी कर सकते हैं यदि इन विधियों को किसी ऑब्जेक्ट के लिए बुलाया जाता है जिसे सूची प्लगइन के साथ प्रारंभ नहीं किया गया है।जब ('xyz').list({ .. }) को पहले कॉल किया जाता है, उस ऑब्जेक्ट के लिए डेटा कैश में कुछ राज्य चर स्टोर करें। जब किसी अन्य विधि - "सूची", "findItem", या "sort" को बाद में बुलाया जाता है, तो जांच करें कि ऑब्जेक्ट में उस डेटा चर के डेटा कैश में है या नहीं।

आपकी प्लगइन को नाम देने के लिए एक बेहतर तरीका होगा ताकि list() विस्तारित ऑब्जेक्ट वापस कर दे। तीन विस्तारित विधियों को इसके वापसी मूल्य पर बुलाया जा सकता है। इंटरफ़ेस की तरह होगा:

$('selector').list({ ... }); 
$('selector').list().findOne(..); 
$('selector').list().findAll(..); 
$('selector').list().sort(); 

या लौटे ऑब्जेक्ट के संदर्भ पहली बार बचाने के लिए, और इस पर सीधे तरीकों कहते हैं।

var myList = $('selector').list({ ... }); 
myList.findOne(..); 
myList.findAll(..); 
myList.sort();