javascript - 简化/模块化您的 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(){
       // ... 
   })
   

“change”事件将绑定(bind)到选择器匹配的每个对象。这样您就不需要重复绑定(bind)。

通过传递参数将“图像加载”函数合并为一个函数:

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