重构使用oop mvc [英] refactor to use oop mvc

问题描述

 （function（）{
 var dataToImage = {'a'：'a.gif'，'b'：'something.gif'}; 
 var currentimage = dataToImage ['a']; 
函数setCurrentImage（e）{currentImage = e.src;} 
函数getMousePosition（）{} 
函数drawToolbar {
 for（i in dataToImage）{
 document.write（'< img src ='+ dataToImage [i] +'onclick =setCurrentImage（this）;>'）; 
} 
 document.write（'< div onclick =drawImage（this，getMousePosition（） >< / div>'）; 
 return; 
} 
函数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）; 
返回; 
} 
 drawToolbar（）; 
}（））; 
  

解决方案

有一个非常好的文章这个这里。我不会重复这里所说的话。但是要让你开始，你可以提取一个这样的模型：

  var Images {
 get：function（id） {
 return this.data [id]; 
}，
 del：function（id）{
 delete this.data [id]; 
 //可能会在这里调用ajax来更新数据服务器... 
}，
'data'：{
'a'：'a.gif'，
'b'：'something.gif'
} 
}; 
  

您的控制器可能类似于：

  Controllers.DrawToolbar = function（）{
 //获取图像的数据并将其传递到工具栏视图
}; 
 
 Controllers.DrawImage = function（）{
 //获取图像的数据并将其传递给图像视图
}; 
  

您的观点将几乎与您现在的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属性的事件。）

how do I refactor this to use oop , with mvc pattern.

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

解决方案

There's a really good article on this here. I won't repeat what it says here. But to get you started you might extract a Model like this:

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

And your controllers might be something like:

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

Your views would be pretty much as your drawImage and drawToolbar functions are now, except the data they render would be passed as parameters. For example:

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

Then you can wire things up with events as appropriate. (Use addEvent and don't set events with onclick attributes on html elements.)

这篇关于重构使用oop mvc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！