Question

在下面的示例中，在jQuery插件中包含私有函数有什么区别：

圈外：

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

循环内部：

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

在循环中包含函数的优点是我将能够访问$ this变量以及f1（）f2（）f3（）中的元素特定选项，这有什么缺点吗？ / p>

Answer 1

始终遵循为所有代码提供最小权限的概念。如果没有其他代码需要引用这些函数，则不需要在外部定义它们，并且更改这些函数更简单，因为您可以保证它们不会在循环内的任何其他地方使用。

如果f1，f2，f3需要访问循环函数中的闭包变量，则无论如何都必须在函数中定义它们。

但是有一点需要注意。在函数中定义它们需要在每次运行循环函数时创建一个新的闭包。根据环路的紧密程度，它可能会影响性能。我的观点是：过早优化是不好的，但要记住它。

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

我最终根本没有使用jQuery插件，并且在$ .getJSON调用的回调函数中封装了所有代码。

这是一个例子

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

如果你不想在每次循环函数运行时重新声明方法并且仍然可以访问$ this变量，你可以尝试将函数移到外面并使用call方法调用它们。

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

jQuery插件Vs中的私有函数。在每个循环之外

4 个答案: