jQuery Plugin Private Funktionen innerhalb Vs. Außerhalb der jede Schleife

Question

Was ist der Unterschied zwischen einschließlich der privaten Funktionen in einem jQuery-Plugin in den folgenden Beispielen ist:

außerhalb der Schleife:

(function($){ 
     var defaults = {}; 

     $.fn.cmFlex = function(opts) { 

     this.each(function() { 
      var $this = $(this); 
      //Element specific options 
      var o = $.extend({}, defaults, opts); 

      //Code here 
     }); 

     function f1(){.... 
     function f3(){.... 
     function f2(){.... 

     }; 
    })(jQuery); 

Innerhalb der Schleife:

(function($){ 
     var defaults = {}; 

     $.fn.cmFlex = function(opts) { 

     this.each(function() { 
      var $this = $(this); 
      //Element specific options 
      var o = $.extend({}, defaults, opts); 

      function f1(){.... 
      function f3(){.... 
      function f2(){.... 
     });  


     }; 
    })(jQuery); 

Die Vorteil des Einschlusses der Funktionen in die Schleife ist, dass ich auf die Variablen $ this sowie auf die elementspezifischen Optionen von f1() f2() f3() zugreifen kann. Gibt es irgendwelche Nachteile?

Answer 1

Folgen Sie immer dem Konzept, Ihrem gesamten Code das geringste Recht zu geben. Wenn kein anderer Code diese Funktionen referenzieren muss, ist es nicht notwendig, sie außerhalb zu definieren, und das Ändern dieser Funktionen ist einfacher, da Sie garantiert sind, dass sie nicht anderswo als innerhalb der Schleife verwendet werden.

Wenn f1, f2, f3 Zugriff auf Abschlussvariablen innerhalb der Schleifenfunktion benötigen, müssten sie in der Funktion definiert werden, egal was passiert.

Allerdings gibt es einen Vorbehalt. Um sie innerhalb einer Funktion zu definieren, muss jedes Mal, wenn die Schleifenfunktion ausgeführt wird, ein neuer Abschluss erstellt werden. Je nachdem, wie eng der Loop ist, kann dies die Leistung beeinträchtigen. Mein Punkt ist: vorzeitige Optimierung ist schlecht, aber denken Sie daran.

FYI: Hier ist eine andere Möglichkeit (wenn Sie die Closure-Variablen nicht benötigen), die verhindert, dass die Closures für jede Iteration der Schleife erstellt werden. Es sieht ein wenig komplex, so dass es nicht für schwache Nerven

(function($){ 
    var defaults = {}; 

    $.fn.cmFlex = function(opts) { 

    this.each((function() { 
     function f1(){} 
     function f3(){} 
     function f2(){} 
     // This is the method that will be called for each iteration of the loop. It now 
     // has access to f1,f2,f3 but doesn't need to create a closure for each iteration. 
     return function() { 
      var $this = $(this); 
      //Element specific options 
      var o = $.extend({}, defaults, opts); 
      f1(); 
      f2(); 
      f3(); 
     }; 
    })()); 
    }; 
})(jQuery); 

Answer 2

Je nachdem, was Sie versuchen zu erreichen, können könnte sein; Wenn Sie die Funktionen in der Zeile ändern müssen, damit 10, f2() oder f3() Dinge außerhalb dieses Bereichs erfordern, dann müssen Sie mit dieser Migration umgehen.

Vom Standpunkt der Kapselung ist dies jedoch vorzuziehen, da diese Funktionen nur innerhalb dieses Bereichs zugänglich sind und sicherstellen, dass kein "Leck" vorhanden ist.

Answer 3

mich nicht eine jQuery-Plugin überhaupt am Ende mit und Verkapselung des gesamten Code innerhalb der Callback-Funktion für den $ .getJSON Anruf. Hier

ist ein Beispiel

  $.getJSON('core/cm_json.php', function(options) { 
       //Globals 
       var defaults = options; 

       //Where query is a jQuery query string 
       function initialize(query){ 
        $(query).each(function(){ 
         var $this = this; 

         //Code here 

         function f1(){... 
         function f2(){... 
         function f3(){... 
        }) 
       } 
      }); 

Answer 4

Wenn Sie diese Methoden nicht wollen alle Zeitläufe Loop-Funktion deklarieren und nach wie vor Zugriff auf $ diese Variable, können Sie versuchen, Funktionen außerhalb zu bewegen und rufen sie Anruf mit Methode.

(function($){ 
    var defaults = {}; 

    $.fn.cmFlex = function(opts) { 
    function f1(){} 
    function f3(){} 
    function f2(){} 

    this.each((function() { 

     return function() { 
      var $this = $(this); 
      //Element specific options 
      var o = $.extend({}, defaults, opts); 
      f1.call($this); 
      f2.call($this); 
      f3.call($this); 
     }; 
    })()); 
    }; 
})(jQuery);