oop mvc를 사용하는 리펙터

Question

mopc 패턴을 사용하여 이것을 어떻게 리펙토링합니까?

(function() { 
    var dataToImage = { 'a': 'a.gif', 'b': 'something.gif' }; 
    var currentimage = dataToImage['a']; 
    function setCurrentImage(e){ currentImage = e.src; } 
    function getMousePosition(){ } 
    function drawToolbar { 
    for(i in dataToImage){ 
     document.write('<img src="'+dataToImage[i]+'" onclick="setCurrentImage(this);">'); 
    } 
    document.write('<div onclick="drawImage(this,getMousePosition())"></div>'); 
    return; 
    } 
    function drawImage(div,xy) { 
    var img = document.createElement('div'); 
    div.style["left"] = xy[0]; 
    div.style["top"] = xy[1]; 
    img.innerHTML='<img src="'+currentImage+'">'); 
    div.appendChild(img); 
    return; 
    } 
    drawToolbar(); 
}()); 

Answer 1

여기에 정말 좋은 기사가 있습니다.이 here입니다. 나는 여기서 말하는 것을 반복하지 않을 것이다. 당신의 drawImage 및 drawToolbar 기능이 지금과 같이 귀하의 전망이 꽤 많은 것

Controllers.DrawToolbar = function() { 
    // get the data for the images and pass it to the toolbar view 
}; 

Controllers.DrawImage = function() { 
    // get the data for the image and pass it to the image view 
}; 

:

var Images { 
    get: function(id) { 
     return this.data[id]; 
    }, 
    del: function(id) { 
     delete this.data[id]; 
     // might make an ajax call here to update the data serverside... 
    }, 
    'data': { 
     'a': 'a.gif', 
     'b': 'something.gif' 
    } 
}; 

그리고 뭔가처럼 컨트롤러가 될 수 있습니다하지만이 같은 모델을 추출 할 수 있습니다 시작하려면 렌더링하는 데이터는 매개 변수로 전달됩니다. 예 :

Views.Image = function (target, data, x, y) { 
    var imgContainer = document.createElement('div'), 
     img = document.createElement('img'); 
    imgContainer.appendChild(img); 
    target.style["left"] = x; 
    target.style["top"] = y; 
    img.src = data; 
    target.appendChild(imgContainer); 
}; 

그런 다음 적절하게 이벤트를 연결할 수 있습니다. addEvent를 사용하고 html 요소의 onclick 특성을 사용하여 이벤트를 설정하지 마십시오.