如何在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); 
    } 

}