2

私は最近、いくつかの jQuery ウィジェットを開発していますが、2 つのことが気になっていたので、もっと良い方法を見つけてくれることを願ってここに来ました。

1) 私はこれの代わりに「あれ」を使うという事実がとても好きです。コードがより明確になり、多くのバグが回避されます。簡単にするために、ウィジェットの this として常に「that」を使用します。ただし、「それ」をグローバルにする方法がわからないので、次のようにします。

$.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ウィジェットを本当に明確で保守しやすいものにする方法を見つけようとしています.人々がどのようにやっているか知りたい.

これについてご意見をお寄せいただきありがとうございます。

4

1 に答える 1

7

私のコメントを拡張するために、ハンドラーをバインドして保持する方法を次に示します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変数が必要な場合は、グローバルスコープを汚染せずにそれを行う1つの方法を次に示します:

(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);
于 2012-10-05T19:40:17.337 に答える