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

【问题标题】：dot vs bracket notation in jquery method chainingjquery方法链接中的点与括号表示法
【发布时间】：2016-03-11 20:41:17
【问题描述】：

假设我有很长的 jquery 方法链，并且想要根据一些布尔条件添加对两种方法之一的额外调用（例如 show 或 hide）。

有两种方法：

1) 点表示法：将方法链存储在一个变量中，然后使用该变量调用额外的方法（由if...else 构造或三元运算符解析）使用点符号。

代码：

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

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

代码：

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

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

对于这种情况，最好的选择是什么？

【问题讨论】：

【解决方案1】：

eslint 更喜欢dot-notation：

在 JavaScript 中，可以使用点符号访问属性 (foo.bar) 或方括号表示法 (foo["bar"])。 但是，点符号通常是首选，因为它更容易阅读，更少冗长，并且与激进的 JavaScript 最小化程序一起工作得更好。

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

【讨论】：

【解决方案2】：

这个问题可以概括为 JavaScript，而不是 jQuery 特定的。

使用括号符号的典型原因是：

您在这里的使用似乎是第一种情况的新变体——您通过使用来自三元运算的变量字符串值来指定要执行的函数来避免重复代码。

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

对于某些人来说，三进制并不难读。你是you can read this ? "one of them" : "not one of them"。你总是可以在任何特别长的函数链附近发表评论，以帮助那些难以理解三元的人。

【讨论】：