Dışarıdan bir jQuery eklentisi içinde işlev çağırma

Question

JQuery eklentisi içerisindeki işlevlerin eklentinin dışından nasıl çağrılacağını bulmaya çalışıyorum. Denediğim kod çalışmıyor. Eminim ki buna izin vermek için eklentimi yeniden yapılandırmam gerekecek, fakat nasıl yapılacağından emin değilim. Bu örnekte, underline() işlevine erişmeye çalışıyorum.

jsFiddle

jQuery eklentisi

(function($) { 
    "use strict"; 

    $.fn.testPlugin = function(options) { 

     // Settings 
     var settings = $.extend({ 
      newText : "Yabadabado" 
     }, options); 

     return this.each(function(i, el) {    

      var init = function(callback) { 
       if($(el).attr("class") === "red") { 
        $(el).css("color","red"); 
       } 

       $(el).text(settings.newText); 

       if(callback && typeof(callback) === "function") { 
        callback(); 
       } 
      }; 

      var underline = function() { 
       $(el).addClass("underline"); 
      }; 

      init(); 
     }); 
    }; 

}(jQuery)); 

eklenti içinde bulunan bir fonksiyonu

var doTest = $("#testItem").testPlugin({ 
    newText: "Scoobydoo" 
}); 

var doNewTest = $("#newTestItem").testPlugin({ 
    newText: "kapow!" 
});  

Çağrı Seçicilere eklentisi atama

$("#underline").click(function(e) { 
    e.preventDefault(); 
    doTest.underline(); 
}); 

Answer 1

closures'a bakın.

Bir jQuery eklentisinde kapağın nasıl göründüğüne dair temel bir örnek.

$.fn.plugin = function() { 

    return { 
     helloWorld: function() { 
      console.log('Hello World!'); 
     } 
    } 
}; 

// init plugin. 
var test = $('node').plugin(); 

// call a method from within the plugin outside of the plugin. 
test.helloWorld(); 

Aşağıdaki jsfiddle'ta başka bir örnek görebilirsiniz.

http://jsfiddle.net/denniswaltermartinez/DwEFz/

Answer 2

ilk şey öncelikle bir jQuery eklentisi, onun gibi inşa bir javascript eklenti (sınıfı) binada her adımı anlamamız gerekir ama biz jQuery sınıfı buna ek olarak var. şimdi bizim işlevinin kullanılması

//We start with a function and pass a jQuery class to it as a 
//parameter $ to avoid the conflict with other javascript 
//plugins that uses '$ as a name 
(function($){ 
    //We now append our function to the jQuery namespace, 
    //with an option parameter 
    $.fn.myplugin = function(options) { 
     //the settings parameter will be our private parameter to our function 
     //'myplugin', using jQuery.extend append 'options' to our settings 
     var settings = jQuery.extend({ 
      param:'value', 
     }, options); 
     //Define a reference to our function myplugin which it's 
     //part of jQuery namespace functions, so we can use later 
     //within inside functions 
     var $jquery=this; 

     //Define an output object that will work as a reference 
     //for our function 
     var output={ 
      //Setup our plugin functions as an object elements 
      'function1':function(param){ 
       //Call jQuery reference that goes through jQuery selector 
       $jquery.each(function(){ 
        //Define a reference of each element of jQuery 
        //selector elements 
        var _this=this; 
       }); 
       //This steps is required if you want to call nested 
       //functions like jQuery. 
       return output; 
      }, 
      //If we want to make our plugin to do a specific operations 
      //when called, we define a function for that 
      'init':function(){ 
       $jquery.each(function(){ 
        var _this=this; 
        //Note that _this param linked to each jQuery 
        //functions not element, thus wont behave like 
        //jQuery function. 
        //And for that we set a parameter to reference the 
        //jQuery element 
        _this.$this=$(this); 

        //We can define a private function for 'init' 
        //function 
        var privatefun=function(){} 
        privatefun(); 

        //We can now do jQuery stuffs on each element 
        _this.$this.on('click',function(){ 
         //jQuery related stuffs 
        }); 
       }); 
       //We can call whatever function we want or parameter 
       //that belongs to our plugin 
       output.function1("value"); 
      } 
     }; 
     //Our output is ready, if we want our plugin to execute a 
     //function whenever it called we do it now 
     output.init(); 

     //And the final critical step, return our object output to 
     //the plugin 
     return output; 
    }; 
//Pass the jQuery class so we can use it inside our plugin 'class' 
})(jQuery); 

kısa, jQuery eklentileri içinde

<div class="plugintest"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span>4</span> 
</div> 

<script> 
    $(function(){ 
     var myplugin=$(".plugintest > span").myplugin({ 
      param:'somevalue' 
     }); 
     myplugin.function1(1).function1(2).function1(3); 
    }); 
</script> 

çok kolaydır ve herhangi JavaScript eklentileri parametreleri kapsamı hakkında basitçe vardır.

Fiddle versiyonu https://jsfiddle.net/eiadsamman/a59uwmga/