Jquery: मेरे पास अन्य कार्यों के साथ $ .fn.my_function फ़ंक्शन है, मैं उन्हें कैसे कॉल कर सकता हूं?

Question

मान लीजिए मैं इस राशि ($ = jQuery):

$.fn.my_function = function() { 
    function foo() 
    { 
     //do something 
    }; 

    function bar() 
    { 
     //do something other 
    }; 

} 

मैं $('.my_class').my_function();

के साथ इस lauch अब, मैं foo फोन और कुछ घटनाओं को कॉलबैक पर बार की जरूरत है।

मैं उन्हें कैसे कॉल कर सकता हूं?

Answer 1

आपको उन्हें किसी भी तरह से "बाहरी दुनिया" में बेनकाब करना होगा। वर्तमान में, वे केवल my_function के भीतर दिखाई दे रहे हैं ताकि आप उन्हें कहीं और से कॉल न कर सकें।

इसे ठीक करने की तरह कुछ होगा सबसे अनुभवहीन रास्ता:

var foo; 
var bar; 
$.fn.my_function = function() { 
    foo = function() { 
     //stuff 
    }; 
    bar = function() { 
     //stuff 
    }; 
}; 

इसी अवधारणा कहीं भी है कि अपने उपयोग के लिए समझ में आता है उन्हें संदर्भ जगह के लिए लागू किया जा सकता है।

Answer 2

एचटीएमएल

<p id="hello">aaa</p> 
<p id="hola">sss</p> 
<div id='result'></div> 

जे एस

$.fn.my_function = function() 
{ 
    this.foo = function(xref) { 
     $("#result").append("<div>"+xref+".foo " + $(this).html() +"</div>"); 
    }; 

    this.bar = function(xref) { 
     $("#result").append("<div>"+xref+".bar " + $(this).html() +"</div>"); 
    }; 

    return this; 
}; 

var ee1 = $("#hello").my_function(); 
var ee2 = $("#hola").my_function(); 

ee1.bar("ee1"); 
ee2.bar("ee2"); 
$("#hello").html("hello hellboy"); 
ee1.foo("ee1"); 
ee2.foo("ee2"); 
$("#result").append("<hr />"); 
ee1.bar("ee1"); 
ee2.bar("ee2"); 
$("#hola").html("hola hellboy"); 
ee1.foo("ee1"); 
ee2.foo("ee2"); 

Answer 3

यह है कि आप एक jQuery प्लगइन बनाने की कोशिश कर रहे हैं लगता है। आप के लिए एक निजी दायरे करने के लिए अपने प्लगइन के तरीकों विवश चाहिए, और आप भी jQuery चयनकर्ता द्वारा प्लगइन करने के लिए दिया तत्वों से अधिक पुनरावृति करना चाहिए, और उन्हें jQuery के "प्रत्येक" चेनिंग क्षमताओं को संरक्षित करने का उपयोग करके लौट:

// wrap the plugin code inside an anonymous function 
// to keep the global namespace clean 
(function($){ 
    $.fn.my_function = function() { 
     return this.each(function(){ 
      function foo() { 
       // stuff here 
      } 
      function bar() { 
       // stuff here 
      } 
      // now you can use your foo and bar which ever way you want 
      // inside the plugin 
      $(this).focus(function(event){ 
       // do some stuff 
       ... 
       // call the function defined previously in the plugin code 
       foo(); 
      }); 
      $(this).blur(function(event){ 
       // do some stuff 
       ... 
       // call the function defined previously in the plugin code 
       bar(); 
      }); 
     }); 
    }; 
})(jQuery); 

आप jQuery प्लगइन विकास पर अधिक जानकारी के लिए इन लेखों पर एक नजर है चाहते हो सकता है: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

http://docs.jquery.com/Plugins/Authoring

हालांकि, अगर आप बस कुछ "उपयोगिता" प्रकार कार्यों कर रहे हैं, तो आप सिर्फ करने के लिए उन्हें टाई कर सकते हैं jQuery नामस्थान इस तरह:

$.foo = function(){ 
     // do stuff 
    }; 
$.bar = function(){ 
     // do stuff 
    }; 

Answer 4

एक और तरीका है इस स्थिति है, जो उपयोगी है जब आप कहीं और से (शायद एक अलग फ़ाइल आदि) अपने प्लगइन के तरीकों कॉल करना चाहते हैं संभाल करने के लिए एक वर्ग के रूप प्लगइन तर्क लिखने के लिए और फिर उस वर्ग के अंदर का दृष्टांत है jQuery प्लगइन, $.data में उदाहरण संग्रहित।

(function($) { 

    var Animal = function(el, settings) { 
    this.$el = $(el); 
    this.settings = settings; 

    this.foo(); 
    }; 

    Animal.prototype.eat = function() { 
    // Do stuff 
    if (this.settings.isVegetarian) { 
     console.log('I eat plants'); 
    } else { 
     console.log('I eat meat'); 
    } 
    }; 

    Animal.prototype.play = function() { 
    // Do other stuff but return this.$el so you can maintain chain 
    return this.$el; 
    }; 

    // Create jQuery plugin 
    var pluginName = 'myPlugin'; 

    $.fn[pluginName] = function(options) { 
    // Defaults 
    var settings = $.extend({ 
     isVegetarian: true, 
    }, options); 

    return this.each(function() { 
     if (!$.data(this, pluginName)) { 
     // Store plugin instace with element (this), 
     // so public methods can be called later: 
     // $('.el').data('myPlugin').eat(); 
     $.data(this, pluginName, new Animal(this, settings)); 
     } 
    }); 
    }; 

}(jQuery)); 

तब जब आप अपने प्लगइन कॉल करना चाहते हैं, यह सिर्फ सामान्य की तरह है:

$('.dog).myPlugin(); 

और एक विधि कॉल:

$('.dog').data('myPlugin').eat();