javascript - jQuery-ui 小部件工厂、事件处理程序等等

Question

我最近一直在开发一些 jQuery 小部件，但是有两件事一直困扰着我，所以我来找你，希望你能有更好的方法来实现它。

1)我非常喜欢使用“that”而不是“this”。使代码更加清晰，避免了很多错误。为了简单起见，我总是使用“that”作为小部件的 this。但是我不知道如何使我的“那个”全局化，所以我所做的是:

$.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)这确实与我的第一个问题相关，并且答案应该足够了:对于我的事件处理程序，我经常需要使用我的“that”来调用方法，例如。所以我现在做的是

 $.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() {}
 });

你有没有更好的方法可以做到这一点？我最大的需求是能够将 that._handlers 的整个初始化移出 that._create

这些都是相当开放的问题。我真的很想找到一种方法让我的 jquery 小部件真正清晰且可维护，我很好奇人们是怎么做的。

非常感谢您对此的意见。

Answer 1

为了扩展我的评论，您可以通过以下方式绑定(bind)处理程序以保留 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() {}
 });

或者您可以交换它，以便轻松覆盖第 3 方开发人员的处理程序:

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