如何在 javascript 中添加语法糖（或者你应该）

Question

因此，我开始着手构建一个简单的库，该库可以将“屏幕”换入和换出视口，以实现全屏 Web 应用。

我创建了一个基本接口来支持这一点：

function Swap(element_in, element_out, animation_in, animation_out)

当我完成后，我想，嘿，这是 javascript -- 我想知道我是否可以创建一些读起来像句子的疯狂语法。我的目标是：

Swap(element_in).InBy(animation_in).AndSwap(element_out).OutBy(animation_out)

即

Swap('screen1').InBy('slidingitoutleft').AndSwap('screen2').OutBy('slidingitoutright');

经过阅读后，我在 SO 上找到了一个帖子（我现在似乎找不到），这让我能够实现这一点（有一些陷阱，即您可以按任何顺序调用这些方法并且您必须存储一些变量）。这个界面是这样的：

function Swap2(element_in) {
  var _element_in, _element_out, _animation_in, _animation_out;

  // assign param
  _element_in = element_in;

  this.InBy = function(animation_in) {
    _animation_in = animation_in;
    return this;
  }

  this.AndSwap = function(element_out) {
    _element_out = element_out;
    return this;
  }

  this.OutBy = function(animation_out) {
    _animation_out = animation_out;

    // Do the swap!
    return Swap(_element_in, _element_out, _animation_in, _animation_out);
  }

  return this;
}

在这之后，我觉得很酷，但我敢打赌我可以做得更好。我想出了这个（尽量不要呕吐）：

function Swap3(element_in) {
  return {
        InBy: function (animation_in) {
            return {
                AndSwap: function (element_out) {
                    return {
                        OutBy: function (animation_out) {
                            return Swap(element_in, element_out, animation_in, animation_out);
                        }
                    };
                }
            };
        }
    };
}

最后一个强制方法以正确的顺序被调用，并且不依赖任何参数——它只是传递它们。

我制作了一个 codepen，以便您可以看到它确实有效（尽管我承认我只在 Chrome 中玩过这个）：http://codepen.io/andrewleith/pen/emltv

所以，我的问题是：我会为此陷入 javascript 地狱吗？这是一件好事吗？还是一件非常糟糕的事情？还是只是偏好？

安德鲁

Answer 1

我会为此陷入 javascript 地狱吗？

不，你会因为大写非构造函数而陷入 JavaScript 地狱；）

无论如何，您的两个实现都可以，但请考虑使用看起来更标准的东西：

swap(element_in, {
    inBy: animation_in,
    andSwap: element_out,
    outBy: animation_out
});

Answer 2

我认为我没有看到价值。它看起来像一个英文句子，当然，但这有多重要？有更多的字符要输入，更多的数据要发送给客户端（我怀疑这会很好地缩小）。如果可以为每个步骤做不同的事情，我会看到它更有益，但我不知道我更喜欢它而不是正常的函数调用，四个步骤必须以相同的顺序执行。带有金字塔地狱的代码肯定更难阅读。

否则，这种方法在技术上没有任何问题。

================== 编辑

要避免金字塔，您可以执行以下操作。这也可以让您控制在每个步骤中可能执行的后续步骤。

function Swap3(element_in) {
    var _element_in, _element_out, _animation_in, _animation_out;

    _element_in = element_in;

    return {
        inBy: inBy
    };


    function inBy(animation_in) {
        _animation_in = animation_in;

        return {
            andSwap: andSwap
        };
    }

    function andSwap(element_out) {
        _element_out = element_out;

        return {
            outBy: outBy
        };
    }

    function outBy(animation_out) {
        _animation_out = animation_out

        return Swap(_element_in, _element_out, _animation_in, _animation_out);
    }

}