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

一种风格是首选吗？即，与另一个相比，其中一个有什么主要缺点吗？

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

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

还有第三种选择。如果您希望该功能仅在控制器内可用，但其他任何东西都无法访问（类似于 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 回答