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

重构使用OOP MVC

1 个答案: