javascript - jQuery-ui widget factory, event handlers and that - Stack Overflow

admin管理员组

文章数量:1426975

I've been developing a few jQuery widgets recently but 2 things have been bothering me and so I'm ing to you hoping you'll have a nicer way to do it.

1) I quite like the fact of using "that" instead of this. Makes the code much clearer and avoid quite a lot of bugs. To make it simple I always use "that" as this of the widget. However I don't know how to make my "that" global so what I do is:

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

As you can see that's heavy in code and not much better. I was wondering if i was valid to do:

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

Or will that pose any problem? If that is impossible how do you think is the best way to do it?

2) This is really linked to my first question and an answer to it should be enough: For my event handlers I often need to use my "that" to call methods for eg. So what I currently do is

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

Do you see a nicer way I could do this? My big need is to be able to move the whole initialization of that._handlers out of that._create

These are quite open questions. I'm really trying to find a way to make my jquery widget really clear and maintainable and I'm curious to know how people do.

Thanks a lot for your opinion on this.

I've been developing a few jQuery widgets recently but 2 things have been bothering me and so I'm ing to you hoping you'll have a nicer way to do it.

1) I quite like the fact of using "that" instead of this. Makes the code much clearer and avoid quite a lot of bugs. To make it simple I always use "that" as this of the widget. However I don't know how to make my "that" global so what I do is:

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

As you can see that's heavy in code and not much better. I was wondering if i was valid to do:

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

Or will that pose any problem? If that is impossible how do you think is the best way to do it?

2) This is really linked to my first question and an answer to it should be enough: For my event handlers I often need to use my "that" to call methods for eg. So what I currently do is

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

Do you see a nicer way I could do this? My big need is to be able to move the whole initialization of that._handlers out of that._create

These are quite open questions. I'm really trying to find a way to make my jquery widget really clear and maintainable and I'm curious to know how people do.

Thanks a lot for your opinion on this.

• javascript
• jquery
• jquery-ui
• jquery-ui-widget-factory

Share Improve this question Follow asked Oct 5, 2012 at 19:23 charlycharly 9561313 silver badges2323 bronze badges 2

• I would simply not use that unless it was absolutely necessary. – Kevin B Commented Oct 5, 2012 at 19:32
• Why not? that means for me the actual widget. The real equivalent to this in other languages and also I find that being systematic on something as error causing as the this in js especially important – charly Commented Oct 5, 2012 at 19:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

To expand on my ment, here's how you could bind your handlers to preserve 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() {}
 });

Or you could swap that around allowing for easily overriding the handlers for 3rd party developers:

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

Edit: And if you really want a global that variable, here's one way to do it without polluting the global scope:

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

本文标签： javascriptjQueryui widget factoryevent handlers and thatStack Overflow