0

私は ExtJS 4 を使用しており、MVC パターンを順守しています。イベント ハンドラーで使用されるヘルパー関数をどこに置くべきか、少し混乱しています。これは現在私がやっていることです：

Ext.define('App.controller.myController, {
   extend: 'Ext.app.Controller.
   stores: [...],
   models: [...],
   views: [...],

   init: function() {
       this.control({
           'selector' : {
               event1: this.onEvent1,
               event2: this.onEvent2
           }
       });
   },

   onEvent1: function(args) {
       // do stuff
       helperFn();
   },
   onEvent2: function(args) {
       // do other stuff
       helperFn();
   }
});

// is this 'right'?
function helperFn() {                           
    // do other, other stuff
}

これは正しい設定ですか？または、次のようなことをする必要があります。

Ext.define('App.controller.myController, {
   extend: 'Ext.app.Controller.
   stores: [...],
   models: [...],
   views: [...],

   init: function() {
       this.control({
           'selector' : {
               event1: this.onEvent1.bind(this),
               event2: this.onEvent2.bind(this)
           }
       });
   },

   onEvent1: function(args) {
       // do stuff
       this.helperFn();
   },
   onEvent2: function(args) {
       // do other stuff
       this.helperFn();
   },
   helperFn(): function() {
       // do other, other stuff
   }
});

1 つのスタイルが優先されますか? つまり、どちらか一方に比べて大きな欠点はありますか?

4

1 に答える 1

4

コントローラーの定義の外でヘルパー関数を定義することで、それをグローバル関数にしています。これは、関数がアプリケーションのどこでも使用できることを意味します。これが要件である場合は、を含む別のユーティリティ シングルトンを定義しますhelperFn。

//in a separate file...
Ext.define('App.Util', {
    singleton: true,

    helperFn: function() {
        // do other, other stuff
    }
});

Ext.define('App.controller.myController, {
   extend: 'Ext.app.Controller.
   stores: [...],
   models: [...],
   views: [...],

   init: function() {
       this.control({
           'selector' : {
               event1: this.onEvent1.bind(this),
               event2: this.onEvent2.bind(this)
           }
       });
   },

   onEvent1: function(args) {
       // do stuff
       App.Util.helperFn();
   },
   onEvent2: function(args) {
       // do other stuff
       App.Util.helperFn();
   }
});

コントローラーの定義内で定義することにより、コントローラー クラスのメンバーにします。これは、コントローラーのインスタンスからのみ呼び出すことができることを意味します。これは、コードがコントローラに固有のものである場合に一般的に好まれます。

利用可能な 3 番目のオプションがあります。関数をコントローラー内でのみ使用可能にし、他のものからはアクセスできないようにする場合 (Java のプライベート メソッドと同様)、次のように設定できます。

Ext.define('App.controller.myController', (function () {

   //now the function is only available below through closure
   function helperFn() {
      // do other, other stuff
   }

   return {
      extend: 'Ext.app.Controller',
      stores: [...],
      models: [...],
      views: [...],

      init: function () {
         this.control({
            '
            selector ': {
               event1: this.onEvent1.bind(this),
               event2: this.onEvent2.bind(this)
            }
         });
      },

      onEvent1: function (args) {
         // do stuff
         helperFn();
      },
      onEvent2: function (args) {
         // do other stuff
         helperFn();
      }
   };
})());
于 2013-09-27T00:51:53.307 に答える