Wywołanie funkcji wewnątrz wtyczki jQuery z zewnątrz

Question

Próbuję dowiedzieć się, jak wywoływać funkcje w mojej wtyczce jQuery spoza wtyczki. Kod, który próbowałem, nie działa. Jestem pewien, że będę musiał zrestrukturyzować moją wtyczkę, aby to umożliwić, ale nie jestem pewien jak to zrobić. W tym przykładzie próbuję uzyskać dostęp do funkcji underline().

jsFiddle

plugin jQuery

(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)); 

Przypisywanie wtyczki do selektorów

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

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

wywołać funkcję, która znajduje się wewnątrz wtyczki

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

Answer 1

Spójrz na closures.

Oto podstawowy przykład tego, jak wygląda zamknięcie wtyczki jQuery.

$.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(); 

Możesz zobaczyć inny przykład w następującym jsfiddle.

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

Answer 2

Pierwszą rzeczą, najpierw musimy zrozumieć każdy krok w budowaniu wtyczki jQuery, jej jak zbudować plugin javascript (klasa), ale mamy oprócz niego klasa jQuery.

//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); 

Stosując naszą funkcję teraz jest bardzo łatwy

<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> 

W krótkich, jQuery wtyczek oraz wszelkie wtyczki Javascript są po prostu o zakresie parametrów.

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