JQuery-UI фабрика виджетов, обработчики событий и тому подобное

Question

Недавно я разрабатывал несколько виджетов jQuery, но меня беспокоили две вещи, и поэтому я приду к вам, надеясь, что у вас будет более хороший способ сделать это.

1) Мне очень нравится факт использования "этого" вместо этого. Делает код намного понятнее и позволяет избежать множества ошибок. Для простоты я всегда использую "то" в качестве этого виджета. Однако я не знаю, как сделать свое "то" глобальным, так что я делаю так:

$.widget("widgetName", {
    method1: function() {
        var that = this;
    },
    method2: function() {
        var that = this;
    }
});

Как вы можете видеть, это тяжело в коде и не намного лучше. Мне было интересно, если я был в состоянии сделать:

 var that = $.widget("widgetName", {
     method1: function() {
         //do something
     },
     method2: function() {
         //do something
         that.method1();
     }
  });

Или это создаст проблемы? Если это невозможно, как вы думаете, это лучший способ сделать это?

2) Это действительно связано с моим первым вопросом, и ответа на него должно быть достаточно: для моих обработчиков событий мне часто нужно использовать свое "то" для вызова методов, например. Так что я сейчас делаю

 $.widget("widgetName", {
     _handlers: {},
     _create: function() {
         var that = this;
         that._handlers: {
             handler1: function(e) { 
                 //do something
                 that.method();
             } //...
         };
         that.on("event", that._handlers.handler1);
     },
     method: function() {}
 });

Ты видишь, как мне лучше это сделать? Моя большая потребность в том, чтобы иметь возможность переместить всю инициализацию этого._handlers из этого._create

Это довольно открытые вопросы. Я действительно пытаюсь найти способ сделать мой jquery-виджет действительно понятным и понятным, и мне любопытно узнать, как это делают люди.

Большое спасибо за ваше мнение по этому поводу.

Answer 1

Чтобы расширить мой комментарий, вот как вы можете связать свои обработчики для сохранения this

 $.widget("widgetName", {
     _handlers: {},
     _create: function() {
         this._handlers.handler1 = $.proxy(function(e) { 
                 //do something
                 this.method();
         }, this);
         this.element.on("event", this._handlers.handler1);
     },
     method: function() {}
 });

Или вы можете поменять это, что позволит легко переопределить обработчики для сторонних разработчиков:

 $.widget("widgetName", {
     _handlers: {
         handler1: function(e) { 
             //do something
             this.method();
         }
     },
     _create: function() {
         this.element.on("event", $.proxy(this._handlers.handler1,this));
     },
     method: function() {}
 });

Редактировать: И если вы действительно хотите глобальный that переменная, вот один из способов сделать это без загрязнения глобальной области видимости:

(function($){
     var that;
     $.widget("widgetName", {
         _handlers: {
             handler1: function(e) { 
                 //do something
                 that.method();
             }
         },
         _create: function() {
             that = this;
             this.element.on("event", this._handlers.handler1);
         },
         method: function() {}
     });
})(jQuery);