Skip to content

Commit 7818f2e

Browse files
kwanguuuukwanguuuu
committed
update
1 parent e40ca6c commit 7818f2e

File tree

1 file changed

+234
-0
lines changed

1 file changed

+234
-0
lines changed

‎07_모델_뷰_패턴/Gwangyu-Kim.md

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
# 7. 모델 뷰 패턴
2+
----------------------
3+
MV 패밀리 : MVC, MVP, MVVP, PAC
4+
5+
----------------------
6+
## 1. MVC 패턴
7+
* 1) 모델
8+
* 모델은 일반적으로 정보에 대한 컨테이너로 모델링됨. 기능x 단순히 데이터베이스 필드나 검증부를 가림. 메타데이터 필드를 포함하기도 함.
9+
* 일반적으로 컨트롤러나 뷰에 대해 알지 못함.
10+
```javascript
11+
//기본적인 모델
12+
class LoginModel{
13+
UserName : string;
14+
Password : string;
15+
RememberMe : bool;
16+
17+
LoginSuccessful : bool;
18+
LoginErrMessage : string;
19+
}
20+
```
21+
22+
* 2) 뷰 (View)
23+
* 모델의 상태가 업데이트 될 때 마다 대상에 모델의 상태를 전달함.
24+
* 보통 감시자 패턴을 통해 이루어짐.
25+
* xml,json 등의 형식으로도 통신을 하기 때문에 반드시 그래픽적일 필요는 없음.
26+
* 모델의 상태는 컨트롤러에 의해 업데이트 됨.
27+
28+
* 3) 컨트롤러(Controller)
29+
* 모델 뿐 아니라 뷰의 존재도 알고 있음. 둘을 조정함
30+
* 하나 이상의 뷰를 초기화 할 책임이 있음.
31+
* 컨트롤러는 CRUD동작을 가짐.
32+
```javascript
33+
//기본 컨트롤러
34+
var LoginController = (function(){
35+
function LoginController(model) {
36+
this.model = model;
37+
}
38+
LoginController.prototype.Login = function(userName, password, rememberMe) {
39+
this.model.UserName = userName;
40+
this.model.Password = password;
41+
this.model.RememberMe = rememberMe;
42+
if(this.checkPassword(userName, password)) {
43+
this.model.LoginSuccessful;
44+
} else {
45+
this.model.LoginSuccessful = false;
46+
this.model.LoginErrMessage = "Incorrect userName or Password";
47+
}
48+
};
49+
return LoginController;
50+
})();
51+
```
52+
* * 누드 객체 패턴(Naked Object Pattern)
53+
* * PAC 패턴(Presentation-Abstraction-Control)
54+
-----------------------------
55+
56+
### MVC 패턴 코드
57+
```javascript
58+
//View
59+
var CreateCastleView = (function () {
60+
function CreateCastleView(document, controller, model, validationResult) {
61+
this.document = document; //문서에 대한 참조
62+
this.controller = controller; //컨트롤러에 대한 참조
63+
this.model = model;
64+
this.validationResult = validationResult;
65+
var _this = this;
66+
this.document.getElementById("saveButton").addEventListener("click", function(){return _this.saveCastle();});
67+
this.document.getElementById("castleName").value = model.name;
68+
this.document.getElementById("description").value = model.description;
69+
this.document.getElementById("outerWallThickness").value = model.outerWallThickness;
70+
this.document.getElementById("numberOfTowers").value = model.numberOfTowers;
71+
this.document.getElementById("moat").value = model.moat;
72+
}
73+
CreateCastleView.prototype.saveCastle = function() {
74+
var data = { //경량의 객체를 구현하고 이를 전달함.
75+
name : this.document.getElementById("castelName").value,
76+
description : this.document.getElementById("description").value,
77+
outerWallThickness : this.document.getElementById("outerWallThickness").value,
78+
numberOfTowers : this.document.getElementById("numberOfTowers").value,
79+
moat : this.document.getElementById("moat").value
80+
};
81+
this.controller.saveCastle(data);
82+
}
83+
return CreateCastleView;
84+
})();
85+
86+
class ValidataionResult{
87+
public isValid : boolean;
88+
public Errors : Array<String>;
89+
public constructor(){
90+
this.Errors = new Array<String>();
91+
}
92+
}
93+
94+
//controller
95+
var Controller = (function(){
96+
function Controller(document){
97+
this.document = document;
98+
}
99+
Controller.prototype.createCatle = function () {
100+
this.setView(new CreateCastleView(this.document, this));
101+
};
102+
Controller.prototype.saveCastle = function (data) {
103+
var validationResult = this.validate(date);
104+
if (validationResult.IsValid) {
105+
//castle을 저장장치에 저장
106+
this.saveCastleSuccess(data);
107+
} else {
108+
this.setView(new CreateCastleView(this.document, this, data, validationResult));
109+
}
110+
};
111+
Controller.prototype.saveCastleSuccess = function(data) {
112+
this.setView(new CreateCaslteSuccess(this.document, this, data)); //브라우저의 뷰를 현재 뷰로 설정 지시함
113+
};
114+
Controller.prototype.validate = function (model) { //유효성 검사
115+
var validationResult = new vaildationResult();
116+
if(!model.name || model.name === ""){
117+
validationResult.IsValid = false ;
118+
validationResult.Errors.push("Name is required");
119+
}
120+
return ;
121+
};
122+
return Controller;
123+
})();
124+
125+
//model
126+
var Model = (function () {
127+
function Model(name, description, outerWallThickness, numberOfTowers, moat) {
128+
this.name = name;
129+
this.description = description;
130+
this.outerWallThickness = outerWallThickness;
131+
this.numberOfTowers = numberOfTowers;
132+
this.moat = moat;
133+
}
134+
return Model;
135+
})();
136+
```
137+
138+
-------------------------------
139+
## 2. MVP 패턴
140+
* MVC와의 차이점
141+
* 프레젠터(Presenter) : 뷰와 일대일로 매핑된다. > mvc에서 렌더링 할 올바른 뷰를 선택하던 로직이 존재하지 않음을 의미함.
142+
* 프레젠터는 뷰와 모델을 모두 알고 잇지만, 뷰는 모델을 인식하지 못하고 모델은 뷰를 인식하지 못한다.
143+
* 양방향 디스패치의 주요 기능을 가지고 있다.
144+
* MVP의 수동(passive) 버전과 능동(active) 버전
145+
146+
------------------
147+
### MVP패턴 코드
148+
```javascript
149+
var CreateCastleView = (function () {
150+
function CreateCastleView(document, presenter) {
151+
this.document = document;
152+
this.presenter = presenter;
153+
this.document.getElementById("saveButton").addEventListener("click", this.saveCastle);
154+
}
155+
CreateCastleView.prototype.setCastleName = function (name) {
156+
this.document.getElementById("castleName").value = name;
157+
};
158+
CreateCastleView.prototype.getCastleName = function(){
159+
return this.document.getElementById("castleName").value;
160+
};
161+
CreateCastleView.prototype.setDescription = function (description) {
162+
this.document.getElementById("description").value = description;
163+
};
164+
CreateCastleView.prototype.getDesciption = function(){
165+
return this.document.getElementById("description").value;
166+
};
167+
CreateCastleView.prototype.setOuterWallThickness = function (outerWallThickness) {
168+
this.document.getElementById("outerWallThickness").value = outerWallThickness;
169+
};
170+
CreateCastleView.prototype.getOuterWallThickness = function(){
171+
return this.document.getElementById("outerWallThickness").value;
172+
};
173+
CreateCastleView.prototype.setNumberOfTowers = function (numberOfTowers) {
174+
this.document.getElementById("numberOfTowers").value = numberOfTowers;
175+
};
176+
CreateCastleView.prototype.getNumberOfTowers = function(){
177+
return this.document.getElementById("numberOfTowers").value;
178+
};
179+
CreateCastleView.prototype.setMoat = function (moat) {
180+
this.document.getElementById("moat").value = moat;
181+
};
182+
CreateCastleView.prototype.getMoat = function(){
183+
return this.document.getElementById("moat").value;
184+
};
185+
CreateCastleView.prototype.setValid = function (validationResult){
186+
};
187+
CreateCastleView.prototype.saveCastle = function () {
188+
this.presenter.saveCastle();
189+
};
190+
return CreateCastleView;
191+
})();
192+
CastleDesign.CreateCastleView = CreateCastleView;
193+
194+
195+
//프레젠터 코드
196+
var CreateCastlePresenter = (function () {
197+
function CreateCastlePresenter(document) {
198+
this.document = document;
199+
this.model = new CreateCastleModel();
200+
this.view = new CreateCastleView(document, this);
201+
}
202+
CreateCastlePresenter.prototype.saveCastle = function () {
203+
var data = {
204+
name : this.view.getCastleName(),
205+
description : this.view.getDesciption(),
206+
outerWallThickness : this.view.getOuterWallThickness(),
207+
numberOfTowers : this.view.getNumberOfTowers(),
208+
moat : this.view.getMoat()
209+
};
210+
211+
var validationResult = this.validationResult(data);
212+
if(validationResult.IsValid) {
213+
//모델에 write
214+
this.saveCastleSuccess(data);
215+
} else {
216+
this.view.setValid(validationResult);
217+
}
218+
};
219+
CreateCastlePresenter.prototype.saveCastleSuccess = function (data) {
220+
//다른 프레젠테이션으로 리다이렉션
221+
};
222+
223+
CreateCastlePresenter.prototype.validate = function (model) {
224+
var validationResult = new validationResult();
225+
if(!model.name || model.name ===""){
226+
validationResult.IsValid = false;
227+
validationResult.Errors.push("Name is required");
228+
}
229+
return;
230+
};
231+
return CreateCastlePresenter;
232+
})();
233+
CastleDesign.CreateCastlePresenter = CreateCastlePresenter;
234+
```

0 commit comments

Comments
 (0)