Question

我正在使用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
   }
});

首选一种风格吗？即是否有任何一个主要缺点与另一个相比？

Answer 1

通过在控制器定义之外定义辅助函数，您将使其成为全局函数。这意味着该功能将在您的应用程序中随处可用。如果这是一个要求，我将定义一个单独的实用程序单例，其中包含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();
   }
});

通过在控制器的定义中定义它，您将使其成为控制器类的成员。这意味着它只能由控制器实例调用。如果代码特定于控制器，则通常首选。

还有第三种选择。如果您希望该函数仅在控制器中可用，但不能访问任何其他内容（类似于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();
      }
   };
})());

ExtJS：控制器功能放置

1 个答案: