jquery方法链中的点与括号表示法

Question

假设我有一长串jquery方法，并希望根据某些布尔条件添加两种方法之一的额外调用（例如show或hide）。

有两种方法可以做到：

1） 点符号 ：将方法链存储在变量中，然后使用此变量调用extra方法（由if...else构造或三元运算符解析）使用点符号。

代码：

var $tmp = $el._long_()._method_()._chain_();
if (condition) $tmp.show();
else $tmp.hide();

2） 括号表示法 ：使用方括号表示法附加方法的额外调用（由三元运算符解析）。

代码：

$el._long_()._method_()._chain_()[condition? 'show' : 'hide']();

我曾经使用过第一个，尤其是在其他地方使用$tmp变量时。但第二种方式似乎更简洁，但可读性更低。

这种情况的最佳选择是什么？

Answer 1

eslint更喜欢dot-notation：

  

在JavaScript中，可以使用点表示法访问属性   （foo.bar）或方括号表示法（foo [＆＃34; bar＆＃34;]）。 然而，点   符号通常是首选，因为它更容易阅读，更少   详细，并使用积极的JavaScript最小化器更好地工作。

IMO，把三级逻辑放在括号内是有点太可爱了，难以阅读。

Answer 2

这个问题可以推广到JavaScript，而不是特定于jQuery。

使用括号表示法的典型原因是：

1. 您要引用的函数/属性名称是可变的，在这种情况下，括号可以帮助您保持代码DRY
2. 属性/函数名称包含无法通过点表示法访问的字符。

这里的使用似乎是第一种情况的新颖变体 - 您通过使用来自三元操作的变量字符串值来指定要执行的函数，从而避免重复代码。

这是显性可读性和DRY代码之间的权衡，因此“最佳”选择将是主观的。

对某些人来说，三元并不难读。你是you can read this ? "one of them" : "not one of them"。您可以随时在任何特别长的功能链附近发表评论，以帮助那些难以消化三元的人。