ExtJS：控制器功能放置

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