refactor pour utiliser oop mvc

Question

comment refactoriser ceci pour utiliser oop, avec le modèle 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

Il y a un très bon article sur ce here. Je ne vais pas répéter ce qu'il dit ici. Mais pour vous aider à démarrer obtenir peut extraire un modèle comme celui-ci:

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

Et vos contrôleurs auraient peut-être quelque chose comme:

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

Votre opinion serait à peu près comme fonctions drawImage et drawToolbar sont maintenant, sauf les données qu'ils rendent seraient passées en paramètres. Par exemple:

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

Ensuite, vous pouvez câbler des événements en fonction des besoins. (Utilisez addEvent et ne définissez pas d'événements avec des attributs onclick sur les éléments html.)