JQuery plugin Private functions inside Vs. Outside of every loop

Question

What is the difference between including private functions in the jQuery plugin in the following examples:

Out of cycle:

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

Inside the loop:

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

The advantage of including functions in the loop is that I get access to the $ this variable, as well as to certain parameters of the element from f1 () f2 () f3 (), are there any disadvantages?

Answer 1

Always follow the concept of least privilege to all of your code. If no other code needs to reference these functions, there is no need to define them externally and change these functions easier, since you are guaranteed that they are not used anywhere except in a loop.

f1, f2, f3 looping, , .

. . , , . , , .

FYI: ( ), . ,

(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

, , ; , f1(), f2() f3() , .

, , , , , "" .

Answer 3

In the end, I didn't use the jQuery plugin at all and encapsulated all the code inside the callback function to call $ .getJSON.

Here is an example

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

If you do not want to update the methods every time the loop function works, and you have access to the $ this variable, you can try to move the functions outside and call them using the call method.

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