javascript 在 Dropzone.js 中混淆函数调用和返回

Question

我正在阅读 dropzone.js 的代码，有一些函数调用对我来说完全没有意义。我想要一些解释。我将从 _processThumbnailQueue

开始

此处使用回调调用 createThumnail()。 1)为什么回调调用是这种立即调用本身的形式。这个函数的内容代表什么？他们遵守这里的关闭规则吗？

简单地说，这里的调用和返回完全是困惑的..我迷路了，不知道正在传递什么和返回什么。

Dropzone.prototype._processThumbnailQueue = function() {
  if (this._processingThumbnail || this._thumbnailQueue.length === 0) {
    return;
  }
  this._processingThumbnail = true;
  return this.createThumbnail(this._thumbnailQueue.shift(), (function(_this) {
    return function() {
      _this._processingThumbnail = false;
      return _this._processThumbnailQueue();
    };
  })(this));
};

Dropzone.prototype.createThumbnail = function(file, callback) {
  var fileReader;
  fileReader = new FileReader;
  fileReader.onload = (function(_this) {
    return function() {
      if (file.type === "image/svg+xml") {
        _this.emit("thumbnail", file, fileReader.result);
        if (callback != null) {
          callback();
        }
        return;
      }
      return _this.createThumbnailFromUrl(file, fileReader.result, callback);
    };
  })(this);
  return fileReader.readAsDataURL(file);
};

Dropzone.prototype.createThumbnailFromUrl = function(file, imageUrl, callback) {
  var img;
  img = document.createElement("img");
  img.onload = (function(_this) {
    return function() {
      var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
      file.width = img.width;
      file.height = img.height;
      resizeInfo = _this.options.resize.call(_this, file);
      if (resizeInfo.trgWidth == null) {
        resizeInfo.trgWidth = resizeInfo.optWidth;
      }
      if (resizeInfo.trgHeight == null) {
        resizeInfo.trgHeight = resizeInfo.optHeight;
      }
      canvas = document.createElement("canvas");
      ctx = canvas.getContext("2d");
      canvas.width = resizeInfo.trgWidth;
      canvas.height = resizeInfo.trgHeight;
      drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
      thumbnail = canvas.toDataURL("image/png");
      _this.emit("thumbnail", file, thumbnail);
      if (callback != null) {
        return callback();
      }
    };
  })(this);
  if (callback != null) {
    img.onerror = callback;
  }
  return img.src = imageUrl;
};

Answer 1

我真的不喜欢 Dropzone 代码的编写方式。

是的，它使用了闭包，但它以最笨拙和最困惑的方式设置它们。不需要所有立即执行的函数表达式，并且代码在 this 和 _this 之间切换的方式很容易造成困惑。

我快速重写了代码以消除所有这些复杂性。我还没有测试过这个，但我相信它应该做同样的事情。看看这是否更容易理解:

Dropzone.prototype._processThumbnailQueue = function() {
  var dz = this;
  if (dz._processingThumbnail || dz._thumbnailQueue.length === 0) {
    return;
  }
  dz._processingThumbnail = true;
  return dz.createThumbnail(dz._thumbnailQueue.shift(), function() {
    dz._processingThumbnail = false;
    return dz._processThumbnailQueue();
  });
};

Dropzone.prototype.createThumbnail = function(file, callback) {
  var dz = this;
  var fileReader;
  fileReader = new FileReader;
  fileReader.onload = function() {
    if (file.type !== "image/svg+xml") {
      return dz.createThumbnailFromUrl(file, fileReader.result, callback);
    }
    dz.emit("thumbnail", file, fileReader.result);
    if (callback != null) {
      callback();
    }
  };
  return fileReader.readAsDataURL(file);
};

Dropzone.prototype.createThumbnailFromUrl = function(file, imageUrl, callback) {
  var dz = this;
  var img;
  img = document.createElement("img");
  img.onload = function() {
    var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
    file.width = img.width;
    file.height = img.height;
    resizeInfo = dz.options.resize.call(dz, file);
    if (resizeInfo.trgWidth == null) {
      resizeInfo.trgWidth = resizeInfo.optWidth;
    }
    if (resizeInfo.trgHeight == null) {
      resizeInfo.trgHeight = resizeInfo.optHeight;
    }
    canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = resizeInfo.trgWidth;
    canvas.height = resizeInfo.trgHeight;
    drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
    thumbnail = canvas.toDataURL("image/png");
    dz.emit("thumbnail", file, thumbnail);
    if (callback != null) {
      return callback();
    }
  };
  if (callback != null) {
    img.onerror = callback;
  }
  return img.src = imageUrl;
};

如您所见，在每个函数的开头，我将 dz 设置为 this，然后在其余函数中一致使用 dz功能。这就是利用闭包所需要的全部内容。

另一个简化是反转 createThumbnail() 中 if (file.type !== "image/svg+xml") ... 语句的含义。这消除了整个级别的嵌套，并使代码更易于理解。