Javascript 重构以使用OOP MVC

我如何重构它以使用面向对象的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();
}());

函数（）{
var dataToImage={'a'：'a.gif'，'b'：'something.gif'}；
var currentimage=dataToImage['a']；
函数setCurrentImage（e）{currentImage=e.src；}
函数getMousePosition（）{}
函数绘图工具栏{
对于（我在dataToImage中）{
文件。写（“”）；
}
文件。写（“”）；
返回；
}
函数drawImage（div，xy）{
var img=document.createElement（'div'）；
div.style[“左”]=xy[0]；
div.style[“top”]=xy[1]；
img.innerHTML=''；
儿童分部（img）；
返回；
}
drawToolbar（）；
}());

这方面有一篇非常好的文章。我不会重复这里说的话。但要开始，您可以提取如下模型：

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属性的事件。）