Question

我正在使用Plugins Authoring页面中的模式创建jQuery插件：

(function($) {

   $.fn.myPlugin = function(settings) {
     var config = {'foo': 'bar'};

     if (settings) $.extend(config, settings);

     this.each(function() {
       // element-specific code here
     });

     return this;

   };

 })(jQuery);

我的代码调用了几个操纵this的私有方法。我使用apply(this, arguments)模式调用这些私有方法。有没有办法设计我的插件，以便我不必调用apply从方法到方法传递this？

我修改后的插件代码大致如下：

(function($) {

   $.fn.myPlugin = function(settings) {
     var config = {'foo': 'bar'};

     if (settings) $.extend(config, settings);

     this.each(function() {
       method1.apply(this);
     });

     return this;

   };

   function method1() {
     // do stuff with $(this)
     method2.apply(this);
   }

   function method2() {
     // do stuff with $(this), etc... 
   }

 })(jQuery);

Answer 1

我认为jQuery.proxy是针对这些问题创建的，但一般情况下它与您的操作类似：

this.each(jQuery.proxy(method1, this));

Answer 2

我可以建议两种方式：

这种方式更明确但不完全负责任务

(function( $ ) {
   $.fn.myPlugin = function(settings) {
    var config = {'foo': 'bar'};

    if (settings) $.extend(config, settings);

    this.each(function() {
      method1($(this));
    });

    return this;

  };

  function method1(_this) {
    // do stuff with _this)
    alert(_this.attr('id'));
    method2(_this);
  }

  function method2(_this) {
  alert(_this.attr('customAttr'));
    // do stuff with _this, etc... 
  }
})(jQuery);

这种方式更极端）））

 (function( $ ) {
   var privates = {
      method1: function() {
         // do stuff with this
         alert(this.attr('id'));
         this.method2();
      },
      method2: function () {
         alert(this.attr('customAttr'));
         // do stuff with this, etc... 
      }
    }   
    $.fn.myPlugin = function(settings) {
       var config = {'foo': 'bar'};

       if (settings) $.extend(config, settings);

       this.each(function() {
          var $this = $(this);
          $.extend($this, privates)
          $this.method1();
       });

       return this;
    };
})(jQuery);

Answer 3

只需创建一个指向此

的范围变量

(function($) {
   var me;
   $.fn.myPlugin = function(settings) {
     var config = {'foo': 'bar'};
     if (settings) $.extend(config, settings);
     me = this;
     this.each(method1);
     return this;
   };

   function method1() {
     // do stuff with me
     method2();
   }

   function method2() {
     // do stuff with me, etc... 
   }

 })(jQuery);

在私有方法中使用`this`的jQuery插件设计模式？

3 个答案: