Question

我认为问题的质量非常低但我非常感谢你们给我一些解决方案。

代码的一部分在两个函数中重复。我想安排这个长代码来简短。以下示例是我想要做的。

void duplicatedFunc() {
    //some logic
}

void func1() {
    duplicatedFunc();
}

void func2() {
    //func2 logic here..
    duplicatedFunc();
}

我怎样才能在jquery中做到这一点？这是我的jquery代码。

                $("#inputLogo").change(function(){

                $("#logoFile div.notyet").remove(); 
                var file = this.files[0];   
                var fr = new FileReader();

                fr.onload = (function (file) {
                        return function(e){
                        var div = document.createElement("div");

                        $(div).addClass("notyet").css({
                            margin : "30px"
                            ,position : "relative"
                        }); 

                        var html = ['<input type="hidden" name="inputLogo" value="' + file.name + '">'
                                    ,'<img src="" width="100%">'
                                    ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                                    ].join(""); 

                        $(div).append(html);    
                        $(div).find("button").click(function(){
                            $(this).parent().remove();
                        }); 

                        $(div).find("img").attr("src", e.target.result);    
                        $("#logoFile").append(div);
                    }   
                })(file);
                fr.readAsDataURL(file); 
            });

            $("#logo").change(function(){
                // 새로운 이미지 추가할때 기존 이미지 삭제 (서버에서도 삭제)            
                if ($('#logoFile').find('img').length){
                    var targetDom = document.getElementById( "logoFile" );
                    var targetInput = document.createElement("input");
                    targetInput.setAttribute("name", "del_icon" );
                    targetInput.setAttribute("type","hidden");
                    targetDom.appendChild(targetInput);
                    //alert(targetInput.getAttribute("name"));
                    var filename = $('#logoFile').find("input[name='inputLogo']").val();
                    //alert(filename);
                    targetInput.setAttribute("value", filename);    
                    $('#insertLogo').children().remove(); 
                }                                                                           

                $("#logoFile div.notyet").remove(); 
                var file = this.files[0];   
                var fr = new FileReader();

                fr.onload = (function (file) {
                        return function(e){
                        var div = document.createElement("div");

                        $(div).addClass("notyet").css({
                            margin : "30px"
                            ,position : "relative"
                        }); 

                        var html = ['<input type="hidden" name="inputLogo" value="' + file.name + '">'
                                    ,'<img src="" width="100%">'
                                    ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                                    ].join(""); 

                        $(div).append(html);    
                        $(div).find("button").click(function(){
                            $(this).parent().remove();
                        }); 

                        $(div).find("img").attr("src", e.target.result);    
                        $("#logoFile").append(div);
                    }   
                })(file);
                fr.readAsDataURL(file); 
            });
    </script>

我希望我的代码看起来很干净。我该如何修复我的代码？

Answer 1

    var processFile = function processFile(file) {
      return (function(file) {
        return function(e) {
          var div = document.createElement("div");

          $(div).addClass("notyet").css({
            margin: "30px",
            position: "relative"
          });

          var html = ['<input type="hidden" name="inputLogo" value="' + file.name + '">', '<img src="" width="100%">', '<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'].join("");

          $(div).append(html);
          $(div).find("button").click(function() {
            $(this).parent().remove();
          });

          $(div).find("img").attr("src", e.target.result);
          $("#logoFile").append(div);
        }
      })(file)
    };

    $("#inputLogo").change(function() {
    // do stuff
    fr.onload = processFile;
    // do stuff
    });

    $("#logo").change(function() {
    // do stuff
    fr.onload = processFile;
    // do stuff
    });

Jquery |如何制作自定义功能并调用它？

1 个答案: