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

Определяя свою вспомогательную функцию вне определения контроллера, вы делаете ее глобальной функцией. Это означает, что функция будет доступна везде в вашем приложении. Если это требование, я бы определил отдельную утилиту singleton, которая содержит 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(); 
     } 
    }; 
})());