Javascript 간단한 MVC + 모듈 패턴 구현

Question

다음은 모듈 및 MVC 패턴을 사용하여 "hello world"와 유사한 JS 앱을 만드는 매우 기본적인 시도입니다.

var appModules = {}; 

appModules.exampleModul = (function() { 

    var _data = ['foo', 'bar']; // private variable 

    return { 
     view: { 
      display: function() { 
       $('body').append(appModules.exampleModul.model.getAsString()); 
      }, 
     }, 
     model: { 
      getAsString: function() { 
       return _data.join(', '); 
      }, 
     } 

    }; 

})(); 

appModules.exampleModul.view.display(); 

이 잘 작동하지만, 나는 전체 객체 경로를 사용하여보기에서 모델 기능을 참조하기 위해 얼마나 행복하지 않다 : appModules.exampleModul.model.getAsString()을. 공용 모델 방법을 뷰에 표시하려면 어떻게해야합니까? model.getAsString()과 같은 것을 사용할 수 있습니까? 아니면 코드를 다르게 구성해야합니까?

Answer 1

하나의 옵션은 이러한 개체를 개인 구현으로 변환 할 수 있다는 것입니다.

appModules.exampleModul = (function() { 

      var _data = ['foo', 'bar']; 
      // private variable 

      var _view = { 
        display : function() { 
         $('body').append(_model.getAsString()); 
        }, 
      }; 

      var _model = { 
        getAsString : function() { 
         return _data.join(', '); 
        }, 
      }; 

      return { 
       view : _view, 
       model : _model 
      }; 
})(); 

Answer 2

은 당신이 뭔가를 할 수 있습니다 :

정말 솔루션의 예쁜이 아니라, display 함수 내에서보다 일반적인 솔루션을 제공 않습니다

var appModules = {}; 

appModules.exampleModul = (function() { 

    var _data = ['foo', 'bar']; // private variable 

    return { 
     view: { 
      display: function() { 
       $('body').append(this.model.getAsString()); 
      }, 
     }, 
     model: { 
      getAsString: function() { 
       return _data.join(', '); 
      }, 
     } 

    }; 

})(); 
var display = appModules.exampleModul.view.display.bind(appModules.exampleModul); 
display(); 

!