重構使用oop mvc

Question

我該如何重構這個使用oop和mvc模式。

(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上有一篇非常好的文章。我不會重複它在這裏所說的。但是，讓你開始你可能會提取這樣的模式：

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' 
    } 
}; 

而且你的控制器可能是這樣的：

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

您的意見將是相當多的的drawImage和drawToolbar功能現在，除了它們呈現的數據將作爲參數傳遞。例如：

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屬性設置事件。）