javascript - 需要帮助使用循环生成三个 block

Question

以下 3 block 代码，想使用循环/数组生成短代码。我知道使用循环不是什么大事，但对我来说很难用变量“openFile”更改计数器，我想要计数器递增在每次循环迭代中使用变量“openFile”，如 openFile1、openFile2 和 openFile3。

$(function() {

            var openFile1 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img1');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };



      var openFile2 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img2');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };

      var openFile3 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img3');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };


       });

Answer 1

只需创建一个将计数作为参数的函数，并返回一个仅将事件作为参数的函数。由于闭包，使用给定计数值调用 openFile 时给出的 'count' 值将用于内部函数。

  var openFileFunc = function(count) {
    return
        function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img'+(count+1));
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[count]);
      };
    }

现在你可以得到这三个函数等同于你通过调用一个映射所做的事情:

var functions = [1,2,3].map(openFileFunc)

此数组中的每个函数都与您拥有的相同。