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

Question

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

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

Answer 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行。

Answer 2

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

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

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

在这种情况下，我不会将对象用于options，而是将数字参数作为duration参数传递，请参阅文档：

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

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

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

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

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

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