如何使用多个键/对对象参数编写样式 jQuery答案

【问题标题】：How to code style jQuery with multiple key/pair object arguments如何使用多个键/对对象参数编写样式 jQuery
【发布时间】：2011-05-07 15:20:21
【问题描述】：

在多行上缩进以下调用以使其更具可读性的正确方法是什么？

$("#plus.tooltip").animate({'width': '100px', 'height': '200px'}, {'duration': 300});

【问题讨论】：

标签： jquery coding-style

【解决方案1】：

我推荐这个：

$("#plus.tooltip")
  .animate({
    'width': '100px', 
    'height': '200px'
  },{
    'duration': 300
  })
  .stop()    //Added by example
  .click(function(){  //Added by example
      alert("Hi!");
  })
; //This is very important to me

如您所见，我们在每次调用 jquery 方法时都开始一个新的缩进行（.animate()、.stop()、.click()）。此外，我们在打开大括号后立即开始一个新的缩进行。而且，对我来说非常重要的是，将分号 ';' 放在与第一行相同级别的末尾。

希望这会有所帮助。干杯

PS：不过，对于非常短的语句，我建议只使用 1 行。

【讨论】：

【解决方案2】：

如果您在团队环境中工作，请同意并遵守共同约定。如果您自己工作，请定义一个约定并坚持下去。重要的一点不是约定是什么，而是你是否与它保持一致。

就个人而言，我会这样格式化：

$("#plus.tooltip").animate({
    'width': '100px',
    'height': '200px'
}, {'duration': 300});

在这种情况下，我不会为options 使用对象，而是将数字参数作为duration 参数see docs 传递：

$("#plus.tooltip").animate({
    'width': '100px',
    'height': '200px'
}, 300);

如果对同一个 jQuery 选择有多个调用，我会将第一个函数调用放在一个新行并缩进它：

$("#plus.tooltip")
    .stop()
    .animate({
        'width': '100px',
        'height': '200px'
    }, 300);

根据 cmets 中的问题，我会这样做：

$("#plus.tooltip").animate(
{ // properties
    'width': '100px',
    'height': '200px'
},
{ // options
    'duration': 300
    'queue': false,
    'easing': 'swing'
});

不过，基本上，选择适合你的并坚持下去。

【讨论】：

感谢您的详细回答。如果您必须通过多个选项而不仅仅是持续时间，我能否得到您的意见？例如。 {'duration': 300, 'queue': false, 'easing': swing }