Шаблон дизайна плагина jQuery для использования `this` в приватных методах?

Question

Я создаю плагины 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

Я могу предложить два пути:

1. Этот способ более понятен, но не совсем отвечает за задачу

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

2. Этот путь более экстремален)))

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