공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/JavaScript

자바스크립트 MVC패턴 - Input animate

serpiko 2013. 10. 14. 09:59

ActionScript3.0으로 MVC패턴을 살펴보면 [ Model ← Cotroller ← View ] 와 같이, 

 

View에서 데이터가 바뀔경우 Model까지 값이 전달되고, 굳이 중간관리자인 Controller를 거치지 않고

 

독립적인 데이터 모델로서 처리 할 수 있는 방법인,  EventDipatch가 있었다. 

 

따라서 Model에서는 EventDispatch를 상속하여 아래 코드와 같이 자체 이벤트를 발생 시키고, 다른 객체를 알 필요 없이 불특정 객체에

 

알리게 된다. View에서는 Model의 이벤트를 청취하므로 Model에서 변경된 값을 참조하여 사용 할 수 있다.

 

 

 

액션스크립트의 EventDispatch.

 

(남용 되면 코드가 지저분해질수도 있지만 취향의 문제이고, 콜백함수와는 다른 성격일때 사용하는것이 바람직)

 

Model.as

1
2
3
4
5
6
7
8
 
public function set Value(myVal:uint):void{
 _myVal = myVal;
 dispatchEvent(new Event(Event.CHANGE));
}

public function get Value():uint{
 return _myVal;
}

 

View.as

1
2
3
4
5
 
_model.addEventListener(Event.CHANGE, update);

private function update(e:Event):void{
 trace(_model._myVal);
}

 

 

 

그러나 JavsScript에서는 이러한 이벤트전달 인스턴스를 만들어서 전파할수 없기 때문에

 

[ Model ↔ Cotroller ↔ View ]  와 같이 View에서 callback으로 Controller에 넘겨주고 다시 Model에서 Controller를 거쳐

 

View에 도달하는 방법으로 MVC의 기본적인 틀을 만들어 보았다.

 

 

MVCjavascript.zip

 

mvc.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>mvc</title>
<style type="text/css">
 * {padding:0;margin:0;}

 .boxClass {position:absolute;background-color:#000000;left:10px;top:10px;width:100px;height:100px;}
 .inputClass {position:absolute;left:10px;top:120px;width:100px;height:20px;}
 .btnClass {position:absolute;left:120px;top:120px;width:70px;height:20px;}
 .btnreClass {position:absolute;left:200px;top:120px;width:70px;height:20px;}
</style>

<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/Model.js" charset="utf-8"></script>
<script type="text/javascript" src="js/Controller.js" charset="utf-8"></script>
<script type="text/javascript" src="js/View.js" charset="utf-8"></script>
<script>
 function test(){
  //console.log("testOK")
 }
</script>
</head>

<body>

<div id="boxId" class="boxClass"></div>
<input id="inputId" class="inputClass" type="text" name="in" value="500" />
<input class="btnClass" type="button" name="btn" value="속도조절" on_click="test()"/>
<input class="btnreClass" type="button" name="rebtn" value="reset" on_click="test()"/>
<script>
 $(document).ready(function() {
  var _model = new Model();
  var _controller = new Controller(_model);
  var _view = new View(_model, _controller);
  
  //console.log(document.getElementById("inputId").value); //500;
  //console.log(document.getElementsByName("in")[0].name); //in
 });
</script>
</body>
</html>

 

View.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
var _model;
var _controller;

var View = function($model, $controller){
 this.name = "View";
 _model = $model;
 _controller = $controller;
 
 this.init();
}

View.prototype.init = function(){
 this.addEvent();
}

View.prototype.addEvent = function(){

 $(".btnClass").click(function(e){
 var speed = parseInt($("#inputId").val());
  _controller.speedControl(speed, motionCallback);
 });
 
 $(".btnreClass").click(function(){
  _controller.resetControl(resetCallback);
 });
}


function motionCallback($speed){
 $("#boxId").stop().animate({"left":700}, $speed);
}

function resetCallback($left){
 $("#boxId").css({"left":$left});
}

 

Controller.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
var _model;

var Controller = function($model){
 this.name = "Controller";
 _model = $model;
}

Controller.prototype.speedControl = function($speed, callback){
 var setter = _model.setSpeed($speed);
 if( typeof callback == "function" )callback(setter);
}

Controller.prototype.resetControl = function(callback){
 var getter = _model.getReset();
 if( typeof callback == "function" )callback(getter);
}

 

Model.as

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var Model = function(){
 this.name = "Model";
 this.speed = 500;
 this.left = 10;
}

Model.prototype.init = function(){
}

//getset
Model.prototype.setSpeed = function($speed){
 this.speed = $speed;
 return this.getSpeed();
}

Model.prototype.getSpeed = function(){
 return this.speed;
}

Model.prototype.getReset = function(){
 return this.left;
}

 

결과화면)

 

input창에 수치를 입력한뒤, 속도조절 버튼을 누르면 검은색 사각형이 애니메이팅 된다.

reset버튼을 누르면 제자리로 돌아온다.

 

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

body의 내용 초기화  (0) 2013.11.25
알파벳 대소문자 변환  (0) 2013.11.04
clientX,Y - 현재화면의 마우스좌표 반환받기  (0) 2013.10.13
시간함수 - new Date  (0) 2013.10.13
마우스휠 - addEventListener, onmousewheel  (0) 2013.10.13
댓글