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