簡化/模塊化我的代碼在javascript中

Question

我知道我應該在編碼中遵循DRY原則。但是，我不是那樣的JavaScript，所以我想問問如何使代碼更易於閱讀和維護。

$('#frontfile_v').change(function(){ 
     reader = Main.Mod.image_change(this); 
     reader.onload = frontvImageIsLoaded; 
    }); 
    $('#rearfile_v').change(function(){ 
     reader = Main.Mod.image_change(this); 
     reader.onload = rearvImageIsLoaded; 
    }); 
    $('#rightfile_v').change(function(){ 
     reader = Main.Mod.image_change(this); 
     reader.onload = rightvImageIsLoaded; 
    }); 
    $('#leftfile_v').change(function(){ 
     reader = Main.Mod.image_change(this); 
     reader.onload = leftvImageIsLoaded; 
    }); 
    //called after an image file has been chosen 
    function frontvImageIsLoaded(e) { 
     $("#frontimagepreview").attr('src', e.target.result); 
     $("#frontpreview-msg").css('color', 'green'); 
    }; 
    function rearvImageIsLoaded(e) { 
     $("#rearimagepreview").attr('src', e.target.result); 
     $("#rearpreview-msg").css('color', 'green'); 
    }; 
    function rightvImageIsLoaded(e) { 
     $("#rightimagepreview").attr('src', e.target.result); 
     $("#rightpreview-msg").css('color', 'green'); 
    }; 
    function leftvImageIsLoaded(e) { 
     $("#leftimagepreview").attr('src', e.target.result); 
     $("#leftpreview-msg").css('color', 'green'); 
    }; 

這是Main.Mod.image_change（）的代碼

var image_change = function handleFileImageChange(obj){ 
      //holds the image preview object 

      var file = obj.files[0]; 
      var imagefile = file.type; 
      var match= ["image/jpeg","image/png","image/jpg"]; 

      if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){ 
       alert("Incorrect image file. You still be able to upload this form but the system " + 
       "will be using the default image."); 
       $("#preview-msg").css('color', 'red'); 
       return false; 
      }else{ 
       var reader = new FileReader(); 
       //reader.onload = imageIsLoaded; 
       reader.readAsDataURL(obj.files[0]); 

       return reader; 
      } 
     }; 

上面的代碼，將處理文件輸入改變事件然後改變文件輸入IMG SRC基。

我知道我寫的代碼非常糟糕，因爲我必須多次重複我的代碼。我怎樣才能以更高效的方式實現它？

謝謝。

Answer 1

1. 使用,來選擇相結合：

   $('#frontfile_v,#rearfile_v').change(function(){ 
       // ... 
   }) 
   

的 「改變」 事件將被綁定到由選擇匹配的每個對象。這樣你就不需要重複綁定。

合併通過傳遞參數功能於一體的功能 「加載的圖像」：

var idsMap = { 
    leftfile_v : {preview : '#frontimagepreview', msg : '#frontpreview-msg'}, 
    // etc... 
}; 

$('#leftfile_v,#rearfile_v').change(function(){ 
    var ids = idsMap[$(this).attr('id')]; 
    reader = Main.Mod.image_change(this); 
    reader.onload = function(e) { 
     imageIsLoaded(e, ids.preview, ids.msg); 
    }; 
}); 

function imageIsLoaded(e, preview, msg) { 
    $(preview).attr('src', e.target.result); 
    $(msg).css('color', 'green'); 
}; 

Answer 2

又一變型。至於說@Malki：在選擇使用逗號

$('#frontfile_v, #rearfile_v,#rightfile_v,#leftfile_v').change(function(){ 
    var id = this.id.replace(/file_v$/,''); 
    reader = Main.Mod.image_change(this); 
    if(reader){ //for case when `image_change` return not "false" 
     // use mode generic function 
     reader.onload = function(e){ 
      $("#"+id+"imagepreview").attr('src', e.target.result); 
      $("#"+id+"preview-msg").css('color', 'green'); 
     }; 
    } 
}); 

至於handleFileImageChange你需要使用Array.indexOf功能

var image_change = function handleFileImageChange(obj){ 
    //holds the image preview object 

    var file = obj.files[0]; 
    var imagefile = file.type; 
    var match= ["image/jpeg","image/png","image/jpg"]; 

    if(match.indexOf(imagefile) == -1){ 
     alert("Incorrect image file. You still be able to upload this form but the system will be using the default image."); 
     $("#preview-msg").css('color', 'red'); 
     return false; 
    }else{ 
     var reader = new FileReader(); 
     //reader.onload = imageIsLoaded; 
     reader.readAsDataURL(file); //you not need use "obj.files[0]" because you already save it in "var file" 

     return reader; 
    } 
};