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

}

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

2 个答案: